Header, Footer and ToTop-Button
This commit is contained in:
parent
d156ead8e0
commit
4ae49b6b0b
8 changed files with 384 additions and 4 deletions
38
css/footer.css
Normal file
38
css/footer.css
Normal file
|
@ -0,0 +1,38 @@
|
|||
.footer {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 2em;
|
||||
color: Tomato;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
line-height: 32px;
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
font-size: small;
|
||||
}
|
41
css/header.css
Normal file
41
css/header.css
Normal file
|
@ -0,0 +1,41 @@
|
|||
.header {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 0rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
width: 48pt;
|
||||
}
|
||||
|
||||
.header-items {
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
margin-right: 0px;
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0px;
|
||||
align-items: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin-left: 2.5rem
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
3
css/index.css
Normal file
3
css/index.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
margin: 0px
|
||||
}
|
31
css/totop.css
Normal file
31
css/totop.css
Normal file
|
@ -0,0 +1,31 @@
|
|||
.totop {
|
||||
display: inline-flex;
|
||||
background-color: Tomato;
|
||||
color: #f2f2f2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 30px;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
transition: background-color .3s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.totop:hover {
|
||||
cursor: pointer;
|
||||
background-color: #333;
|
||||
}
|
Reference in a new issue