Browse Source

Put the cards into a css grid

gridify-service-cards
FiliusPatris 3 years ago
parent
commit
2327880c41
Signed by untrusted user: TobTobXX
GPG Key ID: 12AC3D4752E2FA2E
  1. 26
      index.html
  2. 23
      styles/services.css

26
index.html

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

23
styles/services.css

@ -13,15 +13,14 @@
}
.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;
justify-content: space-evenly;
flex-wrap: wrap;
}
.services__offers__card {
width: 15rem;
}
.services__offers__card__heading {
font-weight: 350;
font-size: 2rem;
@ -46,3 +45,15 @@
color: black;
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;}
Loading…
Cancel
Save