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">
<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>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
</div>
<div class="nav-item current">
<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>
<h1>Homepage di Susanna</h1>
<div class="empty"></div>
<h1>Homepage di Susanna Terron</h1>
</header>
<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>
<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
@ -102,7 +130,8 @@
</main>
<footer>
<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>
</footer>
</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-5: #710002;
--fg-light: #f7d9da;
}
* {
@ -18,20 +20,24 @@
html, body {
margin: 0;
/* height: 100%; */
height: 100%;
}
body {
position: relative;
background: var(--color-2-1);
color: var(--color-1);
display: flex;
flex-direction: column;
position: relative;
overflow-y: scroll;
}
main {
max-width: calc(80ch + 4rem);
max-width: 100%;
width: calc(80ch + 4rem);
margin: 0 auto;
padding: 2rem;
@ -39,18 +45,23 @@ main {
background: var(--color-3);
/* flex-grow: 1; */
/* height: 100%; */
flex-grow: 1;
flex-basis: 100%;
}
#wallpaper {
z-index: -1;
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
}
header {
max-width: 100%;
width: calc(80ch + 4rem);
margin: 0 auto;
@ -61,7 +72,7 @@ header {
height: 15rem;
padding: 0 2rem;
padding: 0 1rem 0 2rem;
justify-content: space-between;
@ -72,6 +83,8 @@ header h1 {
color: var(--color-1);
font-size: 2.5rem;
font-weight: 600;
padding-bottom: 1rem;
}
nav {
@ -79,9 +92,60 @@ nav {
display: flex;
flex-direction: row;
align-items: start;
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 {
height: 5rem;
width: 100%;
@ -89,9 +153,24 @@ footer {
background: var(--color-2);
color: var(--color-1);
padding: 0 1rem;
display: flex;
align-items: 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 */
@ -108,11 +187,40 @@ b, strong {
p {
margin: 1rem 0 0;
color: var(--color-1);
}
h1, h2, h3, h4 {
color: var(--color-5);
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