biobulkbende
/
biobulkbende.org
mirror of https://github.com/biobulkbende/biobulkbende.org.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

finished landing page

This commit is contained in:
Tancre 2020-09-19 12:13:36 +02:00
parent ffe3634bcf
commit 17a9d8a328
13 changed files with 76 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/media/images/boxes_small.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
app/assets/media/images/netherlands_flag.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 B

BIN
app/assets/media/images/veg_large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
app/assets/media/images/veg_medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
app/assets/media/images/veg_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
app/assets/media/images/veg_smaller.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

1
app/assets/scss/modules/_btn.scss
View File

@ -4,6 +4,7 @@
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block;
border-radius: 30px;
&--large {
padding: 1.1rem 1.9rem;

18
app/assets/scss/modules/_large-hero.scss
View File

@ -24,10 +24,14 @@
&__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.4rem;
font-size: 2.8rem;
margin: 0;
@include atSmall(){
font-size: 3.2rem;
}
@include atMedium(){
font-size: 4.8rem;
}
@ -41,8 +45,12 @@
margin: 0;
@include atSmall(){
font-size: 2.4rem;
font-size: 1.8rem;
}
@include atMedium(){
font-size: 2.4rem;
}
}
&__description {
@ -54,8 +62,12 @@
margin-right: auto;
@include atSmall(){
font-size: 1.875rem;
font-size: 1.3rem;
}
@include atMedium(){
font-size: 1.875rem;
}
}

3
app/assets/scss/modules/_primary-nav.scss
View File

@ -46,7 +46,8 @@
display: block;
padding: 5px 8px;
font-size: .8rem;
background:rgba(blue, .5);
background:rgba(black, .5);
border-radius: 30px;
@include atMedium(){
background:transparent;

21
app/assets/scss/modules/_site-header.scss
View File

@ -1,5 +1,5 @@
.site-header{
position: absolute;
position: fixed;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out;
@ -10,6 +10,7 @@
}
@include atMedium(){
position: absolute;
position: fixed;
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{
width: 20px;
height: 19px;
@ -85,9 +100,6 @@
}
}
&__menu-content{
opacity: 0;
transform: scale(1.2);
@ -122,6 +134,7 @@
background-color: rgba(black, 0.5);
&--orange-bg {
transition: background-color .3s ease-out;
background-color: orange;
}

18
app/index.html
View File

@ -23,7 +23,7 @@
</div>
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
@ -31,14 +31,16 @@
<a href="#" class="btn ">Place your Order</a>
</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">
<ul>
<li><a href="#about-us">About us</a></li>
<li><a href="#how-it-works">How it works</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>
</nav>
</div>
@ -48,11 +50,17 @@
<!-- STARTING SECTION -->
<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">
<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><a href="#" class="btn btn--large">Join us!</a></p>
</div>

31
app/temp/styles/style.css
View File

@ -329,7 +329,7 @@ img {
height: auto; }
.site-header {
position: absolute;
position: fixed;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out; }
@ -338,12 +338,23 @@ img {
padding-bottom: 18px; }
@media (min-width: 800px) {
.site-header {
position: absolute;
position: fixed;
background-color: rgba(0, 0, 0, 0.4); } }
@media (min-width: 800px) {
.site-header__btn-container {
padding: 32px 0px 32px 0px;
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 {
width: 20px;
height: 19px;
@ -418,6 +429,7 @@ img {
transition: transform .3s ease-out;
background-color: rgba(0, 0, 0, 0.5); }
.site-header__logo--orange-bg {
transition: background-color .3s ease-out;
background-color: orange; }
@media (min-width: 800px) {
.site-header__logo {
@ -465,7 +477,8 @@ img {
display: block;
padding: 5px 8px;
font-size: .8rem;
background: rgba(0, 0, 255, 0.5); }
background: rgba(0, 0, 0, 0.5);
border-radius: 30px; }
@media (min-width: 800px) {
.primary-nav a {
background: transparent;
@ -504,9 +517,12 @@ img {
.large-hero__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.4rem;
font-size: 2.8rem;
margin: 0; }
@media (min-width: 530px) {
.large-hero__title {
font-size: 3.2rem; } }
@media (min-width: 800px) {
.large-hero__title {
font-size: 4.8rem; } }
.large-hero__subtitle {
@ -515,6 +531,9 @@ img {
font-size: 1.5rem;
margin: 0; }
@media (min-width: 530px) {
.large-hero__subtitle {
font-size: 1.8rem; } }
@media (min-width: 800px) {
.large-hero__subtitle {
font-size: 2.4rem; } }
.large-hero__description {
@ -525,6 +544,9 @@ img {
margin-left: auto;
margin-right: auto; }
@media (min-width: 530px) {
.large-hero__description {
font-size: 1.3rem; } }
@media (min-width: 800px) {
.large-hero__description {
font-size: 1.875rem; } }
@ -533,7 +555,8 @@ img {
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block; }
display: inline-block;
border-radius: 30px; }
.btn--large {
padding: 1.1rem 1.9rem; }
@media (min-width: 530px) {

2
app/temp/styles/style.css.map
View File

File diff suppressed because one or more lines are too long