Skip to content
Snippets Groups Projects
Commit 0a50e570 authored by Sondre Sommerset Nordvik's avatar Sondre Sommerset Nordvik
Browse files

egen css for index.html

parent 474be9be
No related branches found
No related tags found
No related merge requests found
.container {
position: relative;
margin: auto;
background-color: #b82a31;
text-align: left;
margin-top: 6vh; /* 6vh*/
min-height: calc(100vh - 14vh); /* 100vh - navbar(8vh) - margin-top(6vh) = 86vh*/ /*prøve rem?*/
width: 80%;
border-bottom: 2px solid black;
padding-top: 50px;
}
.container h1 {
font-size: 110px;
color: white;
}
.container h2 {
margin-top: 20px;
font-size: 36px;
color: #FFE119;
}
.container p {
font-size: 28px;
margin-top: 20px;
font-weight: bold;
line-height: 1.6em;
}
.container #mobile-pizza {
display: none;
}
.container-buttons {
padding: 50px 0px;
}
.container-button1 {
border: 2px solid #FFE119;
background: transparent;
color: #FFE119;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
}
.container-button2 {
border: none;
background: #FFE119;
color: #1b1b1b;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
margin: 30px 0px 0px 30px;
}
.container-button1:hover{
background-color: black;
filter: drop-shadow(0px 5px 3px black);
}
.container-button2:hover{
background-color: black;
color: #FFE119;
filter: drop-shadow(0px 5px 3px black);
}
.container #pizza-vid {
position: absolute;
right: 0;
bottom: 10px;
width: 740px; /* 66% */
border-radius: 10px;
filter: drop-shadow(0px 10px 6px black);
}
.news {
position: relative;
margin: auto;
text-align: center;
background-color: #b82a31;
margin-top: 50px;
width: 80%;
}
.news h1 {
font-size: 52px;
color: white;
}
.news p {
margin-top: 10px;
font-size: 24px;
margin-bottom: 10px;
}
/* ######## Slideshow inspiration: https://www.youtube.com/watch?v=0wvrlOyGlq0&t=183s ####### */
.slider{
margin: auto;
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child){
margin-right: 40px;
}
.manual-btn:hover{
background: #40D3DC;
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
#radio5:checked ~ .first{
margin-left: -80%;
}
/* ######## Slideshow ####### */
@media screen and (max-width:1080px) {
.slider{
width: 90%;
height: calc(500px*0.8);
}
.slides{
width: 500%;
height: calc(500px*0.8);
}
.slide img{
width: 100%;
height: calc(500px*0.8);
}
.navigation-manual{
width: 90%;
}
}
@media screen and (max-width:780px) {
.container h1 {
font-size: calc(110px * 0.8);
}
}
@media screen and (max-width:625px) {
.container h1 {
font-size: calc(110px * 0.5);
}
}
@media screen and (max-width:1300px) {
.container #pizza-vid {
display: none;
}
.container #mobile-pizza {
display: block;
margin-top: 10px;
}
}
@media screen and (max-width: 435px){
.container-button2 {
margin: 30px 0px 0px 0px;
}
.container #mobile-pizza {
width: 100%;
}
}
\ No newline at end of file
......@@ -111,106 +111,6 @@ nav {
}
/* ###### navigation bar ##### */
.container {
position: relative;
margin: auto;
background-color: #b82a31;
text-align: left;
margin-top: 6vh; /* 6vh*/
min-height: calc(100vh - 14vh); /* 100vh - navbar(8vh) - margin-top(6vh) = 86vh*/ /*prøve rem?*/
width: 80%;
border-bottom: 2px solid black;
padding-top: 50px;
}
.container h1 {
font-size: 110px;
color: white;
}
.container h2 {
margin-top: 20px;
font-size: 36px;
color: #FFE119;
}
.container p {
font-size: 28px;
margin-top: 20px;
font-weight: bold;
line-height: 1.6em;
}
.container #mobile-pizza {
display: none;
}
.container-buttons {
padding: 50px 0px;
}
.container-button1 {
border: 2px solid #FFE119;
background: transparent;
color: #FFE119;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
}
.container-button2 {
border: none;
background: #FFE119;
color: #1b1b1b;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
margin: 30px 0px 0px 30px;
}
.container-button1:hover{
background-color: black;
filter: drop-shadow(0px 5px 3px black);
}
.container-button2:hover{
background-color: black;
color: #FFE119;
filter: drop-shadow(0px 5px 3px black);
}
.container #pizza-vid {
position: absolute;
right: 0;
bottom: 10px;
width: 740px; /* 66% */
border-radius: 10px;
filter: drop-shadow(0px 10px 6px black);
}
.news {
position: relative;
margin: auto;
text-align: center;
background-color: #b82a31;
margin-top: 50px;
width: 80%;
}
.news h1 {
font-size: 52px;
color: white;
}
.news p {
margin-top: 10px;
font-size: 24px;
margin-bottom: 10px;
}
footer {
display: flex;
justify-content: space-around;
......@@ -248,100 +148,6 @@ footer {
to {transform: translateX(100%);}
}
/* ######## Slideshow inspiration: https://www.youtube.com/watch?v=0wvrlOyGlq0&t=183s ####### */
.slider{
margin: auto;
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child){
margin-right: 40px;
}
.manual-btn:hover{
background: #40D3DC;
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
#radio5:checked ~ .first{
margin-left: -80%;
}
/* ######## Slideshow ####### */
@media screen and (max-width:1080px) {
.slider{
width: 90%;
height: calc(500px*0.8);
}
.slides{
width: 500%;
height: calc(500px*0.8);
}
.slide img{
width: 100%;
height: calc(500px*0.8);
}
.navigation-manual{
width: 90%;
}
}
/* ############# footer media queries ##########*/
@media screen and (max-width:1080px) {
#copyright{
......@@ -356,40 +162,6 @@ footer {
}
/* ############# footer media queries ##########*/
@media screen and (max-width:780px) {
.container h1 {
font-size: calc(110px * 0.8);
}
}
@media screen and (max-width:625px) {
.container h1 {
font-size: calc(110px * 0.5);
}
}
@media screen and (max-width:1300px) {
.container #pizza-vid {
display: none;
}
.container #mobile-pizza {
display: block;
margin-top: 10px;
}
}
@media screen and (max-width: 435px){
.container-button2 {
margin: 30px 0px 0px 0px;
}
.container #mobile-pizza {
width: 100%;
}
}
/* CSS under er til handlekurv dropdown */
#hkMain{
position: absolute;
......@@ -436,8 +208,6 @@ footer {
margin-top: 15px;
}
#navCart:hover{
cursor: pointer;
}
\ No newline at end of file
......@@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuickFood</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="img/QuickFood-Favicon.png">
</head>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment