Advertisement
lemansky

Untitled

Mar 9th, 2021 (edited)
405
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.27 KB | None | 0 0
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Document</title>
  5.     <style>
  6.         body{
  7.             font-family: 'Open Sans', Arial, sans-serif;
  8.         }
  9.         a {
  10.             text-decoration: none;
  11.             color: #770000;
  12.         }
  13.         ul{
  14.             margin: 0;
  15.             padding: 0;
  16.             list-style-type: none;
  17.         }
  18.         .wrapper{
  19.             width:1170px;
  20.             margin:0 auto;
  21.         }
  22.         nav{
  23.             padding-left:20px;
  24.             margin-bottom:40px;
  25.         }
  26.         nav img, .menu, .menu li{
  27.             display: inline-block;
  28.             vertical-align:top;
  29.         }
  30.         .menu li{
  31.             width:90px;
  32.             margin-right:3px;
  33.             border-bottom:3px solid #770000;
  34.             box-shadow: 0px 8px 6px -6px black;
  35.             height:40px;
  36.             text-align: center;
  37.             padding-bottom:8px;
  38.         }
  39.         .menu li a{
  40.             color:black;
  41.             text-transform: uppercase;
  42.             font-weight: bold;
  43.         }
  44.         .menu li:hover a{
  45.             color:#770000;
  46.         }
  47.         .menu{
  48.             padding-left:20px;
  49.         }
  50.  
  51.         .left-col{
  52.             background: #DADADA;
  53.             width:170px;
  54.             padding: 10px 10px 50px 10px;
  55.             text-align: center;
  56.             font-size:12px;
  57.             font-weight:bold;
  58.  
  59.         }
  60.  
  61.         figure{
  62.             margin:0 0 25px 0;
  63.         }
  64.  
  65.         figure img{
  66.             border:solid black 3px;
  67.         }
  68.  
  69.         figcaption{
  70.             font-size: 11.2px;
  71.             color:#656565;
  72.             margin:4px 0px;
  73.             font-weight:bold;
  74.         }
  75.  
  76.         .issue{
  77.             background: #F4F4F4;
  78.             padding:10px 20px;
  79.             margin-bottom:5px;
  80.             font-size:12px;
  81.         }
  82.  
  83.         .issue a{
  84.             color:#656565;
  85.         }
  86.  
  87.         .hidden{
  88.             margin-top:-4px;
  89.             background: #F4F4F4;
  90.             margin-bottom:5px;
  91.             padding:10px;
  92.         }
  93.         .left-col, section, .right-col, .left, .right{
  94.             display: inline-block;
  95.             vertical-align: top;
  96.         }
  97.         section{
  98.             margin:0 10px;
  99.             border:solid 3px #DADADA;
  100.             padding:10px;
  101.             border-radius:5px;
  102.             width:735px;
  103.             color:#656565;
  104.         }
  105.         .right{
  106.             text-align: right;
  107.             width:66%;
  108.         }
  109.         .left{
  110.             width:33%;
  111.         }
  112.         section a{
  113.             font-weight: bold;
  114.         }
  115.         .row{
  116.             margin-top:30px;
  117.         }
  118.         .row:nth-child(1){
  119.             margin: 0;
  120.         }
  121.  
  122.         .menu li:nth-child(1){
  123.             width:80px;
  124.         }
  125.         .menu li:nth-child(2){
  126.             width:95px;
  127.         }
  128.         .menu li:nth-child(3){
  129.             width:135px;
  130.         }
  131.         .menu li:nth-child(4){
  132.             width:135px;
  133.         }
  134.         .menu li:nth-child(5){
  135.             width:155px;
  136.         }
  137.         .menu li:nth-child(6){
  138.             width:115px;
  139.         }
  140.         .menu li:nth-child(7){
  141.             width:75px;
  142.         }
  143.     </style>
  144.     <script>
  145.         document.addEventListener('DOMContentLoaded', () => {
  146.  
  147.         });
  148.        
  149.     </script>
  150. </head>
  151. <body>
  152.     <div class="wrapper">
  153.         <nav>
  154.             <img src="https://placehold.co/253x63" alt="">
  155.             <ul class="menu">
  156.                 <li>
  157.                     <a href="">Начало</a>
  158.                 </li>
  159.                 <li>
  160.                     <a href="">Цели и обхват</a>
  161.                 </li>
  162.                 <li>
  163.                     <a href="">Редакционна колегия</a>
  164.                 </li>
  165.                 <li>
  166.                     <a href="">Указания към авторите</a>
  167.                 </li>
  168.                 <li>
  169.                     <a href="">Указания към рецензентите</a>
  170.                 </li>
  171.                 <li>
  172.                     <a href="">Етична политика</a>
  173.                 </li>
  174.                 <li>
  175.                     <a href="">Архив</a>
  176.                 </li>
  177.             </ul>
  178.         </nav>
  179.         <aside class="left-col">
  180.             <figure>
  181.                 <img src="https://placehold.co/164x230" alt="">
  182.                 <figcaption> ISSN 1310-0343 - печатно </figcaption>
  183.                 <figcaption> ISSN 2367-6949 - онлайн </figcaption>
  184.             </figure>
  185.             <a href=""> Текущо издание </a>
  186.             <div class="issue">
  187.                 <a href=""> Издание 2018 </a>
  188.             </div>
  189.             <div class="hidden">
  190.                 <div>
  191.                     <a href=""> бр. 4/2018 г. </a>
  192.                 </div>
  193.                 <div>
  194.                     <a href=""> бр. 3/2018 г. </a>
  195.                 </div>
  196.                 <div>
  197.                     <a href=""> бр. 2/2018 г. </a>
  198.                 </div>
  199.                 <div>
  200.                     <a href=""> бр. 1/2018 г. </a>
  201.                 </div>
  202.             </div>
  203.             <div class="issue">
  204.                 <a href=""> Издание 2017 </a>
  205.             </div>
  206.             <div class="issue">
  207.                 <a href=""> Издание 2016 </a>
  208.             </div>
  209.             <div class="issue">
  210.                 <a href=""> Издание 2015 </a>
  211.             </div>
  212.         </aside>
  213.         <section>
  214.             <div class="row">
  215.                 <div class="left">
  216.                     Мария Станимирова Токушева
  217.                 </div>
  218.                 <div class="right">
  219.                     Модел за определяне на оптимална производствена програма
  220.                 </div>
  221.             </div>
  222.             <a href="">Изтегли статията</a>
  223.             <div class="row">
  224.                 <div class="left">
  225.                     Мария Станимирова Токушева
  226.                 </div>
  227.                 <div class="right">
  228.                     Модел за определяне на оптимална производствена програма
  229.                 </div>
  230.             </div>
  231.             <a href="">Изтегли статията</a>
  232.             <div class="row">
  233.                 <div class="left">
  234.                     Мария Станимирова Токушева
  235.                 </div>
  236.                 <div class="right">
  237.                     Модел за определяне на оптимална производствена програма
  238.                 </div>
  239.             </div>
  240.             <a href="">Изтегли статията</a>
  241.             <div class="row">
  242.                 <div class="left">
  243.                     Мария Станимирова Токушева
  244.                 </div>
  245.                 <div class="right">
  246.                     Модел за определяне на оптимална производствена програма
  247.                 </div>
  248.             </div>
  249.             <a href="">Изтегли статията</a>
  250.             <div class="row">
  251.                 <div class="left">
  252.                     Мария Станимирова Токушева
  253.                 </div>
  254.                 <div class="right">
  255.                     Модел за определяне на оптимална производствена програма
  256.                 </div>
  257.             </div>
  258.             <a href="">Изтегли статията</a>
  259.             <div class="row">
  260.                 <div class="left">
  261.                     Мария Станимирова Токушева
  262.                 </div>
  263.                 <div class="right">
  264.                     Модел за определяне на оптимална производствена програма
  265.                 </div>
  266.             </div>
  267.             <a href="">Изтегли статията</a><div class="row">
  268.                 <div class="left">
  269.                     Мария Станимирова Токушева
  270.                 </div>
  271.                 <div class="right">
  272.                     Модел за определяне на оптимална производствена програма
  273.                 </div>
  274.             </div>
  275.             <a href="">Изтегли статията</a>
  276.             <div class="row">
  277.                 <div class="left">
  278.                     Мария Станимирова Токушева
  279.                 </div>
  280.                 <div class="right">
  281.                     Модел за определяне на оптимална производствена програма
  282.                 </div>
  283.             </div>
  284.             <a href="">Изтегли статията</a>
  285.         </section>
  286.         <aside class="left-col">
  287.             <figure>
  288.                 <img src="https://placehold.co/164x230" alt="">
  289.                 <figcaption> ISSN 1310-0343 - печатно </figcaption>
  290.                 <figcaption> ISSN 2367-6949 - онлайн </figcaption>
  291.             </figure>
  292.             <a href=""> Текущо издание </a>
  293.             <div class="issue">
  294.                 <a href=""> Издание 2018 </a>
  295.             </div>
  296.             <div class="hidden">
  297.                 <div>
  298.                     <a href=""> бр. 4/2018 г. </a>
  299.                 </div>
  300.                 <div>
  301.                     <a href=""> бр. 3/2018 г. </a>
  302.                 </div>
  303.                 <div>
  304.                     <a href=""> бр. 2/2018 г. </a>
  305.                 </div>
  306.                 <div>
  307.                     <a href=""> бр. 1/2018 г. </a>
  308.                 </div>
  309.             </div>
  310.             <div class="issue">
  311.                 <a href=""> Издание 2017 </a>
  312.             </div>
  313.             <div class="issue">
  314.                 <a href=""> Издание 2016 </a>
  315.             </div>
  316.             <div class="issue">
  317.                 <a href=""> Издание 2015 </a>
  318.             </div>
  319.         </aside>
  320.     </div>
  321. </body>
  322. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement