-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (120 loc) · 6.67 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
<!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>Mohammad Ali | Graphic & Web Designer</title>
<link rel="icon" href="Image/bracket.png">
<link rel="stylesheet" href="Style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<!-- Head Section Ended -->
<body>
<div id="navbar">
<ul class="nav">
<li><a href="#contact" onclick="alert('It is under Construction. Try again later for better experience')">Contact</a></li>
<li><a href="#portfolio" onclick="alert('It is under Construction. Try again later for better experience')">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div> <br>
<section id="home">
<h1 class="hi-there">Hi There,</h1>
<h1 class="i-am-a"><p style="color: white;">I am a </p> Web Designer</h1>
<p class="text">I am not an expert in Web Designing. I have a little bit knowledge about it. I Designed this website as one of my practice project. So, Please don't forget to give feedback.</p>
<p class="find">Find me here -</p>
<a href="https://www.facebook.com/itsproali" target="blank"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/itsproali" target="blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/itsproali" target="blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/itsproali" target="blank"><i class="fab fa-twitter"></i></a>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<h1>Mohammad Ali</h1>
<p><b>Lorem Ipsum</b> is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was not popularized in the 1960s with the release of Laterest sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions
of Lorem Ipsum.</p>
<a href="#" target="blank">Download CV</a>
<img src="Image/Mohammad-Ali-in-Dharmik-para.png" alt="Photo of Mohammad Ali" title="This is me Mohammad Ali"/>
</section>
<!-- Portfolio Section -->
<section id="portfolio">
<h2 title="HTML most used tags are below">HTML most used tags</h2><br>
<div class="bold">
<h3 title="Every Text are bold below"><b>Bold Text</b></h3>
<b title="These text are bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quidem delectus cumque, repellat porro fugit veniam, eaque deserunt totam facere suscipit soluta ut earum provident quibusdam minima unde voluptas. Excepturi.</b><br><hr>
</div>
<div class="italic">
<h3 title="Every Text are italic below"><b><i>Italic Text</i></b></h3>
<i title="These text are italic">This is an italic Text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, commodi dignissimos! <br>
Nobis dolore veritatis quibusdam veniam iure tempora. Dolor neque nostrum corporis maxime eveniet, <br>
nulla laboriosam voluptates velit iste dolorum!</i><br><hr>
</div>
<div class="underline">
<h3 title="Every Text are underline below"><u><b>Underline Text.</b></u></h3><br>
<u title="These text are underline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores beatae iusto esse alias amet sunt animi<br>
impedit odit dolor accusantium distinctio, sint, totam sit nesciunt numquam cupiditate ad necessitatibus qui.</u><br><hr>
</div>
<div class="mixed">
<h3 title="Every text are mixed below"><b><i><u>Mixed tags</u></i></b></h3> <br>
<b title="These text are bold, italic and underline"><u><i>This is an italic, underline, bold Text. Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Explicabo facilis impedit pariatur, blanditiis non dolorem! Quasi consequuntur ipsam ipsa facilis <br>
nemo aliquid, expedita, obcaecati tempore illo, veritatis nihil ea quia. This is called everything is mixed.</i></u></b> <br><hr>
</div>
<div class="sup">
<h3>Use of "Sup" and "Sub" tag</h3>
<p>We know a most common theory in mathematics is <b>"(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>"</b></p>
<b>"H<sub>2</sub>O"</b> This is the symbol of water. <br>
<b>"X<sup>2</sup>"</b> This is the symbol of I don't know.<br><hr>
</div>
<div class="pre-formated">
<h3 title="Every text are pre formated below">Use of "Pre" Tag</h3>
<pre title="These text are pre formated">
আমার সোনার বাংলা
আমি তোমায় ভালোবাসি,
জন্ম দিয়েছ তুমি মাগো
তাই তোমায় ভালোবাসি।</pre><hr>
<pre><del> ভুলে লেইখ্যা ফেলছি</del> I used "del" tag here</pre><br>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact">
<div>
<div class="heading">
<h2>Contact Me</h2>
</div>
<div class="facebook">
<a href="https://www.facebook.com/itsproali" target="blank" title="Mohammad Ali"><img src="Image/Facebook-logo.png"
alt="Facebook Logo" style="width: 50px;"></a>
</div>
<div class="instagram">
<a href="https://www.instagram.com/itsproali" target="balnk" title="Mohammad Ali"><img src="Image/instagram-logo.png"
alt="Instagram Logo" style="width: 50px;" ></a>
</div>
<div class="twitter">
<a href="https://twitter.com/itsproali" target="blank" title="Mohammad Ali"><img src="Image/Twitter-logo.png"
alt="Twitter Logo" style="width: 50px;"></a>
</div>
<div class="e-mail">
<a href="mailto:itsproali@gmail.com" target="blank" title="E-mail to Mohammad Ali"><img src="Image/E-mail.png" alt="E-mail" style="width: 50px;"></a>
</div>
<div class="website">
<a href="https://mdaligd.blogspot.com/" target="blank" title="Bokkor Chokkor Website"><img src="Image/Blogger-logo.png" style="width: 50px;" alt="Blogger logo" title="Website of Mohamamad Ali"></a><br><br>
</div>
</div>
<div id="arrow">
<a href="#home"><img src="Image/up-arrow.png" style="width: 30px;" title="Click here to go to top" ></a><br>
</div>
</section>
<!-- Footer Section -->
<section id="footer">
<p>Copyright © 2021 Mohammad Ali | Designed by Mohammad Ali</p>
</section>
</body>
</html>