lemansky

Untitled

Nov 30th, 2021 (edited)
773
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p{
  10.             margin:12px 16px;
  11.             color:white;
  12.         }
  13.         .nav{
  14.             padding:10px;
  15.         }
  16.         .page{
  17.             background-color: cadetblue;
  18.             width: 420px;
  19.         }
  20.  
  21.         .page-2 {
  22.             background:royalblue;
  23.             width: 600px;
  24.         }
  25.         ul{
  26.             display: flex;
  27.             flex-direction: row;
  28.             list-style-type: none;
  29.             vertical-align: top;
  30.             margin:10px 0px;
  31.             padding:0px;
  32.         }
  33.         ul>li{
  34.             width:25%;
  35.             margin:0 8px;
  36.         }
  37.         .nav a{
  38.             text-decoration: none;
  39.             color: crimson;
  40.             display: inline-block;
  41.             border: 5px solid black;
  42.             background-color: cornsilk;
  43.             padding: 5px;
  44.         }
  45.         a:hover {
  46.             background-color: crimson;
  47.             color: cornsilk;
  48.         }
  49.         .columns{
  50.            display: flex;
  51.            flex-direction: row;
  52.         }
  53.         .lcol, .rcol{
  54.             background-color: whitesmoke;
  55.             padding: 10px;
  56.             margin:0 8px;
  57.             width: 50%;
  58.         }
  59.        
  60.         .title{
  61.             margin: 12px 0px 12px 0px;
  62.             text-align: center;
  63.         }
  64.         .profile{
  65.             background-color: whitesmoke;
  66.             padding: 10px 90px 10px 10px;
  67.             display: inline-block;
  68.             margin: 20px 10px 20px 12px;
  69.         }
  70.         .p{
  71.             padding-bottom:12px;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76.     <div class="page">
  77.         <div class="nav">
  78.             <ul>
  79.                 <li><a href="">Link 1</a></li>
  80.                 <li><a href="">Link 2</a></li>
  81.                 <li><a href="">Link 3</a></li>
  82.                 <li><a href="">Link 4</a></li>
  83.                 <li><a href="">Link 5</a></li>
  84.             </ul>
  85.         </div>
  86.         <div class="columns">
  87.             <div class="lcol">
  88.                 <div class="title">This is left column</div>
  89.                 <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
  90.             </div>
  91.             <div class="rcol">
  92.                 <div class="title">This is right column</div>
  93.                 <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
  94.             </div>
  95.         </div>
  96.         <div class="p">
  97.             <div class="profile">
  98.                 Вашето име, специаност, факултетен номер
  99.             </div>
  100.             <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
  101.             <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
  102.             <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
  103.             <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
  104.         </div>
  105.     </div>
  106. </body>
  107. </html>
RAW Paste Data