Skip to content

Commit 5381041

Browse files
SyedImtiyaz-1SyedImtiyaz-1
committed
added contact form
1 parent b9d1981 commit 5381041

9 files changed

+396
-1
lines changed

‎contact/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
<title>Contact</title>
8+
</head>
9+
<body>
10+
<nav>
11+
<div class="sec-1">
12+
<h3 href="index.html"><span>Code</span>Shop</h3>
13+
</div>
14+
<div class="sec-2">
15+
<ul>
16+
<li><a href="../index.html">Home</a></li>
17+
<li>About</li>
18+
<li><a href="../contact/index.html">Contact</a></li>
19+
<li>Service</li>
20+
</ul>
21+
</div>
22+
</nav>
23+
<main>
24+
<div class="contact-box">
25+
<div class="contact-sec-1">
26+
<img src="../images/—Pngtree—women contact support flat illustration_5439566.png" alt="">
27+
</div>
28+
29+
<div class="contact-sec-2">
30+
<h1>CONTACT US</h1>
31+
<input type="text" placeholder="Enter your name">
32+
<input type="email" placeholder="Enter your mail">
33+
<textarea cols="35" rows="6" placeholder="Your Message"></textarea>
34+
<Button>Submit</Button>
35+
</div>
36+
</div>
37+
</main>
38+
39+
<!-- footer -->
40+
<footer>
41+
<div class="f1 sec-1">
42+
<h3><span>Code</span>Shop</h3>
43+
</div>
44+
<div class="f2">
45+
<div class="f2-center">
46+
<div class="f2-sub-1">
47+
<ul>
48+
<li><a href="../index.html">Home</a></li>
49+
<li><a href="">About</a></li>
50+
<li><a href="../contact/index.html">Contact Us</a></li>
51+
<li><a href="">Support</a></li>
52+
<li><a href="">Helpline</a></li>
53+
</ul>
54+
</div>
55+
<div class="f2-sub-2">
56+
<ul>
57+
<li>CodeShop Plus</li>
58+
<li>Careers</li>
59+
<li>Sponsors</li>
60+
</ul>
61+
</div>
62+
</div>
63+
</div>
64+
65+
<div class="socials">
66+
<div class="s-link">
67+
<a href="mailto:[email protected]"><i class="fa-brands fa-google"></i></a>
68+
<a href="https://linkedin.com/in/imtiyaz-sde"><i class="fa-brands fa-linkedin-in"></i></a>
69+
<a href="https://github.com/SyedImtiyaz-1"><i class="fa-brands fa-github"></i></a>
70+
</div>
71+
</div>
72+
73+
<!-- developer's mention -->
74+
<p id="copyright">Made with ❤️ by&nbsp;<u style="cursor: pointer;">Imtiyaz</u> </p>
75+
</footer>
76+
77+
</body>
78+
</html>

‎contact/index.js

Whitespace-only changes.

‎contact/style.css

+308
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5+
}
6+
7+
nav {
8+
display: flex;
9+
height: 5vh;
10+
width: 100vw;
11+
background-color: #0c2652
12+
}
13+
14+
nav:nth-child(2) {
15+
background-color: rgb(236, 236, 236);
16+
}
17+
18+
.sec-1 {
19+
width: 50%;
20+
}
21+
22+
.sec-1 span {
23+
color: rgb(255, 170, 0);
24+
text-decoration: underline;
25+
cursor: pointer;
26+
}
27+
28+
.sec-2 ul li a{
29+
color: white;
30+
text-decoration: none;
31+
}
32+
33+
.sec-1 h3 {
34+
display: flex;
35+
height: 100%;
36+
align-items: center;
37+
justify-content: center;
38+
color: white;
39+
}
40+
41+
.sec-2 {
42+
width: 50%;
43+
}
44+
45+
.sec-2 ul {
46+
display: flex;
47+
list-style: none;
48+
height: 100%;
49+
align-items: center;
50+
}
51+
52+
.sec-2 ul li {
53+
margin: 0 3vw;
54+
color: white;
55+
font-weight: 600;
56+
}
57+
58+
.sec-2 ul li:hover {
59+
text-decoration: underline;
60+
cursor: pointer;
61+
}
62+
63+
64+
main {
65+
width: 100vw;
66+
height: 100vh;
67+
}
68+
69+
.contact-box {
70+
display: flex;
71+
background: linear-gradient(to left top, rgb(4, 18, 46), rgb(105, 163, 201));
72+
margin-top: 0.3vh;
73+
}
74+
75+
.contact-sec-1 {
76+
width: 50%;
77+
}
78+
79+
.contact-sec-1 img{
80+
width: 50vw;
81+
}
82+
83+
.contact-sec-2{
84+
display: flex;
85+
flex-direction: column;
86+
justify-content: center;
87+
align-items: center;
88+
margin: auto;
89+
}
90+
91+
.contact-sec-2 h1{
92+
font-size: 4em;
93+
margin: 2vh 0;
94+
color: white;
95+
}
96+
97+
.contact-sec-2 input{
98+
margin: 1vh 0;
99+
border-radius: 3px;
100+
height: 5vh;
101+
width: 20vw;
102+
padding: 0.4em;
103+
background-color: transparent;
104+
color: white;
105+
border: 1.5px solid white;
106+
font-size: 1.1em;
107+
}
108+
109+
.contact-sec-2 textarea{
110+
margin: 1vh 0;
111+
padding: 0.3em;
112+
background-color: transparent;
113+
color: white;
114+
border: 1px solid white;
115+
border-radius: 3px;
116+
}
117+
118+
.contact-sec-2 button{
119+
width: 5.5vw;
120+
font-size: 1em;
121+
height: 4vh;
122+
background-color: transparent;
123+
color: white;
124+
font-weight: 600;
125+
border-radius: 10px;
126+
}
127+
128+
.contact-sec-2 button:hover{
129+
background-color: rgb(9, 31, 73);
130+
transition: 0.5s;
131+
cursor: pointer;
132+
}
133+
134+
/* footer */
135+
footer {
136+
width: 100vw;
137+
background-color: #081c3e;
138+
height: auto;
139+
}
140+
141+
.f1 {
142+
width: 50%;
143+
display: flex;
144+
/* justify-content: space-between; */
145+
margin: auto;
146+
padding: 1vh;
147+
justify-content: center;
148+
}
149+
150+
.f1:nth-child(1) {
151+
color: white;
152+
}
153+
154+
.f2 {
155+
width: 100%;
156+
color: white;
157+
font-size: 1em;
158+
}
159+
160+
.f2-center {
161+
width: 50%;
162+
margin: auto;
163+
display: flex;
164+
}
165+
166+
.f2 .f2-sub-1 {
167+
width: 50%;
168+
}
169+
170+
.f2 .f2-sub-1 ul {
171+
list-style: none;
172+
text-align: center;
173+
}
174+
175+
.f2 .f2-sub-1 ul li {
176+
margin: 0.5em 0;
177+
}
178+
179+
.f2 .f2-sub-1 ul a:hover {
180+
cursor: pointer;
181+
color: rgb(116, 166, 237);
182+
}
183+
184+
.f2 .f2-sub-2 {
185+
width: 50%;
186+
}
187+
188+
.f2 .f2-sub-2 ul {
189+
list-style: none;
190+
text-align: center;
191+
}
192+
193+
.f2-sub-1 a{
194+
text-decoration: none;
195+
color: white;
196+
}
197+
198+
.f2 .f2-sub-2 ul li {
199+
margin: 0.5em 0;
200+
}
201+
202+
.f2 .f2-sub-2 ul li:hover {
203+
cursor: pointer;
204+
color: rgb(116, 166, 237);
205+
}
206+
207+
/* socials */
208+
.socials {
209+
width: 100vw;
210+
}
211+
212+
.s-link {
213+
display: flex;
214+
justify-content: center;
215+
}
216+
217+
.s-link a {
218+
color: rgb(255, 255, 255);
219+
margin: 2vh 4vw;
220+
cursor: pointer;
221+
font-size: 2em;
222+
}
223+
224+
.s-link a:nth-child(1):hover {
225+
color: rgb(227, 23, 0);
226+
}
227+
228+
.s-link a:nth-child(2):hover {
229+
color: rgb(0, 89, 255);
230+
}
231+
232+
.s-link a:nth-child(3):hover {
233+
color: rgb(172, 28, 129);
234+
}
235+
236+
#copyright {
237+
display: flex;
238+
font-family: monospace !important;
239+
justify-content: center;
240+
font-weight: 550;
241+
/* text-transform: uppercase; */
242+
color: white;
243+
padding: 0.5em;
244+
}
245+
246+
247+
/* responsive */
248+
@media only screen and (max-width:600px){
249+
body{
250+
width: 100%;
251+
height: auto;
252+
}
253+
254+
nav {
255+
width: 100%;
256+
}
257+
258+
.sec-1 h3 {
259+
width: 50%;
260+
float: left;
261+
flex-wrap: wrap;
262+
font-size: 0.9em;
263+
}
264+
265+
.sec-2 {
266+
display: none;
267+
}
268+
269+
main{
270+
height: 1000%;
271+
margin: 0.2vh 0;
272+
}
273+
274+
.contact-box{
275+
display: flex;
276+
flex-direction: column;
277+
}
278+
.contact-sec-1{
279+
width: 100%;
280+
}
281+
.contact-sec-1 img{
282+
width: 50vw;
283+
display: flex;
284+
margin: auto;
285+
}
286+
287+
.contact-sec-2{
288+
width: 100%%;
289+
}
290+
291+
.contact-sec-2 h1{
292+
font-size: 2em;
293+
}
294+
295+
.contact-sec-2 input{
296+
width: 60vw;
297+
}
298+
299+
.contact-sec-2 textarea{
300+
width: 70vw;
301+
}
302+
303+
.contact-sec-2 button{
304+
width: 30vw;
305+
height: 5vh;
306+
margin: 1.5vh 0;
307+
}
308+
}

‎images/Maths hand book.pdf

-2.05 MB
Binary file not shown.

‎images/NIMCET_Syllabus_2023.pdf

-75 KB
Binary file not shown.

‎images/—Pngtree—women contact support flat illustration_5439566.png

58.3 KB
Loading

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h3 href="index.html"><span>Code</span>Shop</h3>
2222
<ul>
2323
<li>Home</li>
2424
<li>About</li>
25-
<li>Contact</li>
25+
<li><a href="./contact/index.html">Contact</a></li>
2626
<li>Service</li>
2727
</ul>
2828
</div>

0 commit comments

Comments
 (0)