SVG Icon Components + Features Grid initialization

src/App.css

@@ -38,9 +38,4 @@ body{
   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];
-}
-
-.container > * {
-  padding: 40px;
-  font-size: 3rem;
 }

src/Features.css

@@ -1,4 +1,9 @@
 .features {
-    background-color: var(--color-grey-light-2);
     grid-column: center-start / center-end;
+
+    margin: 15rem 0;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 6rem;
 }

src/Features.js

@@ -1,11 +1,76 @@
 import React, { Component } from 'react';
 import './Features.css';
+import IconEarth from './IconEarth';
+import IconTrophy from './IconTrophy';
+import IconPin from './IconPin';
+import IconKey from './IconKey';
+import IconPresentation from './IconPresentation';
+import IconLock from './IconLock';
+
 
 class Features extends Component {
     render() {
       return (
         <section className="features">
-            Features
+            <div className="feature">
+              <IconEarth/>
+              <h4 className="heading-4">World's best luxury homes</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
+
+            <div className="feature">
+              <IconTrophy/>
+              <h4 className="heading-4">Only the best properties</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
+
+            <div className="feature">
+              <IconPin/>
+              <h4 className="heading-4">All homes in top locations</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
+
+            <div className="feature">
+              <IconKey/>
+              <h4 className="heading-4">New home in one week</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
+
+            <div className="feature">
+              <IconPresentation/>
+              <h4 className="heading-4">Top 1% realtors</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
+
+            <div className="feature">
+              <IconLock/>
+              <h4 className="heading-4">Secure payments on nexter</h4>
+              <p className="feature__text">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit hac magnis 
+                gravida dictum, curae libero etiam imperdiet hendrerit aenean 
+                vestibulum ultricies primis euismod.
+              </p>
+            </div>
         </section>
       );
     }

src/Gallery.js

@@ -5,7 +5,7 @@ class Gallery extends Component {
     render() {
       return (
         <section className="gallery">
-            Gllery
+            Gallery
         </section>
       );
     }

src/IconLock.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const IconLock = (props) => {
+    return(
+        <svg className="feature__icon" width={props.width} height={props.height}>
+            <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>
+        </svg>
+    );
+}
+
+export default IconLock;

src/IconPin.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const IconPin = (props) => {
+    return(
+        <svg className="feature__icon" width={props.width} height={props.height}>
+            <title>map-pin</title>
+            <path fill={props.fill} 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>
+</svg>
+    );
+}
+
+export default IconPin;