mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2024-12-25 04:35:24 +00:00
finished landing page
This commit is contained in:
parent
ffe3634bcf
commit
17a9d8a328
BIN
app/assets/media/images/boxes_small.jpg
Normal file
BIN
app/assets/media/images/boxes_small.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 81 KiB |
BIN
app/assets/media/images/netherlands_flag.gif
Normal file
BIN
app/assets/media/images/netherlands_flag.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 513 B |
BIN
app/assets/media/images/veg_large.png
Normal file
BIN
app/assets/media/images/veg_large.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 MiB |
BIN
app/assets/media/images/veg_medium.png
Normal file
BIN
app/assets/media/images/veg_medium.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 MiB |
BIN
app/assets/media/images/veg_small.png
Normal file
BIN
app/assets/media/images/veg_small.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 MiB |
BIN
app/assets/media/images/veg_smaller.png
Normal file
BIN
app/assets/media/images/veg_smaller.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
@ -4,6 +4,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: .75rem 1.2rem;
|
padding: .75rem 1.2rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
&--large {
|
&--large {
|
||||||
padding: 1.1rem 1.9rem;
|
padding: 1.1rem 1.9rem;
|
||||||
|
@ -24,10 +24,14 @@
|
|||||||
&__title {
|
&__title {
|
||||||
font-family: "CocogooseBold";
|
font-family: "CocogooseBold";
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.4rem;
|
font-size: 2.8rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include atSmall(){
|
@include atSmall(){
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,6 +45,10 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@include atSmall(){
|
@include atSmall(){
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -54,6 +62,10 @@
|
|||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
@include atSmall(){
|
@include atSmall(){
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
font-size: 1.875rem;
|
font-size: 1.875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -46,7 +46,8 @@
|
|||||||
display: block;
|
display: block;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
background:rgba(blue, .5);
|
background:rgba(black, .5);
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
@include atMedium(){
|
@include atMedium(){
|
||||||
background:transparent;
|
background:transparent;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.site-header{
|
.site-header{
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: background-color .3s ease-out;
|
transition: background-color .3s ease-out;
|
||||||
@ -10,6 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@include atMedium(){
|
@include atMedium(){
|
||||||
|
position: absolute;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: rgba(#000, 0.4);
|
background-color: rgba(#000, 0.4);
|
||||||
}
|
}
|
||||||
@ -21,6 +22,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__language{
|
||||||
|
margin: 13px auto 5px auto;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
margin: 40px 20px 0px 0px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
&__menu-icon{
|
&__menu-icon{
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
@ -85,9 +100,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&__menu-content{
|
&__menu-content{
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
@ -122,6 +134,7 @@
|
|||||||
background-color: rgba(black, 0.5);
|
background-color: rgba(black, 0.5);
|
||||||
|
|
||||||
&--orange-bg {
|
&--orange-bg {
|
||||||
|
transition: background-color .3s ease-out;
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="site-header__menu-icon">
|
<div class="site-header__menu-icon">
|
||||||
<div class="site-header__menu-icon__middle"></div>
|
<div class="site-header__menu-icon__middle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="site-header__menu-content">
|
<div class="site-header__menu-content">
|
||||||
@ -31,14 +31,16 @@
|
|||||||
<a href="#" class="btn ">Place your Order</a>
|
<a href="#" class="btn ">Place your Order</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="site-header__language">
|
||||||
|
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<nav class="primary-nav primary-nav--pull-right">
|
<nav class="primary-nav primary-nav--pull-right">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#about-us">About us</a></li>
|
<li><a href="#about-us">About us</a></li>
|
||||||
<li><a href="#how-it-works">How it works</a></li>
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
<li><a href="#agenda">Agenda</a></li>
|
<li><a href="#agenda">Agenda</a></li>
|
||||||
<li><a href="#members-area">Members area</a></li>
|
<li><a href="#members-area">Members area</a>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
@ -48,11 +50,17 @@
|
|||||||
|
|
||||||
<!-- STARTING SECTION -->
|
<!-- STARTING SECTION -->
|
||||||
<div class="large-hero">
|
<div class="large-hero">
|
||||||
<img src="./assets/media/images/veg.png" alt="A cool hero image">
|
|
||||||
|
<picture>
|
||||||
|
<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
|
||||||
|
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
|
||||||
|
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
|
||||||
|
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||||
|
</picture>
|
||||||
|
|
||||||
<div class="large-hero__text-content">
|
<div class="large-hero__text-content">
|
||||||
<h1 class="large-hero__title">bio bulke bende</h1>
|
<h1 class="large-hero__title">bio bulke bende</h1>
|
||||||
<h2 class="large-hero__subtitle">The organic autonomous foodcoop of Rotterdam</h2>
|
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
|
||||||
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
|
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
|
||||||
<p><a href="#" class="btn btn--large">Join us!</a></p>
|
<p><a href="#" class="btn btn--large">Join us!</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -329,7 +329,7 @@ img {
|
|||||||
height: auto; }
|
height: auto; }
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: background-color .3s ease-out; }
|
transition: background-color .3s ease-out; }
|
||||||
@ -338,12 +338,23 @@ img {
|
|||||||
padding-bottom: 18px; }
|
padding-bottom: 18px; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.site-header {
|
.site-header {
|
||||||
|
position: absolute;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: rgba(0, 0, 0, 0.4); } }
|
background-color: rgba(0, 0, 0, 0.4); } }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.site-header__btn-container {
|
.site-header__btn-container {
|
||||||
padding: 32px 0px 32px 0px;
|
padding: 32px 0px 32px 0px;
|
||||||
float: right; } }
|
float: right; } }
|
||||||
|
.site-header__language {
|
||||||
|
margin: 13px auto 5px auto;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__language {
|
||||||
|
margin: 40px 20px 0px 0px;
|
||||||
|
float: right; } }
|
||||||
.site-header__menu-icon {
|
.site-header__menu-icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
@ -418,6 +429,7 @@ img {
|
|||||||
transition: transform .3s ease-out;
|
transition: transform .3s ease-out;
|
||||||
background-color: rgba(0, 0, 0, 0.5); }
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
.site-header__logo--orange-bg {
|
.site-header__logo--orange-bg {
|
||||||
|
transition: background-color .3s ease-out;
|
||||||
background-color: orange; }
|
background-color: orange; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.site-header__logo {
|
.site-header__logo {
|
||||||
@ -465,7 +477,8 @@ img {
|
|||||||
display: block;
|
display: block;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
background: rgba(0, 0, 255, 0.5); }
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 30px; }
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
.primary-nav a {
|
.primary-nav a {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@ -504,9 +517,12 @@ img {
|
|||||||
.large-hero__title {
|
.large-hero__title {
|
||||||
font-family: "CocogooseBold";
|
font-family: "CocogooseBold";
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.4rem;
|
font-size: 2.8rem;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__title {
|
||||||
|
font-size: 3.2rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
.large-hero__title {
|
.large-hero__title {
|
||||||
font-size: 4.8rem; } }
|
font-size: 4.8rem; } }
|
||||||
.large-hero__subtitle {
|
.large-hero__subtitle {
|
||||||
@ -515,6 +531,9 @@ img {
|
|||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__subtitle {
|
||||||
|
font-size: 1.8rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
.large-hero__subtitle {
|
.large-hero__subtitle {
|
||||||
font-size: 2.4rem; } }
|
font-size: 2.4rem; } }
|
||||||
.large-hero__description {
|
.large-hero__description {
|
||||||
@ -525,6 +544,9 @@ img {
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto; }
|
margin-right: auto; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__description {
|
||||||
|
font-size: 1.3rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
.large-hero__description {
|
.large-hero__description {
|
||||||
font-size: 1.875rem; } }
|
font-size: 1.875rem; } }
|
||||||
|
|
||||||
@ -533,7 +555,8 @@ img {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: .75rem 1.2rem;
|
padding: .75rem 1.2rem;
|
||||||
display: inline-block; }
|
display: inline-block;
|
||||||
|
border-radius: 30px; }
|
||||||
.btn--large {
|
.btn--large {
|
||||||
padding: 1.1rem 1.9rem; }
|
padding: 1.1rem 1.9rem; }
|
||||||
@media (min-width: 530px) {
|
@media (min-width: 530px) {
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user