Design-and-Code · arnav1776 · Dec 7, 2021
diff --git a/public/Projects/Arnav Sharma/Hogwarts/code/Gryffindor/Gryffindor.css b/public/Projects/Arnav Sharma/Hogwarts/code/Gryffindor/Gryffindor.css
@@ -0,0 +1,241 @@
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cormorant:wght@300;400&family=Rye&display=swap');
+/* Change the following color pallete alone */
+:root {
+    --color1: #1a472a;
+  --color2: #2a623d;
+  --color3: #8d635c;
+  --color4: #fdd17c;
+  --color5: #000000;
+  --color6: #997a6c;
+  --color7: #b83f3f;
+  --color8:  #cf5050;
+}
+
+* {
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+header {
+    width: 100%;
+    background-color: var(--color7);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.logo-container, .heading, .back{
+    display: flex;
+}
+.logo-container{
+    flex: 1;
+}
+.logo-container img{
+   width: 20vh;
+   -webkit-filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
+   filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
+}
+.heading{
+    flex: 2;
+    flex-direction: column;
+}
+.heading h1 {
+    color: var(--color4);
+    font-family: 'Cinzel';
+    text-align: center;
+    font-size: 8vh;
+    letter-spacing: 5px;
+}
+.heading img {
+    padding-top:  1vh;
+    width: 20%;
+    height: 20%;
+    margin: auto;   
+} 
+.back{
+    flex: 1;
+}
+.back a:link, a:visited {
+    margin-left: auto;
+    margin-right: 10%;
+    background-color: var(--color8);
+    color: var(--color4);
+    border-radius: 10%;
+    padding: 15px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    transition: 0.4s;
+    cursor: pointer;
+  }
+
+.back a:hover, a:active {
+    background-color: var(--color3);
+    color: var(--color4);
+  }
+.sec1 {
+    width: 100vw;
+    height: 80vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: 	#8d261f
+}
+
+.sec1 article {
+    display: grid;
+    text-align: center;
+    place-items: center;
+    width: 50%;
+    height: 50%;
+    background-color: var(--color7);
+    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;
+
+}
+
+.sec1 article p {
+    font-size: 2.1vw;
+    font-family: 'Cormorant', serif;
+    font-weight: 400;
+    color: var(--color4);
+}
+
+.sec2 {
+    width: 100vw;
+    height: 100vh;
+    background: var(--color4);
+    padding-top: 10vh;
+}
+
+.sec2 article {
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+    color: var(--color6);
+    z-index: 2;
+
+
+}
+
+.sec2 article h2 {
+    color: var(--color6);
+    font-size: 4vw;
+    font-family: 'Cinzel';
+    text-align: center;
+}
+
+
+.sec2 article ul {
+    padding: 25px 25px 25px 25px;
+    border-radius: 2%;
+    text-align: center;
+    list-style: none;
+    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
+}
+
+.sec2 article ul li{
+    list-style: none;
+}
+
+
+.sec2 article ul li h3 {
+    font-size: 2.5vw;
+}
+
+.sec2 article ul li p {
+    font-size: 1.1vw;
+    color: var(--color3);
+    font-family: sans-serif;
+}
+
+.sec3 {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #b83f3f
+}
+
+.sec3 article {
+    width: 80%;
+    height: 80%;
+    display: flex;
+    background: var(--color7);
+    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
+}
+.sec3 article img {
+    height: 100%;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.sec4 {
+	height: 30vh;
+	width: 100vw;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--color7);
+}
+.sec4 article {
+	width: 80%;
+	height: 80%;
+	display: flex;
+	background: var(--color7);
+	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
+}
+.sec4 article img {
+	height: 100%;
+	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+		rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+.sec5 {
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--color7);
+}
+.sec5 article {
+	width: 80%;
+	height: 80%;
+	display: flex;
+	background: var(--color7);
+	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
+}
+.sec5 article img {
+	height: 100%;
+	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
+		rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.content {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.content h2 {
+    text-align: center;
+    color: var(--color6);
+    font-size: 4vw;
+    font-family: 'Cinzel';
+}
+.content p {
+    margin-left: auto;
+    margin-right: auto;
+    width: 60%;
+    text-align: justify;
+    color: var(--color4);
+    font-family: sans-serif;
+    font-size: 1.5vw;
+}