index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- //nav bar a class -->
<div class="a">
<div class="a1">
<div class="a11">
<a href="">Furniture</a>
<a href="">Lighting</a>
<a href="">Accessories</a>
<a href="">Outdoor</a>
</div>
</div>
<div class="a2">
<h3>CORALS</h3>
</div>
<div class="a3">
<div class="a31">
<a href="">Search</a>
<a href="">favirote</a>
<a href="">Cart</a>
<a href="">Account</a>
</div>
</div>
</div>
<hr>
<!-- //nav bar \\ -->
<!-- // b class -->
<div class="b">
<div class="b1">
<div class="b11">
<h2>Discovering the Best Furniture for Your Home</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci fugiat expedita ad odit repudiandae enim?</p>
</div>
</div>
<div class="b2"><p>Price Match Gurantee</p></div>
<div class="b3">
<div class="b31"></div>
</div>
</div>
<!-- // b class -->
<!-- // class c -->
<div class="c">
<div class="c1">
<h2>Revamp your living space with stunning furniture pieces and your style.</h2>
</div>
<div class="c2">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed temporibus odio, molestias, maiores molestiae laudantium commodi maxime ipsa, aut architecto omnis doloremque. Rem ratione illo saepe eaque sunt accusamus, minima perferendis recusandae, magni at est nihil vitae adipisci distinctio ipsum.</p>
</div>
</div>
<!-- // class c \\ -->
<!-- class d // -->
<div class="d">
<div class="d1">
<div class="d11"></div>
</div>
<div class="d2">
<div class="d21">
<h1>Choose your material for your furniture</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repellendus sint reprehenderit error at odit repellat sequi voluptatibus, cupiditate quidem.</p>
<button>Learn more</button>
</div>
</div>
</div>
<!-- // class d \\ -->
<!-- // e -->
<div class="e">
<div class="e1">
<p>OUR MISSION IS TO PROVIDE A UNIQUE SET OF PRODUCTS THAT FASCINATE INSPIRE THE USER</p>
</div>
</div>
<!-- // e class \\ -->
<!-- // f class -->
<div class="f">
<div class="f1">
<h1>Discover Product</h1>
<div class="f11">
<a href="">Special Price</a>
<a href="">New Product</a>
<a href="">Best Sellers</a>
</div>
</div>
</div>
<!-- f class \\ -->
<!-- //g class -->
<div class="g">
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
<div class="g1">
<img src="photo/a.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
<p class="price">Price $100</p>
</div>
</div>
<!-- // class g \\ -->
<!-- // class h -->
<div class="h">
<div class="h1">
<h1>Our Partners</h1>
</div>
<div class="h2">
<div class="h21">
<p>EMKI</p>
</div>
<div class="h21">
<p>Air prance</p>
</div>
<div class="h21">
<p>Calphalon</p>
</div>
<div class="h21">
<p>Uckey</p>
</div>
<div class="h21">
<p>Brisa</p>
</div>
<div class="h21">
<p>Parekss</p>
</div>
<div class="h21">
<p>QualMark</p>
</div>
<div class="h21">
<p>Auro Berner</p>
</div>
<div class="h21">
<p>Google</p>
</div>
<div class="h21">
<p>Microsoft</p>
</div>
<div class="h21">
<p>Youtube</p>
</div>
<div class="h21">
<p>FlipKart</p>
</div>
<div class="h21">
<p>Amazon</p>
</div>
<div class="h21">
<p>IRCTC</p>
</div>
<div class="h21">
<p>Chalo</p>
</div>
<div class="h21">
<p>Hotstar</p>
</div>
<div class="h21">
<p>Zee5</p>
</div>
</div>
<div class="h2">
<div class="h21">
<p>MPocket</p>
</div>
<div class="h21">
<p>Jio</p>
</div>
<div class="h21">
<p>Instagram</p>
</div>
<div class="h21">
<p>Facebook</p>
</div>
<div class="h21">
<p>MX Player</p>
</div>
<div class="h21">
<p>Khatabook</p>
</div>
<div class="h21">
<p>Samsung</p>
</div>
<div class="h21">
<p>Oppo</p>
</div>
<div class="h21">
<p>Vivo</p>
</div>
<div class="h21">
<p>Mahindra</p>
</div>
<div class="h21">
<p>BMW</p>
</div>
<div class="h21">
<p>TATA</p>
</div>
<div class="h21">
<p>Alto</p>
</div>
<div class="h21">
<p>Resso</p>
</div>
<div class="h21">
<p>Paytm</p>
</div>
<div class="h21">
<p>Phone Pay</p>
</div>
<div class="h21">
<p>Shopsy</p>
</div>
</div>
</div>
<!-- // h class \\ -->
<!-- class d // -->
<div class="d">
<div class="d2">
<div class="d21">
<h1>Choose your material for your furniture</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repellendus sint reprehenderit error at odit repellat sequi voluptatibus, cupiditate quidem.</p>
<button>Learn more</button>
</div>
</div>
<div class="d1">
<div class="d11"></div>
</div>
</div>
<!-- class d \\ -->
<!-- // i class -->
<div class="i">
<div class="i1">
<div class="i11">
<h2>CORALS</h2>
</div>
<div class="i11">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
<div class="i11">
<div class="i111">
<p id="p1">+91 6260306658</p>
<p id="p2">srappltd@gmail.com</p>
</div>
</div>
<div class="i12">
<div class="i121">
<p>About</p>
<p class="p1"></p>
<p>Contact Us</p>
<p class="p1"></p>
<p>Privacy Policy</p>
</div>
</div>
</div>
<hr>
<div class="i2">
<p>Copyright 2023 By Abhay Gautam</p>
</div>
</div>
<!-- // i class \\ -->
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
html,body{
width: 100%;
height: 100%;
}
:root{
--textColor: rgb(241, 241, 241);
--backgroundColor: rgb(4, 1, 26);
--textColor: rgb(241, 241, 241);
--textSize: 18px;
--textHeaderSize: 24px;
}
/* //a class */
.a{
width: 100%;
height: 10vh;
display: flex;
}
.a .a1{
width: 33.33%;
height: 10vh;
position: relative;
}
.a11{
position: absolute;
top: 35%;
}
.a .a2{
width: 33.33%;
height: 10vh;
position: relative;
}
.a2 h3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.a .a3{
width: 33.33%;
height: 10vh;
position: relative;
}
.a3 .a31{
position: absolute;
right: 5vh;
top: 35%;
}
.a a{
text-decoration: none;
margin-left: 30px;
font-size: var(--textSize);
color: black;
}
h3{
font-size: var(--textHeaderSize);
}
/* //a class \\ */
/* // b class */
.b{
width: 100%;
height: 70vh;
position: relative;
}
.b .b1{
width: 95%;
height: 65vh;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
background-image: url("photo/a.jpg");
background-size: cover;
overflow: hidden;
background-position: center;
border-radius: 20px;
}
.b .b2{
position: absolute;
right: 38px;
bottom: 18px;
padding: 10px;
border-radius: 30px 0 0 0;
}
.b2 p{
border: 2px solid rgb(255, 255, 255);
padding: 8px;
border-radius: 40px;
color:aliceblue;
}
.b11{
width: 25%;
height: 20vh;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: aliceblue;
}
.b11 h2{
font-size: 30px;
font-weight: 500;
}
.b11 p{
font-size: 14px;
}
/* //b class \\ */
/* //c class */
.c{
width: 95%;
height: 20vh;
margin: auto;
position: relative;
display: flex;
}
.c1{
width: 50%;
height: 100%;
position: relative;
}
.c2{
width: 50%;
height: 100%;
position: relative;
}
.c1 h2{
width: 58%;
position: absolute;
top: 30%;
left: 5vh;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 500;
word-spacing: 2.5px;
}
.c2 p{
width: 62%;
position: absolute;
top: 30%;
right: 2vh;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
word-spacing: 2.5px;
}
/* // class c \\ */
/* //class d */
.d{
width: 100%;
height: 40vh;
position: relative;
display: flex;
}
.d1{
width: 50%;
height: 100%;
position: relative;
}
.d11{
width: 40%;
height: 100%;
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
background-image: url("photo/a.jpg");
background-position: center;
border-radius: 20px;
background-size: cover;
}
.d2{
width: 50%;
height: 100%;
position: relative;
}
.d21{
width: 52%;
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%,-50%);
}
.d21 h1{
color: rgb(0, 0, 0);
}
.d21 p{
color: rgb(70, 70, 70);
font-weight: 100;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.d21 button{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
border-radius: 50px;
background-color: transparent;
border:1s solid black;
transition: 1s;
}
.d21 button:hover{
padding-bottom: 10px;
padding-left: 50px;
transition: 1s;
padding-right: 50px;
border-radius: 50px;
color: aliceblue;
border:1s solid black;
background-color: black;
}
/* // class d \\ */
/* class e */
.e{
width: 100%;
height: 50vh;
position: relative;
}
.e1{
width: 70%;
height: 45vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color:rgb(197, 197, 197);
border-radius: 20px;
}
.e1 p{
font-weight: 100;
font-size: 25px;
width: 40%;
word-spacing: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: rgb(26, 26, 26);
}
/* // class e \\ */
/* // class f */
.f{
width: 100%;
height: 12vh;
}
.f1{
width: 50%;
height: 100%;
position: absolute;
left:25%;
text-align: center;
}
.f1 h1{
font-family: 'Times New Roman', Times, serif;
}
.f11{
margin-top: 10px;
}
.f1 a{
color: black;
text-decoration: none;
border: 1px solid black;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 50px;
transition: 0.6s;
}
.f1 a:hover{
color: rgb(255, 255, 255);
text-decoration: none;
border: 1px solid black;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 50px;
background-color: black;
transition: 0.5s;
}
/* class f \\*/
/* // class g */
.g{
width: 100%;
height: 50vh;
display: flex;
position: relative;
}
.g1{
width: 15%;
height: 100%;
margin: 10px;
background-image:url("");
background-position:center;
background-size: cover;
background-clip: content-box;
position: relative;
scroll-snap-type: mandatory;
}
.g1 img{
width: 100%;
height: 90%;
border-radius:20px;
transition: 2s;
margin: auto;
}
.g1 img:hover{
width: 102%;
height: 92%;
border-radius:20px;
}
.g1 p{
width: 100%;
text-align: center;
transition: 0.5s;
}
.price:hover{
color: blueviolet;
margin-top: 10px;
border-radius:50px;
border: 1px solid blueviolet;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.h{
width: 100%;
height: 20vh;
}
.h1{
text-align: center;
margin-top: 10vh;
}
.h2{
width: 100%;
display: flex;
margin-top: 20px;
}
.h2 p{
margin-left: 5vh;
transition: 1s;
}
.h2 p:hover{
margin-left: 5vh;
color: blueviolet;
transition: 0.2s;
}
/* // h class \\ */
/* // i class */
.i{
width: 100%;
height: 20vh;
background-color: black;
margin-top: 10vh;
position: relative;
}
.i .i1{
width: 100%;
height: 70%;
display: flex;
position: relative;
}
.i .i1 .i11{
width: 24.7%;
height: 100%;
margin-left: 4px;
position: relative;
}
.i .i1 .i11 h2{
color: aliceblue;
font-weight: 100;
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
}
.i .i1 .i11 p{
width: 50%;
color: rgb(219, 219, 219);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.i .i1 .i11 .i111 #p1{
color: rgb(230, 230, 230);
position: absolute;
top: 30%;
left: 50%;
text-align: center;
font-size: 14px;
transform: translate(-50%,0);
}
.i .i1 .i11 .i111 #p2{
color: rgb(230, 230, 230);
position: absolute;
top: 45%;
left: 50%;
font-size: 16px;
text-align: center;
transform: translate(-50%,0);
}
.i12{
width: 24.8%;
height: 100%;
position: relative;
overflow: hidden;
}
.i121{
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top: 20%;
color: aliceblue;
}
.p1{
width: 25%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
height: 2px;
background-color: rgb(87, 87, 87);
border-radius:20px;
}
.i2 p{
color: aliceblue;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,0);
}
/* // i class \\ */
output: -
Post a Comment