Skip to content

Commit 1f312fe

Browse files
codewelltechcodewelltech
authored
added correct files
1 parent 3408fe3 commit 1f312fe

File tree

2 files changed

+541
-0
lines changed

2 files changed

+541
-0
lines changed

‎index.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Website using HTML CSS</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
<body>
11+
<header class="header">
12+
<nav class="navigation">
13+
<div class="logo">CodeWellTech</div>
14+
<ul class="menu">
15+
<li><a href="#home">Home</a></li>
16+
<li><a href="#courses">Courses</a></li>
17+
<li><a href="#services">Services</a></li>
18+
<li><a href="#about">About</a></li>
19+
<li><a href="#contact">Contact</a></li>
20+
</ul>
21+
<div class="search">
22+
<input type="text" placeholder="Search" />
23+
<button class="btn btn-search">Search</button>
24+
</div>
25+
</nav>
26+
</header>
27+
<main>
28+
<div id="home"">
29+
30+
</div>
31+
<div class="container">
32+
<div class="left">
33+
<div class="box">
34+
<div class="txt-medium">Learn</div>
35+
<div class="txt-bigger" style="color: #24ed1e">Web & API</div>
36+
<div class="txt-bigger">Development</div>
37+
<hr />
38+
<div>
39+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit
40+
nihil recusandae odio libero ex optio. Impedit veniam mollitia
41+
delectus ab amet. Vero accusantium debitis repudiandae rerum
42+
praesentium excepturi animi nihil.
43+
</div>
44+
</div>
45+
</div>
46+
<div class="right">
47+
<div class="box">
48+
<form class="form-login">
49+
<div>
50+
<input
51+
type="text"
52+
placeholder="User Name"
53+
required
54+
minlength="4"
55+
/>
56+
</div>
57+
<div>
58+
<input type="password" placeholder="Password" required />
59+
</div>
60+
<div>
61+
<button class="btn btn-login">Login</button>
62+
</div>
63+
</form>
64+
<div>Don't have an account ?</div>
65+
<div>
66+
<a href="#signup">Sign up</a> now
67+
<div class="mt-10">Login with</div>
68+
</div>
69+
<div class="social-media">
70+
<img src="images/fb.png" alt="Facebook" />
71+
<img src="images/insta.svg" alt="Instagram" />
72+
<img src="images/twitter.svg" alt="Twitter" />
73+
<img src="images/google.svg" alt="Google" />
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
<div class="bg-select">
79+
<div onclick="changeBgImage('default')" class="bg-option bg-gray"></div>
80+
<div
81+
onclick="changeBgImage('green1')"
82+
class="bg-option bg-green1"
83+
></div>
84+
<div
85+
onclick="changeBgImage('green2')"
86+
class="bg-option bg-green2"
87+
></div>
88+
</div>
89+
<section class="pages">
90+
<section class="page" id="signup">
91+
<div class="left-page">
92+
<div class="square-big-top">
93+
</div>
94+
<div class="square-big-top-2">
95+
</div>
96+
<div class="square-big-bottom">
97+
</div>
98+
<div class="info-container">
99+
<div class="txt-container">
100+
<h1>Create Account</h1>
101+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis error omnis corporis. Maxime ex necessitatibus adipisci voluptas obcaecati aperiam ea accusamus doloribus doloremque aliquam. Quis adipisci deleniti amet animi quisquam.</p>
102+
</div>
103+
<div class="img-container">
104+
<img src="images/lp.jpg" alt="">
105+
</div>
106+
</div>
107+
</div>
108+
<div class="right-page">
109+
<div class="singup-header">
110+
<h1>Sign Up</h1>
111+
</div>
112+
<form class="singup-form">
113+
<div class="form-group">
114+
<input type="email" placeholder="Email" autocomplete="off"/>
115+
</div>
116+
<div class="form-group">
117+
<input type="text" placeholder="First Name" autocomplete="off"/>
118+
</div>
119+
<div class="form-group">
120+
<input type="text" placeholder="Last Name" autocomplete="off"/>
121+
</div>
122+
<div class="form-group">
123+
<button type="button" class="btn btn-login">Sign Up</button>
124+
</div>
125+
</form>
126+
</div>
127+
</section>
128+
<section class="page" id="courses">
129+
<div class="left-page">Left of Page Courses</div>
130+
<div class="right-page">Right of Page</div>
131+
</section>
132+
<section class="page" id="services">
133+
<div class="left-page">Left of Page Services</div>
134+
<div class="right-page">Right of Page</div>
135+
</section>
136+
<section class="page" id="about">
137+
<div class="left-page">Left of Page About</div>
138+
<div class="right-page">Right of Page</div>
139+
</section>
140+
<section class="page" id="contact">
141+
<div class="left-page">Left of Page Contact</div>
142+
<div class="right-page">Right of Page</div>
143+
</section>
144+
</section>
145+
</main>
146+
<script>
147+
const imageUlrs = {
148+
default: "url(./images/coffee.jpg)",
149+
green1: "url(./images/green1.jpg)",
150+
green2: "url(./images/green2.jpg)",
151+
};
152+
function changeBgImage(selectedColor) {
153+
document.body.style.background = imageUlrs[selectedColor];
154+
document.body.style.backgroundSize = "cover";
155+
}
156+
</script>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)