Skip to content

Commit

Permalink
Finished project
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavidStaus
DavidStaus committed Sep 8, 2024
1 parent 50446ba commit 67a365a
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 25 deletions.
60 changes: 41 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,47 @@ <h1 class="title">This website is awesome</h1>
</div>
</header>
<main>
<h2 class="info">Some random information</h2>
<div class="container">
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
</div>
<section class="first">
<h2 class="info">Some random information</h2>
<div class="container">
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
<figure class="container">
<div class="illustration"></div>
<figcaption>This is som subtext under an illustration or image</figcaption>
</figure>
</div>
</section>
<section class="second">
<div class="container">
<blockquote>
This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.
</blockquote>
<cite>-Thor, God of Thunder</cite>
</div>
</section>
<section class="three">
<div class="container">
<div class="leftext">
<h3>Call to action! It's time!</h3>
<p>Sign up for out product by clicking that button right over there!</p>
</div>
<button class="signup">Sign up</button>
</div>
</section>
<footer>
<p>Copyright © The Odin Project 2021</p>
</footer>
</main>
</body>
</html>
95 changes: 89 additions & 6 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--information-header-text-color: #1F2937;
--quote-bg-color: #E5E7EB;
--quote-text-color: #1F2937;
--side-padding: 0 15vw;
}

body {
Expand All @@ -18,7 +19,7 @@ body {

header {
background-color: var(--dark-background-color);
padding: 0 15vw
padding: var(--side-padding)
}

.logo {
Expand All @@ -38,6 +39,7 @@ ul {
justify-content: space-between;
margin-bottom: 150px;
padding: 1rem;
flex-wrap: wrap;
}

.navbar a{
Expand All @@ -48,7 +50,8 @@ ul {
.hero {
display: flex;
margin-bottom: 150px;
gap: 4rem;
gap: 2rem;
flex-wrap: wrap;
}

header .container {
Expand Down Expand Up @@ -78,6 +81,8 @@ header .container {
color: var(--hero-second-text-color);
justify-content: center;
align-items: center;
min-width: 350px;
min-height: 200px;
}

.signup {
Expand All @@ -89,11 +94,21 @@ header .container {
padding: 8px 32px;
font-size: 16px;
font-weight: bold;
flex-grow: 0;
}

main .container {
section.first {
padding: var(--side-padding);
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 150px;
}

.first .container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.info {
Expand All @@ -107,12 +122,80 @@ main .container {
figure.container {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 175px;
justify-content: center;
text-align: center;
}

.illustration {
border: 2px solid deepskyblue;
width: 150px;
height: 150px;
border: 3px solid rgb(0, 89, 255);
width: 175px;
height: 175px;
flex-shrink: 0;
border-radius: 16px;
}

section.second {
background-color: var(--hero-second-text-color);
padding: 150px 15vw;
}

.second blockquote {
font-size: 36px;
font-style: italic;
font-weight: lighter;
color: #1F2937
}

.second .container {
display: flex;
flex-direction: column;
padding: 0 10vw;
}

.second cite {
font-weight: bold;
margin-left: auto;
font-style: normal;
}

section.three {
padding: var(--side-padding);
}

.three .container {
margin: 150px 0;
padding: 40px 75px;
background-color: var(--button-color);
display: flex;
border-radius: 8px;
justify-content: space-between;
align-items: center;
}

.three h3 {
color: var(--hero-main-text-color);
font-size: 24px;
}

.three p {
color: var(--hero-second-text-color);
}

.lefttext {
display: flex;
flex-direction: column;
}

.three button {
border: solid var(--hero-main-text-color) 2px;
padding: 6px 30px;
}

footer {
background-color: var(--dark-background-color);
padding: 2rem 0;
color: var(--hero-second-text-color);
text-align: center;
}

0 comments on commit 67a365a

Please sign in to comment.