nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Home page - first draft (temp JSgit st)

Browse Source
This commit is contained in:
Nicolò P 2021-07-28 17:25:10 +02:00
parent 4ac893d841
commit 8a8269718d
13 changed files with 141 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/fonts.css
View File

@ -7,4 +7,27 @@
url('../fonts/arvo-regular-webfont.woff') format('woff'); url('../fonts/arvo-regular-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: 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;
} }

92
css/main.css
View File

@ -2,18 +2,29 @@
@import url(fonts.css); @import url(fonts.css);
/** Font classes **/ /** Font classes **/
.arvo { .arvo {
font-family: 'arvoregular'/*Fallback??*/; font-family: 'arvoregular'/*Fallback??*/;
} }
.roboto {
.main-header { font-family: 'roboto_condensedregular';
background-image: url(../img/fara_background.jpg); }
/****** Custom rules ******/
body {
height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
width: 100%;
}
/* ---- Header ----- */
header {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
min-height: 900px; min-height: 930px;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
@ -22,11 +33,80 @@
margin: 0; margin: 0;
padding: 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 { .main-header h1 {
font-size: 3rem; 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 { #title {
flex: none; flex: none;
min-width: 50%; 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;
}

BIN
fonts/robotocondensed-bold-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/robotocondensed-bold-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/robotocondensed-italic-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/robotocondensed-italic-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/robotocondensed-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/robotocondensed-regular-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
img/FESR_BARRA_BENEFICIARI_DEF.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
img/InnovaPatrimonio_logo_transparent_bg_150x98.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
img/fara_background_alt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 944 KiB

BIN
img/fara_bg_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 KiB

34
index.html
View File

@ -8,13 +8,43 @@
<title>Nel cielo di Fara</title> <title>Nel cielo di Fara</title>
</head> </head>
<body> <body>
<header class="main-header"> <header class="main-header bg1">
<div class="container"> <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>
<div id="title"> <div id="title">
<h1 class="arvo text-center">Nel cielo di Fara</h1> <h1 class="arvo text-center">Nel cielo di Fara</h1>
<button class="text-center">Entra</button>
</div> </div>
</header> </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> </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> </html>