Add style to index page

This commit is contained in:
2024-05-14 18:44:12 +02:00
parent f660e71ca7
commit ddcc746744
7 changed files with 274 additions and 30 deletions

View File

@ -1,7 +1,11 @@
* {
box-sizing: border-box;
}
:root {
font-family: 'Arial', sans-serif;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
@ -15,6 +19,7 @@ header {
height: 3em;
border-bottom: 1px solid #C0C0C0;
background-color: #FFFFFF;
z-index: 10;
}
header img {
@ -24,6 +29,13 @@ header img {
nav {
height: 100%;
display: flex;
justify-content: space-between;
}
nav > *:first-child,
nav > *:last-child {
flex: 100px 1 1;
}
nav ul {
@ -36,15 +48,183 @@ nav ul {
height: 100%;
}
nav li {
}
nav li a {
text-decoration: none;
padding: 1em;
padding: 1em 2em;
color: #808080;
}
nav li a:hover {
color: #A040C0;
}
main span[id] {
position: relative;
top: -8em;
}
p a {
color: #A040C0;
}
main .home {
height: 100vh;
background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
background-size: cover;
}
main .picture-1 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
background-size: cover;
height: 24em;
}
main .picture-2 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
background-size: cover;
height: 24em;
}
main .home a {
text-decoration: none;
color: #000000;
top: calc(32vh - 1em);
position: relative;
}
main .home a > div {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
transition: top 0.25s, font-size 0.25s;
width: fit-content;
margin: auto;
backdrop-filter: blur(16px);
padding: 1em 0.5em;
border-radius: 3em;
}
main .home a > div:hover {
font-size: 1.675em;
top: calc(32vh - 1.5em);
}
main .home img {
width: 8em;
height: 8em;
}
main .home h1 {
font-size: 3.5em;
margin: 0;
font-weight: normal;
}
main .home h2 {
font-size: 1.125em;
margin: 0;
font-weight: bold;
}
main section {
padding: 1em 0 2em 0;
}
main section p,
main section table {
max-width: 1000px;
margin: 1em auto;
}
main section p {
text-align: justify;
}
main section h3 {
text-align: center;
font-size: 2em;
}
main .about {
border-top: 1em solid #C0F080;
border-bottom: 1em solid #C0F080;
}
main .clients {
border-top: 1em solid #C0F080;
border-bottom: 1em solid #C0F080;
}
table td {
padding: 0.125em 0.5em;
}
footer {
height: 8em;
padding: 1em;
width: 100%;
background-color: #404040;
color: #FFFFFF;
display: flex;
justify-content: center;
gap: 2em;
}
footer img {
height: 4em;
width: 4em;
}
footer a {
align-self: center;
}
@media screen and (max-width: 1032px) {
nav li a {
padding: 1em;
}
main section p,
main section table {
margin: 1em;
}
}
@media screen and (max-width: 800px) {
footer {
flex-direction: column;
height: unset;
align-items: center;
gap: 1em;
}
footer > *:not(:first-child) {
width: 300px;
}
.home {
font-size: 0.5em;
}
}
@media screen and (max-width: 650px) {
nav li:first-child {
display: none;
}
}
@media screen and (max-width: 550px) {
nav li:nth-child(2) {
display: none;
}
}
@media screen and (max-width: 500px) {
nav li:nth-child(3) {
display: none;
}
}