Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/projekt/backup/MemoRing/css/
css_index.css
312 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Maven+Pro&family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');
:root {
--dark-mode-primary-color: #000000;
--dark-mode-secondary-color: #ffffff;
--light-mode-primary-color: #FBFAF5;
--light-mode-secondary-color: #000000;
color-scheme: dark;
}
body {
background-color: black;
background-size: 25% 25%;
margin: 0;
}
@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: 'Anta';
font-style: 'Anta';
font-size: 64px;
color: white;
}
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: left;
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;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-style: Arial;
color: white;
text-align: center;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-style: Arial;
color: white;
text-align: center;
padding-left: 15%;
padding-right: 15%;
}
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;
}
.maindiv {
display: block;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
background-color: black;
border-radius: 15px;
text-align: center;
z-index: 10;
transition: background-color 0.3s;
}
.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 */
position: fixed;
width: 100%;
top: 0;
transition: background-color 0.3s, padding 0.3s;
}
.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;
}
/* Make the logo inverted when navbar a is hovered */
.navbar a:hover {
filter: invert(1);
background-color: black;
}
.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 img {
height: 2.6cm;
width: 2.6cm;
transition: width 0.3s, height 0.3s, padding 0.3s, transform 0.3s;
filter: invert(1);
}
.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;
}
.order-button-pos {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
z-index: 1000;
}
#order-button {
color: white;
background-color: rgb(64, 0, 255);
border-radius: 2em;
padding: 1em 2em;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(1);
}
#order-button:hover {
background-color: rgb(0, 0, 255);
transition: all 0.3s ease-in-out;
transform: scale(1.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;
transition: background-color 0.3s
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#main-video {
z-index: -10;
text-align: center;
width: 100%;
overflow: hidden;
}
.overlay {
position: absolute;
top: 6em;
width: 100%;
z-index: 1;
}
#horizontal-img {
width: 75%;
}
p {
z-index: 10;
}