subfactory
/
subfactory.ch
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

design, design...

heck 4 weeks ago
parent
01c3481d4c
commit
241f0ccb07
1 changed files with 91 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 140
      html/index.html

140
html/index.html
View File

@ -82,7 +82,7 @@
<style> <style>
body { body {
background-color: #121212; background-color: #000000;
opacity: 0.98; opacity: 0.98;
} }
@ -98,7 +98,7 @@
} }
.aliasingdiv { .aliasingdiv {
background-color: #040404; background-color: #040000;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -106,11 +106,11 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -899; z-index: -899;
opacity: 0.73; opacity: 0.75;
} }
.masteringdiv { .toningdiv {
background-color: #ff88ff; background-color: #0000ff;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -118,23 +118,45 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 899; z-index: 899;
opacity: 0.0;
}
.brightnessdiv {
background-color: #ffffff;
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 0.05; opacity: 0.05;
} }
.container { .container {
background-color: #090909; background-color: transparent;
width: 59%; width: 100%;
border-left: 0px none #dee2e6 !important; border-left: 0px none #dee2e6 !important;
border-right: 0px none #dee2e6 !important; border-right: 0px none #dee2e6 !important;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding: 0; padding: 0;
opacity: 0.86; opacity: 1.0;
} }
.section, .cardcontainer { .cardcontainer {
background-color: transparent; background-color: transparent;
width: 100%;
margin-top: 0vh;
margin-bottom: 4vh;
border-top: 0px none #ffffff !important;
opacity: 0.999;
}
.section {
background-color: transparent;
width: 100%;
margin-top: 0vh; margin-top: 0vh;
margin-bottom: 0vh; margin-bottom: 0vh;
border-top: 0px none #ffffff !important; border-top: 0px none #ffffff !important;
@ -142,25 +164,28 @@
} }
.card { .card {
background-color: transparent;
width: 100%; width: 100%;
margin-top: 1vh; margin-top: 0vh;
margin-bottom: 1vh; margin-bottom: 0vh;
background-color: #101010;
border: 0px solid #dee2e6 !important; border: 0px solid #dee2e6 !important;
opacity: 0.9999; opacity: 0.9999;
} }
.card-body { .card-body {
background-color: #030306;
margin-top: 0vh;
margin-bottom: 0vh;
border-style: solid; border-style: solid;
border-top: 1px solid #252525 !important; border-top: 1px solid #202020 !important;
border-bottom: 1px none #dee2e6 !important; border-bottom: 1px solid #202020 !important;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
opacity: 0.999; opacity: 0.8;
} }
.flyer { .flyer {
opacity: 0.97; opacity: 0.8;
} }
.logo { .logo {
@ -178,32 +203,51 @@
} }
.osmmap { .osmmap {
opacity: 0.68; opacity: 0.5;
} }
h2 { .presentedby {
font-family: 'Lato black', sans-serif; font-family: 'Lato black', sans-serif;
font-size: 1.32rem; font-size: 1.42rem;
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
color: #9f1414; color: #9f1414;
margin-top: 3vh; margin-top: 2vh;
margin-bottom: 2vh; margin-bottom: 2vh;
} }
h2 {
font-family: 'Lato black', sans-serif;
font-size: 1.42rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #901010;
margin-top: 1vh;
margin-bottom: 0vh;
}
h5 { h5 {
text-transform: uppercase; text-transform: uppercase;
font-size: 0.1rem; font-size: 0.1rem;
color: #c00606; color: #c00606;
} }
p {
font-family: 'trench', sans-serif;
letter-spacing: 0.06em;
font-size: 1.21em;
color: #c20606;
hyphens: none;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
p, li { li {
font-family: 'Lato', sans-serif; font-family: 'trench', sans-serif;
/*letter-spacing: x0.15em;*/ letter-spacing: 0.06em;
font-size: 1.13em; text-transform: capitalize;
font-size: 1.23em;
color: #c20606; color: #c20606;
hyphens: auto;
} }
img { img {
@ -251,18 +295,20 @@
</head> </head>
<body> <body>
<div class="masteringdiv"></div> <div class="brightnessdiv"></div>
<div class="toningdiv"></div>
<canvas id="hecksshader"></canvas> <canvas id="hecksshader"></canvas>
<div class="aliasingdiv"></div> <div class="aliasingdiv"></div>
<div class="container"> <div class="container">
<br> <br>
<div class="img flyer"> <div class="img flyer">
<img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner"> <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
</div> </div>
<div class="cardcontainer pt-2"> <div class="cardcontainer pt-2">
<h2 class="text-center">Präsentiert von</h2> <h2 class="text-center presentedby">Präsentiert von</h2>
<div class="card-group pt-2"> <div class="card-group pt-2">
<div class="card shadow-none"> <div class="card shadow-none">
@ -316,6 +362,8 @@
<a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"> <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link">
<i class="fab fa-soundcloud mr-2"></i> <i class="fab fa-soundcloud mr-2"></i>
</a> </a>
<br>
<br>
</div> </div>
</div> </div>
</div> </div>
@ -339,18 +387,6 @@
</div> </div>
</div> </div>
<!-- Zahlungsmethoden -->
<div class="cardcontainer pt-2">
<div class="card ">
<div class="card-body col-12 section">
<h2 class="text-center ">Zahlungsmöglichkeiten</h2>
<p>
Bei uns kann mit Bargeld oder Twint bezahlt werden.
</p>
</div>
</div>
</div>
<!-- Anreise --> <!-- Anreise -->
<div class="cardcontainer pt-2"> <div class="cardcontainer pt-2">
<div class="card"> <div class="card">
@ -369,6 +405,18 @@
</div> </div>
</div> </div>
<!-- Zahlungsmethoden -->
<div class="cardcontainer pt-2">
<div class="card ">
<div class="card-body col-12 section">
<h2 class="text-center ">Zahlungsmöglichkeiten</h2>
<p>
Bei uns kann mit Bargeld oder Twint bezahlt werden.
</p>
</div>
</div>
</div>
<!-- Rave Etiquette --> <!-- Rave Etiquette -->
<div class="cardcontainer pt-2"> <div class="cardcontainer pt-2">
<div class="card"> <div class="card">
@ -381,7 +429,7 @@
<p>Respektiere physische und emotionale Grenzen. Die Grenzen aller Menschen sind individuell <p>Respektiere physische und emotionale Grenzen. Die Grenzen aller Menschen sind individuell
und können sich jederzeit ändern. Frage immer nach Zustimmung. Das gilt auch beim und können sich jederzeit ändern. Frage immer nach Zustimmung. Das gilt auch beim
Fotografieren.</p> Fotografieren.</p>
<li>Füreinander da</li> <li>Für einander da</li>
<p>Wir kümmern uns um unsere Freund:innen, die Menschen um uns herum und um uns selbst. <p>Wir kümmern uns um unsere Freund:innen, die Menschen um uns herum und um uns selbst.
Siehst du eine Situation, in der du denkst, dass sich eine Person nicht wohl fühlt: Frag nach! Siehst du eine Situation, in der du denkst, dass sich eine Person nicht wohl fühlt: Frag nach!
Jede Person definiert für sich selbst, wann eine Grenze überschritten ist. Falls du selbst mit Jede Person definiert für sich selbst, wann eine Grenze überschritten ist. Falls du selbst mit
@ -408,18 +456,12 @@
<div class="card-body col-12 section"> <div class="card-body col-12 section">
<h2 class="text-center ">Partner</h2> <h2 class="text-center ">Partner</h2>
<p class="text-center"> <p class="text-center">
<a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a><br> <a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a><br>
<a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a> <a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="cardcontainer pt-2">
<div class="card-body col-12 section">
</div>
</div>
</div> </div>
<!--<script>--> <!--<script>-->
<!-- document.getElementById("focus").focus();--> <!-- document.getElementById("focus").focus();-->

Write Preview
Loading…
Cancel
Save