Hello everyone! Today, let’s embark on a creative journey and build a simple KFC Landing Page using HTML and CSS. Whether you’re a coding enthusiast or just starting out, this tutorial offers a great opportunity to refine your skills and create a visually appealing landing page for a popular brand like KFC.
We’ll be using HTML for structuring our page and CSS to add some style. No need for complicated setups – just a straightforward approach to bring the essence of KFC to your web project.
Join me in this coding adventure as we explore the world of web design. Let’s keep it simple and enjoyable with HTML and CSS. Ready to create a tasty KFC-inspired landing page? Let’s get started!
HTML :
The given HTML code represents a responsive landing page for KFC. It includes a header with a logo and navigation menu, a main content section with a text description and a slider displaying different food images, and a footer with social media links and navigation buttons. The JavaScript code handles the toggle functionality for the navigation menu and implements a slider for the images.
<!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>
CSS :
The given code is a CSS stylesheet that defines the styling for a webpage. It includes various selectors and properties to control the layout, colors, fonts, and responsiveness of the webpage. The code uses the Ubuntu font from Google Fonts and sets a radial gradient background. It also includes media queries to adjust the layout for different screen sizes.
@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;
}
}
Fantastic job, everyone! We’ve successfully built our KFC Landing Page using HTML and CSS. Whether you’re a coding pro or just starting out, you now have a delicious project under your belt. Keep coding, stay curious, and enjoy the satisfaction of creating something awesome. Well done!
If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!
