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;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 35px;
|
padding: 35px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
border-radius: 3rem;
|
||||||
border-radius: 20px;
|
/* background-color: rgba(255, 255, 255, 0.45);
|
||||||
background-color: rgba(255, 255, 255, 0.45);
|
box-shadow: 0rem 0rem 1rem #c8d0e7;*/
|
||||||
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-box {
|
.flex-box {
|
||||||
|
@ -48,3 +47,19 @@
|
||||||
.nocent {
|
.nocent {
|
||||||
text-align:left;
|
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;
|
||||||
|
}
|
41
index.html
41
index.html
|
@ -8,18 +8,18 @@
|
||||||
<link rel="stylesheet" href="css/nav.css">
|
<link rel="stylesheet" href="css/nav.css">
|
||||||
<link rel="stylesheet" href="css/scaler.css">
|
<link rel="stylesheet" href="css/scaler.css">
|
||||||
<link rel="stylesheet" href="css/flexboxes.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">
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
.content-div {
|
.content-div {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s ease;
|
transition: opacity 0.3s ease-in-out;
|
||||||
display: none; /* Apply only to content divs */
|
display: none; /* Apply only to content divs */
|
||||||
}
|
}
|
||||||
#page-title {
|
#page-title {
|
||||||
/* Initial state should be visible */
|
/* Initial state should be visible */
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.5s ease;
|
transition: opacity 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -73,21 +73,34 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||||
</div>
|
</div>
|
||||||
<div id="Services" class="content content-div">
|
<div id="Services" class="content content-div">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h1 class="center-this-shit">Flexbox</h1>
|
|
||||||
<ul class="flex-box cards nocent">
|
<ul class="flex-box cards nocent">
|
||||||
<li><h2>Most used</h2>
|
<li>
|
||||||
<p>Put like most used services here idk
|
<h2>Most used</h2>
|
||||||
</p></li>
|
<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>
|
||||||
<ul class="flex-box cards nocent">
|
<ul class="flex-box cards nocent">
|
||||||
<li><h2>Public Services</h2>
|
<li>
|
||||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
|
<h2>Public Services</h2>
|
||||||
</p></li>
|
<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><h2>Private Services</h2>
|
</li>
|
||||||
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
|
<li>
|
||||||
</p></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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
<div id="About" class="content content-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';
|
activeDiv.style.opacity = '1';
|
||||||
title.style.opacity = '1';
|
title.style.opacity = '1';
|
||||||
}, 10); // Short delay for display changes
|
}, 10); // Short delay for display changes
|
||||||
}, 500); // Match fade effect duration
|
}, 300); // Match fade effect duration
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue