Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/css/
css_index.css
276 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
/* Importing Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Libre+Barcode+128+Text&family=Maven+Pro&family=Oswald&family=Shadows+Into+Light&display=swap");
/* Setting root variables */
:root {
color-scheme: dark;
}
/* Styling the body */
body {
text-align: center;
background-color: black;
scrollbar-width: thin; /* Firefox */
scrollbar-color: transparent transparent; /* Firefox */
}
/* Footer */
footer {
position: relative;
background-color: transparent;
bottom: 0;
height: 2.5rem; /* Footer height */
}
/* Scrollbar */
::-webkit-scrollbar {
width: 12px; /* Set the width of the scrollbar */
}
::-webkit-scrollbar-thumb {
background-color: white; /* Handle part of the scrollbar */
background-repeat: repeat-y;
background-position: center;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
/* Responsive design for screens with a max-width of 1000px */
@media only screen and (max-width: 1000px) {
.rubberduck {
display: none;
}
.tabcontent {
margin-right: 1%;
margin-left: 1%;
padding: 0;
}
.tab {
margin-left: 1%;
margin-right: 1%;
}
.aboutme {
font-size: 12px;
margin-left: 1%;
margin-right: 1%;
}
.kattgif {
display: none;
}
}
/* Images */
.rubberduck {
width: 5cm;
position: absolute;
border-radius: 25%;
}
#duck1 {
transform: scaleX(-1);
left: 2.5%;
}
#duck2 {
right: 2.5%;
}
#wizard {
width: 100%;
height: 50%;
aspect-ratio: 2/1;
}
/* Tabs */
.tabcontent {
display: none;
margin-right: 20%;
margin-left: 20%;
padding: 6px 12px;
border: 1px solid white;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.aboutme {
margin-left: 25%;
margin-right: 25%;
}
.ovningar {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-style: Helvetica;
color: black;
background-color: black;
border-radius: 5px;
padding: 5px;
}
/* Styling hyperlinks within the "ovningar" class */
.ovningar a {
font-family: "Courier New", Courier, monospace;
font-style: Courier;
color: white;
border-radius: 5px;
}
/* Styling the main heading */
h1 {
font-family: "Libre Barcode 128 Text", system-ui;
font-weight: 400;
font-style: normal;
text-align: center;
color: white;
font-size: 64px;
cursor: pointer;
}
/* Styling buttons */
button {
font-size: 15px;
color: black;
border: 2px solid black;
padding: 5px;
cursor: pointer;
}
/* Styling the cat gif images */
.kattgif {
width: 5cm;
height: 5cm;
border-radius: 10px;
}
/* Hyperlinks */
a {
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
color: lightblue;
}
/* Texts */
h3 {
font-family: Papyrus, fantasy;
color: white;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
p {
font-family: "Courier New", Courier, monospace;
font-style: Courier;
color: white;
}
/* Additional styling for paragraphs with the class "courier" */
.courier {
font-family: "Courier New", Courier, monospace;
font-style: Courier;
color: white;
}
/* Tab buttons */
.tab {
overflow: hidden;
background-color: transparent;
margin-left: 15%;
margin-right: 15%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tab button {
background-color: inherit;
font-family: "Courier New", Courier, monospace;
font-style: Courier;
float: center;
border: none;
outline: none;
cursor: pointer;
color: white;
padding: 10px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #171717;
}
.tab button.active {
background-color: white;
color: black;
font-weight: bold;
}
/* Fading effect */
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Styling for a grid container */
.container {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
}
.box{
background-color: transparent;
width: 99%;
height: 150%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
.box img {
z-index: -1;
overflow: hidden;
display: block;
width: 100px;
height: 100px;
position: absolute;
-webkit-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-moz-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-o-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}
@-webkit-keyframes moveX {
from { left: 0; } to { left: 100vw; }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: 100vw; }
}
@-o-keyframes moveX {
from { left: 0; } to { left: 100vw; }
}
@keyframes moveX {
from { left: 0; } to { left: 100vw; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: 100vh; }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: 100vh; }
}
@-o-keyframes moveY {
from { top: 0; } to { top: 100vh; }
}
@keyframes moveY {
from { top: 0; } to { top: 100vh; }
}