The following files exists in this folder. Click to view.
style.css296 lines UTF-8 Unix (LF) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
* {
box-sizing: border-box;
}
html{
height: 100%;
margin: 0;
}
body{
min-height: 100vh;
margin: 0;
font-family: 'Times New Roman', Times, serif;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
flex-direction: column;
}
.brocode{
height: 100%;
margin: 0;
font-family: 'Times New Roman', Times, serif;
background-color: rgb(100, 0, 100);
color: rgb(0, 0, 0);
display: flex;
flex-direction: column;
}
header{
background-color: rgb(35, 52, 99);
color: white;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border: solid 1px black;
}
.rubrik {
display: flex;
align-items: center;
gap: 1rem;
}
.rubrik h1{
margin: 0;
font-size: 1.5rem;
}
.navigera{
list-style: none;
display: flex;
margin: 0, 0, 5rem, 0;
padding: 0;
}
.navigera a{
color: rgb(255, 255, 255);
text-decoration: none;
background-color: #6b4bb3;
padding: 0.6rem 1rem;
border-radius: 8px;
}
.navigera a:hover{
background-color: #543795;
}
.startsida{
text-align: center;
padding: 5rem 2rem;
}
.startsida h2{
font-size: 3rem;
margin-bottom: 1rem;
}
.startsida p{
font-size: 1.2rem;
}
#huvud{
background-color: rgb(109, 131, 193);
}
#bakgrund{
display: inline-block;
background-color: rgb(35, 52, 99);
color: white;
border-radius: 8px;
padding: 3rem;
margin-bottom: 1rem;
}
.kurs_knappar{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 1100px;
margin: 3rem auto 0;
}
.kurs_knappar a{
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background-color: white;
color: black;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
font-size: 1.5rem;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.kurs_knappar a:hover{
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.kurs_knappar h3{
background-color: rgb(35, 52, 99);
padding: 0.7rem;
color: white;
border-radius: 8px;
}
.meny_knapp{
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
}
.meny{
position: fixed;
top: 0;
left: -320px;
width: 320px;
height: 100vh;
background-color: white;
padding: 2rem;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
transition: left 0.3s;
z-index: 100;
}
.meny.öppen{
left: 0;
}
.stäng{
display: block;
margin-left: auto;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
}
.meny h2{
margin-top: 4rem;
}
.meny a{
display: block;
padding: 1rem;
margin-bottom: 1rem;
background-color: rgb(35, 52, 99);
color: white;
text-decoration: none;
border-radius: 8px;
}
.meny a:hover{
background-color: rgb(20, 183, 220);
}
main{
flex: 1;
}
.hero{
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgb(35, 52, 99);
color: white;
padding: 3rem;
}
.hero h2 {
font-size: 4rem;
margin: 0 0 1rem 0;
}
.hero p {
font-size: 1.3rem;
margin: 0;
}
.färg{
background-color: rgb(50, 74, 143);
border: solid 1px black;
border-radius: 8px;
padding: 2.5rem;
}
.csource {
background-color: #6b4bb3;
color: white;
border: none;
border-radius: 8px;
padding: 0.8rem 2rem;
font-size: 1.5rem;
cursor: pointer;
text-decoration: none;
}
.csource:hover {
background-color: #543795;
}
.innehåll {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 2rem;
}
.innehåll > h2{
font-size: 2rem;
margin-bottom: 1.5rem;
}
.block_liten{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 3rem;
}
.kort{
min-height: 180px;
padding: 1.5rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: black;
transition: transform 0.3s, box-shadow 0.3s;
}
.kort:hover{
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.kort h3{
margin-top: 0;
font-size: 1.4rem;
}
.kort p{
color: rgb(80, 80, 80);
}
.webbut{
background-image: url("index_images/webbutveckling.jpg");
background-size: cover;
background-position: center;
}
.webbserv{
background-image: url("index_images/webbserver.jpg");
background-size: cover;
background-position: center;
}
.höger{
display: flex;
gap: 2rem;
align-items: flex-start;
}
.brocode-rubrik{
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
color: rgb(255, 255, 255);
font-weight: bold;
}
.Om_mig{
margin-bottom: 3rem;
}
.projekt{
flex: 1;
box-sizing: border-box;
margin-bottom: 3rem;
}
.projekt h2{
margin-bottom: 1rem;
}
.projekt_2{
flex: 1;
box-sizing: border-box;
margin-bottom: 3rem;
}
.projekt_2 h2{
margin-bottom: 1rem;
}
footer{
background-color: rgb(35, 52, 99);
color: white;
padding: 1rem;
text-align: center;
}
.mitten{
display: flex;
align-items: center;
justify-content: space-between;
}
.mitten.icons{
width: 60px;
height: 60px;
}