Home page - first draft (temp JSgit st)

2021-07-28 17:25:10 +02:00 · 2021-07-28 17:25:10 +02:00 · 8a8269718d
commit 8a8269718d
parent 4ac893d841
13 changed files with 141 additions and 8 deletions
--- a/css/fonts.css
+++ b/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;
 }
--- a/css/main.css
+++ b/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;
+}
--- a/fonts/robotocondensed-bold-webfont.woff
+++ b/fonts/robotocondensed-bold-webfont.woff
--- a/fonts/robotocondensed-bold-webfont.woff2
+++ b/fonts/robotocondensed-bold-webfont.woff2
--- a/fonts/robotocondensed-italic-webfont.woff
+++ b/fonts/robotocondensed-italic-webfont.woff
--- a/fonts/robotocondensed-italic-webfont.woff2
+++ b/fonts/robotocondensed-italic-webfont.woff2
--- a/fonts/robotocondensed-regular-webfont.woff
+++ b/fonts/robotocondensed-regular-webfont.woff
--- a/fonts/robotocondensed-regular-webfont.woff2
+++ b/fonts/robotocondensed-regular-webfont.woff2
--- a/img/FESR_BARRA_BENEFICIARI_DEF.jpg
+++ b/img/FESR_BARRA_BENEFICIARI_DEF.jpg
--- a/img/InnovaPatrimonio_logo_transparent_bg_150x98.png
+++ b/img/InnovaPatrimonio_logo_transparent_bg_150x98.png
--- a/img/fara_background_alt.jpg
+++ b/img/fara_background_alt.jpg
--- a/img/fara_bg_2.jpg
+++ b/img/fara_bg_2.jpg
--- a/index.html
+++ b/index.html
@ -8,13 +8,43 @@
        <title>Nel cielo di Fara</title>
    </head>
    <body>
-        <header class="main-header">
+        <header class="main-header bg1">
            <div class="container">
-                <!-- GRIIIIDDDDD -->
+                <div class="columns" id="nav">
+                    <div class="column col-7">
+                        <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                    </div>
+                    <div class="column col-5" id="links">
+                        <a href="/index.html" title="Torna alla home page">Home</a>
+                        <a href="/progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
+                        <a href="/itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="/news.html" title="Leggi news ed eventi">News & Eventi</a>
+                        <a href="/credits.html" title="Credits del progetto">Credits</a>
+                    </div>
+                </div>
            </div>
            <div id="title">
                <h1 class="arvo text-center">Nel cielo di Fara</h1>
+                <button class="text-center">Entra</button>
            </div>
        </header>
+        <main></main>
+        <footer class="roboto">
+            <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
+            <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" id="benef" alt="Loghi enti beneficiari"></p>
+        </footer>
    </body>
+    <!-- MOOOVE AWAAAAAYY -->
+    <script type="text/javascript">
+        window.addEventListener('load', function () {
+            let navlinks = document.querySelector('#links').children;
+
+            Array.from(navlinks).forEach(element => {
+                let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
+                if (window.location.href.includes(ref)) {
+                    element.setAttribute('class', 'active');
+                }
+            });            
+        });
+    </script>
 </html>