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; + } +}