-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (148 loc) · 7.01 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
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usama Arain Portfolio</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- *************************Navbar************************* -->
<header class="header">
<a href="#" class="logo">Arain</a>
<i class='bx bx-menu' id="menu" style='color:#ffffff'></i>
<nav class="navbar">
<a href="#home" style="--vlr:1" class="active">Home</a>
<a href="#about" style="--vlr:2">About Me</a>
<a href="#education" style="--vlr:3">Education</a>
<a href="#skills" style="--vlr:4">Skills</a>
<a href="#contact" style="--vlr:5">Contact Me</a>
</nav>
</header>
<!-- *************************Home Section************************* -->
<section class="home" id="home">
<div class="text-content">
<h1>I'm USama Arain</h1>
<div class="text-animation">
<h2>Frontend Developer</h2>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, <br>illum! Libero cupiditate sunt officiis
laudantium inventore vero, <br> praesentium iure accusantium <br> asperiores nobis architecto qui maiores, debitis
at, eaque vel! Officiis, <br> vel reprehenderit dicta cumque doloremque qui.</p>
<div class="btn-section">
<button class="btn">Hire me</button>
<button class="btn">Let's Talk</button>
</div>
<div class="social-media">
<i class='bx bxl-twitter' style="--vlr:7"></i>
<i class='bx bxl-facebook' style="--vlr:8"></i>
<i class='bx bxl-youtube' style="--vlr:9"></i>
</div>
</div>
<img src="./MdSay.png" alt="">
</section>
<!-- *************************About Section************************* -->
<section class="about" id="about">
<h2 class="title">About <span>Me</span></h2>
<img src="./MdSay.png" alt="" class="aboutImg">
<div class="text-content2">
<h2>Frontend Developer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste asperiores molestiae nemo ipsam porro nam
nesciunt repudiandae voluptates blanditiis soluta eum, tempora explicabo optio corrupti ullam quidem
magnam quaerat qui dolorem architecto in dignissimos! Nostrum fugit, modi sed fugiat possimus maxime
voluptates ea molestiae animi, nesciunt inventore libero hic. Consectetur praesentium facere aut
perspiciatis voluptate. Nam sunt perspiciatis quasi rem.</p>
<button class="btn">Read More</button>
</div>
</section>
<!-- *************************Education Section************************* -->
<section class="education" id="education">
<h2 class="title">My <span>Education</span></h2>
<h2>Education</h2>
<div class="box">
<div class="education-content">
<div class="content">
<div class="year">2021-22<i class='bx bxs-calendar'></i></div>
<h3>Degree College</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium tenetur enim,
deserunt libero quisquam ab eius minus odio quod dicta!</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">2021-22 <i class='bx bxs-calendar'></i></div>
<h3>Degree College</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium tenetur enim,
deserunt libero quisquam ab eius minus odio quod dicta!</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">2021-22 <i class='bx bxs-calendar'></i></div>
<h3>Degree College</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium tenetur enim,
deserunt libero quisquam ab eius minus odio quod dicta!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- *************************Skills Section************************* -->
<section class="skills" id="skills">
<h2 class="title">My <span>Skills</span></h2>
<div class="wrapper">
<div class="skill-content">
<h3 class="skill-title">Language</h3>
<div class="skill-box skill-box1">
<div class="single-skill">
<span class="topic">HTML</span>
<span class="topic">90%</span>
</div>
<div class="bar-side">
<div class="bar bar-1"></div>
</div>
<div class="single-skill">
<span class="topic">CSS</span>
<span class="topic">80%</span>
</div>
<div class="bar-side">
<div class="bar bar-2"></div>
</div>
<div class="single-skill">
<span class="topic">JavaScript</span>
<span class="topic">70%</span>
</div>
<div class="bar-side">
<div class="bar bar-3"></div>
</div>
</div>
</div>
</div>
</section>
<!-- *************************Contact Section************************* -->
<section class="contact" id="contact">
<h2 class="title">Contact<span>Me</span></h2>
<form action="#" id="">
<div class="input-box">
<input type="text" required placeholder="Full Name">
<input type="email" required placeholder="Email">
</div>
<div class="input-box">
<input type="tel" required placeholder="Mobile Number">
<input type="email" required placeholder="Subject For">
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Message" required></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
</section>
<footer>
<div class="text">
<p>Copyright @ 2024 by Usama Arain</p>
</div>
<a href="#"> <i class='bx bx-up-arrow-alt'></i></a>
</footer>
<script src="app.js"></script>
</body>
</html>