Browse Source

feat: contact section

main
Garrit Franke 3 years ago
parent
commit
a97593356c
Signed by: garrit
GPG Key ID: BB54AF7EB0939F3D
  1. 38
      index.html
  2. 23
      styles/atoms.css
  3. 10
      styles/contact.css
  4. 3
      styles/index.css
  5. 24
      styles/services.css
  6. 4
      styles/typography.css

38
index.html

@ -24,7 +24,7 @@
</section>
<section class="services">
<div class="services__container">
<h1 class="services__heading">Our Services</h1>
<h2 class="services__heading">Our Services</h2>
<div class="services__offers">
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Chat</h1>
@ -34,9 +34,9 @@
</p>
<a
href="https://matrix.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
<p>Join here!</p>
<p>Join a room</p>
</a>
</div>
@ -49,9 +49,9 @@
</p>
<a
href="https://git.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
<p>Set up your account!</p>
<p>Set up your account</p>
</a>
</div>
@ -62,25 +62,43 @@
</p>
<a
href="https://boards.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
<p>Get agile!</p>
<p>Get agile</p>
</a>
</div>
<div class="services__offers__card">
<h1 class="services__offers__card__heading">Fediverse</h1>
<h1 class="services__offers__card__heading">
Fediverse
</h1>
<p class="services__offers__card__description">
We host our own federated social media instance.
</p>
<a
href="https://social.slashdev.space"
class="services__offers_card__button"
class="button__link"
>
<p>Toot with us!</p>
<p>Toot with us</p>
</a>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="contact__container">
<h2>How to join</h2>
<p>
/dev.space is a free and open community. Anyone and everyone
is welcome. Simply join our Matrix server and chat with us.
Already got an account on another instance? Great! See
what's up in our lobby:
</p>
<a
class="button__link button__contact"
href="https://matrix.to/#/#lobby:matrix.slashdev.space"
><p>#lobby:matrix.slashdev.space</p></a
>
</div>
</section>
</body>
</html>

23
styles/atoms.css

@ -0,0 +1,23 @@
.button__link {
font-weight: 350;
background: black;
border: 1px solid black;
color: white;
text-decoration: none;
padding: 0.6rem 2rem;
margin: 2rem 2.5rem;
transition: 0.2s;
display: flex;
align-items: center;
}
.button__link > p {
font-size: 1rem;
margin: auto;
}
.button__link:hover {
color: black;
background: white;
}

10
styles/contact.css

@ -0,0 +1,10 @@
.contact__container {
margin: auto 12vw;
justify-content: center;
}
.button__contact {
margin: auto;
margin-bottom: 2rem;
width: 15rem;
}

3
styles/index.css

@ -1,8 +1,11 @@
@import url("./typography.css");
@import url("./atoms.css");
/* Components */
@import url("./welcome.css");
@import url("./services.css");
@import url("./contact.css");
/* Fonts */
@font-face {

24
styles/services.css

@ -33,30 +33,6 @@
font-size: 1rem;
}
.services__offers_card__button {
font-weight: 350;
background: black;
border: 1px solid black;
color: white;
text-decoration: none;
padding: 0.6rem 2rem;
margin: 2rem 2.5rem;
transition: 0.2s;
display: flex;
align-items: center;
}
.services__offers_card__button > p {
font-size: 1rem;
margin: auto;
}
.services__offers_card__button:hover {
color: black;
background: white;
}
@media only screen and (max-width: 380px) {
.services__offers {
width: 100vw;

4
styles/typography.css

@ -18,3 +18,7 @@ p {
font-size: 1.5rem;
font-weight: 200;
}
a {
color: black;
}
Loading…
Cancel
Save