Skip to content

Commit

Permalink
added gallery, testemonial and call to action
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Varley committed Jan 29, 2024
1 parent d4ee21d commit d249bc1
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 157 deletions.
45 changes: 23 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">

<link rel="stylesheet", href="styles/base.css">
<link rel="stylesheet", href="styles/style.css">
<link rel="stylesheet", href="styles/colors.css">
<link rel="stylesheet", href="styles/style.css">
</head>
<!-- <body class="debug"> -->
<body>
<header class="primary">
<div class="wrapper">
Expand All @@ -32,7 +33,7 @@ <h1 class="hero__heading">
<p class="hero__text low-contrast">
This website has some subtext that goes here under the main title. It's a smaller font and the color is a lower contrast
</p>
<button class="tertiary">
<button>
Sign up
</button>
</div>
Expand All @@ -44,36 +45,36 @@ <h1 class="hero__heading">
</div>
</section>

<section class="secondary">
<h2>Some random information.</h2>
<section class="secondary information">
<h2 class="information-heading">Some random information.</h2>

<div class="gallery">
<div class="gallery low-contrast">
<div class="gallery__item">
<div class="gallery__image">
<div class="gallery__image contrast">
&#128187
</div>
<p class="gallery__text">
This is some subtext under an illustration or image
</p>
</div>
<div class="gallery__item">
<div class="gallery__image">
<div class="gallery__image contrast">
&#128357
</div>
<p class="gallery__text">
This is some subtext under an illustration or image
</p>
</div>
<div class="gallery__item">
<div class="gallery__image">
<div class="gallery__image contrast">
&#9978
</div>
<p class="gallery__text">
This is some subtext under an illustration or image
</p>
</div>
<div class="gallery__item">
<div class="gallery__image">
<div class="gallery__image contrast">
&#127968
</div>
<p class="gallery__text">
Expand All @@ -96,27 +97,27 @@ <h2>Some random information.</h2>
</section>

<section class="secondary">
<div class="banner tertiary">
<h3 class="banner__heading">
Call to action! It's time!
</h3>
<p class="banner__content">
Sign up for our product by clicking that button right over there!
</p>
<div class="cta tertiary">
<div class="cta__content">
<h2 class="cta__heading">
Call to action! It's time!
</h2>
<p class="cta__content">
Sign up for our product by clicking that button right over there!
</p>
</div>

<button type="banner__button">
<button class="cta__button tertiary">
Sign up
</button>
</div>
</section>
</main>

<footer class="primary">
<div class="wrapper">
<p class="copyright">
Copyright &copy The Odin Project 2021
</p>
</div>
<p>
Copyright &copy The Odin Project 2021
</p>
</footer>
</body>
</html>
169 changes: 34 additions & 135 deletions styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ header .wrapper {
display: flex;
justify-content: space-between;
width: 100%;
padding-block-start: var(--s-3);
}

.logo {
Expand All @@ -139,7 +138,7 @@ nav a + a {
.hero {
display: flex;
gap: var(--s3);
padding-block: var(--s4);
padding-block-end: var(--s4);
}

.hero__content {
Expand All @@ -151,10 +150,6 @@ nav a + a {
margin-block-start: var(--s-1);
}

.hero__heading {
font-size: var(--fs3);
}

.hero__image {
flex: 1;
display: flex;
Expand All @@ -171,159 +166,63 @@ nav a + a {
object-position: left;
}

button {
border: none;
border-radius: 0.3rem;
padding: 0.3rem 1.2rem;
}

.signup-button {
width: 100px;
background-color: var(--button-color);
flex: 0 0 auto;
padding: 6px;
color: var(--secondary-text-color);
border: none;
border-radius: 5px;
}

.signup-button--border {
border: var(--secondary-text-color) 2px solid;
}

.information {
height: 20%;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5rem;
flex: 2 0 auto;
}

.information__container {
width: 75%;
display: flex;
flex-direction: column;
align-items: center;
}

.information__header {
font-size: 36px;
font-weight: bold;
color: var(--dark-blue);
}

.information__card-container {
display: flex;
justify-content: center;
/* Information Section */
section.information {
padding-block-start: var(--s2);
}

.information__card {
/* Gallery */
.gallery {
display: flex;
flex-direction: column;
align-items: center;
}

.information__card-img {
border: var(--button-color) 3px solid;
height: 200px;
width: 200px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
}

.information__card-text {
gap: var(--s4);
max-inline-size: var(--narrow-content-max-width);
text-align: center;
color: var(--dark-blue);
}

.testimonials {
background-color: var(--testimonial-bcolor);
.gallery__image {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
padding: 5rem 0;
flex: 2 0 auto;
height: 20%;
aspect-ratio: 1 / 1;
border-width: 4px;
border-style: solid;
border-radius: 10%;
}

.testimonials__container {
width: 75%;
display: flex;
flex-direction: column;
/* Testimonial */
.testimonial {
max-inline-size: var(--narrow-content-max-width);
}

.testimonials__quote {
color: var(--dark-blue);
.testimonial__quote {
font-size: var(--fs3);
font-style: italic;
font-weight: light;
font-size: 36px;
margin: 0;
}

.testimonials__author {
color: var(--dark-blue);
font-weight: bold;
align-self: flex-end;
margin: 0;
}

.signup {
display: flex;
justify-content: center;
align-items: center;
padding: 5rem 0;
flex: 2 0 auto;
height: 25%;
.testimonial__author {
font-size: var(--fs2);
font-weight: 700;
text-align: right;
}

.signup__container {
background-color: var(--button-color);
width: 75%;
border-radius: 5px;
/* Call To Action */
.cta {
width: 100%;
border-radius: 0.5rem;
display: flex;
justify-content: space-around;
align-items: center;
padding: 3rem 1rem;
gap: 1rem;
}

.signup__container-right {
display: flex;
justify-content: center;
align-items: center;
}
gap: var(--s4);

.signup__container-left {
display: flex;
flex-flow: column wrap;
padding-inline: var(--s2);
padding-block: var(--s3);
}

.signup__header {
color: var(--main-text-color);
padding: 0;
margin: 0;
}

.signup__subtext {
color: var(--secondary-text-color);
padding: 0;
margin: 0;
.cta__heading {
font-size: var(--fs2);
}

.footer {
background-color: var(--dark-blue);
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
height: 10%;
.cta__button {
flex-shrink: 0;
}

.footer__copyright {
color: var(--secondary-text-color);
font-size: 18px;
}

0 comments on commit d249bc1

Please sign in to comment.