added image and hero section

dot4msc · dot4msc · commit e7bb888fb2b7 · 2025-09-02T20:26:39.000-06:00
diff --git a/css/index.css b/css/index.css
@@ -1,5 +1,22 @@
-html {
-  background-color: #1e1e1e;
-  background-size: 33%; 
+
+.hero {
+  background-image: url("../img/WWISGAF_PAGE.png");
   background-repeat: no-repeat;
+  background-position: center;
+  background-size: 50%;
+  height: 100vh;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.header {
+  font-size: 5rem;
+  width: 60%;
+  margin: auto;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1.2;
 }
diff --git a/css/reset.css b/css/reset.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -18,6 +20,12 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
+
+html {
+  background-color: #1e1e1e;
+  background-size: 33%;
+}
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
@@ -40,4 +48,36 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, a{
+  font-family: 'Montserrat', sans-serif;
+  color: white;
+}
+
+a {
+  text-decoration: none;
+  color: #1976D2
+}
+
+a:visited{
+  color: #E63946;
+}
+
+a:hover {
+  color: #5E60CE
+}
+
+a:active {
+  color: #E6F2EE
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 3rem;
+}
+
+h2 {
+  font-weight: 600;
+  font-size: 2rem;
 }
diff --git a/img/WWISGAF_PAGE.png b/img/WWISGAF_PAGE.png
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
   <div class="hero">
-    <h1 class="header">When Will I Start Giving a F**k?</h1>
+    <h1 class="header">WHEN WILL I START <span style="color: #A93226">GIVING A F**K?</span></h1>
   </div>
   <div class="about">
     <h2 class="subtitle">About</h2>
