Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/projekt/MemoRing/css/
css_index.css
288 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');
/* Globala stilar för alla sidor */
:root {
color-scheme: dark;
}
body {
background-color: black;
margin: 0;
}
.page-title {
font-family: 'Reddit Mono', monospace;
margin-right: 15%;
margin-left: 15%;
font-size: 4vw;
margin-top: 8rem;
color: white;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-style: Arial;
color: white;
text-align: center;
}
p {
font-family: 'Reddit Mono', monospace;
color: white;
font-size: larger;
z-index: 10;
}
.maindiv {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 5%;
margin-top: 5em;
}
.header {
position: fixed;
z-index: 100;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
width: 100%;
top: 0;
}
.header a:hover {
filter: invert(1);
background-color: black;
}
.header-logo {
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
float: left;
display: block;
padding: 14px 16px;
text-decoration: none;
margin-left: 15%;
}
.header-title {
display: inline-block;
padding: 0;
vertical-align: top;
margin: 0 0 0 0;
text-decoration: none;
text-align: center;
font-family: 'Anta';
font-style: 'Anta';
font-size: 3rem;
color: white;
}
.header-tabs {
display: flex;
flex-direction: row;
justify-content: center;
width: 40%;
margin-left: 30%;
}
.header-tabs a {
float: left;
font-family: 'Courier New', Courier, monospace;
font-style: Courier;
font-size: 1.1rem;
margin-left: .5em;
margin-right: .5em;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.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);
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#main-video {
z-index: -10;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
width: 70%;
height: auto;
object-fit: cover;
}
.overlay {
position: absolute;
top: 6em;
width: 100%;
z-index: 1;
}
#horizontal-img {
width: 75%;
}
/* Footer för alla sidor */
footer {
color: white;
padding: 30px 0;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.footer-container {
display: flex;
justify-content: space-between;
text-align: center;
}
.footer-info,
.footer-partner,
.footer-social {
flex: 1;
}
.footer-info h3,
.footer-partner h3,
.footer-social h3 {
margin-bottom: 10px;
}
.footer-partner ul,
.footer-social ul {
list-style: none;
padding: 0;
}
.footer-partner ul li,
.footer-social ul li {
margin-bottom: 5px;
}
.footer-partner ul li a,
.footer-social ul li a {
color: white;
text-decoration: none;
}
.footer-partner ul li a:hover,
.footer-social ul li a:hover {
text-decoration: underline;
}
.footer-info a {
color: white;
text-decoration: none;
}
.footer-info a:hover {
text-decoration: underline;
}
.copyright {
text-align: center;
margin-top: 20px;
}
a[target="_blank"]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
filter: invert(1);
}
@media only screen and (max-width: 1000px) {
.maindiv {
margin: 0;
width: 100%;
text-align: center;
}
.maindiv p {
font-size: large;
padding-right: 1%;
padding-left: 1%;
}
.page-title {
margin-left: 5%;
margin-right: 1%;
margin-top: 2.5em;
font-size: 2em;
}
.order-button-pos {
display: fixed;
top: 1em;
right: .5em;
transform: scale(.8);
}
.order-button-pos button span {
display: none;
}
#main-video {
margin-top: 15rem;
width: 100%;
height: auto;
overflow: hidden;
margin-left: 0;
margin-right: 0;
margin-top: 10em;
}
.header {
position: absolute;
}
.header-tabs {
width: 100%;
margin-left: 0;
}
.header-logo {
margin: 0;
text-align: center;
width: 100%;
padding: 14px 0;
}
#horizontal-img {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}