Skip to content
This repository was archived by the owner on Feb 4, 2023. It is now read-only.

Commit bb64cb0

Browse files
arnav1776arnav1776
committed
Hogwarts Web App
1 parent 5a16a36 commit bb64cb0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+2971
-0
lines changed

‎public/Projects/Arnav Sharma/Hogwarts/code/Gryffindor/Gryffindor.css

+241
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cormorant:wght@300;400&family=Rye&display=swap');
5+
/* Change the following color pallete alone */
6+
:root {
7+
--color1: #1a472a;
8+
--color2: #2a623d;
9+
--color3: #8d635c;
10+
--color4: #fdd17c;
11+
--color5: #000000;
12+
--color6: #997a6c;
13+
--color7: #b83f3f;
14+
--color8: #cf5050;
15+
}
16+
17+
* {
18+
margin: 0px;
19+
padding: 0px;
20+
}
21+
22+
body {
23+
overflow-x: hidden;
24+
}
25+
26+
header {
27+
width: 100%;
28+
background-color: var(--color7);
29+
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
30+
display: flex;
31+
flex-direction: row;
32+
align-items: center;
33+
}
34+
.logo-container, .heading, .back{
35+
display: flex;
36+
}
37+
.logo-container{
38+
flex: 1;
39+
}
40+
.logo-container img{
41+
width: 20vh;
42+
-webkit-filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
43+
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
44+
}
45+
.heading{
46+
flex: 2;
47+
flex-direction: column;
48+
}
49+
.heading h1 {
50+
color: var(--color4);
51+
font-family: 'Cinzel';
52+
text-align: center;
53+
font-size: 8vh;
54+
letter-spacing: 5px;
55+
}
56+
.heading img {
57+
padding-top: 1vh;
58+
width: 20%;
59+
height: 20%;
60+
margin: auto;
61+
}
62+
.back{
63+
flex: 1;
64+
}
65+
.back a:link, a:visited {
66+
margin-left: auto;
67+
margin-right: 10%;
68+
background-color: var(--color8);
69+
color: var(--color4);
70+
border-radius: 10%;
71+
padding: 15px 20px;
72+
text-align: center;
73+
text-decoration: none;
74+
display: inline-block;
75+
transition: 0.4s;
76+
cursor: pointer;
77+
}
78+
79+
.back a:hover, a:active {
80+
background-color: var(--color3);
81+
color: var(--color4);
82+
}
83+
.sec1 {
84+
width: 100vw;
85+
height: 80vh;
86+
display: flex;
87+
flex-direction: column;
88+
align-items: center;
89+
justify-content: center;
90+
background: #8d261f
91+
}
92+
93+
.sec1 article {
94+
display: grid;
95+
text-align: center;
96+
place-items: center;
97+
width: 50%;
98+
height: 50%;
99+
background-color: var(--color7);
100+
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
101+
102+
}
103+
104+
.sec1 article p {
105+
font-size: 2.1vw;
106+
font-family: 'Cormorant', serif;
107+
font-weight: 400;
108+
color: var(--color4);
109+
}
110+
111+
.sec2 {
112+
width: 100vw;
113+
height: 100vh;
114+
background: var(--color4);
115+
padding-top: 10vh;
116+
}
117+
118+
.sec2 article {
119+
margin-left: auto;
120+
margin-right: auto;
121+
width: 50%;
122+
color: var(--color6);
123+
z-index: 2;
124+
125+
126+
}
127+
128+
.sec2 article h2 {
129+
color: var(--color6);
130+
font-size: 4vw;
131+
font-family: 'Cinzel';
132+
text-align: center;
133+
}
134+
135+
136+
.sec2 article ul {
137+
padding: 25px 25px 25px 25px;
138+
border-radius: 2%;
139+
text-align: center;
140+
list-style: none;
141+
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
142+
}
143+
144+
.sec2 article ul li{
145+
list-style: none;
146+
}
147+
148+
149+
.sec2 article ul li h3 {
150+
font-size: 2.5vw;
151+
}
152+
153+
.sec2 article ul li p {
154+
font-size: 1.1vw;
155+
color: var(--color3);
156+
font-family: sans-serif;
157+
}
158+
159+
.sec3 {
160+
height: 100vh;
161+
width: 100vw;
162+
display: flex;
163+
justify-content: center;
164+
align-items: center;
165+
background: #b83f3f
166+
}
167+
168+
.sec3 article {
169+
width: 80%;
170+
height: 80%;
171+
display: flex;
172+
background: var(--color7);
173+
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
174+
}
175+
.sec3 article img {
176+
height: 100%;
177+
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
178+
}
179+
180+
.sec4 {
181+
height: 30vh;
182+
width: 100vw;
183+
display: flex;
184+
justify-content: center;
185+
align-items: center;
186+
background: var(--color7);
187+
}
188+
.sec4 article {
189+
width: 80%;
190+
height: 80%;
191+
display: flex;
192+
background: var(--color7);
193+
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
194+
}
195+
.sec4 article img {
196+
height: 100%;
197+
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
198+
rgba(0, 0, 0, 0.22) 0px 10px 10px;
199+
}
200+
.sec5 {
201+
height: 100vh;
202+
width: 100vw;
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
background: var(--color7);
207+
}
208+
.sec5 article {
209+
width: 80%;
210+
height: 80%;
211+
display: flex;
212+
background: var(--color7);
213+
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
214+
}
215+
.sec5 article img {
216+
height: 100%;
217+
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
218+
rgba(0, 0, 0, 0.22) 0px 10px 10px;
219+
}
220+
221+
.content {
222+
flex: 2;
223+
display: flex;
224+
flex-direction: column;
225+
}
226+
227+
.content h2 {
228+
text-align: center;
229+
color: var(--color6);
230+
font-size: 4vw;
231+
font-family: 'Cinzel';
232+
}
233+
.content p {
234+
margin-left: auto;
235+
margin-right: auto;
236+
width: 60%;
237+
text-align: justify;
238+
color: var(--color4);
239+
font-family: sans-serif;
240+
font-size: 1.5vw;
241+
}

0 commit comments

Comments
 (0)