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 perferendis ratione, 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 perferendis ratione, 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 perferendis ratione, 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 repudiandae incidunt, ad! </p>

        </div>

    </div>

</body>

</html>