Home page - first draft (temp JSgit st)

css/fonts.css

@@ -7,4 +7,27 @@
          url('../fonts/arvo-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+}
+/* Roboto */
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
+@font-face {
+    font-family: 'roboto_condensedbold';
+    src: url('robotocondensed-bold-webfont.woff2') format('woff2'),
+         url('robotocondensed-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_condenseditalic';
+    src: url('robotocondensed-italic-webfont.woff2') format('woff2'),
+         url('robotocondensed-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'roboto_condensedregular';
+    src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
+         url('robotocondensed-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }

css/main.css

@@ -2,18 +2,29 @@
 @import url(fonts.css);
 
 /** Font classes **/
-
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
 }
-
-.main-header {
-    background-image: url(../img/fara_background.jpg);
+.roboto {
+    font-family: 'roboto_condensedregular';
+}
+/****** Custom rules ******/
+body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+main {
+    flex: 1 0 auto;
+    width: 100%;
+}
+/* ---- Header ----- */
+header {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
-    min-height: 900px;
+    min-height: 930px;
     color: #fff;
     display: flex;
     align-items: center;
@@ -22,11 +33,80 @@
     margin: 0;
     padding: 0;
 }
+.main-header.bg1 {
+    background-image: url(../img/fara_background.jpg);
+}
+.main-header.bg2 {
+    background-image: url(../img/fara_bg_2.jpg);
+}
 .main-header h1 {
     font-size: 3rem;
 }
+.main-header h1::after {
+    max-width: 5rem;
+    margin: 10px auto 0 auto;
+    min-height: 0.4rem;
+    background-color: #ccac68;
+    content: '';
+    display: block;
+}
 #title {
     flex: none;
     min-width: 50%;
 }
-    
+#title button {
+    min-width: 100%;
+    background-color: transparent;
+    color: #fff;
+    border: none;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+/* ---- Navbar ----- */
+.active {
+    color: #fff;font-weight:bold;
+}
+#nav {
+    max-height: 50px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+#nav > div {
+    vertical-align: middle;
+    line-height: 2.3rem;
+}
+#logo {
+    max-height: 41%;
+    padding: 7px 0 5px 20px;
+}
+#links {
+    text-align: right;
+}
+#links a {
+    color: #eee;
+    padding: 10px;
+    font-size: 0.85rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+#links a:hover {
+    color: #fff;
+    text-decoration: none;
+}
+/** Footer **/
+footer {
+    min-height: 5rem;
+}
+footer p {
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 0;
+}
+#copy {
+    font-size: 0.7rem;
+    margin-top: 1rem;
+}
+#benef {
+    max-height: 70px;
+}