Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ramxcodes/dribble-clone
Welcome to Dribble Clone project! This project aims to recreate the Dribbble website with a responsive design and some creative elements.
https://github.com/ramxcodes/dribble-clone
dribble dribble-clone
Last synced: 11 days ago
JSON representation
Welcome to Dribble Clone project! This project aims to recreate the Dribbble website with a responsive design and some creative elements.
- Host: GitHub
- URL: https://github.com/ramxcodes/dribble-clone
- Owner: ramxcodes
- Created: 2024-03-11T15:53:03.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-11T16:08:59.000Z (10 months ago)
- Last Synced: 2024-03-11T17:15:34.679Z (10 months ago)
- Topics: dribble, dribble-clone
- Language: HTML
- Homepage: https://ramxcodes.github.io/Dribble-clone/
- Size: 190 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dribble Clone
## Table of Contents
1. [Introduction](#introduction)
2. [Features](#features)
3. [Installation / Fork](#installation--fork)
4. [Star the GitHub Repo](#star-the-github-repo)
5. [Code of the Website](#code-of-the-website)
---
## Introduction
Welcome to RamxCodes' Dribble Clone project! This project aims to recreate the Dribbble website with a responsive design and some creative elements. Feel free to explore the code and use it as a reference for your own projects.
---
## Features
- Responsive design for a seamless user experience on various devices.
- Navigation bar with links for finding talent, inspiration, learning design, job opportunities, and going pro.
- Engaging content section showcasing the platform's features.
- Explore inspiring designs section with interactive boxes displaying images and videos.
---
## Installation / Fork
To get started with the project, follow these steps:
1. Clone the repository to your local machine:
```bash
git clone https://github.com/ramxcodes/dribble-clone.git
```
2. Navigate to the project directory:
```bash
cd dribble-clone
```
3. Open the `index.html` file in your preferred web browser.
---
## Star the GitHub Repo
If you find this project interesting or useful, show your support by starring the [GitHub repository](https://github.com/ramxcodes/dribble-clone). Your feedback and contributions are always welcome!
---
## Code of the Website
Below is the HTML and CSS code that constitutes the Anime Hunt website. Feel free to explore and modify the code as needed.
### HTML (index.html)
```html
Dribble Clone
Find Talent
Inspiration
Learn design
Jobs
Go Pro
Log in
Sign up
Over 3 million ready-to-work creatives!
Work with the world’s top
creative talent.
Connect with millions of top-rated designers & agencies around the world.
Start hiring today
Explore inspiring designs
Productivity
Productivity
Productivity
Productivity
Productivity
Productivity
Productivity
Productivity
```
### CSS (style.css)
```css
@font-face {
font-family: Gilroy;
src: url(./fonts/Gilroy-Medium.otf);
}
@font-face {
font-family: "Source Serif 4";
src: url(./fonts/source\ serrif\ 4.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gilroy';
}
html, body {
height: 103%;
width: 100%;
}
#page1{
height: 102%;
width: 100%;
}
#nav{
height: 120px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
}
#nav-part1{
width: 26%;
display: flex;
align-items:center ;
justify-content: space-between;
}
#nav-part1 h4{
font-size: 16px;
font-weight: 500;
}
#nav-part2{
width: 26%;
display: flex;
align-items:center ;
justify-content: flex-end;
}
#nav-part2 button{
padding: 15px 22px;
font-weight: 600;
border: none;
background-color: black;
color: #fff;
border-radius: 50px;
font-size: 17px;
margin: 0 10px;
}
#nav-part2 button:nth-child(1){
background-color: transparent;
color: #000;
}
#nav img{
height: 110px;
}
#content{
height: calc(100% - 100px);
width: 100%;
padding-top: 90px;
}
#content h3{
background-color: #F2B0EA;
padding: 10px 16px;
border-radius: 50px;
width: fit-content;
position: relative;
left: 50%;
font-weight: 100;
transform: translateX(-50%);
font-size: 17px;
font-family: "Source Serif 4";
}
#content h1{
font-size: 80px;
text-align: center;
margin: 40px 0;
font-family: "Source Serif 4";
font-weight: 100;
line-height: 80px;
}
#content h4{
font-size: 22px;
text-align: center;
font-weight: 500;
}
#content button{
padding: 20px 28px;
font-weight: 600;
border: none;
background-color: black;
color: #fff;
border-radius: 50px;
font-size: 18px;
margin: 50px 0px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-bottom: 70px;
}
#bottom{
height: 380px;
width: 100%;
padding: 5px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
#bottom::-webkit-scrollbar{
display: none;
}
.elem{
display: inline-block;
position: relative;
height: 100%;
width: 320px;
margin-right: 30px;
background-color: royalblue;
border-radius: 40px;
overflow: hidden;
}
.elem img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.elem video{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
#page2{
height: 100%;
width: 100%;
background-color: rgb(255, 255, 255);
position: relative;
padding: 70px;
padding-top: 100px;
}
#page2 h1{
text-align: center;
font-weight: 500;
font-size: 60px;
margin-bottom: 50px;
}
.box{
height: 320px;
width: 400px;
background-color: red;
border-radius: 15px;
display: inline-block;
position: relative;
transition: all ease 0.5s;
overflow: hidden;
margin: 15px;
}
.box img{
height: 100%;
width: 100%;
object-fit: cover;
}
.box video{
height: 100%;
width: 100%;
object-fit: cover;
}
.box-bottom{
height: 40%;
width: 100%;
background:linear-gradient(transparent,rgba(0, 0, 0, 0.63)) ;
position: absolute;
bottom: -40%;
transition: all ease 0.5s;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.box-bottom i{
background-color: white;
padding: 8px 9px;
color: #000;
font-size: 19px;
font-weight: 600;
border-radius: 50%;
}
.box-bottom h5{
font-size: 18px;
}
.box:hover .box-bottom{
bottom: 0;
}
.box:hover{
box-shadow: 0px 2px 20px rgba(123, 123, 123, 0.498);
}
```
### Fonts
The project uses custom fonts, Gilroy and Source Serif 4. The font files are included in the `fonts` directory.
### Important CSS Styles
- Responsive design with `@media` queries.
- Navigation bar styling.
- Content section styling, including buttons and image/video displays.
- Explore designs section styling with interactive hover effects.
Feel free to explore and modify the code to suit your needs or use it as a learning resource.
---
Feel free to reach out to RamxCodes for any questions or suggestions! Happy coding! 🚀