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

Seconda sessione sito con Susanna e Baldo

Browse Source
main
Antonio De Lucreziis 3 years ago
parent 8030d96d9f
commit aca7ddec4c
8 changed files with 361 additions and 18 deletions
Show Stats Download Patch File Download Diff File

0
docs/design.jpg → _docs/design.jpg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

0
docs/palette.jpg → _docs/palette.jpg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

59
appunti/index.html
Unescape Escape View File

@ -0,0 +1,59 @@
<!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">
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
</div>
<div class="nav-item">
<a href="..">Home</a>
</div>
<div class="nav-item current">
<a href=".">Appunti</a>
</div>
<div class="nav-item">
<a href="../galleria/">Galleria</a>
</div>
<div class="nav-item">
<a href="../cv/">C.V.</a>
</div>
<div class="nav-item">
<a href="../spasticate/">Spasticate</a>
</div>
</nav>
<h1>Appunti di Susanna Terron</h1>
</header>
<main>
<h1>Appunti</h1>
<h2>Materia 1</h2>
<h2>Materia 2</h2>
<p>Uao che bella questa materia</p>
<ul>
<li>
<a href="#">Link ad un documento</a>
</li>
</ul>
<h2>Materia 3</h2>
<h2>Materia 4</h2>
</main>
<footer>
<div>
Questo è il sito di Susanna creato da <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">Antonio De
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
</body>
</html>

49
cv/index.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!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">
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
</div>
<div class="nav-item">
<a href="..">Home</a>
</div>
<div class="nav-item">
<a href="../appunti/">Appunti</a>
</div>
<div class="nav-item">
<a href="../galleria/">Galleria</a>
</div>
<div class="nav-item current">
<a href=".">C.V.</a>
</div>
<div class="nav-item">
<a href="../spasticate/">Spasticate</a>
</div>
</nav>
<h1>C.V. di Susanna Terron</h1>
</header>
<main>
<h1>Curriculum Vitae</h1>
</main>
<footer>
<div>
Questo è il sito di Susanna creato da <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">Antonio De
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
</body>
</html>

49
galleria/index.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!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">
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
</div>
<div class="nav-item">
<a href="..">Home</a>
</div>
<div class="nav-item">
<a href="../appunti/">Appunti</a>
</div>
<div class="nav-item current">
<a href=".">Galleria</a>
</div>
<div class="nav-item">
<a href="../cv/">C.V.</a>
</div>
<div class="nav-item">
<a href="../spasticate/">Spasticate</a>
</div>
</nav>
<h1>Galleria di Susanna Terron</h1>
</header>
<main>
<h1>Galleria</h1>
</main>
<footer>
<div>
Questo è il sito di Susanna creato da <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">Antonio De
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
</body>
</html>

45
index.html
Unescape Escape View File

@ -14,16 +14,44 @@
<img id="wallpaper" src="static/wallpaper.jpg" alt="wallpaper"> <img id="wallpaper" src="static/wallpaper.jpg" alt="wallpaper">
<header> <header>
<nav> <nav>
<div class="nav-item">Item 1</div> <div class="nav-item" id="mobile-nav-menu">
<div class="nav-item">Item 2</div> Bla bla bla
<div class="nav-item">Item 3</div> </div>
<div class="nav-item">Item 4</div> <div class="nav-item current">
<div class="nav-item">Item 5</div> <a href="#">Home</a>
</div>
<div class="nav-item">
<a href="appunti/">Appunti</a>
</div>
<div class="nav-item">
<a href="galleria/">Galleria</a>
</div>
<div class="nav-item">
<a href="cv/">C.V.</a>
</div>
<div class="nav-item">
<a href="spasticate/">Spasticate</a>
</div>
</nav> </nav>
<h1>Homepage di Susanna</h1> <h1>Homepage di Susanna Terron</h1>
<div class="empty"></div>
</header> </header>
<main> <main>
<div class="news">
<h2>Notizie</h2>
<ul>
<li>Notizia 1</li>
<li>Notizia 2</li>
<li>Notizia 3</li>
<li>Notizia 4</li>
<li>Notizia 5</li>
<li>Notizia 6</li>
<li>Notizia 7</li>
<li>Notizia 8</li>
<li>Notizia 9</li>
<li>Notizia 10</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, omnis.</li>
</ul>
</div>
<h1>Titolo di esempio</h1> <h1>Titolo di esempio</h1>
<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 Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil
@ -102,7 +130,8 @@
</main> </main>
<footer> <footer>
<div> <div>
Questo è il sito di Susanna creato da <a href="#">Antonio De Lucreziis</a> e <a href="#">Francesco Baldino</a> Questo è il sito di Susanna creato da <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">Antonio De
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div> </div>
</footer> </footer>
</body> </body>

49
spasticate/index.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!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">
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
</div>
<div class="nav-item">
<a href="..">Home</a>
</div>
<div class="nav-item">
<a href="../appunti/">Appunti</a>
</div>
<div class="nav-item">
<a href="../galleria/">Galleria</a>
</div>
<div class="nav-item">
<a href="../cv/">C.V.</a>
</div>
<div class="nav-item current">
<a href=".">Spasticate</a>
</div>
</nav>
<h1>Spasticate di Susanna & Co.</h1>
</header>
<main>
<h1>Spasticate</h1>
</main>
<footer>
<div>
Questo è il sito di Susanna creato da <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">Antonio De
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
</body>
</html>

128
style.css
Unescape Escape View File

@ -10,6 +10,8 @@
--color-4: #c10001; --color-4: #c10001;
--color-5: #710002; --color-5: #710002;
--fg-light: #f7d9da;
} }
* { * {
@ -18,20 +20,24 @@
html, body { html, body {
margin: 0; margin: 0;
/* height: 100%; */ height: 100%;
} }
body { body {
position: relative;
background: var(--color-2-1); background: var(--color-2-1);
color: var(--color-1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
overflow-y: scroll;
} }
main { main {
max-width: calc(80ch + 4rem); max-width: 100%;
width: calc(80ch + 4rem);
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
@ -39,18 +45,23 @@ main {
background: var(--color-3); background: var(--color-3);
/* flex-grow: 1; */ /* height: 100%; */
flex-grow: 1;
flex-basis: 100%;
} }
#wallpaper { #wallpaper {
z-index: -1; z-index: -1;
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: auto;
} }
header { header {
max-width: 100%;
width: calc(80ch + 4rem); width: calc(80ch + 4rem);
margin: 0 auto; margin: 0 auto;
@ -61,7 +72,7 @@ header {
height: 15rem; height: 15rem;
padding: 0 2rem; padding: 0 1rem 0 2rem;
justify-content: space-between; justify-content: space-between;
@ -72,6 +83,8 @@ header h1 {
color: var(--color-1); color: var(--color-1);
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 600; font-weight: 600;
padding-bottom: 1rem;
} }
nav { nav {
@ -79,9 +92,60 @@ nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: start;
justify-content: flex-end; justify-content: flex-end;
} }
nav .nav-item {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 1rem;
display: flex;
align-items: start;
justify-content: center;
/* background: linear-gradient(to right, var(--color-4), var(--color-5)); */
background: var(--color-4);
color: var(--fg-light);
box-sizing: content-box;
transition: padding-bottom 150ms ease-in-out;
}
nav .nav-item:not(:first-child) {
border-left: 1px solid var(--color-5);
}
nav .nav-item.current {
padding-bottom: 2rem;
}
nav .nav-item a, nav .nav-item a:visited {
color: var(--fg-light);
text-decoration: none;
}
nav .nav-item:hover {
padding-bottom: 2rem;
}
.news {
float: right;
max-width: 30ch;
padding: 0 1rem;
margin: 0 1rem 1rem;
/* border-left: 2px solid var(--color-5);
border-bottom: 2px solid var(--color-5); */
background: #ffd772;
border-radius: 3px;
box-shadow: 0 0 8px #00000066;
transform: rotate(3deg);
}
footer { footer {
height: 5rem; height: 5rem;
width: 100%; width: 100%;
@ -89,9 +153,24 @@ footer {
background: var(--color-2); background: var(--color-2);
color: var(--color-1); color: var(--color-1);
padding: 0 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
}
/* Block Elements */
a, a:visited {
color: var(--color-5);
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
} }
/* Typography */ /* Typography */
@ -108,11 +187,40 @@ b, strong {
p { p {
margin: 1rem 0 0; margin: 1rem 0 0;
color: var(--color-1);
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
color: var(--color-5); color: var(--color-5);
font-weight: 400; font-weight: 400;
}
/* Mobile */
@media screen and (max-width: 512px) {
header {
padding: 0;
height: unset;
}
nav {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
z-index: 1;
}
nav .nav-item, nav .nav-item.current {
padding: 1rem !important;
border-radius: 0;
width: 100%;
box-sizing: border-box;
}
#mobile-nav-menu {
display: flex;
}
} }
Write Preview
Loading…
Cancel
Save