Skip to content

Commit

Permalink
features progress
Browse files Browse the repository at this point in the history
  • Loading branch information
fbohz committed Jun 25, 2020
1 parent 976540d commit 072512d
Show file tree
Hide file tree
Showing 16 changed files with 840 additions and 6 deletions.
Binary file added museo-demo/css/fonts/linea-basic-10.eot
Binary file not shown.
145 changes: 145 additions & 0 deletions museo-demo/css/fonts/linea-basic-10.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added museo-demo/css/fonts/linea-basic-10.ttf
Binary file not shown.
Binary file added museo-demo/css/fonts/linea-basic-10.woff
Binary file not shown.
445 changes: 445 additions & 0 deletions museo-demo/css/linea-icon-fonts.css

Large diffs are not rendered by default.

80 changes: 79 additions & 1 deletion museo-demo/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,42 @@ body {
margin-bottom: 1.5rem; }

.section-about {
background-color: color-grey-light-1;
background-color: #f7f7f7;
padding: 25rem 0;
margin-top: -20vh; }

.section-features {
padding: 20rem 0;
background-image: linear-gradient(to right bottom, rgba(85, 197, 122, 0.8), rgba(40, 180, 133, 0.8)), url(../img/nat-4.jpg);
background-size: cover;
transform: skewY(-7deg);
margin-top: -10rem; }
.section-features > * {
transform: skewY(7deg); }

.section-tours {
background-color: #f7f7f7;
padding: 25rem 0 15rem 0;
margin-top: -10rem; }

.section-stories {
position: relative;
padding: 15rem 0; }

.section-book {
padding: 15rem 0;
background-image: linear-gradient(to right bottom, #55c57a, #28b485); }

.book {
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-4.jpg);
background-size: 100%;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
height: 50rem; }
.book__form {
width: 50%;
padding: 6rem; }

.btn {
/* fancy animation */
/*
Expand Down Expand Up @@ -175,6 +207,52 @@ body {
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
transform: translateY(0); }

.composition {
position: relative; }
.composition___photo {
width: 55%;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
border-radius: 4px;
position: absolute;
z-index: 10;
transition: all .2s;
outline-offset: 2rem; }
.composition___photo--p1 {
left: 0;
top: -2rem; }
.composition___photo--p2 {
right: 0;
top: 2rem; }
.composition___photo--p3 {
left: 20%;
top: 10rem; }
.composition___photo:hover {
outline: 0.5rem solid #7ed56f;
transform: scale(1.05) translateY(-0.5rem);
box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
z-index: 20; }
.composition:hover .composition___photo:not(:hover) {
transform: scale(0.95); }

.feature-box {
background-color: rgba(255, 255, 255, 0.8);
font-size: 1.5rem;
padding: 2.5rem;
text-align: center;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
transition: transform .3s; }
.feature-box__icon {
font-size: 6rem;
margin-bottom: .5rem;
display: inline-block;
background-image: linear-gradient(to right, #55c57a, #28b485);
-webkit-background-clip: text;
background-clip: text;
color: transparent; }
.feature-box:hover {
transform: translateY(-1.5rem) scale(1.03); }

.header {
height: 95vh;
/* gradient on image right to bottom */
Expand Down
Binary file modified museo-demo/img/nat-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added museo-demo/img/nat-11.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified museo-demo/img/nat-2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified museo-demo/img/nat-3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified museo-demo/img/nat-4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 51 additions & 2 deletions museo-demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

<link rel="stylesheet" href="css/linea-icon-fonts.css">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
Expand Down Expand Up @@ -46,7 +46,56 @@ <h3 class="heading-tertiary u-margin-bottom-small">Adventure is calling</h3>
<a href="#" class="btn-text">Learn More &rarr;</a>
</div>
<div class="col-1-of-2">
Img
<div class="composition">
<img src="img/nat-1.jpg" alt="Photo1" class="composition___photo composition___photo--p1">
<img src="img/nat-2.jpg" alt="Photo2" class="composition___photo composition___photo--p2">
<img src="img/nat-11.jpg" alt="Photo3" class="composition___photo composition___photo--p3">
</div>
</div>
</div>
</section>

<section class="section-features">

<div class="row">
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-world"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur.
</p>
</div>
</div>

<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-compass"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Navigate nature</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur.
</p>
</div>
</div>

<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-map"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur.
</p>
</div>
</div>

<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-heart"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur.
</p>
</div>
</div>
</div>
</section>
Expand Down
39 changes: 39 additions & 0 deletions museo-demo/sass/components/_composition.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.composition {
position: relative;

&___photo {
width: 55%;
box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
border-radius: 4px;
position: absolute;
z-index: 10;
transition: all .2s;
outline-offset: 2rem;

&--p1 {
left: 0;
top: -2rem;
}
&--p2 {
right: 0;
top: 2rem;
}
&--p3 {
left: 20%;
top: 10rem;
}

&:hover {
outline: .5rem solid $color-primary;
transform: scale(1.05) translateY(-.5rem);
box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
z-index: 20;
}
}

&:hover &___photo:not(:hover) {
transform: scale(.95);
}

// composition:hover composition___photo:not(:hover)
}
27 changes: 27 additions & 0 deletions museo-demo/sass/components/_feature-box.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.feature-box {
background-color: rgba($color-white, .8);
font-size: 1.5rem;
padding: 2.5rem;
text-align: center;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
transition: transform .3s;

&__icon {
font-size: 6rem;
margin-bottom: .5rem;
display: inline-block;
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

&:hover {
transform: translateY(-1.5rem) scale(1.03);
}

&__text {

}
}
3 changes: 2 additions & 1 deletion museo-demo/sass/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
@import "pages/home";

@import "components/button";
@import "components/composition";
@import "components/feature-box";
@import "layout/header";

@import "layout/grid";
/* CUSTOM - DELETE MAYBE IN FUTURE */

Expand Down
54 changes: 52 additions & 2 deletions museo-demo/sass/pages/_home.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,56 @@
.section-about {
background-color: color-grey-light-1;
background-color: $color-grey-light-1;
padding: 25rem 0;
margin-top: -20vh;

}

.section-features {
padding: 20rem 0;
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.8),
rgba($color-primary-dark, 0.8)),
url(../img/nat-4.jpg);
background-size: cover;
transform: skewY(-7deg);
margin-top: -10rem;

& > * {
transform: skewY(7deg);
}

}

.section-tours {
background-color: $color-grey-light-1;
padding: 25rem 0 15rem 0;
margin-top: -10rem;
}

.section-stories {
position: relative;
padding: 15rem 0;
}

.section-book {
padding: 15rem 0;
background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
}

.book {
background-image: linear-gradient(105deg,
rgba($color-white, .9) 0%,
rgba($color-white, .9) 50%,
transparent 50%) ,
url(../img/nat-4.jpg);
background-size: 100%;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, .2);

height: 50rem;

&__form {
width: 50%;
padding: 6rem;
}
}

0 comments on commit 072512d

Please sign in to comment.