Skip to content

Commit 0c9a71c

Browse files
author
abdul rafay
committed
conplete first project
1 parent 5dafc42 commit 0c9a71c

File tree

6 files changed

+374
-136
lines changed

6 files changed

+374
-136
lines changed

‎Frist project/index.html‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,46 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>First Project</title>
88
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
10+
911
</head>
1012

1113
<body>
1214

1315
<nav>
14-
<h2>Simple Counter App</h2>
16+
<div class="logo">My Projects</div>
17+
<ul class="nav-links">
18+
<li><a href="#">Home</a></li>
19+
<li><a href="#">About</a></li>
20+
<li><a href="#">Contact</a></li>
21+
<a href="https://github.com/abdul-rafaycodeder" id="icon"><i class="fa-brands fa-github"></i></a>
22+
<a href="https://www.facebook.com/profile.php?id=61577331821573" class="channel" id="icon"> <i
23+
class="fa-brands fa-square-facebook"></i></a>
24+
<a href="https://www.youtube.com/@abdulrafaycode" class="channel" id="icon"><i class="fa-brands fa-youtube">
25+
</i></a>
26+
<a href="https://www.youtube.com/@ReGrowthMindset" class="channel" id="icon"><i
27+
class="fa-brands fa-youtube"> </i></a>
28+
</ul>
1529
</nav>
1630

1731

32+
1833
<div id="container">
1934
<div class="number_container">
2035
<h1>0</h1>
2136
</div>
22-
<div class="button_container">
37+
<div class="button_container">
2338
<button id="increase" onclick="RunNumbers('increase')">Increase</button>
2439
<button id="reset" onclick="RunNumbers('reset')">Reset</button>
2540
<button id="decrease" onclick="RunNumbers('decrease')">Decrease</button>
2641
</div>
27-
<a href="../index.html" id="back"> < back</a>
28-
42+
<a href="../index.html" id="back">
43+
< back</a>
2944

3045

46+
3147

32-
<script src="index.js"></script>
48+
<script src="index.js"></script>
3349

3450
</body>
3551

‎Frist project/style.css‎

Lines changed: 168 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,182 @@
1-
2-
3-
body {
4-
background-color: #000000;
5-
6-
}
7-
8-
9-
nav {
10-
background-color: #ffffff;
11-
/* dark blue */
12-
height: 80px;
13-
display: flex;
14-
justify-content: center;
15-
align-items: center;
16-
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
17-
}
18-
19-
#container {
20-
border-radius: 25px;
21-
background-color: white;
22-
width: 50%;
23-
height: 500px;
24-
border: 2px solid black;
25-
margin: auto;
26-
margin-top: 290px;
27-
padding: 10px;
28-
box-shadow: 0px 0px 100px rgb(32, 128, 184);
29-
}
30-
31-
.number_container>h1 {
32-
font-size: 5em;
33-
color: rgb(0, 0, 0);
34-
text-align: center;
35-
margin-bottom: 20px;
36-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1+
nav {
2+
border-radius: 20px;
3+
background-color: #ffffff;
4+
height: 70px;
5+
display: flex;
6+
justify-content: space-around;
7+
align-items: center;
8+
}
9+
10+
.logo {
11+
font-size: 2em;
12+
font-weight: bold;
13+
color: #2563eb;
14+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15+
transition: all ease-in-out 0.5s;
16+
17+
}
18+
19+
.nav-links {
20+
font-size: 1.2em;
21+
list-style: none;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
gap: 40px;
26+
}
27+
28+
.nav-links>li>a {
29+
font-size: 5em;
30+
font-weight: 700;
31+
text-decoration: none;
32+
font-size: 1.2em;
33+
color: #000000;
34+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
35+
transition: all ease-in-out 0.5s;
36+
37+
}
38+
39+
#icon {
40+
font-size: 2em;
41+
color: #000000;
42+
cursor: pointer;
43+
transition: all ease-in-out 0.3s;
44+
}
45+
46+
/* hover effects */
47+
48+
#icon:hover {
49+
transform: scale(1.2);
3750
}
3851

39-
.button_container {
40-
41-
text-align: center;
42-
margin-bottom: 20px;
43-
margin-top: 300px;
52+
.nav-links>li>a:hover {
53+
color: #2563eb;
4454
}
4555

46-
#increase {
47-
margin-right: 20px;
48-
49-
padding: 10px 20px;
50-
font-size: 20px;
51-
font-weight: bold;
52-
border-radius: 8px;
53-
border: none;
54-
background-color: #70dd74;
55-
color: white;
56+
.logo:hover {
57+
color: #000000;
5658
cursor: pointer;
57-
transition: all ease-in-out 0.3s;
5859
}
5960

60-
#reset {
61-
margin-right: 20px;
62-
padding: 10px 20px;
63-
font-size: 20px;
64-
font-weight: bold;
65-
border-radius: 8px;
66-
border: none;
67-
background-color: #f06d6d;
68-
color: rgb(0, 0, 0);
69-
cursor: pointer;
70-
transition: all ease-in-out 0.3s;
7161

72-
}
7362

74-
#decrease {
75-
padding: 10px 20px;
76-
font-size: 20px;
77-
font-weight: bold;
78-
border-radius: 8px;
79-
border: none;
80-
background-color: #fbff7a;
81-
color: rgb(0, 0, 0);
82-
cursor: pointer;
83-
transition: all ease-in-out 0.3s;
63+
body {
64+
background-color: #000000;
8465

85-
}
66+
}
8667

87-
#back {
88-
margin-bottom: 10px;
89-
text-decoration: none;
90-
padding: 10px 20px;
91-
font-size: 20px;
92-
font-weight: bold;
93-
border-radius: 8px;
94-
border: none;
95-
background-color: #f06d6d;
96-
color: white;
97-
cursor: pointer;
98-
transition: all ease-in-out 0.3s;
99-
}
10068

101-
#increase:hover {
102-
background-color: #00ff0d;
103-
color: black;
104-
transform: translateY(-3px);
105-
opacity: 0.9;
106-
}
10769

108-
#reset:hover {
109-
background-color: #ff0000;
110-
color: black;
111-
transform: translateY(-3px);
112-
opacity: 0.9;
113-
}
11470

115-
#decrease:hover {
116-
background-color: #fffb00;
117-
color: black;
118-
transform: translateY(-3px);
119-
opacity: 0.9;
120-
}
121-
122-
#back:hover {
123-
background-color: #ff0000;
124-
color: black;
125-
transform: translateY(-3px);
126-
opacity: 0.9;
127-
}
71+
#container {
72+
border-radius: 25px;
73+
background-color: white;
74+
width: 50%;
75+
height: 500px;
76+
border: 2px solid black;
77+
margin: auto;
78+
margin-top: 200px;
79+
padding: 10px;
80+
box-shadow: 0px 0px 100px rgb(32, 128, 184);
81+
}
82+
83+
.number_container>h1 {
84+
font-size: 5em;
85+
color: rgb(0, 0, 0);
86+
text-align: center;
87+
margin-bottom: 20px;
88+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
89+
}
90+
91+
.button_container {
92+
93+
text-align: center;
94+
margin-bottom: 20px;
95+
margin-top: 250px;
96+
}
97+
98+
#increase {
99+
margin-right: 20px;
100+
101+
padding: 10px 20px;
102+
font-size: 20px;
103+
font-weight: bold;
104+
border-radius: 8px;
105+
border: none;
106+
background-color: #70dd74;
107+
color: white;
108+
cursor: pointer;
109+
transition: all ease-in-out 0.3s;
110+
}
111+
112+
#reset {
113+
margin-right: 20px;
114+
padding: 10px 20px;
115+
font-size: 20px;
116+
font-weight: bold;
117+
border-radius: 8px;
118+
border: none;
119+
background-color: #f06d6d;
120+
color: rgb(0, 0, 0);
121+
cursor: pointer;
122+
transition: all ease-in-out 0.3s;
123+
124+
}
125+
126+
#decrease {
127+
padding: 10px 20px;
128+
font-size: 20px;
129+
font-weight: bold;
130+
border-radius: 8px;
131+
border: none;
132+
background-color: #fbff7a;
133+
color: rgb(0, 0, 0);
134+
cursor: pointer;
135+
transition: all ease-in-out 0.3s;
136+
137+
}
138+
139+
#back {
140+
margin-bottom: 10px;
141+
text-decoration: none;
142+
padding: 10px 20px;
143+
font-size: 20px;
144+
font-weight: bold;
145+
border-radius: 8px;
146+
border: none;
147+
background-color: #f06d6d;
148+
color: white;
149+
cursor: pointer;
150+
transition: all ease-in-out 0.3s;
151+
}
152+
153+
#increase:hover {
154+
background-color: #00ff0d;
155+
color: black;
156+
transform: translateY(-3px);
157+
opacity: 0.9;
158+
}
159+
160+
#reset:hover {
161+
background-color: #ff0000;
162+
color: black;
163+
transform: translateY(-3px);
164+
opacity: 0.9;
165+
}
166+
167+
#decrease:hover {
168+
background-color: #fffb00;
169+
color: black;
170+
transform: translateY(-3px);
171+
opacity: 0.9;
172+
}
173+
174+
#back:hover {
175+
background-color: #ff0000;
176+
color: black;
177+
transform: translateY(-3px);
178+
opacity: 0.9;
179+
}
180+
181+
182+

‎Second project/index.html‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
7+
<title>Second Project</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
10+
711
</head>
12+
813
<body>
14+
15+
<!-- navbar -->
16+
<nav>
17+
<div class="logo">My Projects</div>
18+
<ul class="nav-links">
19+
<li><a href="#">Home</a></li>
20+
<li><a href="#">About</a></li>
21+
<li><a href="#">Contact</a></li>
22+
<a href="https://github.com/abdul-rafaycodeder" id="icon"><i class="fa-brands fa-github"></i></a>
23+
<a href="https://www.facebook.com/profile.php?id=61577331821573" class="channel" id="icon"> <i
24+
class="fa-brands fa-square-facebook"></i></a>
25+
<a href="https://www.youtube.com/@abdulrafaycode" class="channel" id="icon"><i class="fa-brands fa-youtube">
26+
</i></a>
27+
<a href="https://www.youtube.com/@ReGrowthMindset" class="channel" id="icon"><i
28+
class="fa-brands fa-youtube"> </i></a>
29+
</ul>
30+
</nav>
31+
32+
<!-- real project -->
33+
934

35+
36+
37+
38+
39+
<script src="index.js"></script>
1040
</body>
41+
1142
</html>

0 commit comments

Comments
 (0)