Remove full-page hero in favor of more density #1

Merged
garrit merged 5 commits from TobTobXX/slashdev.space-landing:main into main 3 years ago
  1. 28
      index.html
  2. 38
      styles/hero.css
  3. 3
      styles/index.css
  4. 15
      styles/introduction.css
  5. 7
      styles/services.css
  6. 32
      styles/welcome.css

28
index.html

@ -8,25 +8,19 @@
<link rel="stylesheet" href="styles/index.css" />
</head>
<body>
<section class="hero">
<div class="hero__text-area__container">
<h1 class="hero__text-area__heading">/dev.space</h1>
<h3 class="hero__text-area__subheading">
The digital hackerspace
</h3>
</div>
</section>
<section class="introduction">
<div class="introduction__container">
<h1 class="introduction__container__heading">
/dev.space is a platform providing online services for
developers to collectively learn and grow.
<section class="welcome">
<div class="welcome__container">
<h1 class="welcome__text-area__heading">
/dev.space
</h1>
<h3 class="introduction__container__subheading">
Whether you're freshly starting out, or you are just looking
to connect with likeminded people. We help you turn your
project ideas into reality.
<h3 class="welcome__text-area__subheading">
Where developers can collectively learn an grow.
</h3>
<p class="welcome__text-area__description">
Whether you're freshly starting out, or you are just looking
to connect with likeminded people. Our suite of online services
helps you turn your project ideas into reality.
</p>
</div>
</section>
<section class="services">

38
styles/hero.css

@ -1,38 +0,0 @@
.hero {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
font-family: "Work Sans", sans-serif;
}
.hero__text-area__container {
text-align: center;
}
.hero__text-area__heading {
font-size: 4rem;
margin: 1rem;
}
.hero__text-area__subheading {
font-size: 2rem;
}
@media (min-width: 800px) {
.hero__text-area__heading {
font-size: 10rem;
}
.hero__text-area__subheading {
font-size: 3rem;
}
}
.hero__scroll-arrow {
font-size: 6rem;
font-weight: lighter;
position: absolute;
bottom: 1rem;
}

3
styles/index.css

@ -2,8 +2,7 @@
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap");
/* Components */
@import url("./hero.css");
@import url("./introduction.css");
@import url("./welcome.css");
@import url("./services.css");
body {

15
styles/introduction.css

@ -1,15 +0,0 @@
.introduction {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 10rem;
}
.introduction__container__heading {
font-size: 2.5rem;
}
.introduction__container__subheading {
font-size: 1.5rem;
}

7
styles/services.css

@ -3,11 +3,13 @@
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 10rem;
margin-top: 2rem;
}
.services__heading {
font-size: 5rem;
font-size: 3.3rem;
font-weight: bold;
margin-bottom: 1rem;
}
.services__offers {
@ -18,7 +20,6 @@
}
.services__offers__card {
margin-top: 1.5rem;
width: 15rem;
}
.services__offers__card__heading {

32
styles/welcome.css

@ -0,0 +1,32 @@
.welcome {
align-items: center;
display: flex;
justify-content: center;
font-family: "Work Sans", sans-serif;
}
.welcome__container {
margin-top: 8vh;
text-align: center;
}
.welcome__text-area__heading {
font-size: 5rem;
margin: 1rem;
text-align: center;
}
.welcome__text-area__subheading {
font-size: 2rem;
text-align: center;
margin-top: 0;
margin-bottom: 2em;
}
.welcome__text-area__description {
font-size: 1.5rem;
/* font-weight: 350; */ /* Can't try out, I don't have multiple weights installed. */
text-align: center;
margin-left: 12vw;
margin-right: 12vw;
}
Loading…
Cancel
Save