Skip to content
Snippets Groups Projects
Commit 2657d3e4 authored by Maximilian Berens's avatar Maximilian Berens
Browse files

Upload New File

parent 4a214274
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 332 additions and 0 deletions
resources/css/style.css 0 → 100644
+ 332
− 0
View file @ 2657d3e4
/* Global styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #FEFAE0;
/* color: #333; */
}
/* Header styles */
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #A9B388;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo h1{
font-size: 24px;
font-weight: 700;
cursor: pointer;
}
nav ul{
display: flex;
list-style: none;
}
nav li{
margin-right: 20px;
}
nav a{
display: block;
padding: 10px;
color: #333;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
nav a:hover{
color: #506b1a;
}
.results-button a{
text-decoration: none;
font-weight: 700;
border-radius: 25px;
padding: 10px 20px;
border: 2px solid #007bff;
font-size: 1rem;
background-color: transparent;
transition: all 0.3s ease-in-out;
opacity: 0;
}
.results-button a:hover{
color: #fff;
background-color: #007bff;
opacity: 0;
}
.results-button button{
text-decoration: none;
color: #333;
font-weight: 200;
border-radius: 10px;
padding: 5px 10px;
border: 1px solid #5F6F52;
/* font-size: 1rem; */
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.results-button button:hover{
color: #fff;
background-color: #5F6F52;
}
/* Main section styles */
.main{
background-color: #FEFAE0;
color: #fff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient #007bff #00c8ff;
background-size: cover;
}
.container{
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.main-content{
max-width: 62%;
padding: 0 50px;
/* Text over the background-image */
position: absolute;
background-color: rgba(80, 107, 26, 0.5);
margin-left: 20px;
margin-top: 150px;
}
.main-content .animated-title{
font-size: 4ren;
font-weight: 700;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-bottom: 20px;
line-height: 1.2;
position: relative;
animation: slide-up 0.6s cubic-bezier(0.65, 0.05, 0.36, 1.0) 0.5s forwards;
}
.animated-title span{
display: inline-block;
transform: translateY(50px);
opacity: 0;
animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 1s forwards;
}
.animated-title span:nth-child(1){
animation-delay: 1.5s;
}
.animated-text{
font-size: 1.5rem;
font-weight: 400;
opacity: 0;
margin-bottom: 20px;
transform: translateY(50px);
animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 1.5s forwards;
}
.test-button{
color: #fff;
background-color: transparent;
border: 2px solid #fff;
padding: 10px 30px;
border-radius: 5px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.2s ease-in-out;
transform: translateY(50px);
animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 2s forwards;
}
.test-button:hover{
color: #123;
background-color: #fff;
}
.main-image{
max-width: 38%;
position: relative;
margin-top: 6rem;
animation: slide-right 0.6s cubic-bezier(0.65, 0.05, 0.36, 1.0) 0.5s forwards;
}
.main-image img{
max-width: 100%;
height: auto;
display: block;
}
.centered-image{
text-align: center;
margin: 20px auto;
/* margin-bottom: 120px; */
max-width: 1000px;
background-color: #fff;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.centered-image img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
@keyframes slide-right{
from{
transform: translateX(-50px);
opacity: 0;
}
to{
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-up {
from{
transform: translateY(50px);
opacity: 0;
}
to{
transform: translateY(0);
opacity: 1;
}
}
.contact-page {
max-width: 600px;
margin: 200px auto;
padding: 20px;
background-color: #FFFBF5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.contact-page img{
width: 50%;
height: auto;
}
.about-page {
max-width: 1200px;
margin: 200px auto;
padding: 20px;
background-color: #FFFBF5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.imgTextleft{
float: left;
margin-right: 10px;
width: 30%;
height: auto;
}
.imgTextright {
float: right;
margin-left: 10px;
width: 30%;
height: auto;
}
.data-page {
max-width: 1500px;
margin: 200px auto;
padding: 20px;
background-color: #FFFBF5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: auto;
}
footer{
background-color: #A9B388;
color: #555;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
font-size: small;
}
/* DATA TABLE SECTION */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
text-align: left;
}
th, td {
padding: 12px;
border-bottom: 1px solid #ddd;
min-width: 150px;
}
th {
background-color: #f2f2f2;
}
td.contentInformations {
min-width: 400px;
}
tr:hover {
background-color: rgba(169, 179, 136, 0.15);;
/* background-color: #A9B388; */
/* background-color: #f5f5f5; */
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment