garrit
/
slashdev.space
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Put the cards into a css grid

gridify-service-cards
FiliusPatris 3 years ago
parent
9150fc73fc
commit
2327880c41
Signed by untrusted user: TobTobXX
GPG Key ID: 12AC3D4752E2FA2E
2 changed files with 52 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      index.html
  2. 23
      styles/services.css

74
index.html
Unescape View File

@ -27,45 +27,41 @@
<div class="services__container"> <div class="services__container">
<h1 class="services__heading">What you get</h1> <h1 class="services__heading">What you get</h1>
<div class="services__offers"> <div class="services__offers">
<div class="services__offers__card"> <h1 class="services__offers__card__heading matrix-heading">Chat</h1>
<h1 class="services__offers__card__heading">Chat</h1> <p class="services__offers__card__description matrix-description">
<p class="services__offers__card__description"> We're hosting our own Matrix server to keep in touch
We're hosting our own Matrix server to keep in touch and share ideas.
and share ideas. </p>
</p> <a
<a href="https://matrix.slashdev.space"
href="https://matrix.slashdev.space" class="services__offers_card__button matrix-button"
class="services__offers_card__button" >
> Join here!
Join here! </a>
</a>
</div> <h1 class="services__offers__card__heading git-heading">
<div class="services__offers__card"> Code Hosting
<h1 class="services__offers__card__heading"> </h1>
Code Hosting <p class="services__offers__card__description git-description">
</h1> We use Gitea to collaboratively work on our code.
<p class="services__offers__card__description"> </p>
We use Gitea to collaboratively work on our code. <a
</p> href="https://git.slashdev.space"
<a class="services__offers_card__button git-button"
href="https://git.slashdev.space" >
class="services__offers_card__button" Set up your account!
> </a>
Set up your account!
</a> <h1 class="services__offers__card__heading boards-heading">Boards</h1>
</div> <p class="services__offers__card__description boards-description">
<div class="services__offers__card"> We provide free Kanban boards to plan your projects.
<h1 class="services__offers__card__heading">Boards</h1> </p>
<p class="services__offers__card__description"> <a
We provide free Kanban boards to plan your projects. href="https://boards.slashdev.space"
</p> class="services__offers_card__button boards-button"
<a >
href="https://boards.slashdev.space" Get agile!
class="services__offers_card__button" </a>
>
Get agile!
</a>
</div>
</div> </div>
</div> </div>
</section> </section>

23
styles/services.css
Unescape View File

@ -13,15 +13,14 @@
} }
.services__offers { .services__offers {
display: flex; display: grid;
grid-template-areas:
"matrix-heading git-heading boards-heading"
"matrix-description git-description boards-description"
"matrix-button git-button boards-button";
width: 100vw; width: 100vw;
justify-content: space-evenly;
flex-wrap: wrap;
} }
.services__offers__card {
width: 15rem;
}
.services__offers__card__heading { .services__offers__card__heading {
font-weight: 350; font-weight: 350;
font-size: 2rem; font-size: 2rem;
@ -46,3 +45,15 @@
color: black; color: black;
background: white; background: white;
} }
.matrix-heading {grid-area: matrix-heading;}
.matrix-description {grid-area: matrix-description;}
.matrix-button {grid-area: matrix-button;}
.git-heading {grid-area: git-heading;}
.git-description {grid-area: git-description;}
.git-button {grid-area: git-button;}
.boards-heading {grid-area: boards-heading;}
.boards-description {grid-area: boards-description;}
.boards-button {grid-area: boards-button;}
Write Preview
Loading…
Cancel
Save