-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (131 loc) · 6.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shohel Personal Portfolio</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="Wrapping_area">
<!-- top area start -->
<section id="top_area">
<!-- top nav bar start -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">skill</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- top nav bar end -->
<!-- header area -->
<section class="row">
<!-- left half width side -->
<div class="column div_height" style="width: 50%">
<h1>Hello, I'M</h1>
<h1><span class="name_highlight">Shohel Rana</span></h1>
<p>A Full Stack Web Developer & Learn Hunter</p>
<a class="link_button" target="_blank" href="#">Hire Me</a>
</div>
<!-- right half width side -->
<div class="column div_height" style="width: 50%">
<img class="shape_portfolio" src="./image/shape01.png" alt="" width="400px">
</div>
</section>
<!-- header area end -->
</section>
<!-- top area end -->
<!-- About section start -->
<section class="row">
<div class="column div_height" style="width: 50%">
<img src="./image/shape05.png" alt="">
</div>
<div class="column div_height" style="width: 50%">
<h1>ABOUT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dicta ad ab molestias. Repellendus voluptas odit quae mollitia maxime tenetur commodi eveniet sapiente ex, illo, nisi, laboriosam ab esse voluptates numquam non temporibus magni natus labore! Numquam quas assumenda perspiciatis, consequuntur magni, ipsa commodi recusandae eum tenetur officiis ab. Animi?</p>
<a class="link_button" target="_blank" href="#">download cv </a>
</div>
</section>
<!-- About section End -->
<!-- Working Section start -->
<section id="working_area">
<h1 class="text_center">Latest Working Project</h1>
<div class="row">
<div class="column box" style="width: 33.333%">
<img class="project_img" src="./image/gym_workout.jpg" alt="">
<h2>Gym Website</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quam ab eligendi reiciendis repudiandae.</p>
</div>
<div class="column box" style="width: 33.333%">
<img class="project_img" src="./image/travel_agency.jpg" alt="">
<h2>Travel Agency Website</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque aspernatur modi ex molestias. Voluptatem?</p>
</div>
<div class="column box" style="width: 33.333%">
<img class="project_img" src="./image/music_website.jpg" alt="">
<h2>Music Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ipsam facilis culpa aliquam ut?</p>
</div>
</section>
<div class="row working_area">
<img class="working_img" src="./image/working_img.png" alt="">
<h1 class="working_text">Work Inquiry</h1>
<a class="link_button working_link" target="_blank" href="#">Let's Chat</a>
</div>
<!-- Working Section End -->
<!-- Skill Section start -->
<h1 id="skill_heading_center">Skill Section</h1>
<table cellspacing="20">
<tr>
<td>HTML(5)</td>
<td class="skyColor">*****</td>
<td>MVC Pattern</td>
<td class="skyColor">*****</td>
</tr>
<tr>
<td>CSS(3)</td>
<td class="skyColor">*****</td>
<td>Method Facory Pattern</td>
<td class="skyColor">*****</td>
</tr>
<tr>
<td>Javascript Language</td>
<td class="skyColor">*****</td>
<td>Object Orientated Programming</td>
<td class="skyColor">*****</td>
</tr>
<tr>
<td>Bootstrap Framework</td>
<td class="skyColor">*****</td>
<td>MVC Pattern</td>
<td class="skyColor">*****</td>
</tr>
<tr>
<td>React JS</td>
<td class="skyColor">*****</td>
<td>MVC Pattern</td>
<td class="skyColor">*****</td>
</tr>
<tr>
<td>PHP</td>
<td class="skyColor">*****</td>
<td>MVC Pattern</td>
<td class="skyColor">*****</td>
</tr>
</table>
<!-- Skill Section end -->
<!-- Footer section start -->
<footer>
<h3 class="footer_text">Copy right © All Right Reserve</h3>
<div id="socialiconsbox">
<a class="facebook socialicons" href="https://www.facebook.com" title="Facebook " target="_blank">Facebook</a>
<a class="twitter socialicons" href="https://twitter.com" title="Twitter " target="_blank">Twitter</a>
<a class="googleplus socialicons" href="https://plus.google.com" title="Google+" target="_blank">Google+</a>
<a class="linkedin socialicons" href="https://linkedin.com" title="Linkedin" target="_blank">Linkedin</a>
</div>
</footer>
<!-- Footer section end -->
</body>
</html>