KFC Landing Page

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

KFC Landing Page | Responsive Design

📙Table Of Content

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

KFC Landing Page HTML CODE

  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KFC Landing Page | Responsive Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="main">
    <header>
      <a href="#"><img src="logo.png" class="logo"></a>
      <div class="toggle"></div>
      <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <div class="content">
      <div class="text">
        <h2>Its Finger<br>Lickin <span>Good.</span></h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, adipisci obcaecati! Accusamus fugiat obcaecati nesciunt maiores rerum placeat amet voluptatibus cumque soluta similique saepe, assumenda eos dolorum autem. Iusto enim accusamus optio cupiditate earum ipsam!</p>
        <a href="#" class="btn">Order Now</a>
      </div>
      <div class="slider">
        <div class="slides active">
          <img src="burger_fries.png">
        </div>
        <div class="slides">
          <img src="french_fries.png">
        </div>
        <div class="slides">
          <img src="burger.png">
        </div>
        <div class="slides">
          <img src="fried_chicken.png">
        </div>
      </div>
    </div>

    <div class="footer">
      <ul class="sci">
        <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
      </ul>
      <div class="prevNext">
        <p>Always Fresh</p>
        <span class="prev"><ion-icon name="chevron-back-outline"></ion-icon></span>
        <span class="next"><ion-icon name="chevron-forward-outline"></ion-icon></span>
      </div>
    </div>
  </section>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

  <script>
    //toggle 
    const menutoggle = document.querySelector('.toggle');
    const navigation = document.querySelector('.navigation');
    menutoggle.onclick = function(){
      menutoggle.classList.toggle('active')
      navigation.classList.toggle('active')
    }

    //slider
    const slides = document.querySelectorAll('.slides');
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');

    i = 0;
    
    function ActiveSlide(n){
      for(slide of slides)
      slide.classList.remove('active');
      slides[n].classList.add('active');
    }

    // function for next btn
    next.addEventListener('click', function(){
      if(i == slides.length - 1){
        i = 0;
        ActiveSlide(i);
      }
      else 
      {
        i++;
        ActiveSlide(i);
      }
    })

     // function for prev btn
     prev.addEventListener('click', function(){
      if(i == 0){
        i = slides.length - 1;
        ActiveSlide(i);
      }
      else 
      {
        i--;
        ActiveSlide(i);
      }
    })
  </script>
</body>
</html>

KFC Landing Page CSS CODE


@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}
.main
{
  position: relative;
  min-height: 100vh;
  background: radial-gradient(#f0483a,#d10a20);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px 100px;
}
header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
.logo
{
  max-width: 90px;
}
.navigation
{
  display: flex;
}
.navigation li 
{
  list-style: none;
}
.navigation li a 
{
  position: relative;
  color: #fff;
  text-decoration: none;
  margin-left: 40px;
}
.content
{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .text
{
  width: 100%;
  max-width: 600px;
}
.content .text h2
{
  color: #fff;
  font-size: 5em;
  font-weight: 300;
}
.content .text h2 span
{
  font-weight: 700;
}
.content .text p 
{
  color: #fff;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.5em;
  margin: 20px 0;
}
.btn
{
  position: relative;
  display: inline-block;
  padding: 20px 50px;
  background: #fff;
  color: #333;
  font-size: 1.1em;
  font-weight: 500;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.25s;
}
.btn:hover 
{
  letter-spacing: 2px;
}
.slider
{
  position: relative;
}
.slider .slides 
{
  display: none;
}
.slider .slides.active
{
  display: block;
}
.slider .slides img 
{
  width: 100%;
  max-width: 600px;
}
.footer
{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 30px 100px;
  justify-content: space-between;
  align-items: flex-end;
}
.sci 
{
  display: flex;
}
.sci li
{
  list-style: none;
}
.sci li a 
{
  color: #fff;
  font-size: 2em;
  margin-right: 20px;
  display: inline-block;
  transition: 0.25s;
}
.sci li a:hover 
{
  transform: translateY(-5px);
}
.prevNext 
{
  position: relative;
  user-select: none;
}
.prevNext p 
{
  position: relative;
  color: #fff;
  text-align: end;
  margin-bottom: 15px;
}
.prevNext p::before 
{
  content: '';
  position: absolute;
  top: 50%;
  left: -35px;
  transform: translateY(-50%);
  width: 50px;
  height: 2px;
  background: #fff;
}
.prevNext span
{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 2em;
  color: #fff;
}
.prevNext span:nth-child(2)
{
  margin-right: 20px;
}

/* now, make it responsive */
@media (max-width:991px)
{
  .main
  {
    padding: 40px;
  }
  header
  {
    padding: 20px 40px;
  }
  .logo
  {
    max-width: 70px;
  }
  .content
  {
    flex-direction: column;
    margin: 120px 0 40px;
  }
  .content .text
  {
    max-width: 100%;
  }
  .content .text h2
  {
    font-size: 4em;
  }
  .slider
  {
    margin-top: 40px;
  }
  .slider .slides img
  {
    width: 100%;
    max-width: 420px;
  }
  .footer
  {
    position: relative;
    padding: 0;
  }

  .navigation
  {
    display: none;
  }
  .navigation.active
  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d10a20;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .navigation li a
  {
    font-size: 1.5em;
    margin: 10px 0;
    display: inline-block;
  }
  .toggle
  {
    position: relative;
    width: 32px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    cursor: pointer;
  }
  .toggle.active 
  {
    position: fixed;
    right: 40px;
  }
  .toggle::before
  {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: translateY(-10px);
    box-shadow: 0 10px 0 #fff;
    transition: 0.25s;
  }
  .toggle.active::before
  {
    transform: translateY(0px) rotate(45deg);
    box-shadow: 0 0 0 #fff;
  }
  .toggle::after
  {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: translateY(10px);
    transition: 0.25s;
  }
  .toggle.active::after
  {
    transform: translateY(0px) rotate(-45deg);
  }
}

@media (max-width:480px)
{
  header,
  .main
  {
    padding: 20px;
  }
  .toggle.active 
  {
    right: 20px;
  }
  .content .text h2
  {
    font-size: 3em;
  }
  .btn 
  {
    padding: 15px 30px;
  }
  .footer
  {
    flex-direction: column-reverse;
    align-items: center;
  }
  .sci
  {
    margin-top: 40px;
  }
}

Live Preview of KFC Landing Page

See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.

Codewithshobhit
Star Icon Star Fork Icon Fork Download Icon Download

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.

Which Code Editor do you use to create those projects?

I am using VS Code Studio.

is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on  Instagram

if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉