Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/projekt/venturo/css/
css_index.css
362 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Maven+Pro&family=Oswald&display=swap');
:root {
--dark-mode-primary-color: #000000;
--dark-mode-secondary-color: #ffffff;
--light-mode-primary-color: #FBFAF5;
--light-mode-secondary-color: #000000;
}
body {
background-color: #c1c1c1;
background-size: 25% 25%;
margin: 0;
}
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
@media (max-width: 750px) {
#background-video {
display: none;
}
body {
background: url("../bilder/central-park.png") no-repeat;
background-size: cover;
}
}
h1 {
text-align: center;
font-family: 'Oswald', sans-serif;
font-style: 'Oswald';
font-size: 64px;
color: white;
}
[data-theme=light] h1 {
color: black;
}
h2 {
font-family: 'Dela Gothic One', cursive;
font-style: 'Delta Gothic One';
color: white;
text-align: center;
}
.autumn-red {
color: crimson;
}
.autumn-yellow {
color: gold;
}
.page-title {
font-family: 'Dela Gothic One', cursive;
font-style: 'Delta Gothic One';
color: white;
text-align: center;
padding-left: 15%;
padding-right: 15%;
mix-blend-mode: difference;
color: white;
font-size: 48px;
}
.h2-alt {
font-family: 'Dela Gothic One', cursive;
font-style: 'Delta Gothic One';
text-align: center;
}
[data-theme=light] .h2-alt {
color: black;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-style: Arial;
color: white;
text-align: center;
}
[data-theme=light] h3 {
color: black;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-style: Arial;
color: white;
text-align: center;
padding-left: 15%;
padding-right: 15%;
}
[data-theme=light] h4 {
color: black;
}
p {
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
color: white;
text-align: center;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
border-radius: 5px;
}
[data-theme=light] p {
color: black;
font-weight: bold;
}
img {
width: 20%;
height: 20%;
border-radius: 5px;
}
.maindiv {
display: block;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
background-color: black;
border-radius: 15px;
text-align: center;
z-index: 1;
transition: background-color 0.3s;
}
[data-theme=light] .maindiv {
background-color: white;
}
.maindiv img {
display: inline-block;
padding: 15px;
transition: transform .2s;
width: 10%px;
height: auto;
aspect-ratio: 1/1;
border-radius: 15%;
margin: auto;
margin-top: 1%;
overflow: hidden;
border: 1px solid white;
border-top-right-radius: 5%;
border-bottom-left-radius: 5%;
}
[data-theme=light] .maindiv img {
border-color: black;
border-top-right-radius: 5%;
border-bottom-left-radius: 5%;
border: 1px solid black;
}
.maindiv img:hover {
transform: scale(1.15);
cursor: pointer;
}
.align-right {
text-align: right;
padding-right: 15%;
}
.align-left {
text-align: left;
padding-left: 15%;
}
.align-middle {
text-align: center;
}
.description-text {
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
color: white;
text-align: center;
font-size: 20px;
margin: 0;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.logo {
float: inline;
width: 3.5cm;
height: 3.5cm;
overflow: visible;
transition: transform .2s;
}
.logo:hover {
transform: scale(1.15);
cursor: pointer;
}
.navbar {
z-index: 10;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value for the desired transparency */
backdrop-filter: blur(10px); /* Adjust the blur radius as needed */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Adding a subtle shadow */
position: fixed;
width: 100%;
top: 0;
transition: background-color 0.3s, padding 0.3s;
}
[data-theme=light] .navbar {
background-color: var(--light-mode-primary-color);
}
.navbar a {
float: left;
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: font-size 0.3s, padding 0.3s;
}
[data-theme=light] .navbar a {
color: black;
}
.navbar a:hover {
background-color: var(--dark-mode-secondary-color);
color: var(--dark-mode-primary-color);
}
[data-theme=light] .navbar a:hover {
background-color: var(--light-mode-secondary-color);
color: var(--light-mode-primary-color);
}
.navbar-logo {
float: left;
display: block;
padding: 14px 16px;
text-decoration: none;
transition: padding 0.3s;
}
.navbar-title {
display: inline-block;
padding: 0;
vertical-align: top;
margin: 0 0 0 0;
text-decoration: none;
transition: font-size 0.3s, padding 0.3s;
}
.navbar-logo:hover .navbar-title {
color: black;
}
[data-theme=light] .navbar-logo:hover .navbar-title {
color: white;
}
.navbar-logo img {
height: 2.6cm;
width: 2.6cm;
transition: width 0.3s, height 0.3s, padding 0.3s, transform 0.3s;
}
.navbar-logo img:hover {
transform: scale(1.15);
cursor: pointer;
}
.navbar.shrink {
padding: 0px 0;
}
.navbar.shrink .navbar-title {
padding: 0 0px;
font-size: 24px;
}
.navbar.shrink .navbar-logo img {
height: 1cm;
width: 1cm;
}
.navbar.shrink a {
padding: 8px 16px;
font-size: 16px;
}
.navbar-tabs {
display: flex;
float: inherit;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
width: 40%;
margin-left: 30%;
padding-top: 10px;
}
.dark-light-pos {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
z-index: 1000;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
}
.footer {
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0;
width: 100%;
height: 15vh;
background-color: black;
margin: 0;
padding: 0;
}