start for the about section

This commit is contained in:
Tancre 2020-09-24 20:24:52 +02:00
parent 1916993990
commit 49cbef62df
9 changed files with 279 additions and 38 deletions

View File

@ -0,0 +1,17 @@
.generic-content-container{
p {
font-weight: 300;
line-height: 1.65;
margin: 0 0 1.8rem 0;
@include atSmall{
font-size: 1.125rem;
}
}
p a {
font-weight: 700;
}
}

View File

@ -1,5 +1,5 @@
.large-hero {
border-bottom: 10px solid white;
border-bottom: 10px solid orange;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: relative;

View File

@ -0,0 +1,42 @@
.page-section{
padding: 1.2rem 0;
@include atMedium(){
padding: 4.5rem 0;
}
&--no-b-padding-until-medium{
padding-bottom: 0;
@include atMedium(){
padding-bottom: 4.5rem;
}
}
&--no-b-padding-until-large{
padding-bottom: 0;
@include atMedium(){
padding-bottom: 4.5rem;
}
}
&--blue{
background-color: blue;
color: #fff;
}
&--testimonials{
background: #e0e6ef;
// @include atMedium(){
// &.lazyloaded {
// background: url('../../assets/images/testimonials-bg.jpg') top center no-repeat;
// background-size: cover;
// }
// }
}
}

View File

@ -0,0 +1,92 @@
.row{
@include clearfix();
&--t-padding{
padding-top: 80px;
}
&--gutters {
margin-right: -65px;
}
&--gutters-large {
margin-right: -100px;
}
&--gutters-small {
margin-right: -45px;
}
&--gutters > div {
padding-right: 65px;
}
&--gutters-large > div {
padding-right: 100px;
}
&--gutters-small > div {
padding-right: 45px;
}
&__b-margin-until-medium{
margin-bottom: 1rem;
}
@include atMedium(){
&__b-margin-until-medium{
margin-bottom: 0rem;
}
&__medium-4 {
float: left;
width: 33.33%;
}
&__medium-4--larger{
width: 37%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-8 {
float: right;
width: 66.66%;
}
&__medium-8--smaller{
width: 63%;
}
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
.flexbox &--equal-height-at-large {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
}

View File

@ -5,8 +5,10 @@
@import './base/mixins';
@import './modules/site-header';
@import './modules/primary-nav';
@import './modules/wrapper';
@import './modules/large-hero';
@import './modules/btn';
@import './modules/large-hero';
@import './modules/wrapper';
@import './modules/_page-section';
@import './modules/_rows';
@import './modules/_generic-content-container';

View File

@ -67,20 +67,25 @@
</div>
<!-- ABOUT US -->
<div id="about-us" >
<h2>This section talks about us</h2>
<h3>And about our food</h3>
<img src="#" alt="A cool image">
<div>
<img src="#" alt="Another cool image">
<div>
<h2>We love to eat good food</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, < href="#">quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p>
<div id="about-us" class="page-section">
<div class="wrapper">
<h2 class="page-section__title">About us</h2>
<h3 class="page-section__title">And about our food</h3>
<div class="row row--gutters">
<div class="row__medium-8 row__medium-8--larger row__b-margin-until-medium">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XnC3sBJRwv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="row__medium-4 row__medium-4--larger row__b-margin-until-medium">
<div class="generic-content-container">
<h3>We started the co-op in the summer of 2019...</h3>
<p>...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.<p>
<p>Duis aute irure dolor in <strong>reprehenderit in</strong> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidata non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum velit esse cillum <strong>dolore eu fugiat.</strong></p>
</div>
</div>
</div>
</div>
</div>
<!-- HOW IT WORKS -->

View File

@ -487,18 +487,21 @@ img {
.primary-nav a.is-current-link {
color: #fabb69; } }
.wrapper {
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1300px;
margin-left: auto;
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
.btn {
background-color: #00ab00;
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block;
border-radius: 30px; }
.btn--large {
padding: 1.1rem 1.9rem; }
@media (min-width: 530px) {
.btn--large {
font-size: 1.25rem; } }
.large-hero {
border-bottom: 10px solid white;
border-bottom: 10px solid orange;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: relative; }
.large-hero__image {
@ -550,17 +553,97 @@ img {
.large-hero__description {
font-size: 1.875rem; } }
.btn {
background-color: #00ab00;
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block;
border-radius: 30px; }
.btn--large {
padding: 1.1rem 1.9rem; }
.wrapper {
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1300px;
margin-left: auto;
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
.page-section {
padding: 1.2rem 0; }
@media (min-width: 800px) {
.page-section {
padding: 4.5rem 0; } }
.page-section--no-b-padding-until-medium {
padding-bottom: 0; }
@media (min-width: 800px) {
.page-section--no-b-padding-until-medium {
padding-bottom: 4.5rem; } }
.page-section--no-b-padding-until-large {
padding-bottom: 0; }
@media (min-width: 800px) {
.page-section--no-b-padding-until-large {
padding-bottom: 4.5rem; } }
.page-section--blue {
background-color: blue;
color: #fff; }
.page-section--testimonials {
background: #e0e6ef; }
.row {
/* Begin Equal Height Rules */ }
.row::after {
content: "";
clear: both;
display: table; }
.row--t-padding {
padding-top: 80px; }
.row--gutters {
margin-right: -65px; }
.row--gutters-large {
margin-right: -100px; }
.row--gutters-small {
margin-right: -45px; }
.row--gutters > div {
padding-right: 65px; }
.row--gutters-large > div {
padding-right: 100px; }
.row--gutters-small > div {
padding-right: 45px; }
.row__b-margin-until-medium {
margin-bottom: 1rem; }
@media (min-width: 800px) {
.row__b-margin-until-medium {
margin-bottom: 0rem; }
.row__medium-4 {
float: left;
width: 33.33%; }
.row__medium-4--larger {
width: 37%; }
.row__medium-6 {
float: left;
width: 50%; }
.row__medium-8 {
float: right;
width: 66.66%; }
.row__medium-8--smaller {
width: 63%; } }
@media (min-width: 800px) {
.flexbox .row--equal-height-at-medium {
display: flex; } }
.flexbox .row--equal-height-at-medium > div {
float: none;
display: flex; }
@media (min-width: 800px) {
.flexbox .row--equal-height-at-large {
display: flex; } }
.flexbox .row--equal-height-at-large > div {
float: none;
display: flex; }
.generic-content-container p {
font-weight: 300;
line-height: 1.65;
margin: 0 0 1.8rem 0; }
@media (min-width: 530px) {
.btn--large {
font-size: 1.25rem; } }
.generic-content-container p {
font-size: 1.125rem; } }
.generic-content-container p a {
font-weight: 700; }
/*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

BIN
app/website design 1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 MiB