-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
143 lines (123 loc) · 6.08 KB
/
test.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
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmed Porfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="./css/fontawesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar fixed-top shadow navbar-expand-lg navbar-background py-3 py-lg-0 px-lg-5">
<a href="index.html" class="navbar-brand ml-lg-3">
<img src="./assets/images/logo.png" alt="Logo" class="img-fluid" width="100">
</a>
<button type="button" class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" data-toggle="collapse" data-target="#navbarCollapse" >
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon mid-bar"></span>
<span class="toggler-icon btm-bar"></span>
</button>
<div class="collapse navbar-collapse px-lg-3" id="navbarCollapse">
<div class="navbar-nav m-auto py-0">
<a href="#home" class="nav-item nav-link text-white active">Home</a>
<a href="#about" class="nav-item text-white nav-link">About</a>
<a href="#qualification" class="nav-item text-white nav-link">Quality</a>
<a href="#skill" class="nav-item text-white nav-link">Skill</a>
<a href="#service" class="nav-item text-white nav-link">Service</a>
<a href="#portfolio" class="nav-item text-white nav-link">Portfolio</a>
<a href="#testimonial" class="nav-item text-white nav-link">Review</a>
<a href="#blog" class="nav-item text-white nav-link">Blog</a>
<a href="#contact" class="nav-item text-white nav-link">Contact</a>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 2 - THE INTRO SECTION
/////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="home" class="intro-section">
<div class="container">
<div class="row align-items-center text-white flex-row-reverse">
<div class="col-md-6 intros text-end">
<div class="image-container">
<img src="./assets/images/ahmed.jpg" alt="video illustration" class="profile-img">
</div>
</div>
<!-- START THE CONTENT FOR THE INTRO -->
<div class="col-md-6 intros text-start">
<div class="intro-content">
<h3>Hello, It's Me</h3>
<h1>Ahmed Fathy</h1>
<h3>And I'm a <span>Computer Engineer</span></h3>
<p>
Lorem Ipsum is simply dummy text of the printing and software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="social-media">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-github' ></i></a>
<a href="#"><i class='bx bxl-instagram-alt'></i></a>
<a href="#"><i class='bx bxl-whatsapp' ></i></a>
</div>
<button type="button" class="btn">Download CV
<span><i class="fas fa-arrow-right"></i></span>
</button>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,176C96,192,192,224,288,208C384,192,480,128,576,133.3C672,139,768,213,864,202.7C960,192,1056,96,1152,74.7C1248,53,1344,107,1392,133.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</section>
<footer class="footer">
<!-- START THE SOCIAL MEDIA CONTENT -->
<div class="footer-sm" style="background-color: #212121;">
<div class="container">
<div class="row py-4 text-center text-white">
<div class="col-lg-5 col-md-6 mb-4 mb-md-0">
connect with me on social media
</div>
<div class="col-lg-7 col-md-6">
<a href="#"><i class="bx bxl-facebook"></i></a>
<a href="#"><i class="bx bxl-twitter"></i></a>
<a href="#"><i class="bx bxl-github"></i></a>
<a href="#"><i class="bx bxl-linkedin"></i></a>
<a href="#"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</div>
</div>
<!-- START THE COPYRIGHT INFO -->
<div class="footer-bottom pt-5 pb-5">
<div class="container">
<div class="row text-center text-white">
<div class="col-12">
<div class="footer-bottom__copyright">
© Copyright 2024 <a href="#">Ahmed Fathy</a> , All rights reserved.
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- JavaScript Libraries -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/typed/typed.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Contact Javascript File -->
<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>
<!-- Template Javascript -->
<script src="./js/index.js" charset="utf-8"></script>
</body>
</html>