Skip to content

Commit

Permalink
für Tablet
Browse files Browse the repository at this point in the history
  • Loading branch information
@TinaBK24
TinaBK24 committed Sep 5, 2024
1 parent 208d5c7 commit 0b84068
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 26 deletions.
217 changes: 192 additions & 25 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@
box-sizing: border-box;
}

/* -------- header start -------- */

header{
min-width: 1200px;
width: 100%;
width: 100vw;
height: 76px;
padding: 0 15vw;
padding: 0 5vw;
box-shadow: 0 1px 1px rgb(162, 158, 158);
background-color: white;
position: fixed;
Expand All @@ -24,11 +25,12 @@ nav{
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0 2rem;
}

.logo{
flex: 1;
width: 50%;
text-decoration: none;
color: #666;
font-size: 1.5rem;
Expand All @@ -41,8 +43,7 @@ nav{
nav ul{
display: flex;
justify-content: space-around;
flex: 1;

width: 50%;
}

nav li{
Expand All @@ -61,12 +62,20 @@ nav li a:hover{
color: #337ab7;
}

.burger-wrapper{
display: none;
}

/* -------- header ende -------- */
/* -------- main start -------- */

.see{
height: 115vh;
background-image: url("../img/page1.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -129,6 +138,8 @@ a{
color:black !important;
}

/* -------- img links und rechts -------- */

.links_img{
display: flex;
align-items: center;
Expand All @@ -146,15 +157,15 @@ a{
}

.links_img h2, .rechts_img h2, .cent_img h2{
font-size: 30px;
font-size: 1.5rem;
font-weight: 400;
color: #0E1015;
margin-bottom: 25px;
font-weight: normal;
}

.links_img p, .rechts_img p, .cent_img p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 400;
color: #8C979E;
margin-bottom: 35px;
Expand All @@ -168,35 +179,40 @@ a{
background-color: #f5f5f5;
}

/* -------- parallax -------- */

.parallax-section {
width: 100%;
height: 50vh;
background-image: url('../img/parallax.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20vw;
}

.parallax-section h2{
font-size: 60px;
font-size: 3rem;
font-weight: 400;
color: white;
margin-bottom: 25px;
font-weight: normal;
}

.parallax-section p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 400;
color: #ffffff;
margin-bottom: 35px;
}

/* -------- central img -------- */

.cent_img{
text-align: center;
padding-top: 95px;
Expand All @@ -219,6 +235,8 @@ a{

}

/* -------- gallery -------- */

.gallery-container{
padding-top: 95px;
background-color: #0E1015;
Expand All @@ -227,15 +245,15 @@ a{
}

.gallery-container h2, .himmel h2{
font-size: 30px;
font-size: 2rem;
font-weight: 400;
color: #ffffff;
margin-bottom: 25px;
font-weight: normal;
}

.gallery-container p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 400;
color: #ffffff;
margin-bottom: 45px;
Expand All @@ -255,22 +273,25 @@ a{
display: block;
}

/* -------- himmel -------- */

.himmel{
width: 100%;
height: 50vh;
background-image: url('../img/page7_1.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20vw;
}

.himmel p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 400;
color: #ffffff;
margin-bottom: 30px;
Expand All @@ -284,17 +305,25 @@ a{
}

.photo p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 700;
}

.mini_logos-container{
padding: 95px 10vw;
width: 100%;
padding: 95px 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.mini_logos-container div{
width: 100%;
}

.mini_logos-container h2{
font-size: 30px;
font-size: 2rem;
font-weight: 400;
color: #0E1015;
margin-bottom: 65px;
Expand Down Expand Up @@ -325,7 +354,7 @@ a{
}

.ohne_bild h2{
font-size: 30px;
font-size: 2rem;
font-weight: 400;
font-weight: normal;
}
Expand All @@ -334,6 +363,9 @@ a{
width: 260px !important;
}

/* -------- main ende -------- */
/* -------- footer start -------- */

footer{
display: flex;
align-items: center;
Expand All @@ -343,11 +375,146 @@ footer{
}

footer p{
font-size: 14px;
font-size: 0.8rem;
font-weight: 400;
color: white;
}

footer span{
font-weight: bold;
}
}

/* -------- footer ende -------- */
/* -------- 1150px - 769px -------- */

@media only screen and (max-width: 1150px) and (min-width: 769px){
header{
max-width: 1150px;
height: 76px;
padding: 0 15vw;
box-shadow: 0 1px 1px rgb(162, 158, 158);
background-color: white;
position: fixed;
}
nav{
display: none;
}
.burger-wrapper{
position: fixed;
width: 100%;
display: flex;
align-items: center;
padding: 0 2rem;
}
.burger-button{
width: 50% !important;
height: auto !important;
background-color: white !important;
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: center;
}
.burger{
background-color: #3A52BF;
height: 3px;
width: 30px;
margin: 3px;
border-radius: 5px;
}
.logo{
width: 50%;
text-decoration: none;
color: #666;
font-size: 1.5rem;
}
.logo:hover{
color: #333;
}
}

/* -------- < 769px -------- */

@media only screen and (max-width: 768px){
header{
width: 100%;;
height: 76px;
padding: 0;
box-shadow: 0 1px 1px rgb(162, 158, 158);
background-color: white;
position: fixed;
}
nav{
display: none;
}
.burger-wrapper{
position: fixed;
width: 100%;
height: 76px;
display: flex;
justify-content: space-around;
align-items: center;
}
.burger-button{
width: auto !important;
height: auto !important;
background-color: white !important;
/* position: fixed;
top: 10px;
right: 20px; */
}
.burger{
background-color: #3A52BF;
height: 3px;
width: 30px;
margin: 2px;
border-radius: 5px;
}
.logo{
/* width: 50%; */
}
main{
width: 100%;;
}
.see{
width: 100%;
height: 65vh;
margin-bottom: 0;
}
h1{
margin: 0 5vw;
}
.links_img, .rechts_img{
height: 50vh;
}
.parallax-section{
height: 50vh;
width: 100%;
}
.cent_img img{
width: 100%;
height: auto;
}
.gallery{
grid-template-columns: repeat(2, 1fr);
}
.himmel{
height: 50vh;
width: 100%;
}
.mini_logos-container{
height: 25vh;
padding: 30px;
}
.mini_logos-container h2{
margin-bottom: 30px;
}
.ohne_bild{
padding: 5vw 5vw;
}
footer{
width: 100%;
height: 10vh;
}
}

Loading

0 comments on commit 0b84068

Please sign in to comment.