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">Blogs</h2>

            <section>
                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic1.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Web Dev</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic3.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Linux</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic1.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Web Dev</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic3.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Linux</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic1.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Web Dev</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-image">
                        <a href="blogp.html"><img src="img/art-pic3.jpg" alt="ART PIC"></a>
                    </div>

                    <div class="card-desc">
                        <a href="blogp.html"><h3>Blog Title</h3></a>
                        <div class="card-meta">
                            Posted by Hubert Batkiewcz on 13.11.2019 in <a href="#">Linux</a>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore dolores aliquid ex. Numquam accusantium corporis, est hic quae sequi quasi, explicabo praesentium delectus earum accusamus repudiandae voluptates eaque, cum distinctio?</p>
                        <a href="blogp.html" class="btn-read-more">Read More</a>
                    </div>
                </div>
            </section>

            <div class="pagination">
                <a href="#">Prev</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">Next</a>
            </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>