Compare commits
9 Commits
review-1
...
newsletter
| Author | SHA1 | Date | |
|---|---|---|---|
|
251436500c | ||
|
|
beb1929445 | ||
|
|
06c9f15746 | ||
|
|
a5bdf1fcf6 | ||
|
|
d8ff782ad9 | ||
|
|
d3eb3b7ec3 | ||
|
|
7985979bc2 | ||
|
|
b29c205e3a | ||
|
|
8239c210bd |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
BIN
src/img/testimonials/pricing.png
Normal file
BIN
src/img/testimonials/pricing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
src/img/testimonials/testimonials.png
Normal file
BIN
src/img/testimonials/testimonials.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
141
src/index.html
141
src/index.html
@@ -264,6 +264,147 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="testimonials">
|
||||
<p class="testimonials__h1">People are talking about fork</p>
|
||||
<div class="testimonials__content container">
|
||||
<div class="testimonials__row row">
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
|
||||
magna.
|
||||
Sed varius urna et pulvinar venenatis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
|
||||
mollis eleifend nibh.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
|
||||
nibh.
|
||||
Morbi tempus auctor felis ac vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonials__row row">
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
|
||||
<img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
|
||||
magna.
|
||||
Sed varius urna et pulvinar venenatis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
|
||||
arcu
|
||||
consequat faucibus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
|
||||
<p class="testimonial__text">
|
||||
Fusce pharetra erat id odio blandit, nec
|
||||
pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="testimonials__delimiter col-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pricing">
|
||||
<p class="pricing__title">Fork Subscription Pricing</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="price">
|
||||
<p class="price__title">Students</p>
|
||||
<p class="price__value">$29</p>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Personal License</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price">
|
||||
<p class="price__title">Professional</p>
|
||||
<p class="price__value">$59</p>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Professional License<br/>Email Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price">
|
||||
<p class="price__title">Agency</p>
|
||||
<p class="price__value">$99</p>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">1-12 Team Members<br/>Phone Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price">
|
||||
<p class="price__title">Enterprise</p>
|
||||
<p class="price__value">$159</p>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<p class="pricing__footer">
|
||||
Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae aliquet id,
|
||||
imperdiet quis
|
||||
nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque
|
||||
penatibus
|
||||
et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="newsletter">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-6 newsletter__title">
|
||||
Subscribe to our newsletter
|
||||
</div>
|
||||
<div class="col-6 oneline__form">
|
||||
<input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
|
||||
<button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
|
||||
type="submit">Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
|
||||
@@ -25,6 +25,11 @@
|
||||
font-size: 21px;
|
||||
padding: 15px 60px;
|
||||
}
|
||||
|
||||
&--uppercase {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.rect-button {
|
||||
|
||||
29
src/scss/_form.scss
Normal file
29
src/scss/_form.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.textfield {
|
||||
padding: 7px 25px;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
background-color: white;
|
||||
color: $regular-text;
|
||||
|
||||
&::placeholder {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $gray-text;
|
||||
}
|
||||
}
|
||||
|
||||
.oneline__form {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.oneline__form__component--growing {
|
||||
width: 100%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.oneline__form__component--fixed {
|
||||
white-space: nowrap;
|
||||
}
|
||||
15
src/scss/_newsletter.scss
Normal file
15
src/scss/_newsletter.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.newsletter {
|
||||
padding: 55px 0;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: $primary-dark;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
105
src/scss/_pricing.scss
Normal file
105
src/scss/_pricing.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
.pricing {
|
||||
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.pricing__title {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: relative;
|
||||
margin-top: 110px;
|
||||
margin-bottom: 125px;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
height: 450px;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 75px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
height: 530px;
|
||||
|
||||
& > .price__title {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price__title {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
transition: $hover-duration;
|
||||
}
|
||||
|
||||
.price__value {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price__period {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
opacity: 0.3;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price__splitter {
|
||||
margin: 30px auto;
|
||||
color: $primary;
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.price__description {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price__rounded-button--purchase {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
left: 20%;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pricing__footer {
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $light-text;
|
||||
text-align: center;
|
||||
}
|
||||
42
src/scss/_testimonials.scss
Normal file
42
src/scss/_testimonials.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.testimonials {
|
||||
position: relative;
|
||||
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
|
||||
}
|
||||
|
||||
.testimonials__h1 {
|
||||
padding: 100px 0;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.testimonials__row {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 170px;
|
||||
}
|
||||
|
||||
.testimonial__logo {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.testimonial__text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.testimonials__delimiter {
|
||||
border-bottom: solid 1px $line-dark;
|
||||
}
|
||||
@@ -3,10 +3,14 @@ $primary-dark: #635c73;
|
||||
$primary-light: #a599c8;
|
||||
$regular-text: #848e97;
|
||||
$dark-text: #323232;
|
||||
$light-text: #a291a5;
|
||||
$gray-text: #c8cbcf;
|
||||
|
||||
$background-light: #f4f4f4;
|
||||
$background-violet: #4a3b4e;
|
||||
|
||||
$line-light: #f4f4f4;
|
||||
$line-dark: #655969;
|
||||
|
||||
$hover-threshold: 20%;
|
||||
$hover-duration: 0.3s;
|
||||
|
||||
@@ -10,3 +10,7 @@
|
||||
@import "feature";
|
||||
@import "reviews";
|
||||
@import "social";
|
||||
@import "testimonials";
|
||||
@import "pricing";
|
||||
@import "newsletter";
|
||||
@import "form";
|
||||
Reference in New Issue
Block a user