Dribbble Clone

Dribbble Clone
HTML CODE-->
<!DOCTYPE html>
<html>
<head>
<title>Pratice</title>
<link rel="stylesheet"href="basic.css">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<div id="page-1">
<div id="nav">
<div id="nav-left">
<h4>Find talent</h4>
<h4>Inspiration</h4>
<h4>Learn design</h4>
<h4>Jobs</h4>
<h4>Go pro</h4>
</div>
<div id="nav-center">
<img src="C:\Users\Harsh\Desktop\Dribbble New 2023.png" alt="logo">
</div>
<div id="nav-right">
<button>Log in</button>
<button>Sign up</button>
</div>
</div>
<div id="center">
<h4>Over 3 million ready-to-work creatives!</h4>
<h1>Work with the worlds's top <br>creative talent.</h1>

<p>Contact with millions of top-rated designers & agencies arounf the
world.</p>
<button>Start hiring today</button>
<div id="bottom">
<div class="elem">
<img src="https://images.unsplash.com/photo-1610276198568-eb6d0ff53e48?
q=80&w=1780&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="model">
</div>
<div class="elem">
<video autoplay loop muted src="C:\Users\Harsh\Desktop\
1def7b9fb30832c4af4353b325d9c3af.mp4" alt="model">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1610048616474-33031bc0c2b5?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEzfHx8ZW58MHx8fHx8" alt="">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHx8" alt="">
</div>
<div class="elem">
<video autoplay loop muted src="C:\Users\Harsh\Desktop\Tools\DIOR Fashion
Film 2020 _ Directed by VIVIENNE & TAMAS.mp4" alt="">
</div>
<div class="elem">
<img src="https://plus.unsplash.com/premium_photo-1668896122605-
debd3fed81a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1634746715098-6cafbc6a7a00?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1603771550805-abcf98e420e7?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1602077422495-c8733eb58c34?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1619024304505-b31bef080370?
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fHBvdHJhaXR8ZW58MHx8MHx8fDA%3D" alt="">
</div>
</div>
</div>
</div>
<div id="page-2">
<h1>Explore inspiring designs</h1>
<div id="box">
<img src="https://cdn.dribbble.com/userupload/13945394/file/original-
8f8b1654b1fe65bbfe6d9c1483cf0375.png?resize=450x338&vertical=center" alt="logo">
<div class="box-bottom">
<h4>Tiger</h4>
<i class="ri-heart-line"></i>
</div>
</div>
<div id="box">
94015d7581fb55df24cda6314fe97d5e.png?resize=400x300&vertical=center" alt="">
<h4>Kerala</h4>
</div>
</div>
<div id="box">
ab0019b103986091b1d3c94a66b41304.png?resize=400x300&vertical=center" alt="">
<h4>Infrastructure</h4>
</div>
</div>
<div id="box">
0de90af3afff6fe2ec9299a9188d1355.png?crop=360x0-
1799x1080&resize=400x300&vertical=center"></img>
<h4>Shopping</h4>
</div>
</div>
<div id="box">
167564d0faf4b0e470030411100b78e5.jpg?resize=400x300&vertical=center" alt="">
<h4>Productivity</h4>
</div>
</div>
<var> <div id="box">
26d120a699ac3be1bc8ad1ed0d629419.png?crop=324x581-
2857x2480&resize=400x300&vertical=center" alt="">
<h4>Studying</h4>
</div>
</div>
<div id="box">
9cb71811d6921b53b5db3d79f05788cb.jpg?resize=400x300&vertical=center" alt="">
<h4>Computer</h4>
</div>
</div>
<div id="box">
a930294eb8ed66f80483fbb6c21e9942.jpg?resize=400x300&vertical=center" alt="">
<h4>Nature</h4>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf+
+eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/
zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="Basic.js"></script>
</body>
</html>
CSS CODE-->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,body{
height: 100%;
width: 100%;
}
#page-1{
height: 100%;
width: 100%;
background-color: white;
}
#nav{
width: 100%;
height: 80px;
/* background-color: blueviolet; */
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-left{
width: 30%;
/* background-color: yellow; */
display: flex;
/* gap: 25px; */
margin-left: 40px;
}
#nav-left h4{
font-weight: 500;
font-size: 13px;
letter-spacing: -.7px;
}
#nav-center{
width: 30%;
/* background-color: tomato; */
margin-left: 100px;
display: flex;
justify-content: center;
margin-bottom: 10px;
}
#nav-center img{
height: 60px;
width: 120px;
margin-right: 45px;
}
#nav-right{
width: 30%;
/* background-color: rgb(88, 65, 57); */
display: flex;
justify-content: flex-end;
gap: 30px;
margin-right: 40px;
}
#nav-right button{
font-weight: 600;
letter-spacing: -.7px;
}
#nav-right button:nth-child(1){
border: none;
background-color: transparent;
color: black;
}
#nav-right button:nth-child(2){
background-color: black;
color: white;
padding: 10px 15px;
border-radius: 50px;
}
#center{
height: calc(100% - 80px);
width: 100%;
/* background-color: rgb(113, 113, 43); */
padding-top: 60px;
}
#center h4{
/* letter-spacing: -.6px; */
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
background-color: #F2B0EA;
width: fit-content;
position: relative;
left: 50%;
transform: translatex(-50%);
}
#center h1{
font-size: 60px;
text-align: center;
font-weight: 500;
line-height: 65px;
padding: 13px 2px 15px 1px;
}
#center p{
text-align: center;
font-size: 17px;
font-weight: 600;
}
#center button{
background-color: black;
color: white;
padding: 10px 15px;
position: relative;
left: 50%;
transform: translate(-50%);
}
#bottom{
height: 230px;
width: 100%;
/* background-color: red; */
padding: 10px;
display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: auto;
gap: 20px;
}
#bottom::-webkit-scrollbar{
display: none;
}
.elem{
height: 100%;
width: 200px;
background-color: blueviolet;
/* border: 1px solid black; */
flex-shrink: 0;
/* overflow: hidden; */
margin-right: 20px;
position: relative;
color: white;
}
.elem img{
height: 100%;
width: 100%;
object-fit: cover;
margin-right: 20px;
/* object-position: top; */
}
.elem video{
height: 100%;
width: 100%;
object-fit: cover;
margin-right: 20px;
}
#page-2{
height: 100%;
width: 100%;
/* background-color: plum; */
position: relative;
padding: 30px;
padding-top: 20px;
}
#page-2 h1{
text-align: center;
font-size: 50px;
font-weight: 400;
}
#box{
height: 250px;
width: 290px;
background-color: red;
overflow: hidden;
display: inline-block;
margin: 15px;
position: relative;
}
#box:hover{
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.639);
}
#box img{
height: 100%;
width: 100%;
object-fit: cover;
}
.box-bottom{
height: 40%;
width: 100%;
background: linear-gradient(transparent,rgba(0, 0, 0, 0.517));
position: absolute;
bottom: -40%;
transition: all ease 0.3s;
display: flex;
color: white;
padding: 0 20px;
}
.box-bottom i{
background-color: white;
padding: 8px 9px;
color: black;
font-size: 18px;
border-radius: 50%;
font-weight: 900;
}
.box-bottom h4{
font-size: 18px;
}
#box:hover .box-bottom{
bottom: 0;
}

Dribbble Clone

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dribbble Clone

Uploaded by

Copyright:

Available Formats

Dribbble Clone

You might also like