-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (172 loc) · 8.85 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
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assingment 01</title>
<link rel="shortcut icon" href="assets/Group.png" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
<nav id="nav">
<div>
<h3>Forhad.H</h3>
</div>
<div>
<button>Download Resume</button>
</div>
</nav>
<div class="hero">
<img src="assets/Group.png" alt="">
<h1>"In the near future, I hope to<br>become a Developer."</h1>
<p>Remember that becoming a developer is not just about writing code—it’s about solving real-world problems, creating user-friendly applications, and contributing to the tech community. Best of luck on your journey!</p>
<button><a href="#footer">Contact with me</a></button>
</div>
</header>
<main>
<!--Start Why Web Development?? -->
<section class="ww_development">
<div class="wwd-top">
<h1>Why Web Development??</h1>
<p>Whether you’re passionate about coding, creativity, or remote work opportunities,<br> web development offers a rewarding path!</p>
</div>
<div class="card">
<div class="card-information">
<h1>I will Do Coding and Change The World</h1>
<p>Remember, every line of code has the potential to make a difference! </p>
<button>Learn More</button>
</div>
<div>
<img src="assets/Layer_1.png" alt="">
</div>
</div>
<div class="card">
<div class="card-information">
<h1>I will help People by creating Modern Web System</h1>
<p>Every line of code you write has the potential to enhance someone’s experience or solve a real-world problem. Keep coding, and change the world! </p>
<button>Learn More</button>
</div>
<div>
<img src="assets/Layer_2.png" alt="">
</div>
</div>
<div class="card">
<div class="card-information">
<h1>I will Do Coding and Change The World</h1>
<p>Remember, every line of code has the potential to make a difference! </p>
<button>Learn More</button>
</div>
<div>
<img src="assets/Layer_3.png" alt="">
</div>
</div>
</section>
<!-- End Why Web Development?? -->
<!-- start My Inspiration -->
<section class="my-ispiration">
<div class="information">
<h1>My Inspiration</h1>
<p>I have some knowledge of HTML and CSS, but I don't try it. When I saw Jankar Mahbub talking about HTML and CSS, my mind focused on it. Finally, I enrolled Programming Hero Web development course and it's my first assignment. </p>
</div>
<div class="video">
<iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/DGHn2uOAVCE?si=M8OXaytmgBjFzJi8&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<!-- End My Inspiration -->
<!-- Start My target section -->
<section class="current-target">
<div>
<div class="current-information">
<h1>My Current Target</h1>
<p>My current target is to complete HTML and CSS in the best way and earn good marks in assignments. </p>
</div>
<div class="current-card-div" >
<div class="current-card" style="background-color: rgba(255, 76, 30, 0.05); box-shadow: 1px 0px 12px 0px #f7a3a3;">
<img src="assets/html.png" alt="html">
<h1>HTML</h1>
<p>HTML (HyperText Markup Language) is the standard markup language for documents displayed in web browsers. </p>
<a href="#blank">Learn More</a>
</div>
<div class="current-card" style="background-color: rgba(0, 76, 232, 0.05); box-shadow: 1px 0px 12px 0px #43a4ff;">
<img src="assets/css.png" alt="">
<h1>CSS</h1>
<p>CSS (Cascading Style Sheets) is a rule-based language where you define styles for specific elements on your web page.</p>
<a href="#blank">Learn More</a>
</div>
<div class="current-card" style="background-color: rgba(255, 223, 0, 0.05); box-shadow: 1px 0px 12px 0px #f8e803;">
<img src="assets/js.png" alt="">
<h1>JavaScript</h1>
<p>JavaScript is a scripting or programming language that allows you to implement complex features on web pages.</p>
<a href="#blank">Learn More</a>
</div>
</div>
</div>
<div class="next-target">
<div class="next-information">
<h1>My Next Target</h1>
<p>When HTML, CSS, and JavaScript are completed. Then I will start ReactJS, NodeJS,<br> and MongoDB with Programming Hero.</p>
</div>
<div class="next-target-div">
<div class="next-card">
<div class="image">
<img src="assets/react.png" alt="ReactJS">
</div>
<div>
<h1>ReactJS</h1>
<p>React is a JavaScript library for building user interfaces (UIs) on the web. It follows a declarative, component-based approach, allowing developers to create reusable UI components.</p>
<a href="#blank">Learn More</a>
</div>
</div>
<div class="next-card">
<div class="image">
<img src="assets/nodejs.png" alt="nodejs">
</div>
<div>
<h1>NodeJS</h1>
<p>Node.js is an open-source and cross-platform JavaScript runtime environment. It runs the V8 JavaScript engine (the core of Google Chrome) outside of the browser, allowing it to be very performant1.
</p>
<a href="#blank">Learn More</a>
</div>
</div>
<div class="next-card">
<div class="image">
<img src="assets/mongodb.png" alt="MongoDB">
</div>
<div>
<h1>MongoDB</h1>
<p>MongoDB is a powerful and flexible NoSQL database that caters to the needs of modern applications requiring scalable, high-performance data management.</p>
<a href="#blank">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- End My target section -->
<!--Start Support section -->
<section class="support-sections">
<div class="support-padding">
<div class="support-sections-div1">
<h1>I need Support</h1>
<p>Is there any mistake in suggesting me below the box?<br>Thanks for recommending me.</p>
</div>
<div class="support-sections-div2">
<input type="text" name="" id="" placeholder="Suggest me any feedback for me">
<button>Submit</button>
</div>
</div>
</section>
<!--End Support section -->
</main>
<footer id="footer">
<div>
<p>An Open Commitment by Forhad Hossan</p>
</div>
<div>
<img src="assets/facebook.png" alt="">
<img class="margin-img" src="assets/github.png" alt="">
<img src="assets/linkedin-icon 1.png" alt="">
</div>
</footer>
</body>
</html>