-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (119 loc) · 8.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="front-end developer">
<meta name="keywords" content="HTML, CSS, JavaScript , front-end , web developer">
<meta name="author" content="Ali hassan">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALi Hassan Portfolio</title>
<link rel="shortcut icon" href="./imges/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./css/all.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="bg-secondary-subtle ">
<nav class="navbar navbar-expand-lg bg-body-tertiary align-items-center shadow-3d fixed-top ">
<div class="container">
<a class="navbar-brand d-flex justify-content-start p-0 m-0 text-main" href="index.html">
<h1 class="h4 m-0 px-2 align-self-center">ALi hassan</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center align-items-center" id="navbarNav">
<ul class=" navbar-nav nav nav-pills align-items-center " id="pills-tab" role="tablist">
<li class="px-3 nav-item" role="presentation">
<button class="text-main nav-link active " id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="px-3 nav-item" role="presentation">
<button class="text-main nav-link " id="portfolio-tab" data-bs-toggle="pill" data-bs-target="#portfolio" type="button" role="tab" aria-controls="portfolio" aria-selected="false">portfolio</button>
</li>
<li class="px-3 nav-item" role="presentation">
<button class="text-main nav-link " id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
</div>
<a href="index.html" class="d-none d-lg-block">
<img src="./imges/icon.png" class=" hover img-width rounded-circle bg-secondary " alt="ali">
</a>
</div>
</nav>
<main class="tab-content vh-100 " id="pills-tabContent">
<section class=" pt-1 tab-pane fade show active " id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="container ">
<div class="row row-cols-lg-2 row-cols-1 position-relative vh-100 ">
<div id="main-text" class="pt-5 text text-black d-flex justify-content-center flex-column text-capitalize text-lg-start text-center ">
<p class="h5">welcome to my portfolio</p>
<h2 class="h1 text-uppercase display-2 fw-bold text-main">i'am ali hassan </h2>
<div class="animation"> <p class="typing d-inline-block">junior <span class="text-main fw-bold">front-end</span></p> <p class="after d-inline-block z-1 bg-secondary-subtle">avaliable for internship </p></div>
<a href="./Ali resume.pdf" download class=" cv btn bg-main px-3 py-2 me-auto shadow-3d"> download my CV </a>
<div class="social my-3 d-flex ">
<a class=" text-white text-decoration-none" target="_blank" href="https://www.facebook.com/3LI7ASSAN1/">
<div class="icon bg-main d-flex justify-content-center align-items-center rounded-2 shadow-3d me-2 ">
<i class="fa-brands fa-xl icon-link fa-facebook-f"></i>
</div>
</a>
<a class=" pe-1 text-white text-decoration-none" target="_blank" href="https://www.linkedin.com/in/ali-hassan-gad">
<div class="icon bg-main d-flex justify-content-center align-items-center rounded-2 shadow-3d mx-2 ">
<i class="fa-brands fa-xl icon-link fa-linkedin-in"></i>
</div>
</a>
<a class="text-white text-decoration-none" target="_blank" href="https://github.com/alihgad/">
<div class="icon bg-main d-flex justify-content-center align-items-center rounded-2 shadow-3d mx-2 ">
<i class="fa-brands fa-xl icon-link fa-github "></i>
</div>
</a>
</div>
</div>
<div class="img position-absolute end-0 " id="img">
<img src="./imges/ALi.png" class="mw-100" alt="ali">
</div>
</div>
</div>
</section>
<section class="pt-5 mt-5 tab-pane fade text-main" id="portfolio" role="tabpanel" aria-labelledby="portfolio-tab" tabindex="0">
<div class="container">
<h1 class="text-center text-capitalize">my previous projects</h1>
<hr>
<div class="react">
<h3 class="pb-4">React projects</h3>
<!-- <hr> -->
<div id="react" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-4 pb-5">
</div>
<hr>
<h3 class="pb-4">Native projects</h3>
<!-- <hr> -->
</div>
<div id="projects" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-4 pb-5">
</div>
</div>
</section>
<section class=" pt-1 pt-5 tab-pane fade " id="contact" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
<div class="container">
<div class="row row-cols-1 row-cols-lg-2">
<div class="col d-flex align-items-center justify-content-center text-center">
<div class="text py-5">
<h4 class="text-center text-capitalize fs-1 mx-auto">contact me</h4>
<ul class="list-unstyled text ">
<li class="text-start" > phone : <a target="_blank" class="text-decoration-none text-main" href="callto:+201127344298">+201127344298</a></li>
<li class="text-start" > Email : <a target="_blank" class="text-decoration-none text-main" href="mailto:alihgad2@gmail.com">alihgad2@gmail.com</a></li>
<li class="text-start" > whatsapp : <a target="_blank" class="text-decoration-none text-main" href="https://wa.link/jyahz0">+201127344298</a></li>
</ul>
<div class="hire">
<a target="_blank" href="https://mostaql.com/u/Alihgad2" class="text-capitalize cv d-block mb-3 btn bg-main px-5 py-2 me-auto shadow-3d">mostaql</a>
<a target="_blank" href="https://www.upwork.com/freelancers/~017f3c2d70d9815284" class="text-capitalize cv d-block btn bg-main px-5 py-2 me-auto shadow-3d">up work</a>
</div>
</div>
</div>
<div class="col">
<img src="./imges/contact.png" alt="illustraitor" class="p-5 w-100">
</div>
</div>
</div>
</section>
</main>
<script src="./js/bootstrap.bundle.min.js" ></script>
<script src="./js/index.js" ></script>
</body>
</html>