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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,31 +9,102 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<img id="wallpaper" src="static/wallpaper.jpg" alt="wallpaper"> <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> <main>
<header> <h1>Titolo di esempio</h1>
<nav> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
<div class="nav-item">Item 1</div> Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
<div class="nav-item">Item 2</div> beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
<div class="nav-item">Item 3</div> impedit obcaecati sapiente non magnam hic?</p>
<div class="nav-item">Item 4</div> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
<div class="nav-item">Item 5</div> Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
</nav> beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
<h1>Hompage di Susanna</h1> impedit obcaecati sapiente non magnam hic?</p>
</header> <h2>Sottotitolo di esempio</h2>
<div class="content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta?
<h1>Titolo di esempio</h1> Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
<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> beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
<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> 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?
<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> Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
<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> beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
<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> 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?
<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> Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
<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> beatae quasi, officia dolore? Amet sapiente minus unde saepe ut? Voluptatibus sit aut esse debitis fugit
</div> 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> </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> </body>
</html> </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 { :root {
--color-1: #2a555e; --color-1: #2a555e;
--color-2: #70abaf; --color-2: #70abaf;
--color-2-1: #bbdce2;
--color-3: #eff6ff; --color-3: #eff6ff;
--color-4: #c10001; --color-4: #c10001;
--color-5: #710002; --color-5: #710002;
} }
@ -12,19 +18,28 @@
html, body { html, body {
margin: 0; margin: 0;
/* height: 100%; */
} }
body { body {
position: relative; position: relative;
background: var(--color-3); background: var(--color-2-1);
margin-bottom: 1000px; display: flex;
flex-direction: column;
} }
main { main {
max-width: 100ch; max-width: calc(80ch + 4rem);
margin: 0 auto; margin: 0 auto;
padding: 2rem;
margin-bottom: 5rem;
background: var(--color-3);
/* flex-grow: 1; */
} }
#wallpaper { #wallpaper {
@ -36,12 +51,68 @@ main {
} }
header { header {
width: calc(80ch + 4rem);
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; 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 { nav {
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; 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