Initial commit

3 years ago · 9876a14432
commit 9876a14432
4 changed files with 85 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/static/palette.jpg
+++ b/static/palette.jpg
--- a/static/wallpaper.jpg
+++ b/static/wallpaper.jpg
--- a/style.css
+++ b/style.css
@ -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;
+}