dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first 2 lectures

Browse Source
This commit is contained in:
dqnid committed 2023-07-11 00:11:30 +02:00
1 parent 2cf84f4efd
commit 98a7c96117
289 files changed
+14886
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Nexter/final/css/style.comp.css
+442
View File
@@ -0,0 +1,442 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
@media only screen and (max-width: 75em) {
html {
font-size: 50%; } }
body {
font-family: "Nunito", sans-serif;
color: #6D5D4B;
font-weight: 300;
line-height: 1.6; }
.container {
display: grid;
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
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] minmax(6rem, 1fr) [full-end]; }
@media only screen and (max-width: 62.5em) {
.container {
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } }
@media only screen and (max-width: 50em) {
.container {
grid-template-rows: 6rem calc(100vh - 6rem); } }
.heading-1, .heading-2, .heading-3, .heading-4 {
font-family: "Josefin Sans", sans-serif;
font-weight: 400; }
.heading-1 {
font-size: 4.5rem;
color: #f9f7f6;
line-height: 1; }
.heading-2 {
font-size: 4rem;
font-style: italic;
line-height: 1; }
.heading-2--light {
color: #f9f7f6; }
.heading-2--dark {
color: #54483A; }
.heading-3 {
font-size: 1.6rem;
color: #c69963;
text-transform: uppercase; }
.heading-4 {
font-size: 1.9rem; }
.heading-4--light {
color: #f9f7f6; }
.heading-4--dark {
color: #54483A; }
.btn {
background-color: #c69963;
color: #fff;
border: none;
border-radius: 0;
font-family: "Josefin Sans", sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
padding: 1.8rem 3rem;
cursor: pointer;
transition: all .2s; }
.btn:hover {
background-color: #B28451; }
.mb-sm {
margin-bottom: 2rem; }
.mb-md {
margin-bottom: 3rem; }
.mb-lg {
margin-bottom: 4rem; }
.mb-hg {
margin-bottom: 8rem; }
.sidebar {
background-color: #c69963;
grid-column: sidebar-start / sidebar-end;
grid-row: 1 / -1;
display: flex;
justify-content: center; }
@media only screen and (max-width: 62.5em) {
.sidebar {
grid-column: 1 / -1;
grid-row: 1 / 2;
justify-content: flex-end;
align-items: center; } }
.nav-btn {
border: none;
border-radius: 0;
background-color: #fff;
height: 2px;
width: 4.5rem;
margin-top: 4rem; }
.nav-btn::before, .nav-btn::after {
background-color: #fff;
height: 2px;
width: 4.5rem;
content: "";
display: block; }
.nav-btn::before {
transform: translateY(-1.5rem); }
.nav-btn::after {
transform: translateY(1.3rem); }
@media only screen and (max-width: 62.5em) {
.nav-btn {
margin-top: 0;
margin-right: 3rem; }
.nav-btn::before {
transform: translateY(-1.2rem); }
.nav-btn::after {
transform: translateY(1rem); } }
.header {
background-color: #54483A;
grid-column: full-start / col-end 6;
background-image: linear-gradient(rgba(16, 29, 44, 0.93), rgba(16, 29, 44, 0.93)), url(../img/hero.jpeg);
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; }
@media only screen and (max-width: 50em) {
.header {
grid-column: 1 / -1; } }
@media only screen and (max-width: 37.5em) {
.header {
padding: 5rem; } }
.header__logo {
height: 3rem;
justify-self: center; }
.header__btn {
align-self: start;
justify-self: start; }
.header__seenon-text {
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-column-gap: 1.5rem;
align-items: center;
font-size: 1.6rem;
color: #aaa; }
.header__seenon-text::before, .header__seenon-text::after {
content: "";
height: 1px;
display: block;
background-color: currentColor; }
.header__seenon-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 3rem;
justify-items: center;
align-items: center; }
.header__seenon-logos img {
max-height: 2.5rem;
max-width: 100%;
filter: brightness(70%); }
.realtors {
background-color: #101d2c;
grid-column: col-start 7 / full-end;
padding: 3rem;
display: grid;
align-content: center;
justify-content: center;
justify-items: center;
grid-row-gap: 2rem; }
@media only screen and (max-width: 50em) {
.realtors {
grid-column: 1 / -1; } }
.realtors__list {
display: grid;
grid-template-columns: min-content max-content;
grid-column-gap: 2rem;
grid-row-gap: 5vh;
align-items: center; }
@media only screen and (max-width: 50em) {
.realtors__list {
grid-template-columns: repeat(3, min-content max-content); } }
@media only screen and (max-width: 37.5em) {
.realtors__list {
grid-template-columns: min-content max-content; } }
.realtors__img {
width: 7rem;
border-radius: 50%;
display: block; }
.realtors__sold {
text-transform: uppercase;
color: #aaa;
margin-top: -3px; }
.features {
grid-column: center-start / center-end;
margin: 15rem 0; }
@supports (display: grid) {
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 6rem;
align-items: start; } }
.feature {
float: left;
width: 33.3333%;
margin-bottom: 6rem;
display: grid;
grid-template-columns: min-content 1fr;
grid-row-gap: 1.5rem;
grid-column-gap: 2.5rem; }
@supports (display: grid) {
.feature {
width: auto;
margin-bottom: 0; } }
.feature__icon {
fill: #c69963;
width: 4.5rem;
height: 4.5rem;
grid-row: 1 / span 2;
transform: translateY(-1rem); }
.feature__text {
font-size: 1.7rem; }
.story__pictures {
background-color: #c69963;
grid-column: full-start / col-end 4;
background-image: linear-gradient(rgba(198, 153, 99, 0.5), rgba(198, 153, 99, 0.5)), url(../img/back.jpg);
background-size: cover;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
align-items: center; }
@media only screen and (max-width: 50em) {
.story__pictures {
grid-column: 1 / -1;
padding: 6rem; } }
.story__img--1 {
width: 100%;
grid-row: 2 / 6;
grid-column: 2 / 6;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1); }
@media only screen and (max-width: 50em) {
.story__img--1 {
grid-column: 1 / 5;
grid-row: 1 / -1; } }
.story__img--2 {
width: 115%;
grid-row: 4 / 6;
grid-column: 4 / 7;
z-index: 20;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 50em) {
.story__img--2 {
grid-row: 1 / -1;
width: 100%; } }
.story__content {
background-color: #f9f7f6;
grid-column: col-start 5 / full-end;
padding: 6rem 8vw;
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
*/
display: grid;
align-content: center;
justify-items: start; }
@media only screen and (max-width: 50em) {
.story__content {
grid-column: 1 / -1;
grid-row: 5 / 6; } }
.story__text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 4rem; }
.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: #f9f7f6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 3.5rem; }
.home__img {
width: 100%;
grid-row: 1 / 2;
grid-column: 1 / -1;
z-index: 1; }
.home__like {
grid-row: 1 / 2;
grid-column: 2 / 3;
fill: #c69963;
height: 2.5rem;
width: 2.5rem;
z-index: 2;
justify-self: end;
margin: 1rem; }
.home__name {
grid-row: 1 / 2;
grid-column: 1 / -1;
justify-self: center;
align-self: end;
z-index: 3;
width: 80%;
font-family: "Josefin Sans", sans-serif;
font-size: 1.6rem;
text-align: center;
padding: 1.25rem;
background-color: #101d2c;
color: #fff;
font-weight: 400;
transform: translateY(50%); }
.home__location, .home__rooms {
margin-top: 2.5rem; }
.home__location, .home__rooms, .home__area, .home__price {
font-size: 1.5rem;
margin-left: 2rem;
display: flex;
align-items: center; }
.home__location svg, .home__rooms svg, .home__area svg, .home__price svg {
fill: #c69963;
height: 2rem;
width: 2rem;
margin-right: 1rem; }
.home__btn {
grid-column: 1 / -1; }
.gallery {
background-color: #f9f7f6;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);
grid-gap: 1.5rem;
padding: 1.5rem; }
.gallery__item--1 {
grid-row: 1 / span 2;
grid-column: 1 / span 2; }
.gallery__item--2 {
grid-row: 1 / span 3;
grid-column: 3 / span 3; }
.gallery__item--3 {
grid-row: 1 / span 2;
grid-column: 6 / 7; }
.gallery__item--4 {
grid-row: 1 / span 2;
grid-column: 7 / -1; }
.gallery__item--5 {
grid-row: 3 / span 3;
grid-column: 1 / span 2; }
.gallery__item--6 {
grid-row: 4 / span 2;
grid-column: 3 / span 2; }
.gallery__item--7 {
grid-row: 4 / 5;
grid-column: 5 / 6; }
.gallery__item--8 {
grid-row: 3 / span 2;
grid-column: 6 / span 2; }
.gallery__item--9 {
grid-row: 3 / span 3;
grid-column: 8 / -1; }
.gallery__item--10 {
grid-row: 6 / span 2;
grid-column: 1 / 2; }
.gallery__item--11 {
grid-row: 6 / span 2;
grid-column: 2 / span 2; }
.gallery__item--12 {
grid-row: 6 / span 2;
grid-column: 4 / 5; }
.gallery__item--13 {
grid-row: 5 / span 3;
grid-column: 5 / span 3; }
.gallery__item--14 {
grid-row: 6 / span 2;
grid-column: 8 / -1; }
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; }
.footer {
background-color: #101d2c;
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; }
.nav__link:link, .nav__link:visited {
font-size: 1.4rem;
color: #fff;
text-decoration: none;
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
text-align: center;
padding: 1.5rem;
display: block;
transition: all .2s; }
.nav__link:hover, .nav__link:active {
background-color: rgba(255, 255, 255, 0.05);
transform: translateY(-3px); }
.copyright {
font-size: 1.4rem;
color: #aaa;
margin-top: 6rem;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 70%; }
Nexter/final/css/style.css
+443
View File
@@ -0,0 +1,443 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
@media only screen and (max-width: 75em) {
html {
font-size: 50%; } }
body {
font-family: "Nunito", sans-serif;
color: #6D5D4B;
font-weight: 300;
line-height: 1.6; }
.container {
display: grid;
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
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] minmax(6rem, 1fr) [full-end]; }
@media only screen and (max-width: 62.5em) {
.container {
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } }
@media only screen and (max-width: 50em) {
.container {
grid-template-rows: 6rem calc(100vh - 6rem); } }
.heading-1, .heading-2, .heading-3, .heading-4 {
font-family: "Josefin Sans", sans-serif;
font-weight: 400; }
.heading-1 {
font-size: 4.5rem;
color: #f9f7f6;
line-height: 1; }
.heading-2 {
font-size: 4rem;
font-style: italic;
line-height: 1; }
.heading-2--light {
color: #f9f7f6; }
.heading-2--dark {
color: #54483A; }
.heading-3 {
font-size: 1.6rem;
color: #c69963;
text-transform: uppercase; }
.heading-4 {
font-size: 1.9rem; }
.heading-4--light {
color: #f9f7f6; }
.heading-4--dark {
color: #54483A; }
.btn {
background-color: #c69963;
color: #fff;
border: none;
border-radius: 0;
font-family: "Josefin Sans", sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
padding: 1.8rem 3rem;
cursor: pointer;
transition: all .2s; }
.btn:hover {
background-color: #B28451; }
.mb-sm {
margin-bottom: 2rem; }
.mb-md {
margin-bottom: 3rem; }
.mb-lg {
margin-bottom: 4rem; }
.mb-hg {
margin-bottom: 8rem; }
.sidebar {
background-color: #c69963;
grid-column: sidebar-start / sidebar-end;
grid-row: 1 / -1;
display: flex;
justify-content: center; }
@media only screen and (max-width: 62.5em) {
.sidebar {
grid-column: 1 / -1;
grid-row: 1 / 2;
justify-content: flex-end;
align-items: center; } }
.nav-btn {
border: none;
border-radius: 0;
background-color: #fff;
height: 2px;
width: 4.5rem;
margin-top: 4rem; }
.nav-btn::before, .nav-btn::after {
background-color: #fff;
height: 2px;
width: 4.5rem;
content: "";
display: block; }
.nav-btn::before {
transform: translateY(-1.5rem); }
.nav-btn::after {
transform: translateY(1.3rem); }
@media only screen and (max-width: 62.5em) {
.nav-btn {
margin-top: 0;
margin-right: 3rem; }
.nav-btn::before {
transform: translateY(-1.2rem); }
.nav-btn::after {
transform: translateY(1rem); } }
.header {
background-color: #54483A;
grid-column: full-start / col-end 6;
background-image: linear-gradient(rgba(16, 29, 44, 0.93), rgba(16, 29, 44, 0.93)), url(../img/hero.jpeg);
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; }
@media only screen and (max-width: 50em) {
.header {
grid-column: 1 / -1; } }
@media only screen and (max-width: 37.5em) {
.header {
padding: 5rem; } }
.header__logo {
height: 3rem;
justify-self: center; }
.header__btn {
align-self: start;
justify-self: start; }
.header__seenon-text {
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-column-gap: 1.5rem;
align-items: center;
font-size: 1.6rem;
color: #aaa; }
.header__seenon-text::before, .header__seenon-text::after {
content: "";
height: 1px;
display: block;
background-color: currentColor; }
.header__seenon-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 3rem;
justify-items: center;
align-items: center; }
.header__seenon-logos img {
max-height: 2.5rem;
max-width: 100%;
filter: brightness(70%); }
.realtors {
background-color: #101d2c;
grid-column: col-start 7 / full-end;
padding: 3rem;
display: grid;
align-content: center;
justify-content: center;
justify-items: center;
grid-row-gap: 2rem; }
@media only screen and (max-width: 50em) {
.realtors {
grid-column: 1 / -1; } }
.realtors__list {
display: grid;
grid-template-columns: min-content max-content;
grid-column-gap: 2rem;
grid-row-gap: 5vh;
align-items: center; }
@media only screen and (max-width: 50em) {
.realtors__list {
grid-template-columns: repeat(3, min-content max-content); } }
@media only screen and (max-width: 37.5em) {
.realtors__list {
grid-template-columns: min-content max-content; } }
.realtors__img {
width: 7rem;
border-radius: 50%;
display: block; }
.realtors__sold {
text-transform: uppercase;
color: #aaa;
margin-top: -3px; }
.features {
grid-column: center-start / center-end;
margin: 15rem 0; }
@supports (display: grid) {
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 6rem;
align-items: start; } }
.feature {
float: left;
width: 33.3333%;
margin-bottom: 6rem;
display: grid;
grid-template-columns: min-content 1fr;
grid-row-gap: 1.5rem;
grid-column-gap: 2.5rem; }
@supports (display: grid) {
.feature {
width: auto;
margin-bottom: 0; } }
.feature__icon {
fill: #c69963;
width: 4.5rem;
height: 4.5rem;
grid-row: 1 / span 2;
transform: translateY(-1rem); }
.feature__text {
font-size: 1.7rem; }
.story__pictures {
background-color: #c69963;
grid-column: full-start / col-end 4;
background-image: linear-gradient(rgba(198, 153, 99, 0.5), rgba(198, 153, 99, 0.5)), url(../img/back.jpg);
background-size: cover;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
align-items: center; }
@media only screen and (max-width: 50em) {
.story__pictures {
grid-column: 1 / -1;
padding: 6rem; } }
.story__img--1 {
width: 100%;
grid-row: 2 / 6;
grid-column: 2 / 6;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1); }
@media only screen and (max-width: 50em) {
.story__img--1 {
grid-column: 1 / 5;
grid-row: 1 / -1; } }
.story__img--2 {
width: 115%;
grid-row: 4 / 6;
grid-column: 4 / 7;
z-index: 20;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 50em) {
.story__img--2 {
grid-row: 1 / -1;
width: 100%; } }
.story__content {
background-color: #f9f7f6;
grid-column: col-start 5 / full-end;
padding: 6rem 8vw;
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
*/
display: grid;
align-content: center;
justify-items: start; }
@media only screen and (max-width: 50em) {
.story__content {
grid-column: 1 / -1;
grid-row: 5 / 6; } }
.story__text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 4rem; }
.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: #f9f7f6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 3.5rem; }
.home__img {
width: 100%;
grid-row: 1 / 2;
grid-column: 1 / -1;
z-index: 1; }
.home__like {
grid-row: 1 / 2;
grid-column: 2 / 3;
fill: #c69963;
height: 2.5rem;
width: 2.5rem;
z-index: 2;
justify-self: end;
margin: 1rem; }
.home__name {
grid-row: 1 / 2;
grid-column: 1 / -1;
justify-self: center;
align-self: end;
z-index: 3;
width: 80%;
font-family: "Josefin Sans", sans-serif;
font-size: 1.6rem;
text-align: center;
padding: 1.25rem;
background-color: #101d2c;
color: #fff;
font-weight: 400;
transform: translateY(50%); }
.home__location, .home__rooms {
margin-top: 2.5rem; }
.home__location, .home__rooms, .home__area, .home__price {
font-size: 1.5rem;
margin-left: 2rem;
display: flex;
align-items: center; }
.home__location svg, .home__rooms svg, .home__area svg, .home__price svg {
fill: #c69963;
height: 2rem;
width: 2rem;
margin-right: 1rem; }
.home__btn {
grid-column: 1 / -1; }
.gallery {
background-color: #f9f7f6;
grid-column: full-start / full-end;
display: grid;
/*grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);*/
grid-template: repeat(7, 5vw)/repeat(8, 1fr);
grid-gap: 1.5rem;
padding: 1.5rem; }
.gallery__item--1 {
grid-row: 1 / span 2;
grid-column: 1 / span 2; }
.gallery__item--2 {
grid-row: 1 / span 3;
grid-column: 3 / span 3; }
.gallery__item--3 {
grid-row: 1 / span 2;
grid-column: 6 / 7; }
.gallery__item--4 {
grid-row: 1 / span 2;
grid-column: 7 / -1; }
.gallery__item--5 {
grid-row: 3 / span 3;
grid-column: 1 / span 2; }
.gallery__item--6 {
grid-row: 4 / span 2;
grid-column: 3 / span 2; }
.gallery__item--7 {
grid-row: 4 / 5;
grid-column: 5 / 6; }
.gallery__item--8 {
grid-row: 3 / span 2;
grid-column: 6 / span 2; }
.gallery__item--9 {
grid-row: 3 / span 3;
grid-column: 8 / -1; }
.gallery__item--10 {
grid-row: 6 / span 2;
grid-column: 1 / 2; }
.gallery__item--11 {
grid-row: 6 / span 2;
grid-column: 2 / span 2; }
.gallery__item--12 {
grid-row: 6 / span 2;
grid-column: 4 / 5; }
.gallery__item--13 {
grid-row: 5 / span 3;
grid-column: 5 / span 3; }
.gallery__item--14 {
grid-row: 6 / span 2;
grid-column: 8 / -1; }
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; }
.footer {
background-color: #101d2c;
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; }
.nav__link:link, .nav__link:visited {
font-size: 1.4rem;
color: #fff;
text-decoration: none;
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
text-align: center;
padding: 1.5rem;
display: block;
transition: all .2s; }
.nav__link:hover, .nav__link:active {
background-color: rgba(255, 255, 255, 0.05);
transform: translateY(-3px); }
.copyright {
font-size: 1.4rem;
color: #aaa;
margin-top: 6rem;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 70%; }
Nexter/final/css/style.prefix.css
+504
View File
@@ -0,0 +1,504 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit; }
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%; }
@media only screen and (max-width: 75em) {
html {
font-size: 50%; } }
body {
font-family: "Nunito", sans-serif;
color: #6D5D4B;
font-weight: 300;
line-height: 1.6; }
.container {
display: grid;
grid-template-rows: 80vh -webkit-min-content 40vw repeat(3, -webkit-min-content);
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(-webkit-min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
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] minmax(6rem, 1fr) [full-end]; }
@media only screen and (max-width: 62.5em) {
.container {
grid-template-rows: 6rem 80vh -webkit-min-content 40vw repeat(3, -webkit-min-content);
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(-webkit-min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } }
@media only screen and (max-width: 50em) {
.container {
grid-template-rows: 6rem calc(100vh - 6rem); } }
.heading-1, .heading-2, .heading-3, .heading-4 {
font-family: "Josefin Sans", sans-serif;
font-weight: 400; }
.heading-1 {
font-size: 4.5rem;
color: #f9f7f6;
line-height: 1; }
.heading-2 {
font-size: 4rem;
font-style: italic;
line-height: 1; }
.heading-2--light {
color: #f9f7f6; }
.heading-2--dark {
color: #54483A; }
.heading-3 {
font-size: 1.6rem;
color: #c69963;
text-transform: uppercase; }
.heading-4 {
font-size: 1.9rem; }
.heading-4--light {
color: #f9f7f6; }
.heading-4--dark {
color: #54483A; }
.btn {
background-color: #c69963;
color: #fff;
border: none;
border-radius: 0;
font-family: "Josefin Sans", sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
padding: 1.8rem 3rem;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s; }
.btn:hover {
background-color: #B28451; }
.mb-sm {
margin-bottom: 2rem; }
.mb-md {
margin-bottom: 3rem; }
.mb-lg {
margin-bottom: 4rem; }
.mb-hg {
margin-bottom: 8rem; }
.sidebar {
background-color: #c69963;
grid-column: sidebar-start / sidebar-end;
grid-row: 1 / -1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
@media only screen and (max-width: 62.5em) {
.sidebar {
grid-column: 1 / -1;
grid-row: 1 / 2;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
.nav-btn {
border: none;
border-radius: 0;
background-color: #fff;
height: 2px;
width: 4.5rem;
margin-top: 4rem; }
.nav-btn::before, .nav-btn::after {
background-color: #fff;
height: 2px;
width: 4.5rem;
content: "";
display: block; }
.nav-btn::before {
-webkit-transform: translateY(-1.5rem);
transform: translateY(-1.5rem); }
.nav-btn::after {
-webkit-transform: translateY(1.3rem);
transform: translateY(1.3rem); }
@media only screen and (max-width: 62.5em) {
.nav-btn {
margin-top: 0;
margin-right: 3rem; }
.nav-btn::before {
-webkit-transform: translateY(-1.2rem);
transform: translateY(-1.2rem); }
.nav-btn::after {
-webkit-transform: translateY(1rem);
transform: translateY(1rem); } }
.header {
background-color: #54483A;
grid-column: full-start / col-end 6;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 29, 44, 0.93)), to(rgba(16, 29, 44, 0.93))), url(../img/hero.jpeg);
background-image: linear-gradient(rgba(16, 29, 44, 0.93), rgba(16, 29, 44, 0.93)), url(../img/hero.jpeg);
background-size: cover;
background-position: center;
padding: 8rem;
padding-top: 4rem;
display: grid;
grid-template-rows: 1fr -webkit-min-content minmax(6rem, -webkit-min-content) 1fr;
grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;
grid-template-columns: minmax(-webkit-min-content, -webkit-max-content);
grid-template-columns: minmax(min-content, max-content);
grid-row-gap: 1.5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
@media only screen and (max-width: 50em) {
.header {
grid-column: 1 / -1; } }
@media only screen and (max-width: 37.5em) {
.header {
padding: 5rem; } }
.header__logo {
height: 3rem;
justify-self: center; }
.header__btn {
-ms-flex-item-align: start;
align-self: start;
justify-self: start; }
.header__seenon-text {
display: grid;
grid-template-columns: 1fr -webkit-max-content 1fr;
grid-template-columns: 1fr max-content 1fr;
grid-column-gap: 1.5rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.6rem;
color: #aaa; }
.header__seenon-text::before, .header__seenon-text::after {
content: "";
height: 1px;
display: block;
background-color: currentColor; }
.header__seenon-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 3rem;
justify-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.header__seenon-logos img {
max-height: 2.5rem;
max-width: 100%;
-webkit-filter: brightness(70%);
filter: brightness(70%); }
.realtors {
background-color: #101d2c;
grid-column: col-start 7 / full-end;
padding: 3rem;
display: grid;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
grid-row-gap: 2rem; }
@media only screen and (max-width: 50em) {
.realtors {
grid-column: 1 / -1; } }
.realtors__list {
display: grid;
grid-template-columns: -webkit-min-content -webkit-max-content;
grid-template-columns: min-content max-content;
grid-column-gap: 2rem;
grid-row-gap: 5vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media only screen and (max-width: 50em) {
.realtors__list {
grid-template-columns: repeat(3, -webkit-min-content -webkit-max-content);
grid-template-columns: repeat(3, min-content max-content); } }
@media only screen and (max-width: 37.5em) {
.realtors__list {
grid-template-columns: -webkit-min-content -webkit-max-content;
grid-template-columns: min-content max-content; } }
.realtors__img {
width: 7rem;
border-radius: 50%;
display: block; }
.realtors__sold {
text-transform: uppercase;
color: #aaa;
margin-top: -3px; }
.features {
grid-column: center-start / center-end;
margin: 15rem 0; }
@supports (display: grid) {
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 6rem;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start; } }
.feature {
float: left;
width: 33.3333%;
margin-bottom: 6rem;
display: grid;
grid-template-columns: -webkit-min-content 1fr;
grid-template-columns: min-content 1fr;
grid-row-gap: 1.5rem;
grid-column-gap: 2.5rem; }
@supports (display: grid) {
.feature {
width: auto;
margin-bottom: 0; } }
.feature__icon {
fill: #c69963;
width: 4.5rem;
height: 4.5rem;
grid-row: 1 / span 2;
-webkit-transform: translateY(-1rem);
transform: translateY(-1rem); }
.feature__text {
font-size: 1.7rem; }
.story__pictures {
background-color: #c69963;
grid-column: full-start / col-end 4;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(198, 153, 99, 0.5)), to(rgba(198, 153, 99, 0.5))), url(../img/back.jpg);
background-image: linear-gradient(rgba(198, 153, 99, 0.5), rgba(198, 153, 99, 0.5)), url(../img/back.jpg);
background-size: cover;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media only screen and (max-width: 50em) {
.story__pictures {
grid-column: 1 / -1;
padding: 6rem; } }
.story__img--1 {
width: 100%;
grid-row: 2 / 6;
grid-column: 2 / 6;
-webkit-box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1); }
@media only screen and (max-width: 50em) {
.story__img--1 {
grid-column: 1 / 5;
grid-row: 1 / -1; } }
.story__img--2 {
width: 115%;
grid-row: 4 / 6;
grid-column: 4 / 7;
z-index: 20;
-webkit-box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 50em) {
.story__img--2 {
grid-row: 1 / -1;
width: 100%; } }
.story__content {
background-color: #f9f7f6;
grid-column: col-start 5 / full-end;
padding: 6rem 8vw;
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
*/
display: grid;
-ms-flex-line-pack: center;
align-content: center;
justify-items: start; }
@media only screen and (max-width: 50em) {
.story__content {
grid-column: 1 / -1;
grid-row: 5 / 6; } }
.story__text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 4rem; }
.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: #f9f7f6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 3.5rem; }
.home__img {
width: 100%;
grid-row: 1 / 2;
grid-column: 1 / -1;
z-index: 1; }
.home__like {
grid-row: 1 / 2;
grid-column: 2 / 3;
fill: #c69963;
height: 2.5rem;
width: 2.5rem;
z-index: 2;
justify-self: end;
margin: 1rem; }
.home__name {
grid-row: 1 / 2;
grid-column: 1 / -1;
justify-self: center;
-ms-flex-item-align: end;
align-self: end;
z-index: 3;
width: 80%;
font-family: "Josefin Sans", sans-serif;
font-size: 1.6rem;
text-align: center;
padding: 1.25rem;
background-color: #101d2c;
color: #fff;
font-weight: 400;
-webkit-transform: translateY(50%);
transform: translateY(50%); }
.home__location, .home__rooms {
margin-top: 2.5rem; }
.home__location, .home__rooms, .home__area, .home__price {
font-size: 1.5rem;
margin-left: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.home__location svg, .home__rooms svg, .home__area svg, .home__price svg {
fill: #c69963;
height: 2rem;
width: 2rem;
margin-right: 1rem; }
.home__btn {
grid-column: 1 / -1; }
.gallery {
background-color: #f9f7f6;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);
grid-gap: 1.5rem;
padding: 1.5rem; }
.gallery__item--1 {
grid-row: 1 / span 2;
grid-column: 1 / span 2; }
.gallery__item--2 {
grid-row: 1 / span 3;
grid-column: 3 / span 3; }
.gallery__item--3 {
grid-row: 1 / span 2;
grid-column: 6 / 7; }
.gallery__item--4 {
grid-row: 1 / span 2;
grid-column: 7 / -1; }
.gallery__item--5 {
grid-row: 3 / span 3;
grid-column: 1 / span 2; }
.gallery__item--6 {
grid-row: 4 / span 2;
grid-column: 3 / span 2; }
.gallery__item--7 {
grid-row: 4 / 5;
grid-column: 5 / 6; }
.gallery__item--8 {
grid-row: 3 / span 2;
grid-column: 6 / span 2; }
.gallery__item--9 {
grid-row: 3 / span 3;
grid-column: 8 / -1; }
.gallery__item--10 {
grid-row: 6 / span 2;
grid-column: 1 / 2; }
.gallery__item--11 {
grid-row: 6 / span 2;
grid-column: 2 / span 2; }
.gallery__item--12 {
grid-row: 6 / span 2;
grid-column: 4 / 5; }
.gallery__item--13 {
grid-row: 5 / span 3;
grid-column: 5 / span 3; }
.gallery__item--14 {
grid-row: 6 / span 2;
grid-column: 8 / -1; }
.gallery__img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block; }
.footer {
background-color: #101d2c;
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;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.nav__link:link, .nav__link:visited {
font-size: 1.4rem;
color: #fff;
text-decoration: none;
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
text-align: center;
padding: 1.5rem;
display: block;
-webkit-transition: all .2s;
transition: all .2s; }
.nav__link:hover, .nav__link:active {
background-color: rgba(255, 255, 255, 0.05);
-webkit-transform: translateY(-3px);
transform: translateY(-3px); }
.copyright {
font-size: 1.4rem;
color: #aaa;
margin-top: 6rem;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 70%; }
/*# sourceMappingURL=data:application/json;base64,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 truncated
Nexter/final/img/back.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

Nexter/final/img/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

Nexter/final/img/gal-1.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 KiB

Nexter/final/img/gal-10.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

Nexter/final/img/gal-11.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

Nexter/final/img/gal-12.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

Nexter/final/img/gal-13.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

Nexter/final/img/gal-14.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 854 KiB

Nexter/final/img/gal-2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

Nexter/final/img/gal-3.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

Nexter/final/img/gal-4.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

Nexter/final/img/gal-5.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

Nexter/final/img/gal-6.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

Nexter/final/img/gal-7.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 KiB

Nexter/final/img/gal-8.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 401 KiB

Nexter/final/img/gal-9.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

Nexter/final/img/hero.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 KiB

Nexter/final/img/house-1.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 KiB

Nexter/final/img/house-2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

Nexter/final/img/house-3.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

Nexter/final/img/house-4.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 527 KiB

Nexter/final/img/house-5.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

Nexter/final/img/house-6.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

Nexter/final/img/logo-bbc.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

Nexter/final/img/logo-bi.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

Nexter/final/img/logo-forbes.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

Nexter/final/img/logo-techcrunch.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

Nexter/final/img/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

Nexter/final/img/realtor-1.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

Nexter/final/img/realtor-2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

Nexter/final/img/realtor-3.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

Nexter/final/img/sprite.svg
Executable
+44
View File
@@ -0,0 +1,44 @@
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-heart-full" viewBox="0 0 32 32">
<title>heart-full</title>
<path d="M16.042 8.345c0 0-2-4.262-6.5-4.262-4.917 0-7.5 4.167-7.5 8.333 0 6.917 14 15.5 14 15.5s13.916-8.5 13.916-15.5c0-4.25-2.666-8.333-7.416-8.333s-6.5 4.262-6.5 4.262z"></path>
</symbol>
<symbol id="icon-presentation" viewBox="0 0 31 32">
<title>presentation</title>
<path d="M0.5 3c-0.276 0-0.5 0.224-0.5 0.5v17c0 0.827 0.673 1.5 1.5 1.5h28c0.827 0 1.5-0.673 1.5-1.5v-17c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v17c0 0.276-0.224 0.5-0.5 0.5h-28c-0.276 0-0.5-0.224-0.5-0.5v-17c0-0.276-0.224-0.5-0.5-0.5zM32.5 0h-34c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h34c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.854 8.146c-0.183-0.183-0.475-0.196-0.674-0.031l-6 5c-0.212 0.177-0.241 0.492-0.064 0.705 0.177 0.212 0.491 0.241 0.705 0.064l5.649-4.708 5.677 5.677c0.097 0.098 0.225 0.147 0.353 0.147s0.256-0.049 0.354-0.146l7.146-7.147v3.793c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-5c0-0.065-0.013-0.13-0.038-0.191-0.051-0.122-0.148-0.22-0.271-0.271-0.061-0.025-0.126-0.038-0.191-0.038h-5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3.793l-6.793 6.793-5.646-5.647zM8.057 31.732c0.128 0.245 0.43 0.339 0.675 0.211l6.768-3.545 6.768 3.545c0.074 0.039 0.153 0.057 0.232 0.057 0.18 0 0.354-0.098 0.443-0.268 0.128-0.245 0.034-0.547-0.211-0.675l-6.893-3.61c0.098-0.091 0.161-0.219 0.161-0.364v-2.583c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v2.583c0 0.144 0.063 0.272 0.161 0.363l-6.893 3.61c-0.245 0.129-0.339 0.431-0.211 0.676z"></path>
</symbol>
<symbol id="icon-expand" viewBox="0 0 32 32">
<title>expand</title>
<path d="M32 30.5v-29c0-0.827-0.673-1.5-1.5-1.5h-29c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-9c0-0.276 0.225-0.5 0.5-0.5h29c0.275 0 0.5 0.224 0.5 0.5v29c0 0.276-0.225 0.5-0.5 0.5h-9c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h9c0.827 0 1.5-0.673 1.5-1.5zM1.5 13c-0.827 0-1.5 0.673-1.5 1.5v16c0 0.827 0.673 1.5 1.5 1.5h16c0.827 0 1.5-0.673 1.5-1.5v-16.793l7-7v6.793c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-8c0-0.276-0.224-0.5-0.5-0.5h-8c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h6.792l-7 7h-16.792zM18 30.5c0 0.276-0.225 0.5-0.5 0.5h-16c-0.275 0-0.5-0.224-0.5-0.5v-16c0-0.276 0.225-0.5 0.5-0.5h16.5v16.5z"></path>
</symbol>
<symbol id="icon-lock" viewBox="0 0 28 32">
<title>lock</title>
<path d="M14 0c-5.514 0-10 4.486-10 10v3h-1.5c-1.378 0-2.5 1.122-2.5 2.5v14c0 1.378 1.122 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-14c0-1.378-1.122-2.5-2.5-2.5h-1.5v-3c0-5.514-4.486-10-10-10zM5 10c0-4.962 4.038-9 9-9s9 4.038 9 9v3h-3v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-3v-3zM19 13h-10v-3c0-2.757 2.243-5 5-5s5 2.243 5 5v3zM12.293 21l-5 5h-4.586l5-5h4.586zM18.293 21l-5 5h-4.586l5-5h4.586zM24.293 21l-5 5h-4.586l5-5h4.586zM27 21v5h-6.293l5-5h1.293zM1.293 26h-0.293v-5h5.293l-5 5zM25.5 31h-23c-0.827 0-1.5-0.673-1.5-1.5v-2.5h26v2.5c0 0.827-0.673 1.5-1.5 1.5zM27 15.5v4.5h-26v-4.5c0-0.827 0.673-1.5 1.5-1.5h23c0.827 0 1.5 0.673 1.5 1.5z"></path>
</symbol>
<symbol id="icon-trophy" viewBox="0 0 34 32">
<title>trophy</title>
<path d="M25.5 1c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5h-17c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h17zM25.5 2h-19c-3.283 0-4.813 1.166-5.519 2.144-0.864 1.2-1.026 2.803-0.456 4.514 0.882 2.646 3.846 5.825 5.668 7.237 0.092 0.071 0.2 0.105 0.307 0.105 0.149 0 0.297-0.066 0.396-0.194 0.169-0.218 0.129-0.532-0.089-0.702-1.674-1.296-4.525-4.342-5.332-6.763-0.467-1.397-0.354-2.68 0.318-3.612 0.815-1.131 2.442-1.729 4.707-1.729h1.5v9.5c0 6.726 6.673 10.601 8.036 11.322-0.021 0.056-0.036 0.115-0.036 0.178v2.5c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5c0-0.058-0.015-0.112-0.033-0.164 1.514-0.712 9.033-4.586 9.033-11.336v-9.5h1.5c2.265 0 3.892 0.598 4.707 1.729 0.672 0.932 0.785 2.215 0.318 3.613-0.63 1.891-3.769 5.553-5.332 6.763-0.218 0.169-0.258 0.483-0.089 0.702 0.099 0.127 0.247 0.193 0.396 0.193 0.107 0 0.215-0.034 0.307-0.104 1.732-1.342 4.961-5.119 5.668-7.237 0.57-1.711 0.408-3.314-0.456-4.514-0.706-0.979-2.236-2.145-5.519-2.145h-2zM25 12.5c0 6.093-7.152 9.804-8.486 10.443-1.228-0.665-7.514-4.367-7.514-10.443v-9.5h16v9.5zM11 28c-1.141 0-2 0.86-2 2v1.5c0 0.276 0.224 0.5 0.5 0.5h14c0.276 0 0.5-0.224 0.5-0.5v-1.425c0-1.163-0.879-2.075-2-2.075h-11zM23 30.075v0.925h-13v-1c0-0.589 0.411-1 1-1h11c0.57 0 1 0.462 1 1.075z"></path>
</symbol>
<symbol id="icon-key" viewBox="0 0 32 32">
<title>key</title>
<path d="M14.683 14.698c0.117 0 0.235-0.041 0.33-0.124l11.317-9.922-0.66-0.752-11.317 9.921c-0.208 0.182-0.229 0.498-0.046 0.706 0.099 0.113 0.237 0.171 0.376 0.171zM10.188 32c6.142 0 9.812-4.83 9.812-9.5 0-1.346-0.322-2.829-0.798-3.792l4.522-2.261c0.169-0.085 0.276-0.258 0.276-0.447v-4h3c0.011 0 0.102-0.006 0.113-0.006 0.666-0.045 0.865-0.257 0.887-0.994v-4h3c0.129 0 0.218 0.014 0.278 0.023 0.121 0.019 0.347 0.054 0.543-0.122 0.202-0.18 0.193-0.408 0.185-0.609-0.002-0.072-0.006-0.167-0.006-0.292v-4.531c0-0.81-0.659-1.469-1.469-1.469h-3.875c-0.354 0-0.698 0.129-0.969 0.364l-13.187 11.56c-0.649-0.13-1.63-0.299-2.313-0.299-5.617 0-10.187 4.57-10.187 10.187s4.57 10.188 10.188 10.188zM10.188 12.625c0.501 0 1.359 0.12 2.354 0.328 0.155 0.034 0.314-0.010 0.432-0.113l13.371-11.722c0.087-0.076 0.198-0.118 0.311-0.118h3.875c0.259 0 0.469 0.21 0.469 0.469v4.531h-3.5c-0.276 0-0.5 0.224-0.5 0.5v4.5h-3.5c-0.276 0-0.5 0.224-0.5 0.5v4.191l-4.724 2.362c-0.131 0.065-0.227 0.186-0.262 0.328s-0.006 0.293 0.080 0.412c0.44 0.607 0.906 2.114 0.906 3.707 0 4.178-3.296 8.5-8.812 8.5-5.066 0-9.188-4.122-9.188-9.188s4.122-9.187 9.188-9.187zM8.5 27c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5-3.5 1.57-3.5 3.5 1.57 3.5 3.5 3.5zM8.5 21c1.378 0 2.5 1.122 2.5 2.5s-1.122 2.5-2.5 2.5-2.5-1.122-2.5-2.5 1.122-2.5 2.5-2.5z"></path>
</symbol>
<symbol id="icon-profile-male" viewBox="0 0 36 32">
<title>profile-male</title>
<path d="M0.5 31.983c0.268 0.067 0.542-0.088 0.612-0.354 1.030-3.843 5.216-4.839 7.718-5.435 0.627-0.149 1.122-0.267 1.444-0.406 2.85-1.237 3.779-3.227 4.057-4.679 0.034-0.175-0.029-0.355-0.165-0.473-1.484-1.281-2.736-3.204-3.526-5.416-0.022-0.063-0.057-0.121-0.103-0.171-1.045-1.136-1.645-2.337-1.645-3.294 0-0.559 0.211-0.934 0.686-1.217 0.145-0.087 0.236-0.24 0.243-0.408 0.221-5.094 3.849-9.104 8.299-9.13 0.005 0 0.102 0.007 0.107 0.007 4.472 0.062 8.077 4.158 8.206 9.324 0.004 0.143 0.068 0.277 0.178 0.369 0.313 0.265 0.459 0.601 0.459 1.057 0 0.801-0.427 1.786-1.201 2.772-0.037 0.047-0.065 0.101-0.084 0.158-0.8 2.536-2.236 4.775-3.938 6.145-0.144 0.116-0.212 0.302-0.178 0.483 0.278 1.451 1.207 3.44 4.057 4.679 0.337 0.146 0.86 0.26 1.523 0.403 2.477 0.536 6.622 1.435 7.639 5.232 0.060 0.223 0.262 0.37 0.482 0.37 0.043 0 0.086-0.006 0.13-0.017 0.267-0.072 0.425-0.346 0.354-0.613-1.175-4.387-5.871-5.404-8.393-5.95-0.585-0.127-1.090-0.236-1.336-0.344-1.86-0.808-3.006-2.039-3.411-3.665 1.727-1.483 3.172-3.771 3.998-6.337 0.877-1.14 1.359-2.314 1.359-3.317 0-0.669-0.216-1.227-0.644-1.663-0.238-5.604-4.237-10.017-9.2-10.088l-0.149-0.002c-4.873 0.026-8.889 4.323-9.24 9.83-0.626 0.46-0.944 1.105-0.944 1.924 0 1.183 0.669 2.598 1.84 3.896 0.809 2.223 2.063 4.176 3.556 5.543-0.403 1.632-1.55 2.867-3.414 3.676-0.241 0.105-0.721 0.22-1.277 0.352-2.541 0.604-7.269 1.729-8.453 6.147-0.071 0.267 0.087 0.54 0.354 0.612z"></path>
</symbol>
<symbol id="icon-map-pin" viewBox="0 0 24 32">
<title>map-pin</title>
<path d="M12 0c-6.617 0-12 5.394-12 12.022 0 9.927 11.201 19.459 11.678 19.86 0.093 0.079 0.208 0.118 0.322 0.118s0.226-0.038 0.318-0.114c0.477-0.394 11.682-9.762 11.682-19.864 0-6.628-5.383-12.022-12-12.022zM12.002 30.838c-1.841-1.645-11.002-10.259-11.002-18.816 0-6.078 4.935-11.022 11-11.022s11 4.944 11 11.022c0 8.702-9.152 17.193-10.998 18.816zM12 6c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zM12 17c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path>
</symbol>
<symbol id="icon-heart" viewBox="0 0 37 32">
<title>heart</title>
<path d="M27 0c-2.476 0-4.856 0.921-6.704 2.595-0.702 0.635-1.303 1.357-1.796 2.154-0.493-0.797-1.094-1.519-1.796-2.155-1.848-1.673-4.228-2.594-6.704-2.594-5.514 0-10 4.486-10 10 0 3.722 1.158 6.66 3.871 9.825 3.942 4.6 13.919 11.62 14.342 11.917 0.086 0.061 0.187 0.091 0.287 0.091s0.201-0.030 0.287-0.091c0.423-0.297 10.4-7.317 14.343-11.917 2.712-3.165 3.87-6.103 3.87-9.825 0-5.514-4.486-10-10-10zM32.371 19.175c-3.495 4.076-12.18 10.341-13.871 11.545-1.691-1.204-10.376-7.469-13.87-11.545-2.545-2.969-3.63-5.713-3.63-9.175 0-4.963 4.038-9 9-9 2.227 0 4.37 0.829 6.032 2.335 0.838 0.76 1.518 1.656 2.020 2.664 0.17 0.34 0.726 0.34 0.896 0 0.502-1.008 1.182-1.904 2.020-2.663 1.662-1.507 3.805-2.336 6.032-2.336 4.962 0 9 4.037 9 9 0 3.462-1.085 6.206-3.629 9.175z"></path>
</symbol>
<symbol id="icon-global" viewBox="0 0 32 32">
<title>global</title>
<path d="M0.034 16.668c0.354 8.511 7.369 15.332 15.966 15.332s15.612-6.821 15.966-15.332c0.019-0.053 0.034-0.108 0.034-0.168 0-0.036-0.013-0.067-0.020-0.1 0.003-0.134 0.020-0.265 0.020-0.4 0-8.822-7.178-16-16-16s-16 7.178-16 16c0 0.135 0.017 0.266 0.020 0.4-0.007 0.033-0.020 0.064-0.020 0.1 0 0.060 0.015 0.115 0.034 0.168zM24.921 22.742c-1.319-0.552-2.735-0.979-4.215-1.271 0.158-1.453 0.251-2.962 0.28-4.47h4.98c-0.091 2.054-0.456 3.993-1.045 5.741zM26.965 17h3.984c-0.186 2.806-1.138 5.403-2.663 7.579-0.759-0.533-1.577-1.019-2.457-1.44 0.645-1.869 1.042-3.943 1.136-6.139zM12.389 22.286c1.178-0.184 2.387-0.286 3.611-0.286s2.433 0.102 3.61 0.286c-0.694 5.335-2.21 8.714-3.61 8.714s-2.916-3.379-3.611-8.714zM13.908 30.664c-2.751-0.882-5.078-3.471-6.482-6.984 1.246-0.525 2.586-0.935 3.99-1.217 0.459 3.496 1.298 6.542 2.492 8.201zM12.274 10.709c1.217 0.188 2.465 0.291 3.726 0.291s2.509-0.103 3.726-0.291c0.172 1.62 0.274 3.388 0.274 5.291h-8c0-1.903 0.102-3.671 0.274-5.291zM19.985 17c-0.028 1.525-0.118 2.961-0.26 4.291-1.216-0.188-2.463-0.291-3.725-0.291s-2.509 0.103-3.726 0.291c-0.173-1.626-0.237-3.057-0.26-4.291h7.971zM20.585 22.463c1.404 0.282 2.743 0.692 3.99 1.217-1.404 3.513-3.731 6.102-6.482 6.984 1.193-1.659 2.032-4.705 2.492-8.201zM21 16c0-1.836-0.102-3.696-0.294-5.47 1.48-0.292 2.896-0.72 4.215-1.271 0.684 2.029 1.079 4.315 1.079 6.741h-5zM20.585 9.537c-0.46-3.496-1.298-6.543-2.493-8.201 2.751 0.882 5.078 3.471 6.482 6.984-1.246 0.525-2.585 0.936-3.989 1.217zM19.611 9.714c-1.178 0.184-2.387 0.286-3.611 0.286s-2.433-0.102-3.611-0.286c0.695-5.335 2.211-8.714 3.611-8.714s2.916 3.379 3.611 8.714zM11.415 9.537c-1.404-0.282-2.743-0.692-3.99-1.217 1.404-3.513 3.731-6.102 6.482-6.984-1.193 1.659-2.032 4.705-2.492 8.201zM11.294 10.53c-0.192 1.774-0.294 3.634-0.294 5.47h-5c0-2.426 0.395-4.712 1.079-6.742 1.319 0.552 2.735 0.979 4.215 1.272zM11.014 17c0.029 1.508 0.122 3.017 0.28 4.471-1.48 0.292-2.896 0.72-4.215 1.271-0.589-1.748-0.954-3.687-1.045-5.742h4.98zM6.17 23.139c-0.88 0.422-1.697 0.907-2.456 1.44-1.525-2.176-2.477-4.772-2.663-7.579h3.984c0.094 2.196 0.491 4.27 1.135 6.139zM4.313 25.38c0.685-0.479 1.417-0.922 2.207-1.305 1.004 2.485 2.449 4.548 4.186 5.943-2.526-0.958-4.729-2.568-6.393-4.638zM21.294 30.017c1.738-1.394 3.182-3.458 4.186-5.943 0.79 0.384 1.522 0.826 2.207 1.305-1.664 2.071-3.867 3.681-6.393 4.638zM27 16c0-2.567-0.428-4.987-1.17-7.139 0.88-0.422 1.698-0.907 2.457-1.44 1.704 2.434 2.713 5.389 2.713 8.579h-4zM27.688 6.62c-0.685 0.479-1.417 0.921-2.207 1.305-1.004-2.485-2.449-4.549-4.186-5.943 2.525 0.958 4.728 2.568 6.393 4.638zM10.706 1.983c-1.738 1.394-3.182 3.458-4.186 5.943-0.791-0.384-1.522-0.827-2.207-1.306 1.664-2.070 3.867-3.68 6.393-4.637zM3.714 7.421c0.758 0.533 1.576 1.018 2.456 1.44-0.742 2.152-1.17 4.572-1.17 7.139h-4c0-3.19 1.009-6.145 2.714-8.579z"></path>
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

Nexter/final/img/story-1.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

Nexter/final/img/story-2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 621 KiB

Nexter/final/img/text.txt
+18
View File
@@ -0,0 +1,18 @@
--- Features
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.
Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.
Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.
Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.
Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.
--- Stories
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta!
Nexter/final/index.html
+355
View File
@@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>nexter &mdash; your home, your freedom</title>
</head>
<body class="container">
<div class="sidebar">
<button class="nav-btn"></button>
</div>
<header class="header">
<img src="img/logo.png" alt="Nexter logo" class="header__logo">
<h3 class="heading-3">Your own home:</h3>
<h1 class="heading-1">The ultimate personal freedom</h1>
<button class="btn header__btn">View our properties</button>
<div class="header__seenon-text">Seen on</div>
<div class="header__seenon-logos">
<img src="img/logo-bbc.png" alt="Seen on logo 1">
<img src="img/logo-forbes.png" alt="Seen on logo 2">
<img src="img/logo-techcrunch.png" alt="Seen on logo 3">
<img src="img/logo-bi.png" alt="Seen on logo 4">
</div>
</header>
<div class="realtors">
<h3 class="heading-3">Top 3 Realtors</h3>
<div class="realtors__list">
<img src="img/realtor-1.jpeg" alt="Realtor 1" class="realtors__img">
<div class="realtors__details">
<h4 class="heading-4 heading-4--light">Erik Feinman</h4>
<p class="realtors__sold">245 houses sold</p>
</div>
<img src="img/realtor-2.jpeg" alt="Realtor 2" class="realtors__img">
<div class="realtors__details">
<h4 class="heading-4 heading-4--light">Kim Brown</h4>
<p class="realtors__sold">212 houses sold</p>
</div>
<img src="img/realtor-3.jpeg" alt="Realtor 3" class="realtors__img">
<div class="realtors__details">
<h4 class="heading-4 heading-4--light">Toby Ramsey</h4>
<p class="realtors__sold">198 houses sold</p>
</div>
</div>
</div>
<section class="features">
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-global"></use>
</svg>
<h4 class="heading-4 heading-4--dark">World's best luxury homes</h4>
<p class="feature__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.</p>
</div>
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-trophy"></use>
</svg>
<h4 class="heading-4 heading-4--dark">Only the best properties</h4>
<p class="feature__text">Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.</p>
</div>
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<h4 class="heading-4 heading-4--dark">All homes in in top locations</h4>
<p class="feature__text">Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.</p>
</div>
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<h4 class="heading-4 heading-4--dark">New home in one week</h4>
<p class="feature__text">Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-presentation"></use>
</svg>
<h4 class="heading-4 heading-4--dark">Top 1% realtors</h4>
<p class="feature__text">Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.</p>
</div>
<div class="feature">
<svg class="feature__icon">
<use xlink:href="img/sprite.svg#icon-lock"></use>
</svg>
<h4 class="heading-4 heading-4--dark">Secure payments on nexter</h4>
<p class="feature__text">Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.</p>
</div>
</section>
<div class="story__pictures">
<img src="img/story-1.jpeg" alt="Couple with new house" class="story__img--1">
<img src="img/story-2.jpeg" alt="New house" class="story__img--2">
</div>
<div class="story__content">
<h3 class="heading-3 mb-sm">Happy Customers</h3>
<h2 class="heading-2 heading-2--dark mb-md">&ldquo;The best decision of our lives&rdquo;</h2>
<p class="story__text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta!
</p>
<button class="btn">Find your own home</button>
</div>
<section class="homes">
<div class="home">
<img src="img/house-1.jpeg" alt="House 1" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Beautiful Familiy House</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>USA</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>5 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>325 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$1,200,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
<div class="home">
<img src="img/house-2.jpeg" alt="House 2" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Modern Glass Villa</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>Canada</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>6 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>450 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$2,750,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
<div class="home">
<img src="img/house-3.jpeg" alt="House 3" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Cozy Country House</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>UK</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>4 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>250 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$850,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
<div class="home">
<img src="img/house-4.jpeg" alt="House 4" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Large Rustical Villa</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>Portugal</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>6 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>480 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$1,950,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
<div class="home">
<img src="img/house-5.jpeg" alt="House 5" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Majestic Palace House</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>Germany</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>18 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>4230 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$9,500,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
<div class="home">
<img src="img/house-6.jpeg" alt="House 6" class="home__img">
<svg class="home__like">
<use xlink:href="img/sprite.svg#icon-heart-full"></use>
</svg>
<h5 class="home__name">Modern Familiy Apartment</h5>
<div class="home__location">
<svg>
<use xlink:href="img/sprite.svg#icon-map-pin"></use>
</svg>
<p>Italy</p>
</div>
<div class="home__rooms">
<svg>
<use xlink:href="img/sprite.svg#icon-profile-male"></use>
</svg>
<p>3 rooms</p>
</div>
<div class="home__area">
<svg>
<use xlink:href="img/sprite.svg#icon-expand"></use>
</svg>
<p>180 m<sup>2</sup></p>
</div>
<div class="home__price">
<svg>
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<p>$600,000</p>
</div>
<button class="btn home__btn">Contact realtor</button>
</div>
</section>
<section class="gallery">
<figure class="gallery__item gallery__item--1"><img src="img/gal-1.jpeg" alt="Gallery image 1" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--2"><img src="img/gal-2.jpeg" alt="Gallery image 2" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--3"><img src="img/gal-3.jpeg" alt="Gallery image 3" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--4"><img src="img/gal-4.jpeg" alt="Gallery image 4" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--5"><img src="img/gal-5.jpeg" alt="Gallery image 5" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--6"><img src="img/gal-6.jpeg" alt="Gallery image 6" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--7"><img src="img/gal-7.jpeg" alt="Gallery image 7" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--8"><img src="img/gal-8.jpeg" alt="Gallery image 8" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--9"><img src="img/gal-9.jpeg" alt="Gallery image 9" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--10"><img src="img/gal-10.jpeg" alt="Gallery image 10" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--11"><img src="img/gal-11.jpeg" alt="Gallery image 11" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--12"><img src="img/gal-12.jpeg" alt="Gallery image 12" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--13"><img src="img/gal-13.jpeg" alt="Gallery image 13" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--14"><img src="img/gal-14.jpeg" alt="Gallery image 14" class="gallery__img"></figure>
</section>
<footer class="footer">
<ul class="nav">
<li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
<li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
<li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
<li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
<li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>
<p class="copyright">
&copy; Copyright 2017 by Jonas Schmedtmann. Feel free to use this project for your own purposes. This does NOT apply if you plan to produce your own course or tutorials based on this project.
</p>
</footer>
</body>
</html>
Nexter/final/package.json
+25
View File
@@ -0,0 +1,25 @@
{
"name": "Nexter",
"version": "1.0.0",
"description": "Nexter webpage",
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass prefix:css compress:css"
},
"author": "Jonas",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}
Nexter/final/sass/_base.scss
+60
View File
@@ -0,0 +1,60 @@
// 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;
// RESPONSIVE BREAKPOINTS
$bp-largest: 75em; // 1200px
$bp-large: 62.5em; // 1000px
$bp-medium: 50em; // 800px;
$bp-small: 37.5em; // 600px;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px
@media only screen and (max-width: $bp-largest) {
font-size: 50%;
}
}
body {
font-family: $font-primary;
color: $color-grey-dark-2;
font-weight: 300;
line-height: 1.6;
}
.container {
display: grid;
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
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] minmax(6rem, 1fr) [full-end];
@media only screen and (max-width: $bp-large) {
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
}
@media only screen and (max-width: $bp-medium) {
grid-template-rows: 6rem calc(100vh - 6rem);
}
}
Nexter/final/sass/_features.scss
+43
View File
@@ -0,0 +1,43 @@
.features {
grid-column: center-start / center-end;
margin: 15rem 0;
@supports(display: grid) {
display: grid;
//grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 6rem;
align-items: start;
}
}
.feature {
float: left;
width: 33.3333%;
margin-bottom: 6rem;
@supports(display: grid) {
width: auto;
margin-bottom: 0;
}
display: grid;
grid-template-columns: min-content 1fr;
grid-row-gap: 1.5rem;
grid-column-gap: 2.5rem;
&__icon {
fill: $color-primary;
width: 4.5rem;
height: 4.5rem;
grid-row: 1 / span 2;
transform: translateY(-1rem);
}
&__text {
font-size: 1.7rem;
}
}
Nexter/final/sass/_footer.scss
+43
View File
@@ -0,0 +1,43 @@
.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;
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%;
}
Nexter/final/sass/_gallery.scss
+92
View File
@@ -0,0 +1,92 @@
.gallery {
background-color: $color-grey-light-1;
grid-column: full-start / full-end;
display: grid;
/*grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);*/
grid-template: repeat(7, 5vw) / repeat(8, 1fr);
grid-gap: 1.5rem;
padding: 1.5rem;
&__item {
&--1 {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}
&--2 {
grid-row: 1 / span 3;
grid-column: 3 / span 3;
}
&--3 {
grid-row: 1 / span 2;
grid-column: 6 / 7;
}
&--4 {
grid-row: 1 / span 2;
grid-column: 7 / -1;
}
&--5 {
grid-row: 3 / span 3;
grid-column: 1 / span 2;
}
&--6 {
grid-row: 4 / span 2;
grid-column: 3 / span 2;
}
&--7 {
grid-row: 4 / 5;
grid-column: 5 / 6;
}
&--8 {
grid-row: 3 / span 2;
grid-column: 6 / span 2;
}
&--9 {
grid-row: 3 / span 3;
grid-column: 8 / -1;
}
&--10 {
grid-row: 6 / span 2;
grid-column: 1 / 2;
}
&--11 {
grid-row: 6 / span 2;
grid-column: 2 / span 2;
}
&--12 {
grid-row: 6 / span 2;
grid-column: 4 / 5;
}
&--13 {
grid-row: 5 / span 3;
grid-column: 5 / span 3;
}
&--14 {
grid-row: 6 / span 2;
grid-column: 8 / -1;
}
}
&__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
Nexter/final/sass/_header.scss
+65
View File
@@ -0,0 +1,65 @@
.header {
background-color: $color-grey-dark-1;
grid-column: full-start / col-end 6;
background-image: linear-gradient(rgba($color-secondary, .93), rgba($color-secondary, .93)), url(../img/hero.jpeg);
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;
@media only screen and (max-width: $bp-medium) {
grid-column: 1 / -1;
}
@media only screen and (max-width: $bp-small) {
padding: 5rem;
}
&__logo {
height: 3rem;
justify-self: center;
}
&__btn {
align-self: start;
justify-self: start;
}
&__seenon-text {
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-column-gap: 1.5rem;
align-items: center;
font-size: 1.6rem;
color: $color-grey-light-2;
&::before,
&::after {
content: "";
height: 1px;
display: block;
background-color: currentColor;
}
}
&__seenon-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 3rem;
justify-items: center;
align-items: center;
img {
max-height: 2.5rem;
max-width: 100%;
filter: brightness(70%);
}
}
}
Nexter/final/sass/_homes.scss
+80
View File
@@ -0,0 +1,80 @@
.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);
grid-row-gap: 3.5rem;
&__img {
width: 100%;
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 {
grid-row: 1 / 2;
grid-column: 1 / -1;
justify-self: center;
align-self: end;
z-index: 3;
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;
transform: translateY(50%);
}
&__location,
&__rooms {
margin-top: 2.5rem;
}
&__location,
&__rooms,
&__area,
&__price {
font-size: 1.5rem;
margin-left: 2rem;
display: flex;
align-items: center;
svg {
fill: $color-primary;
height: 2rem;
width: 2rem;
margin-right: 1rem;
}
}
&__btn {
grid-column: 1 / -1;
}
}
Nexter/final/sass/_realtors.scss
+43
View File
@@ -0,0 +1,43 @@
.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;
@media only screen and (max-width: $bp-medium) {
grid-column: 1 / -1;
}
&__list {
display: grid;
grid-template-columns: min-content max-content;
grid-column-gap: 2rem;
grid-row-gap: 5vh;
align-items: center;
@media only screen and (max-width: $bp-medium) {
grid-template-columns: repeat(3, min-content max-content);
}
@media only screen and (max-width: $bp-small) {
grid-template-columns: min-content max-content;
}
}
&__img {
width: 7rem;
border-radius: 50%;
display: block;
}
&__sold {
text-transform: uppercase;
color: $color-grey-light-2;
margin-top: -3px;
}
}
Nexter/final/sass/_sidebar.scss
+45
View File
@@ -0,0 +1,45 @@
.sidebar {
background-color: $color-primary;
grid-column: sidebar-start / sidebar-end;
grid-row: 1 / -1;
display: flex;
justify-content: center;
@media only screen and (max-width: $bp-large) {
grid-column: 1 / -1;
grid-row: 1 / 2;
justify-content: flex-end;
align-items: center;
}
}
.nav-btn {
border: none;
border-radius: 0;
background-color: #fff;
height: 2px;
width: 4.5rem;
margin-top: 4rem;
&::before,
&::after {
background-color: #fff;
height: 2px;
width: 4.5rem;
content: "";
display: block;
}
&::before { transform: translateY(-1.5rem); }
&::after { transform: translateY(1.3rem); }
@media only screen and (max-width: $bp-large) {
margin-top: 0;
margin-right: 3rem;
&::before { transform: translateY(-1.2rem); }
&::after { transform: translateY(1rem); }
}
}
Nexter/final/sass/_story.scss
+72
View File
@@ -0,0 +1,72 @@
.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(../img/back.jpg);
background-size: cover;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
align-items: center;
@media only screen and (max-width: $bp-medium) {
grid-column: 1 / -1;
padding: 6rem;
}
}
&__img--1 {
width: 100%;
grid-row: 2 / 6;
grid-column: 2 / 6;
box-shadow: 0 2rem 5rem rgba(#000, .1);
@media only screen and (max-width: $bp-medium) {
grid-column: 1 / 5;
grid-row: 1 / -1;
}
}
&__img--2 {
width: 115%;
grid-row: 4 / 6;
grid-column: 4 / 7;
z-index: 20;
box-shadow: 0 2rem 5rem rgba(#000, .2);
@media only screen and (max-width: $bp-medium) {
grid-row: 1 / -1;
width: 100%;
}
}
&__content {
background-color: $color-grey-light-1;
grid-column: col-start 5 / full-end;
padding: 6rem 8vw;
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
*/
display: grid;
align-content: center;
justify-items: start;
@media only screen and (max-width: $bp-medium) {
grid-column: 1 / -1;
grid-row: 5 / 6;
}
}
&__text {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 4rem;
}
}
Nexter/final/sass/_typography.scss
+58
View File
@@ -0,0 +1,58 @@
%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; }
Nexter/final/sass/main.scss
+11
View File
@@ -0,0 +1,11 @@
@import "base";
@import "typography";
@import "sidebar";
@import "header";
@import "realtors";
@import "features";
@import "story";
@import "homes";
@import "gallery";
@import "footer";