changes

public/index.html

@@ -11,6 +11,11 @@
   <!-- Bootstrap link -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
     crossorigin="anonymous" />
+     <!-- Google font -->
+     <link
+     href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700"
+     rel="stylesheet"
+   />
   <!-- Custom CSS -->
   <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/style.css" />
   <!-- Custom JS -->
@@ -49,9 +54,43 @@
   </header>
   <main>
     <!-- Section: Jumbotron/hero (background image + short description) -->
-    <section id="description"></section>
+    <section id="description m-0 p-0">
+      <div class="container-fluid m-0 p-0">
+        <div class="row align-items-center m-0 p-0">
+          <div class="col-sm text-center">
+            <h1 class="text-center">Lorem, ipsum dolor.</h1>
+            <p class="lead">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Itaque, quo.
+            </p>
+          </div>
+          <div class="col-sm p-0">
+            <img
+              class="responsive-img"
+              src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
     <!-- Section: HTML / CSS / JS images + description -->
-    <section id="services"></section>
+
+      <div class="row text-center  services">
+        <div class="container col-sm-4">
+          <img class="responsive-img" src="images/logo_css.png">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
+        </div>
+        <div class="container col-sm-4">
+          <img src="images/logo_js.png">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
+        </div>
+        <div class="container col-sm-4">
+          <img src="images/package.png">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
+        </div>
+      </div>
+    </div>
+
     <!-- Section: Sign-up newsletter form -->
     <section id="newsletter">
       <form class="form-inline">

public/stylesheets/style.css

@@ -7,6 +7,10 @@ a {
   color: #00B7FF;
 } */
 
+body {
+  font-family: 'Montserrat', sans-serif;
+}
+
 header {
   /* text-align: center; */
   padding: 20px;
@@ -28,7 +32,7 @@ footer {
   background-color: aliceblue;
 }
 
-#services {
+#section {
   text-align: center;
   padding: 20px;
   color: #ffffff;
@@ -40,4 +44,15 @@ footer {
   padding: 20px;
   color: #ffffff;
   background-color: #333;
+}
+
+/* Section: Descritption */
+
+
+/* Section: Services */
+.services {
+  height: 400px !important;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #D7D7D7; 
 }