Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- p{
- margin:12px 16px;
- color:white;
- }
- .nav{
- padding:10px;
- }
- .page{
- background-color: cadetblue;
- width: 420px;
- }
- .page-2 {
- background:royalblue;
- width: 600px;
- }
- ul{
- display: flex;
- flex-direction: row;
- list-style-type: none;
- vertical-align: top;
- margin:10px 0px;
- padding:0px;
- }
- ul>li{
- width:25%;
- margin:0 8px;
- }
- .nav a{
- text-decoration: none;
- color: crimson;
- display: inline-block;
- border: 5px solid black;
- background-color: cornsilk;
- padding: 5px;
- }
- a:hover {
- background-color: crimson;
- color: cornsilk;
- }
- .columns{
- display: flex;
- flex-direction: row;
- }
- .lcol, .rcol{
- background-color: whitesmoke;
- padding: 10px;
- margin:0 8px;
- width: 50%;
- }
- .title{
- margin: 12px 0px 12px 0px;
- text-align: center;
- }
- .profile{
- background-color: whitesmoke;
- padding: 10px 90px 10px 10px;
- display: inline-block;
- margin: 20px 10px 20px 12px;
- }
- .p{
- padding-bottom:12px;
- }
- </style>
- </head>
- <body>
- <div class="page">
- <div class="nav">
- <ul>
- <li><a href="">Link 1</a></li>
- <li><a href="">Link 2</a></li>
- <li><a href="">Link 3</a></li>
- <li><a href="">Link 4</a></li>
- <li><a href="">Link 5</a></li>
- </ul>
- </div>
- <div class="columns">
- <div class="lcol">
- <div class="title">This is left column</div>
- <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
- </div>
- <div class="rcol">
- <div class="title">This is right column</div>
- <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
- </div>
- </div>
- <div class="p">
- <div class="profile">
- Вашето име, специаност, факултетен номер
- </div>
- <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>
- <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>
- <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>
- <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>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement