Design changes, made responsive

This commit is contained in:
coja 2023-09-22 00:37:28 +02:00
parent 9f943818fb
commit 8b82807c84
3 changed files with 84 additions and 9 deletions

View File

@ -1,6 +1,7 @@
:root { :root {
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
--nc-tx-white: #FFFFFF;
/* Light theme */ /* Light theme */
--nc-tx-1: #000000; --nc-tx-1: #000000;
@ -202,6 +203,24 @@ header {
padding-left: calc(50vw - 50%); padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%); padding-right: calc(50vw - 50%);
background-image: url("/assets/imgs/adblock.webp");
background-size: cover;
min-height: 500px;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 0;
}
header .overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
} }
header h1, header h1,
@ -220,6 +239,45 @@ header > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
header nav {
z-index: 1;
font-size: 1.4rem;
text-decoration: none;
}
header nav a {
text-decoration: none;
color: var(--nc-tx-white);
text-transform: uppercase;
letter-spacing: 5px;
font-weight: 600;
padding: 0 10px
}
@media screen and (max-width: 768px) {
header nav a {
font-size: 1rem;
letter-spacing: 2px;
padding: 0;
}
}
header nav a:hover {
text-decoration: underline;
color: var(--nc-tx-white);
opacity: 0.9;
}
header .headline-wrap {
text-align: center;
margin: auto;
z-index: 1;
}
header .headline-wrap h1 {
color: var(--nc-tx-white);
}
a button, a button,
button, button,
input[type="submit"], input[type="submit"],

BIN
assets/imgs/adblock.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -1,25 +1,28 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="./assets/css/new.css"> <link rel="stylesheet" href="./assets/css/new.css">
<title>STOP REKLAMAMA</title> <title>STOP REKLAMAMA</title>
</head> </head>
<body> <body>
<div class="content"> <div class="content">
<header> <header>
<div class="overlay"></div>
<nav> <nav>
<h1>STOP REKLAMAMA</h1> <a href="#adless-servises">Servisi</a> |
<a href="#">Servisi bez reklama</a> / <a href="#adless-social-networks">Mreze</a> |
<a href="#">Mreze bez reklama</a> / <a href="#browser-extensions">Extenzije</a> |
<a href="#">ASdF</a> / <a href="#rest">Rest</a>
<a href="#">HJKL</a>
</nav> </nav>
<div class="headline-wrap">
<h1>STOP REKLAMAMA</h1>
</div>
</header> </header>
<main> <main>
<h2 title="su sranje">REKLAME</h2> <h2 title="su sranje">REKLAME</h2>
<p> <p>Reklame su lose, smaraju i eksploatisu ljude!</p>
Reklame su lose, smaraju i eksploatisu ljude!</p> <h2 id="adless-servises">SERVISI BEZ REKLAMA</h2>
<h2 id="servisi-bez-reklama">SERVISI BEZ REKLAMA</h2>
<ul> <ul>
<li><a href="#">Librex - Google bez reklama</a></li> <li><a href="#">Librex - Google bez reklama</a></li>
<li><a href="#">Invidious - YouTube bez reklama</a></li> <li><a href="#">Invidious - YouTube bez reklama</a></li>
@ -39,7 +42,7 @@
<li><a href="#"></a></li>--> <li><a href="#"></a></li>-->
</ul> </ul>
<h2>DRUSTVENE MREZE BEZ REKLAMA</h2> <h2 id="adless-social-networks">DRUSTVENE MREZE BEZ REKLAMA</h2>
<p> Sve navedene mreze rade medjusobno povezano</p> <p> Sve navedene mreze rade medjusobno povezano</p>
<ul> <ul>
<li><a href="#">Mastodon - Twitter federisana mreza bez reklama</a></li> <li><a href="#">Mastodon - Twitter federisana mreza bez reklama</a></li>
@ -54,6 +57,20 @@
<li><a href="#"></a></li> <li><a href="#"></a></li>
<li><a href="#"></a></li> --> <li><a href="#"></a></li> -->
</ul> </ul>
<h2 id="browser-extensions">Browser extenzije</h2>
<ul>
<li><a href="https://github.com/gorhill/uBlock">uBlock Origin - AdBlocker alternativa</a></li>
<li><a href="https://libredirect.github.io/">Libredirect - Automatska redirekcija na alternativne sajtove</a></li>
</ul>
<h2 id="rest">Ostalo</h2>
<ul>
<li><a href="#">DNS66</a></li>
<li><a href="#">Freetube</a></li>
<li><a href="#">NewPipe</a></li>
<li><a href="#">PiHole</a></li>
</ul>
</main> </main>
</div> </div>
</body> </body>