Skip to content

Commit d107044

Browse files
Vishesh-69Vishesh-69
committed
Vishesh 👩‍🎓
1 parent 2d2d811 commit d107044

File tree

1 file changed

+128
-131
lines changed

1 file changed

+128
-131
lines changed

‎contact/style.css

+128-131
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,151 @@
1-
* {
2-
padding: 0;
1+
2+
body, p, h1, h2, h3, ul, li, button {
33
margin: 0;
4-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
4+
padding: 0;
55
}
66

7-
main {
8-
width: 100vw;
9-
height: 100vh;
7+
/* Set a background color and font family for the entire page */
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #f5f5f5;
1011
}
1112

12-
.contact-box {
13+
/* Style the navigation bar */
14+
nav {
15+
background-color: #333;
16+
color: #fff;
17+
display: flex;
18+
justify-content: space-between;
19+
padding: 10px 20px;
20+
}
21+
22+
nav h3 {
23+
font-size: 24px;
24+
font-weight: bold;
25+
}
26+
27+
nav ul {
28+
list-style: none;
1329
display: flex;
14-
background: linear-gradient(to left top, rgb(4, 18, 46), rgb(105, 163, 201));
15-
margin-top: 0.3vh;
1630
}
1731

18-
.contact-sec-1 {
19-
width: 50%;
32+
nav ul li {
33+
margin-right: 20px;
34+
}
35+
36+
nav ul li:last-child {
37+
margin-right: 0;
2038
}
2139

22-
.contact-sec-1 img{
23-
width: 50vw;
40+
nav a {
41+
text-decoration: none;
42+
color: #fff;
2443
}
2544

26-
.contact-sec-2{
45+
/* Style the main content */
46+
main {
47+
padding: 20px;
48+
}
49+
50+
.contact-box {
2751
display: flex;
28-
flex-direction: column;
29-
justify-content: center;
52+
justify-content: space-between;
3053
align-items: center;
31-
margin: auto;
32-
}
33-
34-
.contact-sec-2 h1{
35-
font-size: 4em;
36-
margin: 2vh 0;
37-
color: white;
38-
}
39-
40-
.contact-sec-2 input{
41-
margin: 1vh 0;
42-
border-radius: 3px;
43-
height: 5vh;
44-
width: 20vw;
45-
padding: 0.4em;
46-
background-color: transparent;
47-
color: white;
48-
border: 1.5px solid white;
49-
font-size: 1.1em;
50-
}
51-
52-
.contact-sec-2 textarea{
53-
margin: 1vh 0;
54-
padding: 0.3em;
55-
background-color: transparent;
56-
color: white;
57-
border: 1px solid white;
58-
border-radius: 3px;
59-
}
60-
61-
.contact-sec-2 button{
62-
width: 5.5vw;
63-
font-size: 1em;
64-
height: 4vh;
65-
background-color: transparent;
66-
color: white;
67-
font-weight: 600;
54+
background-color: #fff;
6855
border-radius: 10px;
56+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
57+
padding: 20px;
6958
}
7059

71-
.contact-sec-2 button:hover{
72-
background-color: rgb(9, 31, 73);
73-
transition: 0.5s;
74-
cursor: pointer;
60+
.contact-sec-1 img {
61+
max-width: 100%;
62+
height: auto;
63+
}
64+
65+
.contact-sec-2 {
66+
flex: 1;
67+
padding-left: 20px;
68+
}
69+
70+
.contact-sec-2 h1 {
71+
font-size: 24px;
72+
margin-bottom: 10px;
7573
}
7674

77-
.copyright span{
78-
font-family: monospace !important;
79-
text-decoration: underline;
75+
.contact-sec-2 input[type="text"],
76+
.contact-sec-2 input[type="email"],
77+
.contact-sec-2 textarea {
78+
width: 100%;
79+
padding: 10px;
80+
margin-bottom: 10px;
81+
border: 1px solid #ccc;
82+
border-radius: 5px;
83+
}
84+
85+
.contact-sec-2 textarea {
86+
resize: vertical;
87+
}
88+
89+
.contact-sec-2 button {
90+
background-color: #333;
91+
color: #fff;
92+
padding: 10px 20px;
93+
border: none;
94+
border-radius: 5px;
8095
cursor: pointer;
8196
}
8297

98+
.contact-sec-2 button:hover {
99+
background-color: #555;
100+
}
101+
102+
/* Style the footer */
103+
footer {
104+
background-color: #333;
105+
color: #fff;
106+
padding: 20px;
107+
}
108+
109+
footer h3 {
110+
font-size: 24px;
111+
font-weight: bold;
112+
}
113+
114+
.f2-center {
115+
display: flex;
116+
justify-content: space-between;
117+
align-items: center;
118+
}
119+
120+
.f2 ul {
121+
list-style: none;
122+
}
83123

84-
/* responsive */
85-
@media only screen and (max-width:600px){
86-
body{
87-
width: 100%;
88-
height: auto;
89-
}
90-
91-
nav {
92-
width: 100%;
93-
}
94-
95-
.sec-1 h3 {
96-
width: 50%;
97-
float: left;
98-
flex-wrap: wrap;
99-
font-size: 0.9em;
100-
}
101-
102-
.sec-2 {
103-
display: none;
104-
}
105-
106-
main{
107-
height: 1000%;
108-
margin: 0.2vh 0;
109-
}
110-
111-
.contact-box{
112-
display: flex;
113-
flex-direction: column;
114-
}
115-
.contact-sec-1{
116-
width: 100%;
117-
}
118-
.contact-sec-1 img{
119-
width: 50vw;
120-
display: flex;
121-
margin: auto;
122-
}
123-
124-
.contact-sec-2{
125-
width: 100%;
126-
}
127-
128-
.contact-sec-2 h1{
129-
font-size: 2em;
130-
}
131-
132-
.contact-sec-2 input{
133-
width: 60vw;
134-
font-size: 0.9em;
135-
}
136-
137-
.contact-sec-2 input::placeholder{
138-
color: #fff;
139-
}
140-
141-
.contact-sec-2 textarea::placeholder{
142-
color: white;
143-
}
144-
145-
.contact-sec-2 textarea{
146-
width: 70vw;
147-
}
148-
149-
.contact-sec-2 button{
150-
width: 30vw;
151-
height: 5vh;
152-
margin: 1.5vh 0;
153-
}
154-
}
124+
.f2 ul li {
125+
margin-bottom: 10px;
126+
}
127+
128+
.socials {
129+
margin-top: 20px;
130+
}
131+
132+
.s-link a {
133+
color: #fff;
134+
margin-right: 10px;
135+
text-decoration: none;
136+
font-size: 24px;
137+
}
138+
139+
.s-link a:hover {
140+
color: #ccc;
141+
}
142+
143+
/* Copyright text at the bottom */
144+
.copyright {
145+
margin-top: 20px;
146+
text-align: center;
147+
}
148+
149+
.copyright span {
150+
font-weight: bold;
151+
}

0 commit comments

Comments
 (0)