kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2024-11-22 04:21:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Changed design

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2023-11-08 10:32:31 +01:00
parent 1674138f88
commit 5cedf9eb35
1 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -29,17 +29,33 @@
display: flex; display: flex;
flex: 1; flex: 1;
} }
@media (min-width: 1200px) { /* Breite anpassen, ab wann Karten nebeneinander sein sollen */ .card-body {
.card-container {
display: flex; display: flex;
flex-wrap: nowrap; flex-direction: column;
overflow-x: auto; align-items: center; /* Zentriert die Inhalte horizontal */
text-align: center; /* Zentriert den Text */
} }
.card {
flex: 0 0 auto; /* Verhindert, dass Karten schrumpfen oder wachsen */ .card-icon {
/* flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */ display: flex;
width: 18rem; /* Breite der Karten */ justify-content: center; /* Zentriert das Icon horizontal */
} }
.card-text,
.card ul {
text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
}
.card{
flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
}
h3.card-title{
font-size: 1.3em;
}
.card .stretched-link{
font-size: 0.7em;
} }
</style> </style>
</header> </header>
@ -51,8 +67,8 @@
<h2>Consulting and Coaching Services</h2> <h2>Consulting and Coaching Services</h2>
<p></p> <p></p>
</div> </div>
<div class="row card-container"> <div class="row">
<div class="col equal-height"> <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
<div class="card h-100 d-flex flex-column"> <div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="card-img-top"> <div class="card-img-top">
@ -74,7 +90,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col equal-height"> <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
<div class="card h-100 d-flex flex-column"> <div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="card-img-top"> <div class="card-img-top">
@ -96,7 +112,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col equal-height"> <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
<div class="card h-100 d-flex flex-column"> <div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="card-img-top"> <div class="card-img-top">
@ -118,11 +134,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col equal-height"> <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
<div class="card h-100 d-flex flex-column"> <div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="card-img-top"> <div class="card-img-top">
<i class="fa-solid fa-computer fa-10x"></i> <i class="fa-solid fa-user-astronaut fa-10x"></i>
</div> </div>
<hr /> <hr />
<h3 class="card-title">Expedition Adviser</h3> <h3 class="card-title">Expedition Adviser</h3>
@ -140,7 +156,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col equal-height"> <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
<div class="card h-100 d-flex flex-column"> <div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="card-img-top"> <div class="card-img-top">