Skip to content

Commit c7c085b

Browse files
AbdallahHemdanAbdallahHemdan
committed
Adding social icons and edit the heading
1 parent 6d799b0 commit c7c085b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+46011
-57
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5502
3+
}

‎css/style.css

+80-24
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,12 @@
11
body {
22
background: #f0f0f0;
3-
font-family: "Indie Flower", cursive;
43
text-align: center;
54
}
65

76
#controls {
87
text-align: center;
98
}
109

11-
#controls button {
12-
cursor: pointer;
13-
outline: none;
14-
padding: 10px 20px;
15-
margin: 25px 2px;
16-
border: 0;
17-
border-radius: 9px;
18-
background: #001f1f;
19-
font: bold 14px;
20-
text-align: center;
21-
text-transform: uppercase;
22-
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
23-
color: #fff;
24-
}
25-
26-
#controls button:hover {
27-
background: #05b6ce;
28-
}
29-
3010
#game {
3111
position: relative;
3212
width: 325px;
@@ -58,7 +38,7 @@ body {
5838
}
5939

6040
#game span.number.light {
61-
background: darkred;
41+
background: rgb(141, 2, 2);
6242
}
6343

6444
#game span.number.dark {
@@ -80,6 +60,7 @@ hr {
8060

8161
.name-letters {
8262
margin: 20px 0;
63+
/* font-family: "Indie Flower", cursive; */
8364
font-size: 50px;
8465
}
8566

@@ -88,17 +69,17 @@ hr {
8869
font-weight: 800;
8970
mix-blend-mode: darken;
9071
opacity: 0.8;
91-
color: #8b0000;
72+
color: #c90505;
9273
letter-spacing: 2px;
9374
}
94-
75+
/*
9576
footer {
9677
margin: 0;
9778
font-size: 24px;
9879
font-weight: bold;
9980
text-align: center;
10081
color: black;
101-
}
82+
} */
10283

10384
footer a {
10485
color: rgb(194, 5, 5);
@@ -117,10 +98,12 @@ footer a {
11798
background-color: rgba(0, 0, 0, 0.8);
11899
z-index: 2;
119100
cursor: pointer;
101+
font-family: "Indie Flower", cursive;
120102
}
121103

122104
#text-1,
123105
#text-2 {
106+
font-family: "Indie Flower", cursive;
124107
position: absolute;
125108
top: 50%;
126109
left: 50%;
@@ -140,3 +123,76 @@ footer a {
140123
color: #8b0000;
141124
letter-spacing: 4px;
142125
}
126+
127+
.btn {
128+
display: inline-block;
129+
font-weight: 400;
130+
color: #212529;
131+
text-align: center;
132+
margin: 15px 0 0 0;
133+
min-width: 100px;
134+
vertical-align: middle;
135+
cursor: pointer;
136+
-webkit-user-select: none;
137+
-moz-user-select: none;
138+
-ms-user-select: none;
139+
user-select: none;
140+
background-color: transparent;
141+
border: 1px solid transparent;
142+
padding: 0.375rem 0.75rem;
143+
font-size: 1rem;
144+
line-height: 1.5;
145+
border-radius: 0.25rem;
146+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
147+
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
148+
}
149+
150+
.social-icons {
151+
position: relative;
152+
text-align: center;
153+
margin: 20px auto;
154+
}
155+
.social-icons a {
156+
display: inline-block;
157+
height: 3.5rem;
158+
width: 3.5rem;
159+
background-color: #495057;
160+
color: #fff !important;
161+
border-radius: 100%;
162+
text-align: center;
163+
font-size: 1.5rem;
164+
line-height: 3.5rem;
165+
margin-right: 1rem;
166+
}
167+
168+
.social-icons a:last-child {
169+
margin-right: 0;
170+
}
171+
172+
.social-icons a:hover {
173+
background-color: #df273a;
174+
}
175+
.btn-outline-primary {
176+
color: #df273a;
177+
border-color: #df273a;
178+
}
179+
.btn-outline-primary:hover {
180+
background-color: #df273a;
181+
color: #fff;
182+
border-color: #df273a;
183+
}
184+
185+
footer {
186+
margin: 20px 0;
187+
font-size: 24px;
188+
font-weight: bold;
189+
text-align: center;
190+
color: black;
191+
}
192+
193+
footer a {
194+
color: #df273a;
195+
font-family: Arial, Helvetica, sans-serif;
196+
font-weight: bold;
197+
text-decoration: none;
198+
}

‎index.html

+69-33
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,73 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Fifteen Puzzle Game 🎈🏆</title>
8-
<link rel="icon" href="img/favicon.png">
9-
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
10-
<link rel="stylesheet" href="css/style.css">
11-
</head>
12-
<body onload="startReadyOverLay()">
13-
<div id="overlay-1" onclick="endReadyOverLay()">
14-
<div id="text-1">Are you ready ? <br>Click to go🚴‍♂️</div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
10+
<title>Fifteen Puzzle Game 🎈🏆</title>
11+
<link rel="icon" href="img/favicon.png" />
12+
<link
13+
href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap"
14+
rel="stylesheet"
15+
/>
16+
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" />
17+
18+
<link rel="stylesheet" href="css/style.css" />
19+
</head>
20+
<body onload="startReadyOverLay()">
21+
<div id="overlay-1" onclick="endReadyOverLay()">
22+
<div id="text-1">Are you ready ? <br />Click to go🚴‍♂️</div>
23+
</div>
24+
<div class="container">
25+
<header>
26+
<h1 class="name-letters">
27+
🎈<span class="fifteen">Fifteen</span>Puzzle🏆
28+
</h1>
29+
<!-- <hr /> -->
30+
</header>
31+
<section>
32+
<div id="game"></div>
33+
<div id="controls">
34+
<div id="solve"></div>
35+
<button class="btn btn-outline-primary" id="shuffle">Reset</button>
1536
</div>
16-
</div>
17-
<div class="container">
18-
<header>
19-
<h1 class="name-letters"> <span class="fifteen">Fifteen</span> Puzzle <br>Game 💭💡🏆</h1>
20-
<hr />
21-
</header>
22-
<section>
23-
<div id="game"></div>
24-
<hr />
25-
<div id="controls">
26-
<div id="solve"></div>
27-
<button id="shuffle">Reset</button>
28-
</div>
29-
</section>
30-
<footer>Created by <a href="https://github.com/AbdallahHemdan" target="_blank">Abdallah Hemdan</a></footer>
31-
<div id="overlay-2" onclick="endCongratsOverLay()">
32-
<div id="text-2">Congrats 🎈🎉, You did it! click to replay</div>
33-
</div>
34-
<script src="js/app.js"></script>
35-
</div>
36-
</body>
37+
</section>
38+
<div class="social-icons">
39+
<a href="https://github.com/AbdallahHemdan" target="_black">
40+
<i title="Github" class="fab fa-github"></i>
41+
</a>
42+
<a
43+
href="https://www.linkedin.com/in/abdallah-a-hemdan-4a94a614a/"
44+
target="_black"
45+
>
46+
<i title="Linkedin" class="fab fa-linkedin-in"></i>
47+
</a>
48+
<a href="mailto:abdallah.ahmed.hemdan@gmail.com" target="_black">
49+
<i title="My mail" class="far fa-envelope"></i>
50+
</a>
51+
<a href="https://www.hackerrank.com/Hemdan" target="_black">
52+
<i title="HackerRank" class="fab fa-hackerrank"></i>
53+
</a>
54+
<a
55+
href="https://www.facebook.com/profile.php?id=100009270028400"
56+
target="_black"
57+
>
58+
<i title="FaceBook" class="fab fa-facebook-f"></i>
59+
</a>
60+
<a href="https://codeforces.com/profile/AbdallahHemdan" target="_black">
61+
<i title="CodeForces" class="fas fa-link"></i>
62+
</a>
63+
</div>
64+
<footer>
65+
CopyRight &copy;Abdallah Hemdan 2020.
66+
</footer>
67+
<div id="overlay-2" onclick="endCongratsOverLay()">
68+
<div id="text-2">Congrats 🎈🎉, You did it! click to replay</div>
69+
</div>
70+
<script src="js/app.js"></script>
71+
</div>
72+
</body>
3773
</html>

0 commit comments

Comments
 (0)