* {
margin:0;
padding: 0;
box-sizing: border-box;
}
/* grid för "Grupp" */
#wrapper {
display: grid ;
width: 100%;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto auto 50% auto 50% auto 50% auto 50% auto auto;
grid-gap: 1.5vh;
grid-template-areas: "nav"
"header"
"img1"
"sec1"
"img2"
"sec2"
"img3"
"sec3"
"img4"
"sec4"
"footer";
}
/* Grid för "Lösningar" */
#lösgrid {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(11,1fr);
grid-gap: 1.5vh;
grid-template-areas: "nav"
"header"
"bt1"
"text1"
"bt2"
"text2"
"bt3"
"text3"
"bt4"
"text4"
"footer";
}
/*Grid för "hem"*/
#hemgrid {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
grid-gap: 1.5vh;
grid-template-areas: "nav"
"bspel1"
"itext1"
"footer";
}
nav {
grid-area: nav;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
float: left;
margin-left: 2%;
}
li a{
display: block;
color: white;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #161a18;
}
a {
display: block;
padding: 8px;
background-color: #333;
}
.active {
background-color: #bdcfc1;
color: black;
}
/*97bb9f bdcfc1*/
/* 78b787a6 78B787 #7f9583*/
h2 {
text-align: center;
}
/* #bdcfc1 97bb9f */
body {
background-color: #bdcfc1;
color: #000000;
font-family: cursive;
font-size: large;
}
footer {
text-align: center;
background-color: #7f9583; /*54765b*/
height: auto;
font-size: medium;
font-family: cursive;
margin-top: 2%;
color: #fefee3;
width: 100%;
grid-area: footer;
align-self: end;
}
.mySlides {
display: block;
width: 70%;
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
h1 {
text-align: center;
}
.gruppbilder {
height: auto;
width: auto;
margin-left: auto;
margin-right: auto;
display: block;
max-height: 100%;
max-width: 80%;
}
.picbilder {
max-height: 100%;
}
.bildspel {
grid-area: bspel1;
}
#itext1 {
grid-area: itext1;
}
#sec1{
margin-top: 3%;
grid-area: sec1;
}
#sec2{
grid-area: sec2;
}
#sec3{
grid-area: sec3;
}
#img1 {
grid-area: img1;
}
#img2 {
grid-area: img2;
}
#img3 {
grid-area: img3;
}
#img4 {
grid-area: img4;
}
header {
grid-area: header;
}
#bildtext1 {
grid-area: bt1;
}
#bildtext2 {
grid-area: bt2;
}
#bildtext3 {
grid-area: bt3;
}
#bildtext4 {
grid-area: bt4;
}
#text1 {
grid-area: text1;
margin-left: 5%;
}
#text2 {
grid-area: text2;
margin-left: 5%;
}
#text3 {
grid-area: text3;
margin-left: 5%;
}
#text4 {
grid-area: text4;
margin-left: 5%;
}
#lösfooter {
height: auto;
}
.bildtexter {
width: 60%;
margin-left: 20%;
border: solid black 2px;
}
@media only screen and (min-width: 600px) {
/*Tablet*/
#wrapper{
grid-template-columns: 40% auto;
grid-template-rows: auto auto 50% 50% 50% 50% auto;
grid-template-areas:"nav nav"
"header header"
"img1 sec1"
"img2 sec2"
"img3 sec3"
"img4 sec4"
"footer footer";
}
.gruppbilder {
max-height: 100%;
max-width: 90%;
}
.bildtexter {
display: block;
width: 99%;
margin-left: auto;
margin-right: auto;
/* max-width: 360px;*/
}
#lösgrid{
grid-template-columns: repeat(5,1fr);
grid-template-rows: auto auto auto auto auto auto auto;
grid-template-areas:"nav nav nav nav nav"
"header header header header header"
"bt1 bt1 text1 text1 text1"
"text2 text2 text2 bt2 bt2"
"bt3 bt3 text3 text3 text3"
"text4 text4 text4 bt4 bt4"
"footer footer footer footer footer";
}
#text1 {
margin-left: 0%;
margin-right: 5%;
}
#text3{
margin-left: 0%;
margin-right: 5%;
}
}
@media only screen and (min-width: 769px) {
/*Desktop*/
#wrapper {
grid-template-columns: 25% auto 25% auto;
grid-template-rows: auto auto 36% 36% auto;
grid-template-areas:"nav nav nav nav"
"header header header header"
"img1 sec1 img2 sec2"
"img3 sec3 img4 sec4"
"footer footer footer footer";
}
}
@media only screen and (min-width: 1200px) {
.mySlides{
margin-top: 0%;
}
}
/*
nav {
padding: 20px 0px 20px 0px;
background-color: #56956B;
text-align: center;
display: grid;
grid-template-columns: repeat(3,1fr);
justify-content: space-between;
width: 100%;
grid-area: nav;
}
*/
/*nav a {
color: #fefee3;
font-family: cursive;
font-size: 120%;
text-decoration: none;
border: 1px solid rgb(56, 56, 56);
border-radius: 15px;
padding: 15px;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
background-color: #41825B;
}
*/
/*
Lösningar (grid): gör collums till 20% var, använd sedan 40% för en bild
och 60 för text. På detta sätt kan man göra det på båda sidorna utan att
behöva ändra något.
/*DATOR SLIDESHOW
width: 70%;
height: 60%;
margin-top: 5%;
margin-left: 15%;
*/
/*Alternativ skugga på nav text
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/
/*
#2C6E49
#4C956C
#FEFEE3
