Car Website 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.
📙Table Of Content
- Car Website Landing Page Project Folder Structure
- Car Website Landing Page HTML CODE
- Car Website Landing Page CSS CODE
- Live Preview of Car Website 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.
Car Website Landing Page HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic page metadata and links to external stylesheets and icons -->
<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>Car Website Landing Page By CODEWITHSHOBHIT</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header">
<!-- Logo and navigation bar for the website -->
<a href="#" class="logo">Codewithshobhit</a>
<!-- Primary navigation -->
<nav class="navbar">
<a href="#" style="--i:1" class="active">Home</a>
<a href="#" style="--i:2">About</a>
<a href="#" style="--i:3">Review</a>
<a href="#" style="--i:4">Featured</a>
<a href="#" style="--i:5">Contact</a>
</nav>
<!-- Social media links with icons from Boxicons -->
<div class="social-media">
<a href="#" style="--i:1"><i class='bx bxl-twitter'></i></a>
<a href="#" style="--i:2"><i class='bx bxl-facebook'></i></a>
<a href="#" style="--i:3"><i class='bx bxl-instagram-alt'></i></a>
</div>
</header>
<section class="home">
<!-- Main banner with a call-to-action button -->
<div class="home-content">
<h1>Car Dealing Experience.</h1>
<h3>Redefined!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium aliquam neque eaque eum commodi assumenda exercitationem quisquam aperiam facilis labore nemo, repellendus perferendis, autem velit libero rem ullam.</p>
<a href="#" class="btn">Explore Cars</a>
</div>
<!-- Decorative image with styling in style.css -->
<div class="home-img">
<div class="rhombus">
<img src="https://imgs.search.brave.com/lB67yKvRVqSmdh9OQ8N30aVbKG_Uup5EdMdkmxxO42o/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9wbHVz/cG5nLmNvbS9pbWct/cG5nL2xhbWJvcmdo/aW5pLXBuZy1hdmVu/dGFkb3ItcG5nLWhk/LTEzNDgucG5n" alt="">
</div>
</div>
<!-- Additional decorative element -->
<div class="rhombus2"></div>
</section>
</body>
</html>
Car Website Landing Page CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(rgb(246, 255, 0), rgb(230, 32, 6), black);
color: #222;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 8%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 25px;
color: #ffffff;
text-decoration: none;
font-weight: 600;
opacity: 0;
animation: slideRight 1s ease forwards;
}
.navbar a {
display: inline-block;
font-size: 18px;
color: #222;
text-decoration: none;
font-weight: 500;
margin: 0 20px;
transition: .3s;
opacity: 0;
animation: slideTop .5s ease forwards;
animation-delay: calc(.2s * var(--i));
}
.navbar a:hover,
.navbar a.active {
color: #000000;
}
.social-media {
display: flex;
justify-content: space-between;
width: 150px;
height: 40px;
}
.social-media a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: transparent;
border: 2px solid transparent;
text-decoration: none;
transform: rotate(45deg);
transition: .5s;
opacity: 0;
animation: slideSci .5s ease forwards;
animation-delay: calc(.2s * var(--i));
}
.social-media a:hover {
border-color: #e5751a;
}
.social-media a i {
font-size: 24px;
color: #fb0000;
transform: rotate(-45deg);
}
.home {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 8% 0;
overflow: hidden;
}
.home-content {
max-width: 630px;
}
.home-content h1 {
font-size: 50px;
line-height: 1.2;
opacity: 0;
animation: slideBottom 1s ease forwards;
animation-delay: 1s;
}
.home-content h3 {
font-size: 40px;
color: #eeff00;
opacity: 0;
animation: slideRight 1s ease forwards;
animation-delay: 1.3s;
}
.home-content p {
font-size: 16px;
margin: 15px 0 30px;
opacity: 0;
animation: slideLeft 1s ease forwards;
animation-delay: 1.6s;
}
.btn {
display: inline-block;
padding: 10px 28px;
background: #e3e017;
border: 2px solid #141414;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
font-size: 16px;
color: #eaeaea;
letter-spacing: 1px;
text-decoration: none;
font-weight: 600;
transition: .5s;
opacity: 0;
animation: slideTop 1s ease forwards;
animation-delay: 2s;
}
.btn:hover {
background: transparent;
color: #1743e3;
}
.home-img {
position: relative;
right: -7%;
width: 450px;
height: 450px;
transform: rotate(45deg);
}
.home-img .rhombus {
position: absolute;
width: 100%;
height: 100%;
background: #1e1d1d;
border: 25px solid #fe0000;
box-shadow: -15px 15px 15px rgba(0, 0, 0, .2);
opacity: 0;
animation: zoomOut 1s ease forwards;
animation-delay: 1.6s;
}
.home-img .rhombus img {
position: absolute;
top: 110px;
left: -250px;
max-width: 750px;
transform: rotate(-45deg);
opacity: 0;
animation: car 1s ease forwards;
animation-delay: 2s;
}
.home .rhombus2 {
position: absolute;
top: -25%;
right: -25%;
width: 700px;
height: 700px;
background: #fcf400;
transform: rotate(45deg);
z-index: -1;
opacity: 0;
animation: rhombus2 1s ease forwards;
}
/* KEYFRAMES ANIMATION */
@keyframes slideRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideLeft {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideTop {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slideBottom {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slideSci {
0% {
transform: translateX(100px) rotate(45deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(45deg);
opacity: 1;
}
}
@keyframes zoomOut {
0% {
transform: scale(1.1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes car {
0% {
transform: translate(300px, -300px) scale(0) rotate(-45deg);
opacity: 0;
}
100% {
transform: translate(0, 0) scale(1) rotate(-45deg);
opacity: 1;
}
}
@keyframes rhombus2 {
0% {
right: -40%;
opacity: 0;
}
100% {
right: -25%;
opacity: 1;
}
}
Live Preview of Car Website 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