Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-family: "Myriad Pro";
            margin:0px;
            font-size:0px;
        }
        nav{
            background: #62513f;
            border-bottom: solid 12px #a66c95;
        }
        .container{
            width:950px;
            margin:0 auto;
            text-align:justify;
        }
        .menu{
            padding:0;
            margin:0;
            list-style-type: none;
            padding:15px 0px 22px 18px;
        }
        .menu li a{
            color: white;
            text-decoration: none;
            font-size:20px;
        }
        .menu li{
            display:inline-block;
            vertical-align:top;
            margin:0px 10px;
        }
        section{
            background: rgb(121,106,74);
            background: linear-gradient(180deg, rgba(121,106,74,1) 0%, rgba(98,86,60,1) 40%, rgba(64,56,39,1) 100%);
        }
        .heading{
            padding-left:6px;
            padding-top:21px;
            padding-bottom:28px;
        }
        .heading img, .heading h1{
            display:inline-block;
            vertical-align: middle;
            margin-right:11px;
            color:white;
            font-size:40px;
            font-weight:normal;
            margin-top:0px;
            margin-bottom:0px;
        }
        .slider{
            padding:18px 10px;
            background:#a56c97;
            border-radius:10px;
        }

        .left a{
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-right: 10px solid #6e4563;
          display:inline-block;
        }

        .right a{
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 10px solid #6e4563;
          display:inline-block;
        }

        .left{
            margin-right:15px;
        }

        .right{
            margin-left:20px;
        }

        .left, .right, .middle{
            display:inline-block;
            vertical-align:middle;
            font-size:16px;
        }

        .middle{
            width:875px;
        }
        .title{
            color:#ffe6b9;
            font-size:36px;
        }

        .meta{
            padding:3px 3px;
            border-top: solid 1px #764c72;
            border-bottom: solid 1px #764c72;
            font-weight:bold;
        }
        .p-body{
            margin-top:11px;
            color:white;
            font-family:"Rockwell";
            font-size:19px;
        }
        .main-content{
            background:#201b15;
            border:solid 2px #3e0d2b;
            padding-left:19px;
            padding-top:25px;
            margin-top:24px;
        }
        .row{
            padding-right:39px;
        }
        .col-left-title{
            color:#ffe6b9;
            font-size:24px;
            margin-bottom:24px;
        }
        .post-title{
            color:#7c5568;
            font-size:16px;
            margin-bottom:9px;
        }
        .post-meta{
            border-top:solid 1px #422239;
            border-bottom:solid 1px #422239;
            padding:7px;
            font-size:14px;
            color:#4b363f;
        }

    </style>
</head>
<body>
    <nav>
        <div class="container">
            <ul class="menu">
                <li>
                    <a href="">about</a>
                </li>
                <li>
                    <a href="">contact</a>
                </li>
                <li>
                    <a href="">portfolio</a>
                </li>
                <li>
                    <a href="">quote</a>
                </li>
                <li>
                    <a href="">products</a>
                </li>
                <li>
                    <a href="">testimonials</a>
                </li>

            </ul>
        </div>
    </nav>
    <section>
        <div class="container">
            <div class="heading">
                <img src="http://placehold.it/80x50" alt="">
                <h1>ИУ - Варна</h1>
            </div>
            <div class="slider">
                <div class="left">
                    <a href="#previous"> </a>
                </div>
                <div class="middle">
                    <div class="title">
                        Lorem ipsum dolor sit
                    </div>
                    <div class="meta">
                        Posted by admin in on 09 30th, 2018|2 Comments
                    </div>
                    <div class="p-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nam obcaecati ullam? Iure omnis voluptatem aliquam, eaque quas aspernatur! Ex exercitationem nihil magnam reiciendis nulla eos amet vel quibusdam incidunt.
                    </div>
                </div>
                <div class="right">
                    <a href="#next"> </a>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="col-left">
                        <div class="col-left-title">
                            Popular Articles
                        </div>
                        <div class="post">
                            <div class="post-title">
                                Maecenas scelerisque fermentur
                            </div>
                            <div class="post-meta">
                                Posted by admin in on 09 30th, 2008|2 Comments
                            </div>
                            <div class="post-body">
                                <img src="http://placehold.it/80x80" alt="">
                                <div class="post-exc">
                                    Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Ex alias blanditiis voluptatibus, nihil molestias est id tenetur labore velit quam magnam tempore quas!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-middle">

                    </div>
                    <div class="col-right">

                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>