aziis98
/
sito-susanna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prima sessione di costruzione del sito con Susanna

Browse Source
main
Antonio De Lucreziis 3 years ago
parent 421fedff0a
commit 8030d96d9f
2 changed files with 168 additions and 25 deletions
Show Stats Download Patch File Download Diff File

116
index.html
Unescape Escape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,31 +9,102 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<img id="wallpaper" src="static/wallpaper.jpg" alt="wallpaper">
<header>
<nav>
<div class="nav-item">Item 1</div>
<div class="nav-item">Item 2</div>
<div class="nav-item">Item 3</div>
<div class="nav-item">Item 4</div>
<div class="nav-item">Item 5</div>
</nav>
<h1>Homepage di Susanna</h1>
<div class="empty"></div>
</header>
<main>
<header>
<nav>
<div class="nav-item">Item 1</div>
<div class="nav-item">Item 2</div>
<div class="nav-item">Item 3</div>
<div class="nav-item">Item 4</div>
<div class="nav-item">Item 5</div>
</nav>
<h1>Hompage di Susanna</h1>
</header>
<div class="content">
<h1>Titolo di esempio</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit impedit obcaecati sapiente non magnam hic?</p>
</div>
<h1>Titolo di esempio</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<h2>Sottotitolo di esempio</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
impedit obcaecati sapiente non magnam hic?</p>
</main>
<footer>
<div>
Questo è il sito di Susanna creato da <a href="#">Antonio De Lucreziis</a> e <a href="#">Francesco Baldino</a>
</div>
</footer>
</body>
</html>

77
style.css
Unescape Escape View File

@ -1,7 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap');
:root {
--color-1: #2a555e;
--color-2: #70abaf;
--color-2-1: #bbdce2;
--color-3: #eff6ff;
--color-4: #c10001;
--color-5: #710002;
}
@ -12,19 +18,28 @@
html, body {
margin: 0;
/* height: 100%; */
}
body {
position: relative;
background: var(--color-3);
background: var(--color-2-1);
margin-bottom: 1000px;
display: flex;
flex-direction: column;
}
main {
max-width: 100ch;
max-width: calc(80ch + 4rem);
margin: 0 auto;
padding: 2rem;
margin-bottom: 5rem;
background: var(--color-3);
/* flex-grow: 1; */
}
#wallpaper {
@ -36,12 +51,68 @@ main {
}
header {
width: calc(80ch + 4rem);
margin: 0 auto;
display: flex;
flex-direction: column;
background: #ffffff88;
height: 15rem;
padding: 0 2rem;
justify-content: space-between;
backdrop-filter: blur(4px);
}
header h1 {
color: var(--color-1);
font-size: 2.5rem;
font-weight: 600;
}
nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
footer {
height: 5rem;
width: 100%;
background: var(--color-2);
color: var(--color-1);
display: flex;
align-items: center;
justify-content: center;
}
/* Typography */
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
}
b, strong {
font-weight: 600;
}
p {
margin: 1rem 0 0;
color: var(--color-1);
}
h1, h2, h3, h4 {
color: var(--color-5);
font-weight: 400;
}
Write Preview
Loading…
Cancel
Save