//Each file is commmented first before the code
//BASE
// COLOR VARIABLES
$color-primary: #c69963;
$color-primary-dark: #b28451;
$color-secondary: #101d2c;
$color-grey-light-1: #f9f7f6;
$color-grey-light-2: #aaa;
$color-grey-dark-1: #54483a;
$color-grey-dark-2: #6d5d4b;
// FONT VARIABLES
$font-primary: "Nunito", sans-serif;
$font-display: "Josefin Sans", sans-serif;
//Global reset
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
//Smooth scrolling
scroll-behavior: smooth;
-webkit-scroll-behavior: smooth;
box-sizing: border-box;
font-size: 62.5%; // 10px/16px(defaultbrowser)= 62.5% -> 1rem = 10px
}
body {
font-family: $font-primary;
color: $color-grey-dark-2;
//300 font weight since we specify on the link of the google fonts
font-weight: 300;
line-height: 1.6;
}
.container {
display: grid;
//Creating only one Explicit grid with only one row
//However, min content will adapt to the content(enough space to fit the content when growing or shrinking)
//the 40vw to make adapt to the viewport
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
//we create 8 columns
//the macimum width is 14rem but never less then the min-contentanimation-duration
//The 8rem is for the sidebar
//to align to the viewport the rows, we ae adding two columns one on each side for it to occupy the remaining space by using 1fr. However then we changed the one on the left for minmax(6rem, 1fr) so that when the viewport shrinks the homes or other container dont shrink or dissapear.
//We named the columns so it is easier to style it. We dont name the rows because on an overall layout the focus is more in the columns then the rows
grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] 1fr [full-end];
}
//SIDEBAR
.sidebar {
background-color: $color-primary;
//we are placing the column only in the part named sidebar
grid-column: sidebar-start / sidebar-end;
//The sidebar starts in the first row and ends in the last row
grid-row: 1 / -1;
}
.navigation {
&__checkbox {
display: none;
}
&__button{
background-color: #c69963;
height: 7rem;
width: 7rem;
position: fixed;
top: 2.5rem;
left: 0.5rem;
border-radius: 50%;
z-index:2000;
box-shadow: 0 1rem 3rem rgba(black,.1);
text-align: center;
cursor: pointer;
}
&__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 3rem;
left: 1rem;
background-image: radial-gradient(#c69963, #b0895a);
z-index: 1000;
transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
//transform: scale(80);
}
&__nav {
height: 100vh;
position:fixed;
top: 0;
left: 0;
z-index:1500;
width: 0;
opacity: 0;
transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
&__list{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
list-style: none;
text-align: center;
width: 100%;
}
&__item{
margin: 2rem;
}
&__link {
&:link,
&:visited{
display: inline-block;
font-size: 1.6rem;
font-weight: 300;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
text-transform:uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 220%;
transition: all .4s;
}
&:hover,
&:active {
background-position: 100%;
color: $color-primary;
transform: translateX(1rem);
}
}
//Functionality
&__checkbox:checked ~ &__background {
transform: scale(80);
}
&__checkbox:checked ~ &__nav {
width: 100%;
opacity: 1;
}
//Icon
&__icon {
position: relative;
margin-top: 3.5rem;
&,
&::before,
&::after {
width: 3rem;
height: 2px;
background-color: #383838;
display: inline-block;
}
&::before,
&::after {
content: "";
position: absolute;
left: 0;
transition: all .2s;
}
&::before {
top:-.8rem;
}
&::after{
top: .8rem;
}
}
&__button:hover &__icon::before {
top: -1rem;
}
&__button:hover &__icon::after {
top: 1rem;
}
&__checkbox:checked + &__button &__icon {
background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
top: 0;
transform: rotate(135deg);
}
&__checkbox:checked + &__button &__icon::after {
top:0;
transform: rotate(-135deg);
}
}
//HEADER
.header {
background-color: $color-grey-dark-1;
grid-column: full-start / col-end 6;
background-image: linear-gradient(
rgba($color-secondary, 0.73),
rgba($color-secondary, 0.73)
),
url(https://images.unsplash.com/photo-1521630577300-682ef19ee886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
background-size: cover;
background-position: center;
padding: 8rem;
padding-top: 4rem;
display: grid;
grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;
grid-template-columns: minmax(min-content, max-content);
grid-row-gap: 1.5rem;
justify-content: center;
&__logo {
height: 5rem;
width: 8rem;
justify-self: center;
}
&__btn {
align-self: start;
justify-self: start;
}
&__seenon-text {
}
&__seenon-logos {
img {
max-height: 2.5rem;
max-width: 100%;
filter: brightness(70%);
}
}
}
//REALTORS
.realtors {
background-color: $color-secondary;
grid-column: col-start 7 / full-end;
padding: 3rem;
display: grid;
align-content: center;
justify-content: center;
justify-items: center;
grid-row-gap: 2rem;
&__list {
display: grid;
grid-template-columns: min-content max-content;
grid-column-gap: 2rem;
grid-row-gap: 5vh;
align-items: center;
}
&__img {
width: 7rem;
height: 7rem;
border-radius: 50%;
display: block;
}
&__sold{
text-transform: uppercase;
color: $color-grey-light-2;
margin-top:-3px;
}
}
//FEATURES
.features {
//The features section is from the begining to the end of the 8 column grids(in the center)
grid-column: center-start / center-end;
margin: 15rem 0;
display: grid;
//grid-template-columns: repeat(3, 1fr);
//When the viewport shrinks make the features adjust to the viewport
//the trick is with autofit(creates as many tracks as can fit based on the width that we define, in this case with minmax function that we will be defining). The width of each of the traks should stay between 25rem and 1fr
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
//We give 6rem space to each feature
grid-gap: 6rem;
//Some text are small making the paragrph and the subtitle have a large gap of space, so with alignitems in the container we will move all the way to the top
align-items: start;
}
.feature {
display: grid;
grid-template-columns: min-content 1fr;
//space for the columns and rows
grid-row-gap: 1.5rem;
grid-column-gap: 2.5rem;
&__icon {
fill: $color-primary;
width: 4.5rem;
height: 4.5rem;
//Since we want the text below the subtitle, the icon will ocuppy the whole column by expaning its row
grid-row: 1 / span 2;
//center the icon inside the grid box by translating it down
transform: translateY(-1rem);
}
&__text {
font-size: 1.7rem;
}
}
//STORY
.story {
&__pictures {
background-color: $color-primary;
grid-column: full-start / col-end 4;
background-image: linear-gradient(rgba($color-primary, .5), rgba($color-primary, .5)), url(https://images.unsplash.com/photo-1551468307-8c1e3c78013c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
align-items: center;
}
&__img--1 {
width: 100%;
grid-row: 2 / 6;
grid-column: 2 / 6;
box-shadow: 0 2rem 5rem rgba(#000, .1);
}
&__img--2 {
//We set 115 in order for the second image to go out the container a little bit
width: 115%;
grid-row: 4 / 6;
grid-column: 4 / 7;
z-index: 20;
box-shadow: 0 2rem 5rem rgba(#000, .2);
}
&__content {
border-color: $color-grey-light-1;
grid-column: col-start 5 / full-end;
//Since when shrinking the viewport it makes the content not have enough space
//Instead of hard coding the left and right padding, we can set them as a percentage of the viewport
padding: 6rem 8vw;
//aligning the story content with flexbox
/*
//in order for the content inside the story be centered we use flexbox and justify content
display: flex;
flex-direction: column;
justify-content: center;
// the align item's default is stretch so the button is horizontally stretched. therefore we use align items to flex-start so that it is not stretched
align-items: flex-start;
*/
//aligning the story content with grid
display: grid;
align-content: center;
justify-items: start;
}
&__text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 4rem;
}
}
//HOMES
.homes {
grid-column: center-start / center-end;
margin: 15rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 7rem;
}
.home {
background-color: $color-grey-light-1;
display: grid;
grid-template-columns: repeat(2, 1fr);
//In order to give space to the textile information we use row gap
grid-row-gap: 3.5rem;
&__img {
width: 100%;
//make th images cover the two columnsalign-content
//is a 2x2 grid so it will cover a whole row
grid-row: 1/ 2;
grid-column: 1 / -1;
z-index: 1;
}
&__like {
grid-row: 1 / 2;
grid-column: 2 / 3;
fill: $color-primary;
height: 2.5rem;
width: 2.5rem;
z-index: 2;
justify-self: end;
margin: 1rem;
}
&__name {
//We will overlap the image
grid-row: 1 / 2;
//and put a z index to make sure that it is above the image
align-self: end;
z-index: 3;
//After aligning to the end of the image we have to move it down a little bit
transform: translateY(50%);
//make the name cover the two columnsalign-content
//is a 2x2 grid so it will cover a whole row
grid-column: 1 / -1;
justify-self: center;
//the name of each textile is 80%
width: 80%;
font-family: $font-display;
font-size: 1.6rem;
text-align: center;
padding: 1.25rem;
background-color: $color-secondary;
color: #fff;
font-weight: 400;
}
&__location,
&__rooms {.homes {
grid-column: center-start / center-end;
margin: 15rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 7rem;
}
.home {
background-color: $color-grey-light-1;
display: grid;
grid-template-columns: repeat(2, 1fr);
//In order to give space to the textile information we use row gap
grid-row-gap: 3.5rem;
&__img {
width: 100%;
//make th images cover the two columnsalign-content
//is a 2x2 grid so it will cover a whole row
grid-row: 1/ 2;
grid-column: 1 / -1;
z-index: 1;
}
&__like {
grid-row: 1 / 2;
grid-column: 2 / 3;
fill: $color-primary;
height: 2.5rem;
width: 2.5rem;
z-index: 2;
justify-self: end;
margin: 1rem;
}
&__name {
//We will overlap the image
grid-row: 1 / 2;
//and put a z index to make sure that it is above the image
align-self: end;
z-index: 3;
//After aligning to the end of the image we have to move it down a little bit
transform: translateY(50%);
//make the name cover the two columnsalign-content
//is a 2x2 grid so it will cover a whole row
grid-column: 1 / -1;
justify-self: center;
//the name of each textile is 80%
width: 80%;
font-family: $font-display;
font-size: 1.6rem;
text-align: center;
padding: 1.25rem;
background-color: $color-secondary;
color: #fff;
font-weight: 400;
}
&__location,
&__rooms {
margin-top: 2.5rem;
}
&__location,
&__rooms,
&__area,
&__price {
font-size: 1.5rem;
margin-left: 2rem;
//in order for the items in the textile be side by side and centered we use flexbox
display: flex;
align-items: center;
svg {
fill: $color-primary;
height: 2rem;
width: 2rem;
margin-right: 1rem;
}
}
&__btn {
grid-column: 1 / -1;
}
}
margin-top: 2.5rem;
}
&__location,
&__rooms,
&__area,
&__price {
font-size: 1.5rem;
margin-left: 2rem;
//in order for the items in the textile be side by side and centered we use flexbox
display: flex;
align-items: center;
svg {
fill: $color-primary;
height: 2rem;
width: 2rem;
margin-right: 1rem;
}
}
&__btn {
grid-column: 1 / -1;
}
}
//FOOTER
.footer {
background-color: $color-secondary;
grid-column: full-start / full-end;
padding: 8rem;
}
.nav{
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-gap: 2rem;
align-items: center;
&__link:link,
&__link:visited {
font-size: 1.4rem;
color:#fff;
text-decoration: none;
font-family:$font-display;
text-transform: uppercase;
text-align: center;
padding:1.5rem;
//in order for the padding to work we set display block
display: block;
transition: all .2s;
}
&__link:hover,
&__link:active{
background-color: rgba(#fff, .05);
transform: translateY(-3px);
}
}
.copyright {
font-size: 1.4rem;
color: $color-grey-light-2;
margin-top: 6rem;
margin-right:auto;
margin-left: auto;
text-align: center;
width: 70%;
}
//GALLERY
.gallery {
background-color: $color-grey-light-1;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: repeat(8, 1fr);
//We use vw (viewport width) in order for the grid height to not change when the viewport shrinks
grid-template-rows: repeat(7, 5vw);
grid-gap: 1.5rem;
padding: 1.5rem;
&__item {
&--1 {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
&--2 {
grid-row: 1 / 4;
grid-column: 3 / 6;
}
&--3 {
grid-row: 1 / 3;
grid-column: 6 / 7;
}
&--4 {
grid-row: 1 / 3;
grid-column: 7 / 9;
}
&--5 {
grid-row: 3 / 6;
grid-column: 1 / 3;
}
&--6 {
grid-row: 4 / 6;
grid-column: 3 / 5;
}
&--7 {
grid-row: 4 / 5;
grid-column: 5 / 6;
}
&--8 {
grid-row: 3 / 5;
grid-column: 6 / 8;
}
&--9 {
grid-row: 3 / 6;
grid-column: 8 / 9;
}
&--10 {
grid-row: 6 / 8;
grid-column: 1 / 2;
}
&--11{
grid-row: 6 / 8;
grid-column: 2 / 4;
}
&--12 {
grid-row: 6 / 8;
grid-column: 4 / 5;
}
&--13 {
grid-row: 5 / 8;
grid-column: 5 / 8;
}
&--14 {
grid-row: 6 / 8;
grid-column: 8 / 9;
}
}
&__img {
//we put 100% for the width of the images in order for the images dont ocuppy the whole grid and only a grid cell.
width: 100%;
height: 100%;
// object fit is in order for the image not to overflow, but for object fit to work we have to manually se the width and height of the image
object-fit: cover;
display: block;
}
}
//TYPOGRAPHY
//The extend works different then the mixing, all the headings 1-4 are copied to heading
%heading {
font-family: $font-display;
font-weight: 400;
}
.heading-1 {
@extend %heading;
font-size: 4.5rem;
color: $color-grey-light-1;
line-height: 1;
}
.heading-2 {
@extend %heading;
font-size: 4rem;
font-style: italic;
line-height: 1;
&--light{
color: $color-grey-light-1;
}
&--dark {
color: $color-grey-dark-1;
}
}
.heading-3 {
@extend %heading;
font-size: 1.6rem;
color: $color-primary;
text-transform: uppercase;
}
.heading-4 {
@extend %heading;
font-size: 1.9rem;
&--light{
color: $color-grey-light-1;
}
&--dark {
color: $color-grey-dark-1;
}
}
.btn {
background-color: $color-primary;
color: #fff;
border: none;
border-radius: 0;
font-family: $font-display;
font-size: 1.5rem;
text-transform: uppercase;
padding: 1.8rem 3rem;
cursor: pointer;
transition: all .2s;
&:hover {
background-color: $color-primary-dark;
}
}
.mb-sm {
margin-bottom: 2rem;
}
.mb-md {
margin-bottom: 3rem;
}
.mb-lg {
margin-bottom: 4rem;
}
.mb-hg {
margin-bottom: 8rem;
}
!
