index.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>Blog</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/index-responsive.css">
</head>
<body>
    <div class="container">
        <section class="top-section">
            <div class="top-post">
                <div class="post-date">
                    <p id="post-changing"><!-- Posts that change after 5 seconds --></p>
                    <p id="date"><!-- The clock on my page --></p>
                </div>
            </div>
            <div class="brand-section">
                <div class="brands">
                    <div class="brand-logo"><!-- Site logo and name will be displayed here --></div>
                    <div class="brand-social"><!-- Social media sites will be rendered here --></div>
                </div>
            </div>
        </section>
        <section class="navbar-section" id="navbar_top">
            <div class="navbar">
                <nav class="nav"><!-- Nav links will be rendered here --></nav>
                <div class="brand-search">
                    <input type="search" placeholder="Search blog..."/>
                </div>
            </div>
        </section>
        <section class="content-section">
             <div class="featured-contents">
                <div class="featured-post">
                    <img src="./assets//images/Advantages-and-Disadvantages-of-Technology-wearandcheer.com_.jpg" alt="featured-image">
                    <div class="text-block">
                        <h5>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, aspernatur?</h5>
                    </div>
                </div>
                <div class="navigate-featured">
                    <!-- <a href="#" class="featured-nav">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, quo.</a>
                    <a href="#" class="featured-nav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque, pariatur?</a>
                    <a href="#" class="featured-nav">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quibusdam!</a>
                    <a href="#" class="featured-nav">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quibusdam!</a> -->
                </div>
             </div>
             <div class="call-to-actions">
                <div class="call-to-action one">Emergency</div>
                <div class="call-to-action two">Enrollment program</div>
                <div class="call-to-action three">COVID-19</div>
             </div>
             <div class="post-collection">
                
                <!-- This is where all posts are displayed -->
                
             </div>
             <div class="show-more"><button>Show more</button></div>
        </section>
        <section class="footer-section">
            <div class="footer-contents">
                <div class="footer-address">
                    <div class="footer-item">
                        <h1>About Blog</h1>
                        <hr>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat dolorem, beatae incidunt soluta reiciendis ipsam odio tenetur maxime saepe? Totam?</p>
                    </div>
                    <div class="footer-item">
                        <h1>Address</h1>
                        <hr>
                        <ul>
                            <li style="display: flex;align-items:center;">
                                <p>Email: &nbsp; 
                                <span><p>blog@blog.com</p></span></p>
                            </li>
                            <li style="display: flex;align-items:center;">
                                <p>Phone: &nbsp; 
                                <span><p>+250780630465</p></span></p>
                            </li>
                            <li style="display: flex;align-items:center;">
                                <p>Location: &nbsp; 
                                <span><p>Kigali -Rwanda</p></span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-item">
                        <h1>Recent posts</h1>
                        <hr>
                        <ul style="list-style: circle;">
                            <li>Hello World!</li>
                            <li>How are you</li>
                            <li>Hello World!</li>
                            <li>How are you</li>
                            <li>Hello World!</li>
                            <li>How are you</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="credits">
                    <p>&copy; Blog 2021</p>
                    <p style="margin-left: auto;">Created by <a href="#">Achille Songa</a></p>
                </div>
            </div>
        </section>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./js/nav-scroll.js"></script>
    <script src="./js/date.js"></script>
    <script src="./js/posts.js"></script>
    <script src="./js/siteEdit.js"></script>
    <script src="./js/social.js"></script>
</body>
</html>