crt
/
a7-css-shenanigans
1
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

ich ritz mich bald

This commit is contained in:
crt 2024-02-26 16:48:54 +01:00
parent 216f392e4e
commit 6469f0b6db
3 changed files with 85 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/button.css Normal file
View File

@ -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;
}

23
css/flexboxes.css
View File

@ -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 {
@ -48,3 +47,19 @@
.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;
}

41
index.html
View File

@ -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>
<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>
<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>