Skip to content

Commit 32d0f3f

Browse files
theyogesh10theyogesh10
committed
Freelancer Website
1 parent 4e9c8c2 commit 32d0f3f

File tree

9 files changed

+317
-0
lines changed

9 files changed

+317
-0
lines changed

‎Project-42-Freelancer-Website-Application/images/arrow-black.png‎

490 Bytes
Loading

‎Project-42-Freelancer-Website-Application/images/arrow-white.png‎

344 Bytes
Loading

‎Project-42-Freelancer-Website-Application/images/logo.png‎

3.42 KB
Loading

‎Project-42-Freelancer-Website-Application/images/menu.png‎

383 Bytes
Loading

‎Project-42-Freelancer-Website-Application/images/phone.png‎

1.5 KB
Loading

‎Project-42-Freelancer-Website-Application/images/user.png‎

920 KB
Loading

‎Project-42-Freelancer-Website-Application/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Freelancer Website</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
12+
rel="stylesheet">
13+
</head>
14+
15+
<body>
16+
<nav>
17+
<img src="images/logo.png" alt="" class="logo">
18+
<ul id="menu-links">
19+
<li>Home</li>
20+
<li>Services</li>
21+
<li>Projects</li>
22+
<li>About Us</li>
23+
</ul>
24+
<button class="nav-btn">Get Started <img src="images/arrow-white.png" alt=""></button>
25+
26+
<img src="images/menu.png" alt="" class="menu-icon" onclick="toggleMenu()">
27+
</nav>
28+
<div class="header">
29+
<div class="header-content">
30+
<h1><span>FREE</span><br><span>LANCER</span></h1>
31+
<div class="btn-container">
32+
<button class="btn-dark">Request call back <img src="images/phone.png" alt=""></button>
33+
<button class="btn-light">Know more <img src="images/arrow-black.png" alt=""></button>
34+
</div>
35+
<p>Passionate UI/UX designers with 10+ years of experience.</p>
36+
</div>
37+
38+
<img src="images/user.png" alt="" class="user-img">
39+
</div>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
44+
</html>

‎Project-42-Freelancer-Website-Application/script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
let navbar = document.querySelector("nav");
2+
let menuLinks = document.getElementById("menu-links")
3+
4+
function toggleMenu() {
5+
menuLinks.classList.toggle("show-menu");
6+
}
7+
8+
9+
window.onscroll = function () {
10+
if (window.scrollY > 0) {
11+
navbar.style.background = "#eefff9"
12+
} else {
13+
navbar.style.background = "transparent"
14+
}
15+
16+
}

‎Project-42-Freelancer-Website-Application/style.css‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
8+
nav {
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
display: flex;
14+
align-items: center;
15+
justify-content: space-between;
16+
padding: 15px 10%;
17+
border-bottom: 1px solid #000;
18+
z-index: 10;
19+
}
20+
21+
nav ul li {
22+
display: inline-block;
23+
list-style: none;
24+
margin: 10px 20px;
25+
font-weight: 500;
26+
cursor: pointer;
27+
}
28+
29+
nav .logo {
30+
width: 220px;
31+
cursor: pointer;
32+
}
33+
34+
.nav-btn {
35+
background: #000;
36+
color: #fff;
37+
font-size: 16px;
38+
padding: 15px 25px;
39+
border: 0;
40+
outline: 0;
41+
border-radius: 40px;
42+
cursor: pointer;
43+
}
44+
45+
.nav-btn img {
46+
width: 16px;
47+
margin-left: 8px;
48+
}
49+
50+
.header {
51+
width: 100%;
52+
min-height: 100vh;
53+
background: linear-gradient(#eefff9 0%, #ffccc1 49%, #dcdbff 100%);
54+
padding: 0 10%;
55+
display: flex;
56+
justify-content: center;
57+
flex-direction: column;
58+
}
59+
60+
.header h1 {
61+
margin-top: 100px;
62+
font-size: 13vw;
63+
line-height: 11vw;
64+
}
65+
66+
.btn-container {
67+
margin: 20px 0;
68+
}
69+
70+
.header button {
71+
border: 0;
72+
outline: 0;
73+
display: inline-flex;
74+
align-items: center;
75+
font-size: 18px;
76+
margin-right: 20px;
77+
cursor: pointer;
78+
}
79+
80+
.btn-dark {
81+
background: #000;
82+
color: #fff;
83+
padding: 10px 10px 10px 30px;
84+
border-radius: 40px;
85+
}
86+
87+
.btn-dark img {
88+
width: 40px;
89+
background: #fff;
90+
border-radius: 50%;
91+
padding: 10px;
92+
margin-left: 30px;
93+
}
94+
95+
.btn-light {
96+
background: transparent;
97+
text-decoration: underline;
98+
}
99+
100+
.btn-light img {
101+
width: 20px;
102+
margin-left: 10px;
103+
}
104+
105+
.header p {
106+
max-width: 360px;
107+
font-weight: 500;
108+
}
109+
110+
.user-img {
111+
width: 80%;
112+
max-width: 480px;
113+
position: absolute;
114+
right: 13%;
115+
bottom: 0;
116+
}
117+
118+
/* ---------- animation ---------- */
119+
.header h1 span {
120+
background: linear-gradient(#000, #000);
121+
background-repeat: no-repeat;
122+
-webkit-text-fill-color: transparent;
123+
background-clip: text;
124+
background-size: 0%;
125+
}
126+
127+
.header h1 span:first-child {
128+
animation: textcolor1 2s linear infinite alternate;
129+
}
130+
131+
.header h1 span:last-child {
132+
animation: textcolor2 2s linear infinite alternate;
133+
}
134+
135+
@keyframes textcolor1 {
136+
0% {
137+
background-size: 0%;
138+
}
139+
140+
40% {
141+
background-size: 100%;
142+
}
143+
144+
100% {
145+
background-size: 100%;
146+
}
147+
}
148+
149+
@keyframes textcolor2 {
150+
0% {
151+
background-size: 0%;
152+
}
153+
154+
40% {
155+
background-size: 0%;
156+
}
157+
158+
100% {
159+
background-size: 100%;
160+
}
161+
}
162+
163+
.menu-icon {
164+
display: none;
165+
}
166+
167+
/* ---------- Media Queries for navbar ---------- */
168+
@media only screen and (max-width: 600px) {
169+
nav ul {
170+
position: absolute;
171+
width: 100%;
172+
background: #000;
173+
color: #fff;
174+
left: 0;
175+
top: 100%;
176+
text-align: center;
177+
max-height: 0;
178+
overflow: hidden;
179+
transition: max-height 0.5s;
180+
}
181+
182+
.nav-btn {
183+
display: none;
184+
}
185+
186+
nav .logo {
187+
width: 150px;
188+
}
189+
190+
nav ul li {
191+
margin: 10px;
192+
font-size: 14px;
193+
}
194+
195+
.menu-icon {
196+
display: block;
197+
width: 30px;
198+
}
199+
200+
.show-menu {
201+
max-height: 60px;
202+
}
203+
}
204+
205+
@media only screen and (max-width: 600px) {
206+
.header {
207+
min-height: auto;
208+
padding: 0;
209+
}
210+
211+
.user-img {
212+
width: 100%;
213+
right: auto;
214+
position: relative;
215+
margin-top: 100px;
216+
}
217+
218+
.header-content {
219+
position: absolute;
220+
bottom: 0;
221+
padding: 0 10%;
222+
z-index: 2;
223+
padding-bottom: 40px;
224+
background: linear-gradient(transparent, #fff);
225+
}
226+
227+
.btn-container {
228+
margin: 5px 0;
229+
}
230+
231+
.header button {
232+
font-size: 14px;
233+
margin-right: 10px;
234+
}
235+
236+
.btn-dark {
237+
padding: 7px 7px 7px 20px;
238+
margin-bottom: 10px;
239+
}
240+
241+
.btn-dark img {
242+
width: 30px;
243+
padding: 5px;
244+
margin-left: 15px;
245+
}
246+
247+
.btn-light img {
248+
width: 12px;
249+
margin-left: 5px;
250+
}
251+
252+
.header h1 {
253+
font-size: 70px;
254+
line-height: 60px;
255+
margin-bottom: 20px;
256+
}
257+
}

0 commit comments

Comments
 (0)