Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="css/main.css">
        <!-- <link rel="stylesheet" href="css/fontawesome-free-5.11.2-web/css/all.css"> -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab&display=swap" rel="stylesheet">

        <script src="js/main.js" defer></script>

        <title>Batkiewicz</title>
    </head>

    <body>
        <header>
            <span class="top-bar">
                <div class="slideout-menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="blogl.html">Blog</a></li>
                        <li><a href="blogl.html">Projects</a></li>
                        <li><a href="about.html">About</a></li>
                        <li>
                            <input type="text" placeholder="Search..."><br>
                        </li>
                    </ul>
                </div>


                <nav class="menu">
                    <div class="logo-img">
                        <a href="#">
                            <img src="img/logo-img.png" alt="BATKIEWICZ">
                        </a>
                    </div>
                    <div class="menu-icon">
                        <i class="fas fa-bars"></i>
                    </div>

                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="blogl.html" class="active">Blog</a></li>
                        <li><a href="blogl.html">Projects</a></li>
                        <li><a href="about.html">About</a></li>
                        <li>
                            <div class="search-icon">
                                <i class="fas fa-search"></i>
                            </div>
                        </li>
                    </ul>
                </nav>

                <div class="search-box">
                    <input type="text" placeholder="Search...">
                </div>
            </span>
        </header>

        <main>
            <h2 class="page-heading">Blog Post Heading</h2>
            <div class="post-container">
                <section class="blogpost">
                    <div class="card">
                        <div class="card-meta-blogpost">
                            Posted by Hubert Batkiewicz on 13.11.2019 in <a href="#">Linux</a>
                        </div>
                        <div class="card-image">
                            <img src="img/art-pic1.jpg" alt="IMAGE">
                        </div>
                        <div class="card-desc">
                            <h3>Post Title</h3>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil perspiciatis repudiandae illum possimus asperiores est quas id officiis. Rem id doloremque sint necessitatibus aut maiores libero totam laudantium amet eum adipisci facere fuga atque corrupti odio reprehenderit, itaque cumque? Ullam a inventore facere neque ab, at id labore! Esse, reiciendis!</p>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil perspiciatis repudiandae illum possimus asperiores est quas id officiis. Rem id doloremque sint necessitatibus aut maiores libero totam laudantium amet eum adipisci facere fuga atque corrupti odio reprehenderit, itaque cumque? Ullam a inventore facere neque ab, at id labore! Esse, reiciendis!</p>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil perspiciatis repudiandae illum possimus asperiores est quas id officiis. Rem id doloremque sint necessitatibus aut maiores libero totam laudantium amet eum adipisci facere fuga atque corrupti odio reprehenderit, itaque cumque? Ullam a inventore facere neque ab, at id labore! Esse, reiciendis!</p>
                        </div>
                    </div>

                    <div class="comments-section">
                        Comments Section
                    </div>
                </section>

                <aside class="sidebar">
                    <h3>Sidebar Title</h3>
                </aside>
            </div>

            <footer>
                    <div class="left-footer">
                        <h3>Quick Links</h3>
                        <p>
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Blogs</a></li>
                                <li><a href="#">Projects</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </p>
                    </div>

                    <div class="right-footer">
                        <h3>Follo me on</h3>
                        <div class="social-media-footer">
                            <ul>
                                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                                <li><a href="#"><i class="fab fa-github"></i></a></li>
                            </ul>
                        </div>

                        <p>Hubert Batkiewicz &copy; 2019</p>
                    </div>
                </footer>
        </main>
    </body>
</html>