Initial commit
commit
9876a14432
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sito Susanna</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img id="wallpaper" src="static/wallpaper.jpg" alt="wallpaper">
|
||||||
|
<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>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
Binary file not shown.
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
After Width: | Height: | Size: 3.6 MiB |
@ -0,0 +1,47 @@
|
|||||||
|
:root {
|
||||||
|
--color-1: #2a555e;
|
||||||
|
--color-2: #70abaf;
|
||||||
|
--color-3: #eff6ff;
|
||||||
|
--color-4: #c10001;
|
||||||
|
--color-5: #710002;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: var(--color-3);
|
||||||
|
|
||||||
|
margin-bottom: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 100ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wallpaper {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
Loading…
Reference in New Issue