Skip to content

Commit 4138e04

Browse files
TechSquare1TechSquare1
authored
Add files via upload
1 parent b629baa commit 4138e04

File tree

4 files changed

+339
-0
lines changed

4 files changed

+339
-0
lines changed

‎Website1.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title> My Website </title>
6+
<link rel="stylesheet" href="style1.css">
7+
</head>
8+
<body>
9+
<div class="main">
10+
<div class="navbar">
11+
<div class="icon">
12+
<h2 class="logo"> ABC </h2>
13+
</div>
14+
15+
<div class="menu">
16+
<ul>
17+
<li><a href="#">HOME</a></li>
18+
<li><a href="#">ABOUT</a></li>
19+
<li><a href="#">SERVICE</a></li>
20+
<li><a href="#">DESIGN</a></li>
21+
<li><a href="#">CONTACT</a></li>
22+
</ul>
23+
</div>
24+
25+
<div class="search">
26+
<input class="srch" type="search" name="" placeholder="Type To Text">
27+
<a href="#"> <button class="btn">Search</button></a>
28+
</div>
29+
</div>
30+
31+
<div class="content">
32+
<h1> Web Design and <br> <span>Development </span> <br> Course </h1>
33+
34+
<p class="par">losdfagfd dasffdsaasa asdfasfdasdfasf
35+
adsfadsafsfs afsd <br> dfsasfdfsd
36+
dfsgsd dfafafsd sdaffasdafsdsdfas dsfasasfd <br> sdafafsfsdasfasfasfdafsdafsdafsd
37+
gasagsasggsdgs asddsffsdsdf </p><br>
38+
39+
<button class="cn"><a href="#"> JOIN US </a></button>
40+
41+
<div class="form">
42+
<h2>Login Here</h2>
43+
<input type="email" name="email" placeholder=" Enter Email Here">
44+
<input type="password" name="" placeholder=" Enter Password Here">
45+
<button class="btnn"><a href="#"> Login </a></button>
46+
47+
<p class="link"> Don't have an account <br>
48+
<a href="#"> Sign Up </a> here </a> </p>
49+
<p class="liw"> Log in with </p>
50+
51+
<div class="icon">
52+
<a href="#"><ion-icon name="logo-facebook"> </ion-icon></a>
53+
<a href="#"><ion-icon name="logo-instagram"> </ion-icon></a>
54+
<a href="#"><ion-icon name="logo-twitter"> </ion-icon></a>
55+
<a href="#"><ion-icon name="logo-google"> </ion-icon></a>
56+
<a href="#"><ion-icon name="logo-skype"> </ion-icon></a>
57+
</div>
58+
59+
60+
</div>
61+
</div>
62+
</div>
63+
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
64+
</body>
65+
66+
</html>

‎style1.css‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
5+
}
6+
7+
.main{
8+
width: 100%;
9+
background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(tech2.jpg);
10+
background-position: center;
11+
background-size: cover;
12+
height: 120vh;
13+
}
14+
15+
16+
.navbar{
17+
margin: auto;
18+
width:1200px;
19+
height:75px;
20+
}
21+
22+
.icon{
23+
height: 70px;
24+
width: 200px;
25+
float:left;
26+
}
27+
28+
.logo{
29+
color: orange;
30+
font-size:35px;
31+
font-family: Arial;
32+
padding-top: 10px;
33+
padding-left: 20px;
34+
float: left;
35+
}
36+
37+
.menu{
38+
width: 400px;
39+
height: 70px;
40+
float: left;
41+
}
42+
43+
ul{
44+
float: left;
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
}
49+
50+
ul li{
51+
list-style: none;
52+
margin-left: 62px;
53+
margin-top: 27px;
54+
font-size: 14px;
55+
}
56+
57+
ul li a{
58+
text-decoration: none;
59+
color: white;
60+
font-family: Arial;
61+
font-weight: bold;
62+
transition: 0.4s ease-in-out;
63+
}
64+
65+
ul li a:hover{
66+
color: orange;
67+
}
68+
69+
.search{
70+
width: 330px;
71+
float: left;
72+
margin-left: 270px;
73+
}
74+
75+
.srch{
76+
font-family: 'Times New Roman';
77+
width: 200px;
78+
height: 40px;
79+
background: transparent;
80+
border: 1px solid orange;
81+
margin-top: 13px;
82+
color: white;
83+
font-size: 16px;
84+
float: left;
85+
padding: 10px;
86+
border-bottom-left-radius: 5px;
87+
border-top-left-radius: 5px;
88+
}
89+
90+
.btn{
91+
width: 60px;
92+
height: 40px;
93+
background: orange;
94+
margin-top: 13px;
95+
color: #fff;
96+
font-size: 15px;
97+
font-weight: bold;
98+
border-bottom-right-radius: 5px;
99+
border-bottom-left-radius: 5px;
100+
margin-left: 5px;
101+
border-radius: 6px;
102+
cursor: pointer;
103+
transition: 0.3s ease;
104+
}
105+
.btn:hover{
106+
background-color: #fff;
107+
color: #000;
108+
109+
}
110+
111+
.btn:focus{
112+
outline: none;
113+
}
114+
115+
.srch:focus{
116+
outline: none;
117+
}
118+
119+
.content{
120+
width: 1200px;
121+
height: auto;
122+
margin: auto;
123+
color: #fff;
124+
position: relative;
125+
}
126+
127+
.content .par{
128+
padding-left: 20px;
129+
padding-bottom: 25px;
130+
font-family: Arial;
131+
letter-spacing: 1px;
132+
line-height: 35px;
133+
}
134+
135+
.content h1{
136+
font-family: 'Times New Roman';
137+
font-size: 50px;
138+
padding-left: 20px;
139+
margin-top: 9%;
140+
letter-spacing: 2px;
141+
}
142+
143+
.content .cn{
144+
width: 100px;
145+
height: 36px;
146+
background: orange;
147+
border: none;
148+
margin-bottom: 10px;
149+
margin-left: 20px;
150+
font-size: 18px;
151+
border-radius: 10px;
152+
cursor: pointer;
153+
}
154+
155+
.content .cn a{
156+
text-decoration: none;
157+
color: #000;
158+
transition: .3s ease;
159+
}
160+
161+
.cn:hover{
162+
background-color: #fff;
163+
color: #000;
164+
}
165+
166+
.content span{
167+
color: orange;
168+
font-size: 65px;
169+
}
170+
171+
.form{
172+
width: 250px;
173+
height: 380px;
174+
background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);
175+
position: absolute;
176+
top: -20px;
177+
left: 870px;
178+
border-radius: 10px;
179+
padding: 25px;
180+
}
181+
182+
.form h2{
183+
width: 220px;
184+
font-family: sans-serif;
185+
text-align: center;
186+
color: orange;
187+
font-size: 22px;
188+
background-color: #fff;
189+
border-radius: 10px;
190+
margin: 2px;
191+
padding: 8px;
192+
}
193+
194+
.form input{
195+
width: 240px;
196+
height: 35px;
197+
background: transparent;
198+
border-bottom: 1px solid orange;
199+
border-top: 1px solid orange;
200+
border-right: 1px solid orange;
201+
border-left: 1px solid orange;
202+
color: #fff;
203+
font-size: 15px;
204+
margin-top: 30px;
205+
font-family: sans-serif;
206+
}
207+
208+
.form input:focus{
209+
outline: none;
210+
}
211+
::placeholder{
212+
color: grey;
213+
font-family: Arial;
214+
}
215+
216+
.btnn{
217+
width: 240px;
218+
height: 40px;
219+
background: orange;
220+
border: none;
221+
margin-top: 30px;
222+
font-size: 18px;
223+
border-radius: 10px;
224+
cursor: pointer;
225+
color: #fff;
226+
transition: 0.4s ease;
227+
}
228+
229+
.btnn:hover{
230+
background: #fff;
231+
color: orange;
232+
}
233+
234+
.btnn a{
235+
text-decoration: none;
236+
color: #000;
237+
font-weight: bold;
238+
}
239+
240+
.form .link{
241+
font-family: Arial, Helvetica, sans-serif;
242+
font-size: 17px;
243+
padding-top: 20px;
244+
text-align: center;
245+
}
246+
247+
.form .link a{
248+
text-decoration: none;
249+
color: orange;
250+
}
251+
252+
.liw{
253+
padding-top: 15px;
254+
padding-bottom: 10px;
255+
text-align: center;
256+
}
257+
258+
.icons a{
259+
text-decoration: none;
260+
color: #fff;
261+
}
262+
263+
.icons ion-icon{
264+
color: #fff;
265+
font-size: 30px;
266+
padding-left: 14px;
267+
padding-top: 5px;
268+
transition: 0.3s ease;
269+
}
270+
271+
.icons ion-icon:hover{
272+
color: orange;
273+
}

‎tech1.jpg‎

451 KB
Loading

‎tech2.jpg‎

503 KB
Loading

0 commit comments

Comments
 (0)