<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project 1</title>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div id="nav">
<div id="nav-p1">
<h3>Menu</h3>
<i class="ri-menu-2-line"></i>
</div>
<div id="nav-p2">
<h1>Rock_X_Official</h1>
</div>
<div id="nav-p3">
<button>Log In</button>
<button id="btn2">Sign Up</button>
</div>
</div>
<h1>Our Advantages</h1>
<img
id="img1"
src="https://images.unsplash.com/photo-1706751426657-17e6f637b0bc?q=80&w=1334&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<img
id="img2"
src="https://images.unsplash.com/photo-1708559831534-44c30eb3ab0e?q=80&w=1478&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<img
id="img3"
src="https://images.unsplash.com/photo-1706263802672-4b2d95854bb1?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<img
id="img4"
src="https://plus.unsplash.com/premium_photo-1664369473428-ff385c2084d5?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<h5 id="btm-left">Your Smile, Our Passion</h5>
<h5 id="btm-right">Best Startup Of 2024</h5>
<div id="icon">
<i class="ri-instagram-line"></i>
<i class="ri-youtube-line"></i>
<i class="ri-facebook-circle-line"></i></i>
</div>
<div id="arrow">
<i class="ri-arrow-down-line"></i>
</div>
</div>
</body>
</html>
---------------><------------------->---------------------<-----------------------
------->CSS<--------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cascadia Code;
}
f html,
body {
height: 100%;
width: 100%;
}
#main {
height: 100%;
width: 100%;
background-color: white;
}
#nav {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 40px;
}
#nav-p1 {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
#nav h3 {
font-size: 16px;
border: 1.5px solid black;
padding: 5px 10px;
border-radius: 50px;
font-weight: 500;
}
#nav i {
font-size: 16px;
border: 1.5px solid black;
padding: 5px 10px;
border-radius: 50px;
font-weight: 500;
}
#nav h1 {
font-weight: 500;
font-size: 22px;
text-transform: uppercase;
font-weight: 900;
}
#nav button {
padding: 7px 12px;
border-radius: 50px;
border: 1.5px solid black;
font-size: 16px;
font-weight: 600;
/* background-color: white; */
}
#btn2 {
background-color: orangered;
color: white;
border: none;
}
#main > h1 {
color: black;
font-size: 200px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
/* background-color: red; */
}
img {
height: 500px;
width: 400px;
object-fit: cover;
object-position: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
}
#img1 {
transform: translate(-50%, -50%) rotate(-30deg);
}
#img2 {
transform: translate(-50%, -50%) rotate(-20deg);
}
#img3 {
transform: translate(-50%, -50%) rotate(-10deg);
}
#img4 {
transform: translate(-50%, -50%) rotate(-0deg);
}
#btm-left {
position: absolute;
left: 3%;
bottom: 5%;
font-size: 20px;
}
#btm-right {
position: absolute;
right: 3%;
bottom: 5%;
font-size: 20px;
}
#icon {
position: absolute;
display: flex;
right: 5%;
bottom: 8%;
gap: 25px;
font-size: 30px;
padding: 0px, 30px;
}
#arrow {
font-size: 50px;
padding: 25px 25px;
position: absolute;
bottom: 1%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid black;
border-radius: 65px;
}
