-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTASK1.html
203 lines (185 loc) · 7.47 KB
/
TASK1.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Let's Grow More Single Page Website Task </title>
<link rel="stylesheet" href="TASK1.css">
<!-- CSS Linking -->
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Btn Section -->
<div class="scroll-btn">
<a href="#home"><i class="fas fa-arrow-up"></i></a>
</div>
<!-- Naviagte Section-->
<nav>
<div class="navbar">
<div class="logo"><a href="#">Web Classes</a></div><br>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About </a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact </a></li>
<div class="cancel-btn">
<i class="fas fa-times"></i>
</div>
</ul>
</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- Home Section-->
<section class="home" id="home">
<div class="home-content">
<div class="text">
<br>
<div class="text">Welcome</div>
<div class="texts"> This is Eldeen</div>
<div class="textss"> Web Developer</div>
<div class="textsss">Nevada (U.S.A)</div>
</div>
</div>
</section>
<!-- About Section-->
<section class="about" id="about">
<div class="content">
<div class="title"><span>About </span></div>
<div class="about-details">
<div class="left">
<iframe width="400" height="315" src="https://www.youtube.com/embed/QhV6RrYuvvQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="right section">
<div class="topic"> Love Web Development</div>
<p>In short, web developers build and maintain websites. Web developers often work for clients who are trying to get their product or service onto the web. The work is typically very project focused and involves collaborating with a team that helps to coordinate the client's needs into the end product.A web developer is at heart an interactive artist. They're someone driven by a deep desire to create things. A web developer's canvas is a user's web browser.Web programming, also known as web development, is the creation of dynamic web applications. Examples of web applications are social networking sites like.The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Skill Section-->
<section class="skills" id="skills">
<div class="content">
<div class="title"><span> Skills</span></div>
<div class="skills-details">
<div class="text">
<div class="topic">The best way to sharpen your skills is to use them</div>
<p>Whether you're just getting started with Web development, or are just expanding your horizons into new realms of Web awesomeness, the links here should help you get started.
For another (overlapping) set of links to learning resources, see the MDN Learning pages.</p>
<br>
</div>
</div>
<div class="left">
<img src=""id="image">
</div>
<br>
<div class="boxes">
<div class="box">
<div class="topic">HTML,CSS</div>
</div>
<div class="box">
<div class="topic">JavaScript,ReactJS</div>
</div>
<div class="box">
<div class="topic">Python,Java</div>
</div>
<div class="box">
<div class="topic">SQL,PHP</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="content">
<div class="title"><span> Services</span></div>
<div class="boxes">
<div class="box">
<div class="icon">
<i class="fas fa-desktop"></i>
</div>
<div class="topic">Front-end developer</div>
<p>If you would like to get started as a front-end web developer, you are going to LOVE this course! </p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="topic">Full-stack engineer</div>
<p>A full stack developer is an engineer who can handle all the work of databases, servers.</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="topic">Back-end developer</div>
<p>A backend developer is one who makes use of the technology required to develop the products for the backend of any website.</p>
</div>
<div class="box">
<div class="icon">
<i class="fab fa-android"></i>
</div>
<div class="topic">Icon Designing</div>
<p>Icon design is the process of designing a graphic symbol that represents some real, fantasy or abstract motive, entity or action.</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-camera-retro"></i>
</div>
<div class="topic">Senior Web Developer</div>
<p>Senior web developers design, build, and optimize websites and other online applications</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-tablet-alt"></i>
</div>
<div class="topic">Free Lancer</div>
<p>A freelancer is an independent laborer who earns wages on a per-job or per-task basis</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="content">
<div class="title"><span>Contact </span></div>
<div class="text">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6402236.224204002!2d-121.51361300184796!3d38.41624087926714!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80990aa1f8deb471%3A0xcf47038aaafc95b3!2sNevada%2C%20USA!5e0!3m2!1sen!2sin!4v1630688401244!5m2!1sen!2sin" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<style>
iframe{
border-radius: 25px;
}
</style>
</div>
</div>
</div>
</section>
<!-- Footer Section-->
<section class="contacts"id="contacts">
<div class="form">
<input class="form-input"type="text"name="name"id="name"placeholder="Enter Your Name">
<input class="form-input"type="number"name="phone"id="phone"placeholder="Enter Your Phone">
<input class="form-input"type="email"name="email"id="email"pattern="[^ @]*@[^ @]*"placeholder="Enter Your email">
<textarea name="text"id="text"cols="50"rows="20"placeholder="Any Message"></textarea>
<button onclick="fn1()"id="btn1">Submit</button>
</div>
<style>
#btn1{
border-radius: 15px;
font-size:large;
color:black;}
</style>
</section>
<footer>
<div class="text">
<span>Founder : <a href="#">Mr. Nikhil Maurya</a> <br> 2021 , All Rights Reserved</span><br>
<h4 style="color:white;">www.webclasses.com</h4>
</div>
</footer>
<script src="TASK1.js"></script>
</body>
</html>