From 4d91966711fa610644e6d3f42d621ebf54a33e60 Mon Sep 17 00:00:00 2001 From: Yusuf Ipek Date: Thu, 13 May 2021 11:20:28 +0300 Subject: [PATCH] created layout --- src/App.js | 21 ++++++++++++++++++- src/commons/features.jsx | 3 +++ src/commons/footer.jsx | 3 +++ src/commons/gallery.jsx | 3 +++ src/commons/header.jsx | 3 +++ src/commons/homes.jsx | 3 +++ {img => src/commons/img}/back.jpg | Bin {img => src/commons/img}/favicon.png | Bin {img => src/commons/img}/gal-1.jpeg | Bin {img => src/commons/img}/gal-10.jpeg | Bin {img => src/commons/img}/gal-11.jpeg | Bin {img => src/commons/img}/gal-12.jpeg | Bin {img => src/commons/img}/gal-13.jpeg | Bin {img => src/commons/img}/gal-14.jpeg | Bin {img => src/commons/img}/gal-2.jpeg | Bin {img => src/commons/img}/gal-3.jpeg | Bin {img => src/commons/img}/gal-4.jpeg | Bin {img => src/commons/img}/gal-5.jpeg | Bin {img => src/commons/img}/gal-6.jpeg | Bin {img => src/commons/img}/gal-7.jpeg | Bin {img => src/commons/img}/gal-8.jpeg | Bin {img => src/commons/img}/gal-9.jpeg | Bin {img => src/commons/img}/hero.jpeg | Bin {img => src/commons/img}/house-1.jpeg | Bin {img => src/commons/img}/house-2.jpeg | Bin {img => src/commons/img}/house-3.jpeg | Bin {img => src/commons/img}/house-4.jpeg | Bin {img => src/commons/img}/house-5.jpeg | Bin {img => src/commons/img}/house-6.jpeg | Bin {img => src/commons/img}/logo-bbc.png | Bin {img => src/commons/img}/logo-bi.png | Bin {img => src/commons/img}/logo-forbes.png | Bin {img => src/commons/img}/logo-techcrunch.png | Bin {img => src/commons/img}/logo.png | Bin {img => src/commons/img}/realtor-1.jpeg | Bin {img => src/commons/img}/realtor-2.jpeg | Bin {img => src/commons/img}/realtor-3.jpeg | Bin {img => src/commons/img}/sprite.svg | 0 {img => src/commons/img}/story-1.jpeg | Bin {img => src/commons/img}/story-2.jpeg | Bin {img => src/commons/img}/text.txt | 0 src/commons/realtors.jsx | 3 +++ src/commons/sidebar.jsx | 3 +++ src/commons/stories.jsx | 10 +++++++++ src/sass/_base.scss | 10 +++++++++ src/sass/_features.scss | 4 ++++ src/sass/_footer.scss | 4 ++++ src/sass/_gallery.scss | 4 ++++ src/sass/_header.scss | 4 ++++ src/sass/_homes.scss | 4 ++++ src/sass/_realtors.scss | 4 ++++ src/sass/_sidebar.scss | 5 +++++ src/sass/_story.scss | 11 ++++++++++ 53 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/commons/features.jsx create mode 100644 src/commons/footer.jsx create mode 100644 src/commons/gallery.jsx create mode 100644 src/commons/header.jsx create mode 100644 src/commons/homes.jsx rename {img => src/commons/img}/back.jpg (100%) rename {img => src/commons/img}/favicon.png (100%) rename {img => src/commons/img}/gal-1.jpeg (100%) rename {img => src/commons/img}/gal-10.jpeg (100%) rename {img => src/commons/img}/gal-11.jpeg (100%) rename {img => src/commons/img}/gal-12.jpeg (100%) rename {img => src/commons/img}/gal-13.jpeg (100%) rename {img => src/commons/img}/gal-14.jpeg (100%) rename {img => src/commons/img}/gal-2.jpeg (100%) rename {img => src/commons/img}/gal-3.jpeg (100%) rename {img => src/commons/img}/gal-4.jpeg (100%) rename {img => src/commons/img}/gal-5.jpeg (100%) rename {img => src/commons/img}/gal-6.jpeg (100%) rename {img => src/commons/img}/gal-7.jpeg (100%) rename {img => src/commons/img}/gal-8.jpeg (100%) rename {img => src/commons/img}/gal-9.jpeg (100%) rename {img => src/commons/img}/hero.jpeg (100%) rename {img => src/commons/img}/house-1.jpeg (100%) rename {img => src/commons/img}/house-2.jpeg (100%) rename {img => src/commons/img}/house-3.jpeg (100%) rename {img => src/commons/img}/house-4.jpeg (100%) rename {img => src/commons/img}/house-5.jpeg (100%) rename {img => src/commons/img}/house-6.jpeg (100%) rename {img => src/commons/img}/logo-bbc.png (100%) rename {img => src/commons/img}/logo-bi.png (100%) rename {img => src/commons/img}/logo-forbes.png (100%) rename {img => src/commons/img}/logo-techcrunch.png (100%) rename {img => src/commons/img}/logo.png (100%) rename {img => src/commons/img}/realtor-1.jpeg (100%) rename {img => src/commons/img}/realtor-2.jpeg (100%) rename {img => src/commons/img}/realtor-3.jpeg (100%) rename {img => src/commons/img}/sprite.svg (100%) rename {img => src/commons/img}/story-1.jpeg (100%) rename {img => src/commons/img}/story-2.jpeg (100%) rename {img => src/commons/img}/text.txt (100%) create mode 100644 src/commons/realtors.jsx create mode 100644 src/commons/sidebar.jsx create mode 100644 src/commons/stories.jsx diff --git a/src/App.js b/src/App.js index e813d31..5403d9a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,26 @@ import "./sass/main.scss"; +import Sidebar from "./commons/sidebar"; +import Header from "./commons/header"; +import Features from "./commons/features"; +import Stories from "./commons/stories"; +import Homes from "./commons/homes"; +import Gallery from "./commons/gallery"; +import Footer from "./commons/footer"; +import Realtors from "./commons/realtors"; function App() { - return
; + return ( +
+ +
+ + + + + +
+
+ ); } export default App; diff --git a/src/commons/features.jsx b/src/commons/features.jsx new file mode 100644 index 0000000..d703301 --- /dev/null +++ b/src/commons/features.jsx @@ -0,0 +1,3 @@ +export default function Features() { + return
Features
; +} diff --git a/src/commons/footer.jsx b/src/commons/footer.jsx new file mode 100644 index 0000000..0070e0f --- /dev/null +++ b/src/commons/footer.jsx @@ -0,0 +1,3 @@ +export default function Footer() { + return ; +} diff --git a/src/commons/gallery.jsx b/src/commons/gallery.jsx new file mode 100644 index 0000000..726fd93 --- /dev/null +++ b/src/commons/gallery.jsx @@ -0,0 +1,3 @@ +export default function Gallery() { + return
Gallery
; +} diff --git a/src/commons/header.jsx b/src/commons/header.jsx new file mode 100644 index 0000000..75111f9 --- /dev/null +++ b/src/commons/header.jsx @@ -0,0 +1,3 @@ +export default function Header() { + return
Header
; +} diff --git a/src/commons/homes.jsx b/src/commons/homes.jsx new file mode 100644 index 0000000..9a822cb --- /dev/null +++ b/src/commons/homes.jsx @@ -0,0 +1,3 @@ +export default function Homes() { + return
Homes
; +} diff --git a/img/back.jpg b/src/commons/img/back.jpg similarity index 100% rename from img/back.jpg rename to src/commons/img/back.jpg diff --git a/img/favicon.png b/src/commons/img/favicon.png similarity index 100% rename from img/favicon.png rename to src/commons/img/favicon.png diff --git a/img/gal-1.jpeg b/src/commons/img/gal-1.jpeg similarity index 100% rename from img/gal-1.jpeg rename to src/commons/img/gal-1.jpeg diff --git a/img/gal-10.jpeg b/src/commons/img/gal-10.jpeg similarity index 100% rename from img/gal-10.jpeg rename to src/commons/img/gal-10.jpeg diff --git a/img/gal-11.jpeg b/src/commons/img/gal-11.jpeg similarity index 100% rename from img/gal-11.jpeg rename to src/commons/img/gal-11.jpeg diff --git a/img/gal-12.jpeg b/src/commons/img/gal-12.jpeg similarity index 100% rename from img/gal-12.jpeg rename to src/commons/img/gal-12.jpeg diff --git a/img/gal-13.jpeg b/src/commons/img/gal-13.jpeg similarity index 100% rename from img/gal-13.jpeg rename to src/commons/img/gal-13.jpeg diff --git a/img/gal-14.jpeg b/src/commons/img/gal-14.jpeg similarity index 100% rename from img/gal-14.jpeg rename to src/commons/img/gal-14.jpeg diff --git a/img/gal-2.jpeg b/src/commons/img/gal-2.jpeg similarity index 100% rename from img/gal-2.jpeg rename to src/commons/img/gal-2.jpeg diff --git a/img/gal-3.jpeg b/src/commons/img/gal-3.jpeg similarity index 100% rename from img/gal-3.jpeg rename to src/commons/img/gal-3.jpeg diff --git a/img/gal-4.jpeg b/src/commons/img/gal-4.jpeg similarity index 100% rename from img/gal-4.jpeg rename to src/commons/img/gal-4.jpeg diff --git a/img/gal-5.jpeg b/src/commons/img/gal-5.jpeg similarity index 100% rename from img/gal-5.jpeg rename to src/commons/img/gal-5.jpeg diff --git a/img/gal-6.jpeg b/src/commons/img/gal-6.jpeg similarity index 100% rename from img/gal-6.jpeg rename to src/commons/img/gal-6.jpeg diff --git a/img/gal-7.jpeg b/src/commons/img/gal-7.jpeg similarity index 100% rename from img/gal-7.jpeg rename to src/commons/img/gal-7.jpeg diff --git a/img/gal-8.jpeg b/src/commons/img/gal-8.jpeg similarity index 100% rename from img/gal-8.jpeg rename to src/commons/img/gal-8.jpeg diff --git a/img/gal-9.jpeg b/src/commons/img/gal-9.jpeg similarity index 100% rename from img/gal-9.jpeg rename to src/commons/img/gal-9.jpeg diff --git a/img/hero.jpeg b/src/commons/img/hero.jpeg similarity index 100% rename from img/hero.jpeg rename to src/commons/img/hero.jpeg diff --git a/img/house-1.jpeg b/src/commons/img/house-1.jpeg similarity index 100% rename from img/house-1.jpeg rename to src/commons/img/house-1.jpeg diff --git a/img/house-2.jpeg b/src/commons/img/house-2.jpeg similarity index 100% rename from img/house-2.jpeg rename to src/commons/img/house-2.jpeg diff --git a/img/house-3.jpeg b/src/commons/img/house-3.jpeg similarity index 100% rename from img/house-3.jpeg rename to src/commons/img/house-3.jpeg diff --git a/img/house-4.jpeg b/src/commons/img/house-4.jpeg similarity index 100% rename from img/house-4.jpeg rename to src/commons/img/house-4.jpeg diff --git a/img/house-5.jpeg b/src/commons/img/house-5.jpeg similarity index 100% rename from img/house-5.jpeg rename to src/commons/img/house-5.jpeg diff --git a/img/house-6.jpeg b/src/commons/img/house-6.jpeg similarity index 100% rename from img/house-6.jpeg rename to src/commons/img/house-6.jpeg diff --git a/img/logo-bbc.png b/src/commons/img/logo-bbc.png similarity index 100% rename from img/logo-bbc.png rename to src/commons/img/logo-bbc.png diff --git a/img/logo-bi.png b/src/commons/img/logo-bi.png similarity index 100% rename from img/logo-bi.png rename to src/commons/img/logo-bi.png diff --git a/img/logo-forbes.png b/src/commons/img/logo-forbes.png similarity index 100% rename from img/logo-forbes.png rename to src/commons/img/logo-forbes.png diff --git a/img/logo-techcrunch.png b/src/commons/img/logo-techcrunch.png similarity index 100% rename from img/logo-techcrunch.png rename to src/commons/img/logo-techcrunch.png diff --git a/img/logo.png b/src/commons/img/logo.png similarity index 100% rename from img/logo.png rename to src/commons/img/logo.png diff --git a/img/realtor-1.jpeg b/src/commons/img/realtor-1.jpeg similarity index 100% rename from img/realtor-1.jpeg rename to src/commons/img/realtor-1.jpeg diff --git a/img/realtor-2.jpeg b/src/commons/img/realtor-2.jpeg similarity index 100% rename from img/realtor-2.jpeg rename to src/commons/img/realtor-2.jpeg diff --git a/img/realtor-3.jpeg b/src/commons/img/realtor-3.jpeg similarity index 100% rename from img/realtor-3.jpeg rename to src/commons/img/realtor-3.jpeg diff --git a/img/sprite.svg b/src/commons/img/sprite.svg similarity index 100% rename from img/sprite.svg rename to src/commons/img/sprite.svg diff --git a/img/story-1.jpeg b/src/commons/img/story-1.jpeg similarity index 100% rename from img/story-1.jpeg rename to src/commons/img/story-1.jpeg diff --git a/img/story-2.jpeg b/src/commons/img/story-2.jpeg similarity index 100% rename from img/story-2.jpeg rename to src/commons/img/story-2.jpeg diff --git a/img/text.txt b/src/commons/img/text.txt similarity index 100% rename from img/text.txt rename to src/commons/img/text.txt diff --git a/src/commons/realtors.jsx b/src/commons/realtors.jsx new file mode 100644 index 0000000..ed3551e --- /dev/null +++ b/src/commons/realtors.jsx @@ -0,0 +1,3 @@ +export default function Realtors() { + return
Top 3 realtors
; +} diff --git a/src/commons/sidebar.jsx b/src/commons/sidebar.jsx new file mode 100644 index 0000000..89df081 --- /dev/null +++ b/src/commons/sidebar.jsx @@ -0,0 +1,3 @@ +export default function Sidebar() { + return
Sidebar
; +} diff --git a/src/commons/stories.jsx b/src/commons/stories.jsx new file mode 100644 index 0000000..0be6a7f --- /dev/null +++ b/src/commons/stories.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +export default function Stories() { + return ( + +
Story Pictures
+
Story Content
+ + ); +} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 2202529..89ea5ce 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -33,3 +33,13 @@ body { 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]; +} diff --git a/src/sass/_features.scss b/src/sass/_features.scss index e69de29..2bef9da 100644 --- a/src/sass/_features.scss +++ b/src/sass/_features.scss @@ -0,0 +1,4 @@ +.features { + background-color: $color-grey-dark-2; + grid-column: center-start / center-end; +} diff --git a/src/sass/_footer.scss b/src/sass/_footer.scss index e69de29..50a29c9 100644 --- a/src/sass/_footer.scss +++ b/src/sass/_footer.scss @@ -0,0 +1,4 @@ +.footer { + background-color: $color-secondary; + grid-column: full-start / full-end; +} diff --git a/src/sass/_gallery.scss b/src/sass/_gallery.scss index e69de29..2007bf3 100644 --- a/src/sass/_gallery.scss +++ b/src/sass/_gallery.scss @@ -0,0 +1,4 @@ +.gallery { + background-color: $color-grey-dark-1; + grid-column: full-start / full-end; +} diff --git a/src/sass/_header.scss b/src/sass/_header.scss index e69de29..b21c2eb 100644 --- a/src/sass/_header.scss +++ b/src/sass/_header.scss @@ -0,0 +1,4 @@ +.header { + background-color: $color-grey-dark-1; + grid-column: full-start / col-end 6; +} diff --git a/src/sass/_homes.scss b/src/sass/_homes.scss index e69de29..bd12135 100644 --- a/src/sass/_homes.scss +++ b/src/sass/_homes.scss @@ -0,0 +1,4 @@ +.homes { + background-color: $color-secondary; + grid-column: center-start / center-end; +} diff --git a/src/sass/_realtors.scss b/src/sass/_realtors.scss index e69de29..480c4b4 100644 --- a/src/sass/_realtors.scss +++ b/src/sass/_realtors.scss @@ -0,0 +1,4 @@ +.realtors { + background-color: $color-secondary; + grid-column: col-start 7 / ful-end; +} diff --git a/src/sass/_sidebar.scss b/src/sass/_sidebar.scss index e69de29..48b3aae 100644 --- a/src/sass/_sidebar.scss +++ b/src/sass/_sidebar.scss @@ -0,0 +1,5 @@ +.sidebar { + background-color: $color-primary; + grid-column: sidebar-start / sidebar-end; + grid-row: 1 / -1; +} diff --git a/src/sass/_story.scss b/src/sass/_story.scss index e69de29..f6933e6 100644 --- a/src/sass/_story.scss +++ b/src/sass/_story.scss @@ -0,0 +1,11 @@ +.story { + &__pictures { + background-color: $color-primary; + grid-column: full-start / col-end 4; + } + + &__content { + background-color: $color-grey-light-1; + grid-column: col-start 5 / full-end; + } +}