Skip to content

Commit 50c5db6

Browse files
Toony-mahmoud-saadToony-mahmoud-saad
authored
Add files via upload
1 parent 45d4ac2 commit 50c5db6

File tree

7 files changed

+23798
-0
lines changed

7 files changed

+23798
-0
lines changed

‎Card.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* From Uiverse.io by Yaya12085 */
2+
button {
3+
background: transparent;
4+
position: relative;
5+
padding: 5px 15px;
6+
display: flex;
7+
align-items: center;
8+
font-size: 17px;
9+
font-weight: 600;
10+
text-decoration: none;
11+
cursor: pointer;
12+
border: 1px solid #0163E0;
13+
border-radius: 25px;
14+
outline: none;
15+
overflow: hidden;
16+
color: #0163E0;
17+
transition: color 0.3s 0.1s ease-out;
18+
text-align: center;
19+
}
20+
21+
button svg {
22+
fill: #0163E0;
23+
height: 25px;
24+
width: 25px;
25+
}
26+
27+
button span {
28+
margin: 10px;
29+
}
30+
31+
button::before {
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
right: 0;
36+
bottom: 0;
37+
margin: auto;
38+
content: '';
39+
border-radius: 50%;
40+
display: block;
41+
width: 20em;
42+
height: 20em;
43+
left: -5em;
44+
text-align: center;
45+
transition: box-shadow 0.5s ease-out;
46+
z-index: -1;
47+
}
48+
49+
button:hover {
50+
color: #fff;
51+
border: 1px solid #0163E0;
52+
}
53+
54+
button:hover svg {
55+
fill: currentColor;
56+
}
57+
58+
button:hover::before {
59+
box-shadow: inset 0 0 0 10em #0163E0;
60+
}
61+
62+
/* GitHub */
63+
64+

‎Card.html

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
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+
<link rel="stylesheet" href="bootstrap.css">
8+
<link rel="stylesheet" href="Card.css">
9+
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
11+
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
12+
crossorigin="anonymous" referrerpolicy="no-referrer" />
13+
14+
<link rel="shortcut icon" href="edited.jpg" type="image/x-icon">
15+
<title>Toony-Card</title>
16+
<style>
17+
.title {
18+
font-size: 20px;
19+
color: black;
20+
margin-top: 20px;
21+
font-family: sans-serif;
22+
font-style: italic;
23+
animation-name: toony1;
24+
animation-duration: 1.3s;
25+
animation-delay: 0.5s;
26+
transition: 0.6s;
27+
}
28+
29+
@keyframes toony1 {
30+
form {
31+
letter-spacing: 15px;
32+
color: #5e3535;
33+
}
34+
to {
35+
letter-spacing: 0px;
36+
color: black;
37+
}
38+
}
39+
40+
.container {
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
margin-top: 50px;
45+
margin-bottom: 40px;
46+
}
47+
48+
.card-footer {
49+
background-color: #f0f0f0;
50+
padding-bottom: 20px;
51+
}
52+
53+
.social {
54+
display: flex;
55+
justify-content: space-around;
56+
}
57+
58+
.Facebook {
59+
color: blue;
60+
font-size: larger;
61+
}
62+
63+
.GitHub {
64+
color: black;
65+
font-size: larger;
66+
}
67+
68+
.Instagram {
69+
color: #dd0fcbaa;
70+
font-size: larger;
71+
}
72+
73+
.youtube {
74+
color: red;
75+
font-size: larger;
76+
}
77+
78+
.linkedin {
79+
color: #0077b2;
80+
font-size: larger;
81+
}
82+
</style>
83+
</head>
84+
85+
<body>
86+
87+
<div class="title">
88+
<h1 class="text-center">Toony Card</h1>
89+
</div>
90+
91+
<div class="container">
92+
<div class="card w-70">
93+
<img src="edited.jpg" alt="fuckkk" class="card-img-top">
94+
<div class="card-body">
95+
<h5 class="card-title">Mahmoud Saad-Toony</h5>
96+
<p>
97+
I'm a Software Engineer and my implementation is 'WEB',
98+
I'm a student at <a href="http://fcih.helwan.edu.eg/" class="car-link" target="_blank">Faculty of Computers
99+
and Artificial Intelligence</a>
100+
,<a href="https://www.helwan.edu.eg/" target="_blank" class="card-link text-danger">Helwan University</a>
101+
<br>latest year <b>inshaa Allah</b>
102+
</p>
103+
</div>
104+
<div class="card-footer">
105+
<p class="text-muted">My Social...(follow to be friends)</p>
106+
107+
<div class="social">
108+
<!-- Facebook -->
109+
<a href="https://web.facebook.com/profile.php?id=61561142496982" class="Facebook" target="_blank"
110+
alt="No Internit"><i class="fa-brands fa-facebook"></i></a>
111+
112+
<!-- GitHub -->
113+
<a href="https://github.com/Toony-mahmoud-saad" class="GitHub" target="_blank" alt="No Internit"><i
114+
class="fa-brands fa-github"></i></a>
115+
116+
117+
<!-- Instagram -->
118+
<a href="https://www.instagram.com/t_o_o_n_y1/" class="Instagram" target="_blank" alt="No Internit"><i
119+
class="fa-brands fa-square-instagram"></i></a>
120+
121+
122+
<!-- youtube -->
123+
<a href="https://www.youtube.com/@t_o_o_n_y" class="youtube" target="_blank" alt="No Internit"><i
124+
class="fa-brands fa-youtube"></i></a>
125+
126+
127+
<!-- linkedin -->
128+
<a href="https://www.linkedin.com/in/mahmoud-saad-a2499b31b/" class="linkedin" target="_blank"
129+
alt="No Internit"><i class="fa-brands fa-linkedin"></i></a>
130+
131+
132+
</div>
133+
134+
135+
</div>
136+
</div>
137+
</div>
138+
139+
<script src="bootstrap.js"></script>
140+
<script src="jquery-3.7.1.js"></script>
141+
<script src="popper.min.js"></script>
142+
</body>
143+
144+
</html>

0 commit comments

Comments
 (0)