Skip to content

Commit 5d61566

Browse files
jugeshraghavjugeshraghav
committed
style.css added
1 parent de301d5 commit 5d61566

File tree

1 file changed

+198
-0
lines changed

1 file changed

+198
-0
lines changed

‎Architecture-Website/style.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
5+
}
6+
body{
7+
8+
font-family:Verdana, Geneva, Tahoma, sans-serif;
9+
}
10+
body{
11+
display:grid;
12+
grid-template-areas:
13+
'navbar'
14+
'container1'
15+
'container2'
16+
'container3'
17+
'container4'
18+
'container5'
19+
'footer';
20+
grid-gap:0.5rem;
21+
}
22+
.navbar{
23+
grid-area:navbar;
24+
height:8vh;
25+
width:100vw;
26+
position:fixed;
27+
top:0;
28+
z-index:1;
29+
background-color:white;
30+
box-shadow:0px 2px 5px grey;
31+
/* border:1px solid black; */
32+
}
33+
.container1{
34+
grid-area:container1;
35+
border-left:1px solid black;
36+
background:url("images/homepage.jpg")no-repeat center center/cover;
37+
height:100vh;
38+
}
39+
.container2{
40+
grid-area:container2;
41+
height:45vw;
42+
}
43+
.container3{
44+
grid-area:container3;
45+
height:45vw;
46+
}
47+
.container4{
48+
grid-area:container4;
49+
height:25vw;
50+
}
51+
.container5{
52+
grid-area:container5;
53+
background:url("images/map.jpg")no-repeat center center/cover;
54+
height:50vw;
55+
}
56+
.container{
57+
padding:20px;
58+
width:97.5vw;
59+
margin:10px;
60+
box-sizing:border-box;
61+
/* border:1px solid green; */
62+
}
63+
.footer{
64+
grid-area:footer;
65+
height:5vw;
66+
background-color:black;
67+
color:white;
68+
position:relative;
69+
bottom:0;
70+
text-align:center;
71+
padding-top:20px;
72+
/* border:1px solid red; */
73+
}
74+
75+
/**************************************************************************navbar*******************************************************/
76+
a{
77+
color:black;
78+
text-decoration:none;
79+
font-size:15px;
80+
padding:20px 35px 20px 30px;
81+
letter-spacing:3px;
82+
}
83+
/********************************************************************************************projects*******************************/
84+
.heading{
85+
font-size:25px;
86+
margin-top:25px;
87+
margin-bottom:20px;
88+
}
89+
span{
90+
position:relative;
91+
top:30px;
92+
color:white;
93+
width:60px;
94+
height:40px;
95+
padding:10px;
96+
background-color:black;
97+
}
98+
.image-collection{
99+
display:grid;
100+
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
101+
grid-gap:1rem;
102+
margin-top:40px;
103+
}
104+
105+
/***********************************************************************about**************************************************/
106+
.about-image-card-designation{
107+
color:grey;
108+
margin:10px 0px;
109+
}
110+
111+
.about-image-card-button{
112+
width:350px;
113+
height:5vh;
114+
margin:10px 0px;
115+
background-color:rgb(156, 151, 151);
116+
border:none;
117+
font-size:18px;
118+
color:white;
119+
}
120+
.image-card-collection{
121+
display:grid;
122+
grid-template-columns: repeat( auto-fit, minmax(300px,1fr) );
123+
margin:30px 0px;
124+
}
125+
.about-img-card{
126+
width:350px;
127+
height:450px;
128+
}
129+
130+
/*****************************************************************contact***************************************************************/
131+
input{
132+
width:95%;
133+
height:6%;
134+
margin:10px;
135+
padding:0px 10px;
136+
color:grey;
137+
font-size:16px;
138+
}
139+
.contact-button{
140+
background-color:black;
141+
border:none;
142+
margin:10px;
143+
padding:10px;
144+
color:white;
145+
font-size:17px;
146+
}
147+
148+
149+
@media only screen and (max-width:1500px){
150+
body{
151+
display:grid;
152+
grid-template-areas:
153+
'navbar'
154+
'container1'
155+
'container2'
156+
'container3'
157+
'container4'
158+
'container5'
159+
'footer';
160+
grid-gap:0.5rem;
161+
margin:0px;
162+
padding:0px;
163+
}
164+
.navbar{
165+
height:8vh;
166+
width:100%;
167+
z-index:1;
168+
}
169+
.invisible-nav-item{
170+
display:none;
171+
}
172+
.container1{
173+
height:100vh;
174+
padding:200px 0px;
175+
}
176+
.container2{
177+
height:100%;
178+
}
179+
.container3{
180+
height:100%;
181+
}
182+
.container4{
183+
height:50vw;
184+
}
185+
.container5{
186+
height:100vh;
187+
padding:200px 0px;
188+
}
189+
.container{
190+
width:97vw;
191+
height:100%;
192+
}
193+
.footer{
194+
width:97vw;
195+
margin-left:10px
196+
}
197+
198+
}

0 commit comments

Comments
 (0)