CODEWITHSUNDEEP
htmlcsscss-grid
J.Wujeck
J.Wujeck

Reputation: 280

Footer covering description

Is there any chance that I can fix my problem with my grid layout? I have the main layout which I used is a grid and it has 5 templates. I'm having a problem with the second row because I am using the same template row for my index and details page. The last row is the footer but it covers the content of the second row. How can I fix it? See the picture below for your reference.

This is the main template rows: grid-template-rows: 120px calc(100vh - 120px) repeat(2, 1fr) auto;

The calc(100vh - 120px) is the template row for hero main and blog details.

Link: https://sevento1sneakers.herokuapp.com/

As you can see the footer covers the description. (The bug occur when you shrink the height of you window

Blog details

/* Variables */
:root {
    --primary: #6BCBB8;
    --products: #cfcfcf;
    --secondary: #479896;
}

/* Default */
body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

* {
    font-family: "Poppins", "Oswald", "Arial", sans-serif;
    font-weight: 300;
    color: #383838;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Main */
.main {
    height: 100vh;
    /* Layout */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 120px calc(100vh - 120px) repeat(2, 1fr) auto;
}

/* Nav Main */
.main .nav-main {
    display: flex;
    align-items: center;
    z-index: 5;
    margin: 0 100px;
}

.main .nav-main.active {
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    border: 0;
}

.main .nav-main .logo-container {
    flex: 1;
    cursor: pointer;
}

.main .nav-main .logo-container img {
    max-width: 200px;
    max-height: 50px;
    height: auto;
    width: 100%;
}

.main .nav-main .menu-container {
    display: flex;
    align-items: center;
}

.main .nav-main .menu-container li span {
    display: block;
    width: 2px;
    height: 50px;
    background-color: #333;
}

.main .nav-main .menu-container li a {
    font-size: 25px;
    font-weight: 500;
    margin: 0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.main .nav-main .menu-container li a::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    transform: scale(0, 1);
    transition: transform 200ms ease-in;
    transform-origin: left;
}

.main .nav-main .menu-container li a:hover::after {
    transform: scale(1, 1);
}

.main .nav-main .menu-container li:nth-child(5) a::after,
.main .nav-main .menu-container li:nth-child(6) a::after {
    all: unset;
}

.main .nav-main .menu-container li:nth-child(5) a,
.main .nav-main .menu-container li:nth-child(6) a {
    margin-right: -5px;
}

/* DETAILS SECTION */
.main .blog-details-section {
    display: grid;
    grid-row: 2/3;
    grid-template-rows: 1fr;
}

.main .blog-details-section .blog-details {
    margin: 0 100px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main .blog-details-section .blog-details .image-container {
    background-color: #f2f2f2;
    display: grid;
    justify-content: center;
}

.main .blog-details-section h2 {
    font-size: 28px;
    line-height: 28px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    text-transform: uppercase;
}

.main .blog-details-section .blog-details .image-container img {
    height: auto;
    width: 100%;
    max-height: 330px;
    max-width: 560px;
}

.main .blog-details-section .blog-details .details-container p {
    font-family: 'Arial';
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    margin: 0;
    text-align: justify;
}

/* FOOTER SECTION */
.main .footer-section {
    background-color: #383838;
    display: grid;
    grid-row: 5/6;
    grid-auto-rows: 1fr;
}

.main .footer-section > .content {
    margin: 0 50px;
    display: grid;
    grid-template-rows: 1fr repeat(2, auto);
    grid-template-columns: repeat(3, 1fr);
}

.main .footer-section .content .about-wrapper {
    margin-top: 40px;
    grid-row: 1/2;
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
}

.main .footer-section .content .about-wrapper a {
    color: #fff;
    font-size: 25px;
    font-weight: 300;
}

.main .footer-section .content .about-wrapper h2 {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
}

.main .footer-section .content .logo-wrapper {
    grid-row: 1/2;
    grid-column: 2/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main .footer-section .content .logo-wrapper .image-container img {
    max-width: 300px;
    max-height: 75px;
    width: 100%;
    height: auto;    
}

.main .footer-section .content .logo-wrapper a {
    text-decoration: underline;
    font-size: 25px;
    font-weight: 500;
    color: #fff;
}

.main .footer-section .content .contacts-wrapper {
    margin-top: 40px;
    grid-row: 1/2;
    grid-column: 3/4;
    display: flex;
    justify-content: flex-end;
}

.main .footer-section .content .contacts-wrapper .content {
    display: flex;
    flex-direction: column;
}

.main .footer-section .content .contacts-wrapper .content a,
.main .footer-section .content .contacts-wrapper .content p {
    font-size: 22px;
    font-weight: 400;
    margin-top: 0;
    color: #fff;
}

.main .footer-section .content .contacts-wrapper .content h2 {
    font-size: 25px;
    font-weight: 500;
    color: #fff;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper {
    display: flex;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container {
    margin-right: 18px;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container i {
    color: #fff;
    font-size: 32px;
}

.main .footer-section .content .divider {
    margin: 20px 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--primary);
    grid-row: 2/3;
    grid-column: 1/-1;
}

.main .footer-section .content .copyright {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    grid-row: 3/4;
    grid-column: 1/-1;
}

/* Desktop and Laptop */
@media (max-width: 1200px) {
    
}

/* Tablet */
@media (max-width: 992px) {
    .main .nav-main {
        position: fixed;
        width: 100%;
        margin: 0;
        height: 95px;
        background-color: #fff;
    }

    .main .nav-main .logo-container {
        margin-left: 100px;
    }

    .main .nav-main .hamburger-container {
        margin-right: 100px;
        margin-top: -5px;
        cursor: pointer;
    }

    .main .nav-main .hamburger-container:hover span {
        background-color: var(--primary);
    }

    .main .nav-main .hamburger-container span {
        display: block;
        height: 3px;
        width: 30px;
        background-color: #383838;
        margin: 6px 0px;
    }

    .main .nav-main .menu-container {
        background-color: #fff;
        position: absolute;
        top: 95px;
        height: 200px;
        width: 100%;
        display: grid;
        transform: scale(1, 0);
        transform-origin: top;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
    }

    .main .nav-main .menu-container.show {
        transform: scale(1, 1);
        transition: transform 300ms ease-in;
    }

    .main .nav-main .menu-container li:nth-child(4),
    .main .nav-main .menu-container li:nth-child(5),
    .main .nav-main .menu-container li:nth-child(6) {
        display: none;
    }

    .main .nav-main .menu-container li {
        height: 100%;
    }
                
    .main .nav-main .menu-container li a {
        height: 100%;
        justify-content: center;
    }

    .main .nav-main .menu-container li:hover {
        background-color: var(--primary);
        transition: all 300ms ease-in;
    }

    .main .nav-main .menu-container li a::after {
        all: unset;
    }

.main .footer-section .content .about-wrapper a {
        font-size: 18px;
    }
    
    .main .footer-section .content .about-wrapper h2 {
        font-size: 20px;
    }

    .main .footer-section .content .logo-wrapper a {
        font-size: 14px;
    }

    .main .footer-section .content .contacts-wrapper .content a,
    .main .footer-section .content .contacts-wrapper .content p {
        font-size: 18px;
    }

    .main .footer-section .content .contacts-wrapper .content h2 {
        font-size: 20px;
    }

    .main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container i {
        font-size: 18px;
    }

    .main .footer-section .content .copyright {
        font-size: 14px;
    }
}

/* Tablet, Mobile Large */
@media (max-width: 768px) {
.main .footer-section > .content {
        display: grid;
        grid-template-rows: repeat(2, 1fr) repeat(2, auto);
        grid-template-columns: 1fr;
    }

    .main .footer-section .content .about-wrapper {
        grid-row: 2/3;
        grid-column: 1/3;
        align-items: center;
    }

    .main .footer-section .content .logo-wrapper {
        grid-row: 1/2;
        grid-column: 1/3;
    }

    .main .footer-section .content .contacts-wrapper {
        grid-row: 3/4;
        grid-column: 1/3;
        justify-content: center;
    }
    
    .main .footer-section .content .contacts-wrapper .content {
        align-items: center;
    }

    .main .footer-section .content .divider {
        grid: 4/5;
        grid-column: 1/4;   
    }

    .main .footer-section .content .copyright {
        grid-row: 5/6;
        grid-column: 1/3;
        text-align: center;
    }
}

/* Mobile */
@media (max-width: 576px) {

    .main .nav-main {
        height: 80px;
    }

    .main .nav-main .menu-container {
        top: 80px;
    }

    .main .nav-main .hamburger-container span {
        height: 2px;
        width: 20px;
        margin: 5px 0px;
    }

    .main .nav-main .logo-container {
        margin-left: 25px;
    }

    .main .nav-main .logo-container img {
        max-width: 120px;
        max-height: 50px;
    }
    
    .main .nav-main .hamburger-container {
        margin-right: 25px;
    }

.main .blog-details-section .blog-details {
        margin: 0 25px;
    }

    .main .blog-details-section h2 {
        font-size: 18px;
        margin: 25px 0;
    }

    .main .blog-details-section .blog-details .details-container p {
        font-size: 14px;
    }

    .main .blog-details-section .blog-details .image-container img {
        max-height: 230px;
        max-width: 460px;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>SNEAKERS | <%= blog.blog_title %></title>
    </head>
    <body>
        <div class="main">
            <!-- NAV SECTION -->
            <div class="nav-main" id="navigationMain">
                <div class="logo-container">
                    <a href="/"><img src="https://i.postimg.cc/CLH96BP5/sneakers-logo.png" alt="Sneakers Logo"></a>
                </div>
                <div class="hamburger-container" id="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul class="menu-container" id="menus">
                    <li><a href="/">Home</a></li>
                    <li><a href="#">Style</a></li>
                    <li><a href="#">Sneakers</a></li>
                    <li><span></span></li>
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-user"></i></a></li>
                </ul>
            </div>

            <!-- PRODUCT SECTION -->
            <div class="blog-details-section">
                <div class="blog-details">
                    <div class="image-container">
                        <img src="https://i.postimg.cc/rwTMD2b0/product-af1.png" alt="try">
                    </div>
                    <h2>NIKE AF 1 ’07 TRIPLE WHITE</h2>
                    <div class="details-container">
                        <p>Hoops in the park, Sunday BBQs and sunshine. The radiance lives on in the Nike Air Force 1 ’07, the b-ball OG that puts a fresh spin on what you know best: crisp leather, stitched overlays in classic all-white and the perfect amount of flash to make you shine. Full-grain leather in the upper adds a premium look and feel. Originally designed for performance hoops, Nike Air cushioning adds lightweight, all-day comfort. The padded, low-cut collar looks sleek and feels great.</p>
                    </div>
                </div>
            </div>
           
            <!-- FOOTER SECTION -->
            <div class="footer-section">
                <div class="content">
                    <div class="about-wrapper">
                        <h2>ABOUT</h2>
                        <a href="#">FAQs</a>
                        <a href="#">Terms & Conditions</a>
                    </div>
                    <div class="logo-wrapper">
                        <div class="image-container">
                            <img src="https://i.postimg.cc/yx601GHw/sneakers-logo-white.png" alt="footer logo" />
                        </div>
                        <a href="#">www.sneakershop.com</a>
                    </div>
                    <div class="contacts-wrapper">
                        <div class="content">
                            <h2>CONTACT</h2>
                            <p>(+63) 9123456789</p>
                            <div class="icon-wrapper">
                                <div class="icon-container">
                                    <i class="fa fa-facebook-square"></i>
                                </div>
                                <div class="icon-container">
                                    <i class="fa fa-twitter"></i>
                                </div>
                                <div class="icon-container">
                                    <i class="fa fa-instagram"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divider"></div>
                    <p class="copyright">© 2021 SNEAKERS PH</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/static/js/index.js"></script>
    </body>
</html>

Upvotes: 1

Views: 77

Answers (1)

Charles Lavalard
Charles Lavalard

Reputation: 2321

Replacing

your main's grid template rows into grid-template-rows: 120px auto repeat(2, 1fr) auto;

and adding a min-height of calc(100vh - 120px); to your blog-details-section should do the trick

/* Variables */

:root {
  --primary: #6BCBB8;
  --products: #cfcfcf;
  --secondary: #479896;
}


/* Default */

body,
html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

* {
  font-family: "Poppins", "Oswald", "Arial", sans-serif;
  font-weight: 300;
  color: #383838;
}

a {
  text-decoration: none;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}


/* Main */

.main {
  height: 100vh;
  /* Layout */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 120px auto repeat(2, 1fr) auto;
}


/* Nav Main */

.main .nav-main {
  display: flex;
  align-items: center;
  z-index: 5;
  margin: 0 100px;
}

.main .nav-main.active {
  box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
  border: 0;
}

.main .nav-main .logo-container {
  flex: 1;
  cursor: pointer;
}

.main .nav-main .logo-container img {
  max-width: 200px;
  max-height: 50px;
  height: auto;
  width: 100%;
}

.main .nav-main .menu-container {
  display: flex;
  align-items: center;
}

.main .nav-main .menu-container li span {
  display: block;
  width: 2px;
  height: 50px;
  background-color: #333;
}

.main .nav-main .menu-container li a {
  font-size: 25px;
  font-weight: 500;
  margin: 0 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.main .nav-main .menu-container li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  transform: scale(0, 1);
  transition: transform 200ms ease-in;
  transform-origin: left;
}

.main .nav-main .menu-container li a:hover::after {
  transform: scale(1, 1);
}

.main .nav-main .menu-container li:nth-child(5) a::after,
.main .nav-main .menu-container li:nth-child(6) a::after {
  all: unset;
}

.main .nav-main .menu-container li:nth-child(5) a,
.main .nav-main .menu-container li:nth-child(6) a {
  margin-right: -5px;
}


/* DETAILS SECTION */

.main .blog-details-section {
  display: grid;
  grid-row: 2/3;
  grid-template-rows: 1fr;
  min-height: calc(100vh - 120px);
}

.main .blog-details-section .blog-details {
  margin: 0 100px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main .blog-details-section .blog-details .image-container {
  background-color: #f2f2f2;
  display: grid;
  justify-content: center;
}

.main .blog-details-section h2 {
  font-size: 28px;
  line-height: 28px;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  text-transform: uppercase;
}

.main .blog-details-section .blog-details .image-container img {
  height: auto;
  width: 100%;
  max-height: 330px;
  max-width: 560px;
}

.main .blog-details-section .blog-details .details-container p {
  font-family: 'Arial';
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  margin: 0;
  text-align: justify;
}


/* FOOTER SECTION */

.main .footer-section {
  background-color: #383838;
  display: grid;
  grid-row: 5/6;
  grid-auto-rows: 1fr;
}

.main .footer-section>.content {
  margin: 0 50px;
  display: grid;
  grid-template-rows: 1fr repeat(2, auto);
  grid-template-columns: repeat(3, 1fr);
}

.main .footer-section .content .about-wrapper {
  margin-top: 40px;
  grid-row: 1/2;
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
}

.main .footer-section .content .about-wrapper a {
  color: #fff;
  font-size: 25px;
  font-weight: 300;
}

.main .footer-section .content .about-wrapper h2 {
  color: #fff;
  font-size: 25px;
  font-weight: 500;
}

.main .footer-section .content .logo-wrapper {
  grid-row: 1/2;
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main .footer-section .content .logo-wrapper .image-container img {
  max-width: 300px;
  max-height: 75px;
  width: 100%;
  height: auto;
}

.main .footer-section .content .logo-wrapper a {
  text-decoration: underline;
  font-size: 25px;
  font-weight: 500;
  color: #fff;
}

.main .footer-section .content .contacts-wrapper {
  margin-top: 40px;
  grid-row: 1/2;
  grid-column: 3/4;
  display: flex;
  justify-content: flex-end;
}

.main .footer-section .content .contacts-wrapper .content {
  display: flex;
  flex-direction: column;
}

.main .footer-section .content .contacts-wrapper .content a,
.main .footer-section .content .contacts-wrapper .content p {
  font-size: 22px;
  font-weight: 400;
  margin-top: 0;
  color: #fff;
}

.main .footer-section .content .contacts-wrapper .content h2 {
  font-size: 25px;
  font-weight: 500;
  color: #fff;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper {
  display: flex;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container {
  margin-right: 18px;
}

.main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container i {
  color: #fff;
  font-size: 32px;
}

.main .footer-section .content .divider {
  margin: 20px 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  grid-row: 2/3;
  grid-column: 1/-1;
}

.main .footer-section .content .copyright {
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  grid-row: 3/4;
  grid-column: 1/-1;
}


/* Desktop and Laptop */

@media (max-width: 1200px) {}


/* Tablet */

@media (max-width: 992px) {
  .main .nav-main {
    position: fixed;
    width: 100%;
    margin: 0;
    height: 95px;
    background-color: #fff;
  }
  .main .nav-main .logo-container {
    margin-left: 100px;
  }
  .main .nav-main .hamburger-container {
    margin-right: 100px;
    margin-top: -5px;
    cursor: pointer;
  }
  .main .nav-main .hamburger-container:hover span {
    background-color: var(--primary);
  }
  .main .nav-main .hamburger-container span {
    display: block;
    height: 3px;
    width: 30px;
    background-color: #383838;
    margin: 6px 0px;
  }
  .main .nav-main .menu-container {
    background-color: #fff;
    position: absolute;
    top: 95px;
    height: 200px;
    width: 100%;
    display: grid;
    transform: scale(1, 0);
    transform-origin: top;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
  }
  .main .nav-main .menu-container.show {
    transform: scale(1, 1);
    transition: transform 300ms ease-in;
  }
  .main .nav-main .menu-container li:nth-child(4),
  .main .nav-main .menu-container li:nth-child(5),
  .main .nav-main .menu-container li:nth-child(6) {
    display: none;
  }
  .main .nav-main .menu-container li {
    height: 100%;
  }
  .main .nav-main .menu-container li a {
    height: 100%;
    justify-content: center;
  }
  .main .nav-main .menu-container li:hover {
    background-color: var(--primary);
    transition: all 300ms ease-in;
  }
  .main .nav-main .menu-container li a::after {
    all: unset;
  }
  .main .footer-section .content .about-wrapper a {
    font-size: 18px;
  }
  .main .footer-section .content .about-wrapper h2 {
    font-size: 20px;
  }
  .main .footer-section .content .logo-wrapper a {
    font-size: 14px;
  }
  .main .footer-section .content .contacts-wrapper .content a,
  .main .footer-section .content .contacts-wrapper .content p {
    font-size: 18px;
  }
  .main .footer-section .content .contacts-wrapper .content h2 {
    font-size: 20px;
  }
  .main .footer-section .content .contacts-wrapper .content .icon-wrapper .icon-container i {
    font-size: 18px;
  }
  .main .footer-section .content .copyright {
    font-size: 14px;
  }
}


/* Tablet, Mobile Large */

@media (max-width: 768px) {
  .main .footer-section>.content {
    display: grid;
    grid-template-rows: repeat(2, 1fr) repeat(2, auto);
    grid-template-columns: 1fr;
  }
  .main .footer-section .content .about-wrapper {
    grid-row: 2/3;
    grid-column: 1/3;
    align-items: center;
  }
  .main .footer-section .content .logo-wrapper {
    grid-row: 1/2;
    grid-column: 1/3;
  }
  .main .footer-section .content .contacts-wrapper {
    grid-row: 3/4;
    grid-column: 1/3;
    justify-content: center;
  }
  .main .footer-section .content .contacts-wrapper .content {
    align-items: center;
  }
  .main .footer-section .content .divider {
    grid: 4/5;
    grid-column: 1/4;
  }
  .main .footer-section .content .copyright {
    grid-row: 5/6;
    grid-column: 1/3;
    text-align: center;
  }
}


/* Mobile */

@media (max-width: 576px) {
  .main .nav-main {
    height: 80px;
  }
  .main .nav-main .menu-container {
    top: 80px;
  }
  .main .nav-main .hamburger-container span {
    height: 2px;
    width: 20px;
    margin: 5px 0px;
  }
  .main .nav-main .logo-container {
    margin-left: 25px;
  }
  .main .nav-main .logo-container img {
    max-width: 120px;
    max-height: 50px;
  }
  .main .nav-main .hamburger-container {
    margin-right: 25px;
  }
  .main .blog-details-section .blog-details {
    margin: 0 25px;
  }
  .main .blog-details-section h2 {
    font-size: 18px;
    margin: 25px 0;
  }
  .main .blog-details-section .blog-details .details-container p {
    font-size: 14px;
  }
  .main .blog-details-section .blog-details .image-container img {
    max-height: 230px;
    max-width: 460px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SNEAKERS |
    <%= blog.blog_title %>
  </title>
</head>

<body>
  <div class="main">
    <!-- NAV SECTION -->
    <div class="nav-main" id="navigationMain">
      <div class="logo-container">
        <a href="/"><img src="https://i.postimg.cc/CLH96BP5/sneakers-logo.png" alt="Sneakers Logo"></a>
      </div>
      <div class="hamburger-container" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <ul class="menu-container" id="menus">
        <li><a href="/">Home</a></li>
        <li><a href="#">Style</a></li>
        <li><a href="#">Sneakers</a></li>
        <li><span></span></li>
        <li><a href="#"><i class="fa fa-search"></i></a></li>
        <li><a href="#"><i class="fa fa-user"></i></a></li>
      </ul>
    </div>

    <!-- PRODUCT SECTION -->
    <div class="blog-details-section">
      <div class="blog-details">
        <div class="image-container">
          <img src="https://i.postimg.cc/rwTMD2b0/product-af1.png" alt="try">
        </div>
        <h2>NIKE AF 1 ’07 TRIPLE WHITE</h2>
        <div class="details-container">
          <p>Hoops in the park, Sunday BBQs and sunshine. The radiance lives on in the Nike Air Force 1 ’07, the b-ball OG that puts a fresh spin on what you know best: crisp leather, stitched overlays in classic all-white and the perfect amount of flash
            to make you shine. Full-grain leather in the upper adds a premium look and feel. Originally designed for performance hoops, Nike Air cushioning adds lightweight, all-day comfort. The padded, low-cut collar looks sleek and feels great.</p>
        </div>
      </div>
    </div>

    <!-- FOOTER SECTION -->
    <div class="footer-section">
      <div class="content">
        <div class="about-wrapper">
          <h2>ABOUT</h2>
          <a href="#">FAQs</a>
          <a href="#">Terms & Conditions</a>
        </div>
        <div class="logo-wrapper">
          <div class="image-container">
            <img src="https://i.postimg.cc/yx601GHw/sneakers-logo-white.png" alt="footer logo" />
          </div>
          <a href="#">www.sneakershop.com</a>
        </div>
        <div class="contacts-wrapper">
          <div class="content">
            <h2>CONTACT</h2>
            <p>(+63) 9123456789</p>
            <div class="icon-wrapper">
              <div class="icon-container">
                <i class="fa fa-facebook-square"></i>
              </div>
              <div class="icon-container">
                <i class="fa fa-twitter"></i>
              </div>
              <div class="icon-container">
                <i class="fa fa-instagram"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <p class="copyright">© 2021 SNEAKERS PH</p>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/static/js/index.js"></script>
</body>

</html>

Upvotes: 1

Related Questions