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

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

View File

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

View File

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