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>
<div class="cir"></div>
<div class="cir1"></div>
<div class="cir2"></div>
<div class="cir3"></div>
<div class="a">
<div class="b">
<div class="header">
<div class="left">
<p>Location</p>
<h3>India <img src="/assets/arrow-down-s-line.svg" width="20px" alt=""></h3>
</div>
<div class="right">
<div class="circle">
<img src="/assets/information-button.png" width="20px" alt="">
</div>
</div>
</div>
<div class="search">
<img src="/assets/account.png" width="20px" alt="">
<input type="search" name="search" id="search" placeholder="Search">
</div>
<div class="category">
<div class="category1">
<p>Popular</p>
<div></div>
</div>
<p>Recommented</p>
<p>Nearest</p>
<p>Ground</p>
</div>
<div class="image">
<img src="https://media.istockphoto.com/id/1455375812/photo/luxury-single-story-home-exterior-surrounded-by-trees.jpg?s=2048x2048&w=is&k=20&c=jiwN0sve6A5vGOJIiYuqXxXkdk_U9p5bCEEz9qi9FKc=" alt="">
</div>
<div class="footer">
<img src="/assets/home.png" width="20px" alt="">
<img src="/assets/heart.png" width="20px" alt="">
<img src="/assets/information-button.png" width="20px" alt="">
<img src="/assets/account.png" width="20px" alt="">
</div>
</div>
<div class="c">
<div class="image1">
<img src="https://media.istockphoto.com/id/1455375812/photo/luxury-single-story-home-exterior-surrounded-by-trees.jpg?s=2048x2048&w=is&k=20&c=jiwN0sve6A5vGOJIiYuqXxXkdk_U9p5bCEEz9qi9FKc=" alt="">
</div>
<div class="nacary">
<p>Nacary Elite House</p>
<p>45-20 43rd unit 4A, Queens NV 11540</p>
</div>
<div class="card">
<div class="card1">
<img src="/assets/double-bed.png" width="18px" alt="">
<p> 2</p>
</div>
<div class="card1">
<img src="/assets/fork.png" width="18px" alt="">
<p> 1</p>
</div>
<div class="card1">
<img src="/assets/electric-car.png" width="18px" alt="">
<p> 1 </p>
</div>
<div class="card1">
<img src="/assets/maximize.png" width="18px" alt="">
<p> 1,360 ft</p>
</div>
</div>
<div class="des">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis cupiditate commodi dolorem corporis delectus optio esse culpa aperiam soluta minus?</p>
</div>
<div class="footer1">
<div class="price">
<p>$1 350 256</p>
<p>$1359/ft</p>
</div>
<div></div>
<button>Buy Now</button>
</div>
</div>
</div>
<div class="copyright">
<p>copyright by Abhay Gautam</p>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: gilroy;
}
html,body{
width: 100%;
height: 100%;
background-color: rgb(223, 223, 223);
/* animation: moves 5s linear infinite; */
}
@keyframes moves{
0%{
background: linear-gradient(90deg,#7b4397,#dc2430);
}20%{
background: linear-gradient(90deg,#00bf8f,#001510);
}40%{
background: linear-gradient(90deg,#833ab4,#fd1d1d,#fcb045);
}60%{
background: linear-gradient(90deg,#FEAC5E,#C779D0,#fcb045);
}80%{
background: linear-gradient(90deg,#D38312,#A83279);
}100%{
background: linear-gradient(90deg,#7b4397,#dc2430);
}
}
.cir{
width: 200px;
height: 200px;
position: absolute;
/* border: 1px solid rgb(150, 150, 150); */
border-radius: 50%;
top: -70px;
box-shadow: 0 0 10px rgb(215, 215, 215);
left: -70px;
}.cir{
width: 200px;
height: 200px;
position: absolute;
/* border: 1px solid rgb(150, 150, 150); */
border-radius: 50%;
top: -70px;
box-shadow: 0 0 10px rgb(172, 172, 172);
left: -70px;
}.cir1{
width: 200px;
height: 200px;
position: absolute;
/* border: 1px solid rgb(150, 150, 150); */
border-radius: 50%;
bottom: -70px;
box-shadow: 0 0 10px rgb(172, 172, 172);
left: -70px;
}.cir2{
width: 200px;
height: 200px;
position: absolute;
/* border: 1px solid rgb(150, 150, 150); */
border-radius: 50%;
top: -70px;
box-shadow: 0 0 10px rgb(172, 172, 172);
right: -70px;
}.cir3{
width: 200px;
height: 200px;
position: absolute;
/* border: 1px solid rgb(150, 150, 150); */
border-radius: 50%;
bottom: -70px;
box-shadow: 0 0 10px rgb(172, 172, 172);
right: -70px;
}
.a{
width: 100%;
height: 100%;
display: flex;
}
.b{
width: 20%;
height: 80%;
background-color: white;
/* background-color: aqua; */
border-radius: 10px;
position: absolute;
top: 50%;
left: 38%;
box-shadow:0 0 10px rgb(152, 152, 152);
transform: translate(-50%,-50%);
}
/* //header */
.b .header{
width: 100%;
height: 10%;
/* background-color: blue; */
display: flex;
position: absolute;
top: 3%;
justify-content: space-between;
}
.b .header .left{
width: 50%;
height: 100%;
margin-left: 8%;
left: 5%;
/* background-color: blueviolet; */
}
.b .header .left p{
color: rgb(59, 59, 59);
font-size: 90%;
}
.b .header .left h3{
font-weight: 600;
color: rgb(21, 21, 21);
font-size: 120%;
}
.b .header .left h3 img{
position: absolute;
top: 23px;
}
.b .header .right{
width: 50%;
height: 100%;
position: absolute;
right: 0;
}.b .header .right .circle{
width: 35px;
border-radius:50%;
position: absolute;
right: 0%;
top: 50%;
transform: translate(-50%,-50%);
height: 35px;
box-shadow: 0 0 5px black;
}.b .header .right img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* // header \\\ */
/* //search */
.search{
width: 95%;
height: 8%;
box-shadow:0 0 10px rgb(154, 154, 154);
border-radius:8px;
position: absolute;
top: 14%;
left: 2.5%;
}
.search img{
border-radius:8px;
position: absolute;
top: 30%;
left: 2.5%;
}.search input{
width: 85%;
left: 12%;
height: 99%;
font-size: 16px;
position: absolute;
top: 0%;
border: none;
}
/* // search \\ */
/* //category */
.category{
width: 95%;
height: 8%;
/* background-color: blueviolet; */
position: absolute;
top: 23.5%;
left: 2.5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.category p{
font-size: 16px;
justify-content: space-between;
align-items:center;
font-weight: 600;
}.category .category1 div{
width: 30px;
height: 8px;
border-radius: 10px;
position: absolute;
left: 10px;
top: 33px;
background-color: black;
}
/* // caategory \\ */
/* // image */
.image{
width: 95%;
height: 55%;
position: absolute;
top: 32%;
left: 2.5%;
border-radius:15px;
overflow: hidden;
}.image img{
width: 100%;
height:100%;
object-fit: cover;
object-position: center;
}
/* //image \\ */
/* footer */
.footer{
width: 95%;
height: 8%;
background-color: rgb(1, 75, 248);
position: absolute;
bottom: 10px;
border-radius: 15px;
left: 2.5%;
display: flex;
justify-content: space-between;
align-items:center;
padding: 20px;
}
.footer img{
/* background-color: blue; */
width: 35px;
padding: 5px;
border-radius: 10px;
transition: 1s;
}.footer img:hover{
/* background-color: rgb(0, 113, 219); */
width: 35px;
padding: 5px;
transition: 1s;
border-radius: 10px;
border: 1px solid black;
/* box-shadow: 0 0 5px rgb(166, 166, 166); */
}
.c{
width: 20%;
height: 80%;
box-shadow:0 0 10px rgb(152, 152, 152);
border-radius: 10px;
background-color:white;
position: absolute;
top: 50%;
left: 59%;
transform: translate(-50%,-50%);
}
/* // image */
.image1{
width: 95%;
height: 55%;
position: absolute;
top: 3%;
left: 2.5%;
border-radius:15px;
overflow: hidden;
}.image1 img{
width: 100%;
height:100%;
object-fit: cover;
object-position: center;
}
/* // image \\\ */
/* // nacary */
.nacary{
width: 95%;
height: 8%;
position: absolute;
top: 60%;
left: 2.5%;
}.nacary p:nth-child(1){
font-size: 14px;
font-weight: 700;
color: rgb(0, 136, 255);
}.nacary p:nth-child(2){
font-size: 10px;
font-weight: 300;
color: rgb(33, 33, 33);
}
/* //nacary */
.card{
width: 95%;
height: 6%;
/* background-color: blueviolet; */
position: absolute;
top: 66%;
box-shadow: 0 0 10px rgb(197, 197, 197);
border-radius:10px;
padding: 10px;
left: 2.5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.card .card1{
display: flex;
}
.card .card1 p{
display: flex;
margin-left: 5px;
font-weight: 500;
font-size: 12px;
align-items:center
}
/* //card \\ */
/* //des */
.des{
width: 95%;
height: 15%;
position: absolute;
left: 2.5%;
font-size: 12px;
padding: 5px;
font-weight: 400;
top: 75%;
/* background-color: black; */
}
/* // des \\ */
/* /// footer */
.footer1{
width: 95%;
height: 9%;
/* background-color: rgb(1, 75, 248); */
position: absolute;
bottom: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgb(194, 194, 194);
left: 2.5%;
display: flex;
justify-content: space-between;
align-items:center;
padding: 20px;
}
.footer1 .price p:nth-child(1){
font-size: 14px;
font-weight: 600;
}
.footer1 .price p:nth-child(2){
font-size: 10px;
font-weight: 400;
color: rgb(67, 67, 67);
}
.footer1 div:nth-child(2){
width: 2px;
height: 180%;
border-radius:10px;
background-color: rgb(147, 147, 147);
}
.footer1 button{
padding: 10px 40px;
border-radius:5px;
font-weight: 600;
font-size: 16px;
color: aliceblue;
background-color: rgb(0, 116, 249);
border: none;
}
/* //copy */
.copyright p{
position: absolute;
bottom:2%;
left: 50%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 18px;
transform: translate(-50%,0);
}
output: -
إرسال تعليق