start for the about section
This commit is contained in:
Tancre
parent
1916993990
commit
49cbef62df
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -67,17 +67,22 @@
|
|||
</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>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
@media (min-width: 530px) {
|
||||
.btn--large {
|
||||
font-size: 1.25rem; } }
|
||||
.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) {
|
||||
.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
Binary file not shown.
|
After Width: | Height: | Size: 9.9 MiB |
Loading…
Reference in New Issue