Untitled

<!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>
       .paragraph{
           margin:12px 16px;
           color:white;
       }
       .nav{
           padding:10px;
       }
       .container{
           background-color: cadetblue;
           width: 420px;
       }
       .menu{
           display: flex;
           flex-direction: row;
           list-style-type: none;
           margin:10px 0px;
           padding:0px;
       }
       .menu-item{
           width:25%;
           margin:0 8px;
       }
       .menu-link{
           text-decoration: none;
           color: crimson;
           display: inline-block;
           border: 5px solid black;
           background-color: cornsilk;
           padding: 5px;
       }
       .row{
           text-align:center;
           display: flex;
           flex-direction: row;
       }
       .col{
           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;
           display:block;
       }
       .summary{
           padding-bottom:12px;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="nav">
           <ul class="menu">
               <li class="menu-item"><a href="#" class="menu-link">Link 1</a></li>
               <li class="menu-item"><a href="#" class="menu-link">Link 2</a></li>
               <li class="menu-item"><a href="#" class="menu-link">Link 3</a></li>
               <li class="menu-item"><a href="#" class="menu-link">Link 4</a></li>
               <li class="menu-item"><a href="#" class="menu-link">Link 5</a></li>
           </ul>
       </div>
       <div class="row">
           <div class="col">
               <div class="title">This is left column</div>
               <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
           </div>
           <div class="col">
               <div class="title">This is right column</div>
               <div><img class="img" src="http://placehold.it/150x150" alt=""></div>
           </div>
       </div>
       <div class="">
           <div class="profile">
               Welcome to our website
           </div>
            <p class="paragraph">Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendisratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p class="paragraph">Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendisratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p class="paragraph">Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendisratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p class="paragraph summary">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 repudiandaeincidunt, ad! </p>
       </div>
   </div>
</body>
</html>