Lamborghini Landing Page Using HTML And CSS
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.
📙Table Of Content
- Project Folder Structure
- Lamborghini Landing PageHTML CODE
- Lamborghini Landing Page CSS CODE
- Live Preview Of Lamborghini Landing Page
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.
Lamborghini Landing Page HTML CODE
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lamborghini Landing Page Website</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
</head>
<body>
<input type="radio" name = "radio" id = "open">
<input type="radio" name = "radio" id = "close" checked>
<nav>
<div class="left">
<h3>Lamborghini</h3>
</div>
<div class="right">
<a href="">Models</a>
<a href="">Brand</a>
<a href="">Store</a>
<a href="">Experience</a>
</div>
<label class = "hamburger" id = "open" for="open">
<span></span>
<span></span>
<span></span>
</label>
<label class = "hamburger" id = "close" for="close">
<span></span>
<span></span>
<span></span>
</label>
</nav>
<div class="container">
<div class="top">
<h1>LAMBORGHINI</h1>
</div>
<div class="mid">
<img src="img/lambo.png" width = 550px alt="">
</div>
<div class="bottom">
<div class="left">
<div class="top"><h2>LAMBORGHINI <br> GALLARDO LP560 </h2></div>
<div class="bottom"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ducimus consequuntur enim pariatur veniam.</p></div>
</div>
<div class="right">
<div class="left">
<div class="box big">
<p class="top"><img src="https://img.icons8.com/dotty/80/fa314a/speedometer.png"/>3.7</p>
<p class="mid">Sec.</p>
<p class="bottom">0-100 km/h</p>
</div>
</div>
<div class="right">
<div class="box small">
<p class = "top"><img src="https://img.icons8.com/wired/18/fa314a/circled-chevron-up.png"/> 325</p>
<p class = "mid"> km/h </p>
<p class = "bottom"> Top Speed </p>
</div>
<div class="box small">
<p class = "top"> <img src="https://img.icons8.com/windows/18/fa314a/f1-race-car-side-view.png"/> 8.000 </p>
<p class = "mid"> r.p.m </p>
<p class = "bottom"> Power </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Lamborghini Landing Page CSS CODE
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
color: #b3b5b7;
text-decoration: none;
}
body{
background: linear-gradient(rgb(28, 0, 0), rgb(230, 21, 21), rgb(255, 174, 0));
}
nav{
display: flex;
justify-content: space-between;
min-height: 60px;
align-items: center;
padding: 0px 6%;
}
nav .left h3{
color: #ffe204;
}
nav .right a{
font-size: 18px;
padding: 20px;
font-weight: bold;
}
.container{
max-width: 750px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60px;
}
.container .top h1{
font-weight: 900;
letter-spacing: 4px;
font-size: 105px;
user-select: none;
}
.container .mid{
margin-top: -40px;
}
.container .bottom{
display: flex;
}
.container .bottom .left{
}
.container .bottom .right{
display: flex;
}
.container .bottom .left .top h2{
color: #f8dc09;
margin-bottom: 20px;
letter-spacing: 1px;
}
.container .bottom .left .bottom p{
font-size: 18px;
}
.container .bottom .right .right{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .bottom .right .box{
border-radius: 15px;
box-shadow: 3px 8px 8px 6px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container .bottom .right .big{
height: 170px;
width: 180px;
margin: 0px 30px 0px 30px;
}
.container .bottom .right .big .top{
font-weight: 900;
font-size: 50px;
color: rgb(138, 25, 25);
display: flex;
align-items: flex-end;
margin-bottom: 40px;
}
.container .bottom .right .big .mid{
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
}
.container .bottom .right .small{
height: 80px;
width: 90px;
}
.container .bottom .right .small .top{
font-weight: 900;
font-size: 15px;
color: rgb(128, 18, 18);
display: flex;
align-items: flex-end;
margin-bottom: 45px;
}
.container .bottom .right .small .mid{
font-size: 17px;
margin-bottom: 8px;
font-weight: bold;
}
.container .bottom .right .small .bottom{
font-size: 10px;
}
body > input{
position: absolute;
visibility: hidden;
}
nav label{
display: none;
}
@media (max-width: 860px){
body{
overflow-x: hidden;
}
.container{
margin-left: 130px;
margin-top: 80px;
}
.container .top h1{
transform: rotate(-90deg);
position: absolute;
left: -115px;
margin-top: 90px;
font-size: 50px;
letter-spacing: 2px;
}
.container .mid{
margin-bottom: 20px;
}
.container .bottom{
flex-direction: column;
align-items: center;
}
.container .bottom .left{
margin-bottom: 20px;
}
.container .bottom .right .right{
justify-content: space-evenly;
margin-top: -20px;
}
nav .right{
display: none;
}
nav label{
display: block;
}
nav .hamburger span{
display: block;
background: #ffe100;
width: 28px;
height: 2px;
margin: 4px;
}
input#close:checked ~ nav label#close{
display: none;
}
input#open:checked ~ nav label#open{
display: none;
}
input#open:checked ~ nav .right{
display: flex;
position: absolute;
top: 50px;
left: 0;
right: 0;
align-items: center;
justify-content: center;
flex-direction: column;
background: #da1313;
z-index: 2;
box-shadow: 0 10px 2px -2px #000;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
nav label{
cursor: pointer;
}
.container .bottom .right{
padding-right: 15%;
}
.container .mid img{
width: 450px;
}
}
@media (max-width: 580px){
.container .mid img{
width: 350px;
}
.container .top h1{
left: -100px;
margin-top: 50px;
font-size: 40px;
}
.container{
margin-left: 80px;
}
}
@media (max-width: 410px){
.container .top h1{
font-size: 25px;
margin-top: -10px;
left: -65px;
}
.container .mid img{
width: 300px;
}
.container .bottom .left .top h2{
font-size: 18px;
}
.container .bottom .left .bottom p{
font-size: 15px;
}
.container{
margin-left: 60px;
}
.container .bottom .right .big{
height: 140px;
width: 150px;
margin: 0px 10px 0px 20px;
}
.container .bottom .right .big .top{
font-size: 40px;
}
.container .bottom .right .small{
height: 62px;
width: 65px;
}
.container .bottom .right .small .top{
font-size: 13px;
}
.container .bottom .right .small .mid{
font-size: 14px;
margin-bottom: 3px;
}
}
Live Preview Of Lamborghini Landing Page
See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.
Star
Fork
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. 🤞🎉
No comments:
Post a Comment