Skip to content
Snippets Groups Projects
Commit b9452df4 authored by Olav Utne Skjeldal's avatar Olav Utne Skjeldal
Browse files

Fikset CSS filer og meny

parent bdd0a4a8
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/handlekurv.css 0 → 100644
+ 142
− 0
View file @ b9452df4
/* CSS under er til handlekurv.html */
.checkout{
width : 90%;
position: relative;
left: 50%;
transform: translate(-50%,0);
margin-top: 20px;
padding: 30px;
border-radius: 7px;
box-shadow: 0px 5px 5px;
background-color: #FFE119;
}
#coTimeSelect,#coBestill, #coRabattInput, .coVareKnapp{
height: 30px;
border: solid 1px;
border-radius: 5px;
background-color: #b82a31;
}
#topBox{
min-height: 200px;
}
#bottomBox{
min-height: 220px;
}
#coVarer{
position: relative;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
min-height: 100px;
width: 100%;
border: solid 1px;
border-radius: 5px;
background-color: #b82a31;
list-style-type: none;
font-size: 22px;
}
.coVareP{
padding-top: 5px;
padding-bottom: 5px;
}
.coVareVen{
display: inline-block;
width: 80%;
}
.coVareHoy{
display: inline-block;
text-align: right;
width: 19%;
}
.coVareKnapp{
width: 30px;
text-align: center;
display: inline-block;
background-color: #FFE119;
}
#coNedeLeft{
position: absolute;
display: inline-block;
width: calc(35% - 45px);
height: calc(100% - 60px);
}
#coNedeRight{
position: absolute;
left: calc(50% + 15px);
display: inline-block;
width: calc(50% - 45px);
height: calc(100% - 60px);
}
#coLevering{
position: absolute;
width: 100%;
height: 40%;
}
#coTime{
display: table-cell;
padding-left: 20px;
vertical-align: middle;
height: 50px;
}
#coTimeSelect{
position: absolute;
transform: translate(30%,-15%);
}
#coRabatt{
position: absolute;
top: 100%;
transform: translate(0,-100%);
width: 100%;
}
#coRabattInput{
width: 100%;
margin-top: 1%;
}
.coPayList{
list-style-type: none;
display: inline-block;
}
#leftList{
position: absolute;
}
#rightList{
position: absolute;
left: 100%;
transform: translate(-100%,0);
}
.leftListPoint,.rightListPoint{
padding: 10px;
}
.rightListPoint{
text-align: right;
}
#coBestill{
width: 100%;
position: absolute;
left: 100%;
top: 100%;
transform: translate(-100%,-100%);
}
\ No newline at end of file
css/meny.css 0 → 100644
+ 93
− 0
View file @ b9452df4
/* CSS below is for meny.html */
#Bmny, #Pmny, #Dmny, #DagTil{
text-align: center;
}
#Pmny li, #Bmny li, #Dmny li{
text-decoration: underline;
list-style-type: none;
margin:20px;
font-size: 23px;
font-weight: bold;
}
#pm {
font-size: 10px;
margin:0px;
padding:0px;
}
.menyNav {
position: fixed;
left: 10%;
z-index: 1;
top: 75px;
width: 10%;
background:#FFE119;
overflow-x: hidden;
padding: 8px 0px 8px 5px;
display: block;
border:ridge black;
}
.menyNav li {
margin-top: 50px;
font-size: 22px;
font-weight: bold;
}
.menyNav li a {
list-style: none;
text-decoration: none;
color:black;
}
.menyNav li a:hover {
padding: 5px;
}
.menyNav h4 {
font-size: 25px;
}
.menybutton {
position: relative, left;
margin:0px;
padding:0px;
font-size: 10px;
}
.menyListe{
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menyListeVenstre{
width: 70%;
display: inline-block;
text-align: left;
}
.menyListeHoyre{
width: 29%;
display: inline-block;
text-align: right;
}
.menyLinje{
width: 100%;
height: 2px;
background-color: black;
}
.menyListeBesk{
font-size: 11px;
font-weight: bold;
}
@media screen and (max-width:900px){
.menyNav{
display:none;
}
}
css/om_oss.css 0 → 100644
+ 84
− 0
View file @ b9452df4
/* CSS below is for om_oss.html */
#matrix {
margin-left: 15%;
margin-right: 15%;
margin-top: 3%;
margin-bottom: 3%;
background-color: #FFE119;
}
#upperDiv, #lowerDiv {
height: 450px;
}
#NW, #NE, #SW, #SE {
width: 50%;
}
#upperDiv, #lowerDiv {
position: relative;
}
#NW, #SW {
height: 100%;
}
#NE, #SE {
height: 100%;
position: absolute; right: 0px; top: 0px;
}
#burgerPic, #chefPic {
width: 100%;
height: 100%;
}
#matrix h1 {
text-align: center;
color: #b82a31;;
}
#upperDiv section, #lowerDiv section {
padding: 20px 20px;
}
@media screen and (max-width:1200px){
#SE {
overflow-y: scroll;
}
#SE::-webkit-scrollbar {
width: 10px;
}
#SE::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
#SE::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, RED 0%, YELLOW 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
}
@media screen and (max-width:925px){
#NW {
overflow-y: scroll;
}
#NW::-webkit-scrollbar {
width: 10px;
}
#NW::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
#NW::-webkit-scrollbar-thumb{
background-image: linear-gradient(180deg, RED 0%, YELLOW 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
}
\ No newline at end of file
css/style.css
+ 0
− 320
View file @ b9452df4
...@@ -391,183 +391,6 @@ footer { ...@@ -391,183 +391,6 @@ footer {
} }
} }
/* CSS below is for meny.html */
#Bmny, #Pmny, #Dmny, #DagTil{
text-align: center;
}
#Pmny li, #Bmny li, #Dmny li{
text-decoration: underline;
list-style-type: none;
margin:20px;
font-size: 23px;
}
#pm {
font-size: 10px;
margin:0px;
padding:0px;
}
.menyNav {
position: fixed;
left: 10%;
z-index: 1;
top: 75px;
width: 10%;
background:#FFE119;
overflow-x: hidden;
padding: 8px 0px 8px 5px;
display: block;
border:ridge black;
}
.menyNav li {
margin-top: 50px;
font-size: 22px;
}
.menyNav li a {
list-style: none;
text-decoration: none;
color:black;
}
.menyNav li a:hover {
padding: 5px;
}
.menyNav h4 {
font-size: 25px;
}
.menybutton {
position: relative, left;
margin:0px;
padding:0px;
font-size: 10px;
}
.menyListe{
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menyListeVenstre{
width: 70%;
display: inline-block;
text-align: left;
}
.menyListeHoyre{
width: 29%;
display: inline-block;
text-align: right;
}
.menyLinje{
width: 100%;
height: 2px;
background-color: black;
}
.menyListeBesk{
font-size: 11px;
font-weight: bold;
}
@media screen and (max-width:900px){
.menyNav{
display:none;
}
}
/* CSS below is for om_oss.html */
#matrix {
margin-left: 15%;
margin-right: 15%;
margin-top: 3%;
margin-bottom: 3%;
background-color: #FFE119;
}
#upperDiv, #lowerDiv {
height: 450px;
}
#NW, #NE, #SW, #SE {
width: 50%;
}
#upperDiv, #lowerDiv {
position: relative;
}
#NW, #SW {
height: 100%;
}
#NE, #SE {
height: 100%;
position: absolute; right: 0px; top: 0px;
}
#burgerPic, #chefPic {
width: 100%;
height: 100%;
}
#matrix h1 {
text-align: center;
color: #b82a31;;
}
#upperDiv section, #lowerDiv section {
padding: 20px 20px;
}
@media screen and (max-width:1200px){
#SE {
overflow-y: scroll;
}
#SE::-webkit-scrollbar {
width: 10px;
}
#SE::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
#SE::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, RED 0%, YELLOW 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
}
@media screen and (max-width:925px){
#NW {
overflow-y: scroll;
}
#NW::-webkit-scrollbar {
width: 10px;
}
#NW::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
#NW::-webkit-scrollbar-thumb{
background-image: linear-gradient(180deg, RED 0%, YELLOW 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
}
/* CSS under er til handlekurv dropdown */ /* CSS under er til handlekurv dropdown */
#hkMain{ #hkMain{
position: fixed; position: fixed;
...@@ -624,146 +447,3 @@ footer { ...@@ -624,146 +447,3 @@ footer {
background-color: #b82a31; background-color: #b82a31;
margin-top: 15px; margin-top: 15px;
} }
\ No newline at end of file
/* CSS under er til handlekurv.html */
.checkout{
width : 90%;
position: relative;
left: 50%;
transform: translate(-50%,0);
margin-top: 20px;
padding: 30px;
border-radius: 7px;
box-shadow: 0px 5px 5px;
background-color: #FFE119;
}
#coTimeSelect,#coBestill, #coRabattInput, .coVareKnapp{
height: 30px;
border: solid 1px;
border-radius: 5px;
background-color: #b82a31;
}
#topBox{
min-height: 200px;
}
#bottomBox{
min-height: 220px;
}
#coVarer{
position: relative;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
min-height: 100px;
width: 100%;
border: solid 1px;
border-radius: 5px;
background-color: #b82a31;
list-style-type: none;
font-size: 22px;
}
.coVareP{
padding-top: 5px;
padding-bottom: 5px;
}
.coVareVen{
display: inline-block;
width: 80%;
}
.coVareHoy{
display: inline-block;
text-align: right;
width: 19%;
}
.coVareKnapp{
width: 30px;
text-align: center;
display: inline-block;
background-color: #FFE119;
}
#coNedeLeft{
position: absolute;
display: inline-block;
width: calc(35% - 45px);
height: calc(100% - 60px);
}
#coNedeRight{
position: absolute;
left: calc(50% + 15px);
display: inline-block;
width: calc(50% - 45px);
height: calc(100% - 60px);
}
#coLevering{
position: absolute;
width: 100%;
height: 40%;
}
#coTime{
display: table-cell;
padding-left: 20px;
vertical-align: middle;
height: 50px;
}
#coTimeSelect{
position: absolute;
transform: translate(30%,-15%);
}
#coRabatt{
position: absolute;
top: 100%;
transform: translate(0,-100%);
width: 100%;
}
#coRabattInput{
width: 100%;
margin-top: 1%;
}
.coPayList{
list-style-type: none;
display: inline-block;
}
#leftList{
position: absolute;
}
#rightList{
position: absolute;
left: 100%;
transform: translate(-100%,0);
}
.leftListPoint,.rightListPoint{
padding: 10px;
}
.rightListPoint{
text-align: right;
}
#coBestill{
width: 100%;
position: absolute;
left: 100%;
top: 100%;
transform: translate(-100%,-100%);
}
\ No newline at end of file
handlekurv.html
+ 1
− 0
View file @ b9452df4
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuickFood</title> <title>QuickFood</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/handlekurv.css">
<link rel="stylesheet" href="css/styleHandlekurv.css"> <link rel="stylesheet" href="css/styleHandlekurv.css">
<link rel="icon" type="image/png" href="img/QuickFood Favicon.png"> <link rel="icon" type="image/png" href="img/QuickFood Favicon.png">
......
img/burgergif.gif 0 → 100644
+ 0
− 0
View file @ b9452df4
img/burgergif.gif

593 KiB

img/drinksgif.gif 0 → 100644
+ 0
− 0
View file @ b9452df4
img/drinksgif.gif

152 KiB

img/pizzagif.gif 0 → 100644
+ 0
− 0
View file @ b9452df4
img/pizzagif.gif

1.01 MiB

meny.html
+ 5
− 7
View file @ b9452df4
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuickFood</title> <title>QuickFood</title>
<link rel="stylesheet" href="css/style.css" > <link rel="stylesheet" href="css/style.css" >
<link rel="stylesheet" href="css/meny.css">
<link rel="icon" type="image/png" href="img/QuickFood Favicon.png"> <link rel="icon" type="image/png" href="img/QuickFood Favicon.png">
</head> </head>
...@@ -53,14 +54,9 @@ ...@@ -53,14 +54,9 @@
<main> <main>
<div class="container"> <div class="container">
<section id="DagTil">
<header>
<h1>Dagens tilbud</h1>
</header>
<p>Pizzatilbud! <br> Stor pizza + 1.5l brus <br> kr 99,-</p>
</section>
<section id="Bmny"> <section id="Bmny">
<img src="img/burgergif.gif" type="gif" alt="burgervideo">
<header> <header>
<h1> Burgere</h1> <h1> Burgere</h1>
</header> </header>
...@@ -69,6 +65,7 @@ ...@@ -69,6 +65,7 @@
</section> </section>
<section id="Pmny"> <section id="Pmny">
<img src="img/pizzagif.gif" type="gif" alt="pizzavideo">
<header> <header>
<h1>Pizza</h1> <h1>Pizza</h1>
</header> </header>
...@@ -77,6 +74,7 @@ ...@@ -77,6 +74,7 @@
</section> </section>
<section id="Dmny"> <section id="Dmny">
<img src="img/drinksgif.gif" type="gif" alt="drinkvideo">
<header> <header>
<h1>Drikke</h1> <h1>Drikke</h1>
</header> </header>
......
om_oss.html
+ 1
− 0
View file @ b9452df4
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/om_oss.css">
<link rel="icon" type="image/png" href="img/QuickFood Favicon.png"> <link rel="icon" type="image/png" href="img/QuickFood Favicon.png">
<title>Om oss</title> <title>Om oss</title>
</head> </head>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment