created layout

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 <div></div>;
+  return (
+    <div className="container">
+      <Sidebar />
+      <Header />
+      <Realtors />
+      <Features />
+      <Stories />
+      <Homes />
+      <Gallery />
+      <Footer />
+    </div>
+  );
 }
 
 export default App;

src/commons/features.jsx

@@ -0,0 +1,3 @@
+export default function Features() {
+  return <section className="features">Features</section>;
+}

src/commons/footer.jsx

@@ -0,0 +1,3 @@
+export default function Footer() {
+  return <footer className="footer">Footer</footer>;
+}

src/commons/gallery.jsx

@@ -0,0 +1,3 @@
+export default function Gallery() {
+  return <section className="gallery">Gallery</section>;
+}

src/commons/header.jsx

@@ -0,0 +1,3 @@
+export default function Header() {
+  return <header className="header">Header</header>;
+}

src/commons/homes.jsx

@@ -0,0 +1,3 @@
+export default function Homes() {
+  return <section className="homes">Homes</section>;
+}

src/commons/realtors.jsx

@@ -0,0 +1,3 @@
+export default function Realtors() {
+  return <div className="realtors">Top 3 realtors</div>;
+}

src/commons/sidebar.jsx

@@ -0,0 +1,3 @@
+export default function Sidebar() {
+  return <div className="sidebar">Sidebar</div>;
+}

src/commons/stories.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Stories() {
+  return (
+    <React.Fragment>
+      <div className="story__pictures">Story Pictures</div>
+      <div className="story__content">Story Content</div>
+    </React.Fragment>
+  );
+}

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

src/sass/_features.scss

@@ -0,0 +1,4 @@
+.features {
+  background-color: $color-grey-dark-2;
+  grid-column: center-start / center-end;
+}

src/sass/_footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  background-color: $color-secondary;
+  grid-column: full-start / full-end;
+}

src/sass/_gallery.scss

@@ -0,0 +1,4 @@
+.gallery {
+  background-color: $color-grey-dark-1;
+  grid-column: full-start / full-end;
+}

src/sass/_header.scss

@@ -0,0 +1,4 @@
+.header {
+  background-color: $color-grey-dark-1;
+  grid-column: full-start / col-end 6;
+}

src/sass/_homes.scss

@@ -0,0 +1,4 @@
+.homes {
+  background-color: $color-secondary;
+  grid-column: center-start / center-end;
+}

src/sass/_realtors.scss

@@ -0,0 +1,4 @@
+.realtors {
+  background-color: $color-secondary;
+  grid-column: col-start 7 / ful-end;
+}

src/sass/_sidebar.scss

@@ -0,0 +1,5 @@
+.sidebar {
+  background-color: $color-primary;
+  grid-column: sidebar-start / sidebar-end;
+  grid-row: 1 / -1;
+}

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