ich ritz mich bald
This commit is contained in:
parent
216f392e4e
commit
6469f0b6db
|
|
@ -0,0 +1,35 @@
|
|||
.btnanimate
|
||||
{
|
||||
transition: all 0.1s;
|
||||
-webkit-transition: all 0.1s;
|
||||
}
|
||||
|
||||
.action-button
|
||||
{
|
||||
position: relative;
|
||||
padding: 10px 40px;
|
||||
margin: 0px 10px 10px 0px;
|
||||
float: left;
|
||||
border-radius: 16px;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dabtn
|
||||
{
|
||||
background-color: #a55ac5;
|
||||
box-shadow: 0rem 0rem 1rem #cf9ef0;
|
||||
}
|
||||
|
||||
.action-button:active
|
||||
{
|
||||
transform: translate(0px,2px);
|
||||
-webkit-transform: translate(0px,2px);
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.fill-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -14,10 +14,9 @@
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 35px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 3rem;
|
||||
/* background-color: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0rem 0rem 1rem #c8d0e7;*/
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
|
|
@ -47,4 +46,20 @@
|
|||
|
||||
.nocent {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.flex-buttons {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.grow-btn {
|
||||
flex-grow: 1;
|
||||
|
||||
}
|
||||
|
||||
.fuck-all {
|
||||
all: revert;
|
||||
}
|
||||
49
index.html
49
index.html
|
|
@ -8,18 +8,18 @@
|
|||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/scaler.css">
|
||||
<link rel="stylesheet" href="css/flexboxes.css">
|
||||
|
||||
<link rel="stylesheet" href="css/button.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.content-div {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
display: none; /* Apply only to content divs */
|
||||
}
|
||||
#page-title {
|
||||
/* Initial state should be visible */
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.active {
|
||||
display: block;
|
||||
|
|
@ -73,21 +73,34 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|||
</div>
|
||||
<div id="Services" class="content content-div">
|
||||
<div class="wrapper">
|
||||
<h1 class="center-this-shit">Flexbox</h1>
|
||||
<ul class="flex-box cards nocent">
|
||||
<li><h2>Most used</h2>
|
||||
<p>Put like most used services here idk
|
||||
</p></li>
|
||||
</ul>
|
||||
<ul class="flex-box cards nocent">
|
||||
<li><h2>Public Services</h2>
|
||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
|
||||
</p></li>
|
||||
<li><h2>Private Services</h2>
|
||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
|
||||
</p></li>
|
||||
</ul>
|
||||
<ul class="flex-box cards nocent">
|
||||
<li>
|
||||
<h2>Most used</h2>
|
||||
<div class="button-container flex-buttons center-this-shit"> <!-- Add a container for your buttons -->
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Sklavenhandel</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Rechtsextremer Content</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Uranium Kaufen</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Ursula Ficken</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Hilfe</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">Ritzen</a>
|
||||
<a href="#" class="action-button btnanimate dabtn grow-btn">und Gruppenwixxen</a>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex-box cards nocent">
|
||||
<li>
|
||||
<h2>Public Services</h2>
|
||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Private Services</h2>
|
||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
<div id="About" class="content content-div">
|
||||
|
|
@ -127,7 +140,7 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|||
activeDiv.style.opacity = '1';
|
||||
title.style.opacity = '1';
|
||||
}, 10); // Short delay for display changes
|
||||
}, 500); // Match fade effect duration
|
||||
}, 300); // Match fade effect duration
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue