-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (133 loc) · 6.11 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website-Saiful Islam</title>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins&display=swap" rel="stylesheet">
<!-- Boxicon CSS-->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- Main CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Header Menu -->
<nav>
<div class="header-menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#work-inquiry">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Section 1 -->
<section class="section1">
<div class="section1-left">
<h1 class="section1-header">Hello, I am</h1>
<h1 class="colored-name">Saiful Islam</h1>
<p>It is the cusious case of becoming a<br>Front End Web Developer</p>
<button class="hire-me-button"> <a href="https://www.linkedin.com/in/akmsaifulislam/" target="_blank">Hire
Me</a></button>
</div>
<div class="section1-right">
<img src="images/pic-1-circular.png" alt="">
</div>
</section>
<!-- section 2 -->
<section class="section2" id="about">
<div class="section2-left">
<img src="images/pic-2-rectengle.png" alt="">
</div>
<div class="section2-right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, ab, explicabo. Autem, suscipit. Voluptas
aspernatur iure nihil minus expedita deserunt, tenetur modi architecto voluptate consequatur, molestias
unde sapiente explicabo magnam debitis ducimus ipsum illum maxime optio dolorem repudiandae, alias ipsa.
Explicabo eos sit et quam fuga, voluptatum tenetur, distinctio repudiandae!</p>
<button><a href="https://www.linkedin.com/in/akmsaifulislam/" target="_blank"><i class='bx bx-download'></i>
Download CV</a></button>
</div>
</section>
<!-- Bonus section 1 -->
<section class="educationsection" id="education">
<div class="educationcontentarea">
<h2>Educational Qualification</h2>
<div class="education-content">
<div class="bachelor">
<h4>Bachelor of Science</h4>
<img src="images/CUET.png" alt="">
<h5>Chittagong University of Engineering and Technology, Bangladesh</h5>
</div>
<div class="masters">
<h4>Master of Science</h4>
<img src="images/Brandenburgische_Technische_Universität_Cottbus-Senftenberg.png" alt="">
<h5>Brandenburg University of Technology, Germany</h5>
</div>
<div class="web-dev">
<h4>Front End Web Development</h4>
<img src="images/programming-hero.png" alt="">
<h5>Programming Hero</h5>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="section3" id="portfolio">
<h2><span>Latest</span> Working Project</h2>
<div class="projects">
<div class="project1">
<img src="images/image%204.png" alt="">
<h3>Power-x-gym (gym website)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus velit laborum voluptas, nobis omnis
quia.</p>
</div>
<div class="project2">
<img src="images/image%205.png" alt="">
<h3>Creative agency</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus velit laborum voluptas, nobis omnis
quia.</p>
</div>
<div class="project3">
<img src="images/image%208.png" alt="">
<h3>Hard Rock Music</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus velit laborum voluptas, nobis omnis
quia.</p>
</div>
</div>
</section>
<!-- section 4 -->
<section class="section4" id="work-inquiry">
<div class="section4-box">
<h1>Work Inquiry</h1>
<button><a href="https://m.me/rony.ronouk" target="_blank">Let's Chat</a></button>
</div>
</section>
<!-- section 5 -->
<section class="contactbox" id="contact">
<div class="section5-contact-box">
<h4>Stay Connected</h4>
<h2>[email protected]</h2>
<div class="icon-box">
<a href="https://dribbble.com/ronouk" target="_blank"><img class="dribble"
src="images/icons/image 6.png" alt=""></a>
<a href="https://www.behance.net/shubro427d55" target="_blank"><img class="behance"
src="images/icons/Group 33059.png" alt=""></a>
<a href="https://www.instagram.com/rony.ronouk/" target="_blank"><img class="instagram"
src="images/icons/image 7.png" alt=""></a>
</div>
</div>
</section>
<!-- Bonus section 2 -->
<footer>© Saiful Islam 2020 | All Right Reserved<br>
<a href="https://www.facebook.com/rony.ronouk/" target="_blank"><i class='bx bxl-facebook'></i></a>
<a href="https://www.linkedin.com/in/akmsaifulislam/" target="_blank"><i class='bx bxl-linkedin'></i></a>
<a href="https://github.com/ronouk" target="_blank"><i class='bx bxl-github'></i></a>
</i><a href="https://ronyronouk.com/" target="_blank"><i class='bx bxl-product-hunt'></i></a>
</footer>
</body>
</html>