Update home page
This commit is contained in:
parent
8a8269718d
commit
01cc8fff4d
@ -12,22 +12,22 @@
|
||||
/*! 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');
|
||||
src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
|
||||
url('../fonts/robotocondensed-bold-webfont.woff2') 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');
|
||||
src: url('../fonts/robotocondensed-italic-webfont.woff2') format('woff2'),
|
||||
url('../fonts/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');
|
||||
src: url('../fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
|
||||
url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
16
css/main.css
16
css/main.css
@ -13,6 +13,7 @@ body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
@ -22,6 +23,7 @@ main {
|
||||
header {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
min-height: 930px;
|
||||
@ -55,10 +57,12 @@ header {
|
||||
min-width: 50%;
|
||||
}
|
||||
#title button {
|
||||
min-width: 100%;
|
||||
background-color: transparent;
|
||||
min-width: 80%;
|
||||
color: #fff;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
padding: 3px 0;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -68,7 +72,7 @@ header {
|
||||
}
|
||||
#nav {
|
||||
max-height: 50px;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -78,13 +82,13 @@ header {
|
||||
}
|
||||
#logo {
|
||||
max-height: 41%;
|
||||
padding: 7px 0 5px 20px;
|
||||
padding: 7px 0 10px 20px;
|
||||
}
|
||||
#links {
|
||||
text-align: right;
|
||||
}
|
||||
#links a {
|
||||
color: #eee;
|
||||
color: inherit;
|
||||
padding: 10px;
|
||||
font-size: 0.85rem;
|
||||
text-decoration: none;
|
||||
|
@ -3169,7 +3169,7 @@ a.text-secondary:visited {
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #bcc3ce !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
a.text-gray:focus,
|
||||
@ -3251,6 +3251,12 @@ a.text-error:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/** Custom **/
|
||||
.bg-white {
|
||||
background: #fff;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background: #f1f1fc !important;
|
||||
}
|
||||
|
33
index.html
33
index.html
@ -10,22 +10,22 @@
|
||||
<body>
|
||||
<header class="main-header bg1">
|
||||
<div class="container">
|
||||
<div class="columns" id="nav">
|
||||
<div class="columns text-gray" 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>
|
||||
<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 id="title" class="text-center">
|
||||
<h1 class="arvo">Nel cielo di Fara</h1>
|
||||
<button>Entra</button>
|
||||
</div>
|
||||
</header>
|
||||
<main></main>
|
||||
@ -36,7 +36,7 @@
|
||||
</body>
|
||||
<!-- MOOOVE AWAAAAAYY -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('load', function () {
|
||||
window.addEventListener('load', () => {
|
||||
let navlinks = document.querySelector('#links').children;
|
||||
|
||||
Array.from(navlinks).forEach(element => {
|
||||
@ -46,5 +46,18 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', event => {
|
||||
let nav = document.querySelector('#nav');
|
||||
|
||||
if (window.pageYOffset !== 0) {
|
||||
nav.classList.add('bg-white');
|
||||
nav.classList.remove('text-gray');
|
||||
}
|
||||
else {
|
||||
nav.classList.add('text-gray');
|
||||
nav.classList.remove('bg-white');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user