HTML 8upr

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Статии</title>
</head>

<body>
    <!-- START Top -->
    <div class="top">
        <a href="#home">Начало</a>
        <a class="active" href="posts.html">Статии</a>
        <a href="#contact">Контакти</a>
        <div class="search-container">
            <form action="/action_page.php">
                <input type="text" placeholder="Tърси.." name="search">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>
    <!-- END Top -->
    <!-- START Main -->
    <div class="main">
        <div class="content">
            <article>
                <header>
                    <span class="date-time">09 април 2020 12:00</span>
                    <h1>ЗАГЛАВИЕ НА СТАТИЯ</h1>
                </header>
                <div class="img-container">
                    <img src="images/img_article.jpg" alt="article image">
                    <div class="bottom-right"><i class="fa fa-camera"></i>StockSnap</div>
                </div>
                <h2>ПОДЗАГЛАВИЕ</h2>
                <p>ПАРАГРАФ 1</p>
                <p>ПАРАГРАФ 2</p>
                <p>ПАРАГРАФ 3</p>
                <p><a href="#">ТУК СЕ СЛАГА ПРЕПРАТКА КЪМ ДРУГА СТАТИЯ</a></p>
                <p>ПАРАГРАФ 4</p>
                <p><q>ЦИТАТ КЪМ СТАТИЯ</q> КОЙ ГО Е КАЗАЛ</p>
                <footer>
                    <img src="images/author.jpg"><span> Надя Василева</span>
                </footer>
            </article>
            <div id="icon-bar">
                <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
        <div class="sidebar">
            <h3>Подобни статии</h3>
            <a href="#">ПОДOБНА СТАТИЯ (ЗАГЛАВИЕ) 1</a>
            <a href="#">ПОДOБНА СТАТИЯ 2</a>
            <a href="#">ПОДOБНА СТАТИЯ 3</a>
            <a href="#">ПОДOБНА СТАТИЯ 4</a>
        </div>
    </div>
    <!-- END Main -->
    <!-- START Bottom -->
    <div class="bottom">
        <p>Copyright &copy; 2020. myblog.com. All rights reserved.</p>
    </div>
    <!-- END Bottom -->
</body>
</html>