Etusivu Tutki Apua
Kirjaudu sisään
TEAMOVI
/
RESTORE_FE
2
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

Restyling grafica home page

Giulia Cacioli 2 vuotta sitten
vanhempi
4dc717c262
commit
009850eb4d
10 muutettua tiedostoa jossa 328 lisäystä ja 184 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 0 0
      css/styles.min.css
  2. 170 151
      index.html
  3. 7 2
      scss/_footer.scss
  4. 19 0
      scss/_global.scss
  5. 36 14
      scss/_icons.scss
  6. 13 7
      scss/_masthead.scss
  7. 54 0
      scss/_navbar.scss
  8. 19 8
      scss/_testimonials.scss
  9. 9 2
      scss/_variables.scss
  10. 1 0
      scss/styles.scss

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
css/styles.min.css


+ 170 - 151
index.html
Näytä tiedosto 

@@ -2,13 +2,13 @@
 
 <html lang="en">
 
 
 <head>
 
-
 
-  <meta charset="utf-8">
 
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <meta name="description" content="">
 
   <meta name="author" content="">
 
 
-  <title>Landing Page - Start Bootstrap Theme</title>
 
+  <title>Restore</title>
 
 
   <!-- Bootstrap core CSS -->
 
   <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
@@ -20,190 +20,210 @@
 
 
   <!-- Custom styles for this template -->
 
   <link href="css/landing-page.css" rel="stylesheet">
 
-
 
+  <link href="css/styles.min.css" rel="stylesheet">
 
 </head>
 
 
 <body>
 
+  <script src="js/particles.js"></script>
 
 
-<script src="js/particles.js"></script>
 
-
 
-  <!-- Navigation -->
 
-  
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 
-  <div class="container-fluid">
 
-    <img src="img/Logo.png" style="width:100px;">
 
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
 
-      <span class="navbar-toggler-icon"></span>
 
-    </button>
 
-    <div class="navbar-nav" style="margin-left:auto;">
 
-        <a class="button-link" href="#"><button class="btn btn-menu active" type="button">Home</button></a>
 
-        <a class="button-link" href="http://restore.ovi.cnr.it/"><button class="btn btn-menu" type="button">Progetto</button></a>
 
-        <a class="button-link" href="ricerca.html"><button class="btn btn-menu" type="button">Ricerca</button></a>
 
-        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Indici</button></a>
 
-        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Percorsi</button></a>
 
-        <a class="button-link" href="standard.html"><button class="btn btn-menu" type="button">Standard</button></a>
 
-        <div class="dropdown">
 
-          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql
 
-          </button>
 
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
-            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
 
-            <a class="dropdown-item" href="sparql.html">Query</a>
 
-          </div>
 
+  <header class="sticky-top">
 
+    <!-- Navigation -->
 
+    <nav class="navbar navbar-expand-lg navbar-light bg-white">
 
+      <div class="container-fluid">
 
+        <div class="navbar-brand">
 
+          <img src="img/Logo.png" width="100" alt="Restore" />
 
         </div>
 
-        <a class="button-link" href="download.html"><button class="btn btn-menu" type="button">Download</button></a>
 
-        <div class="dropdown">
 
-          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni
 
-          </button>
 
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
-            <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/">CKAN</a>
 
-            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/">LOD</a>
 
-          </div>
 
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 
+          <span class="navbar-toggler-icon"></span>
 
+        </button>
 
+        <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
 
+          <ul class="navbar-nav">
 
+            <li class="nav-item active">
 
+              <a class="nav-link" href="#">Home</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="ricerca.html">Ricerca</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="#">Indici</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="#">Percorsi</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="standard.html">Standard</a>
 
+            </li>
 
+            <li class="nav-item dropdown">
 
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
 
+              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 
+                <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
 
+                <a class="dropdown-item" href="sparql.html">Query</a>
 
+              </div>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="download.html">Download</a>
 
+            </li>
 
+            <li class="nav-item dropdown">
 
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni</a>
 
+              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
 
+                <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/" target="_blank">CKAN</a>
 
+                <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/" target="_blank">LOD</a>
 
+              </div>
 
+            </li>
 
+          </ul>
 
         </div>
 
       </div>
 
-  </div>
 
-</nav>
 
+    </nav>
 
+  </header>
 
 
-  <!-- Masthead -->
 
-  <header class="masthead text-white text-center">
 
-    <div class="overlay"></div>
 
-    <div id="particles-js" class="container">
 
-      <div class="row">
 
-        <div class="col-xl-9 mx-auto">
 
-          <h1 class="mb-5">RESTORE</h1>
 
-		  <h2>smaRt accESs TO digital heRitage and mEmory</h2>
 
-        </div>
 
-        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
 
+  <main>
 
+    <!-- Masthead -->
 
+    <section class="masthead text-white text-center">
 
+      <div class="overlay"></div>
 
+      <div id="particles-js" class="container">
 
+        <div class="row">
 
+          <div class="col-xl-9 mx-auto">
 
+            <h1 class="mb-3 mb-md-5">RESTORE</h1>
 
+            <h2>sma<span style="text-decoration: underline;">R</span>t acc<span style="text-decoration: underline;">ES</span>s <span style="text-decoration: underline;">TO</span> digital he<span style="text-decoration: underline;">R</span>itage and m<span style="text-decoration: underline;">E</span>mory</h2>
 
+          </div>
 
+          <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
 
+          </div>
 
         </div>
 
       </div>
 
-    </div>
 
-  </header>
 
+    </section>
 
 
-  <!-- Icons Grid -->
 
-  <section class="features-icons text-center" style="background-color:#a71b24; padding-top:0rem;">
 
-    <div class="container" style="padding: 5% 1%;">
 
-      <div class="row" style="padding-bottom: 10px;">
 
-        <div onclick="location.href='ricerca.html';" style="cursor: pointer;"  class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/ricerca.png" />
 
+    <!-- Icons Grid -->
 
+    <section class="features-icons bg-white text-center">
 
+      <div class="container">
 
+        <div class="row sm:mb-5">
 
+          <div onclick="location.href='ricerca.html';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/ricerca.png" />
 
+              </div>
 
+              <h3 class="title">Interfaccia di Ricerca</h3>
 
             </div>
 
-            <h3>Interfaccia di Ricerca</h3>
 
           </div>
 
-        </div>
 
-        <div class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/indice.png" />
 
+          <div class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/indice.png" />
 
+              </div>
 
+              <h3 class="title">Indici</h3>
 
             </div>
 
-            <h3>Indici</h3>
 
           </div>
 
-        </div>
 
-        <div class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/percorsi.png" />
 
+          <div class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/percorsi.png" />
 
+              </div>
 
+              <h3 class="title">Percorsi</h3>
 
             </div>
 
-            <h3>Percorsi</h3>
 
           </div>
 
         </div>
 
-      </div>
 
-	  <div class="row" style="padding-bottom: 10px;">
 
-        <div onclick="location.href='http://restore.ovi.cnr.it/';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/progetto.png" />
 
+        <div class="row sm:mb-5">
 
+          <div onclick="location.href='http://restore.ovi.cnr.it/';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/progetto.png" />
 
+              </div>
 
+              <h3 class="title">Progetto</h3>
 
             </div>
 
-            <h3>Progetto</h3>
 
           </div>
 
-        </div>
 
-        <div onclick="location.href='standard.html';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/standard.png" />
 
+          <div onclick="location.href='standard.html';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/standard.png" />
 
+              </div>
 
+              <h3 class="title">Standard</h3>
 
             </div>
 
-            <h3>Standard</h3>
 
           </div>
 
-        </div>
 
-        <div onclick="location.href='sparql.html';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/sparql.png" />
 
+          <div onclick="location.href='sparql.html';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/sparql.png" />
 
+              </div>
 
+              <h3 class="title">SPARQL</h3>
 
             </div>
 
-            <h3>SPARQL</h3>
 
           </div>
 
         </div>
 
-      </div>
 
-	  <div class="row">
 
-        <div onclick="location.href='download.html';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/database.png" />
 
+        <div class="row">
 
+          <div onclick="location.href='download.html';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/database.png" />
 
+              </div>
 
+              <h3 class="title">Scarica i dataset</h3>
 
             </div>
 
-            <h3>Scarica i dataset</h3>
 
           </div>
 
-        </div>
 
-		<div onclick="location.href='http://ckan.restore.ovi.cnr.it/';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/ckan.png" />
 
+          <div onclick="location.href='http://ckan.restore.ovi.cnr.it/';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/ckan.png" />
 
+              </div>
 
+              <h3 class="title">Visualizza risorse</h3>
 
             </div>
 
-            <h3>Visualizza risorse</h3>
 
           </div>
 
-        </div>
 
-		<div onclick="location.href='http://dev.restore.ovi.cnr.it/lodlive/';" style="cursor: pointer;" class="col-lg-4 index-btn">
 
-          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
 
-            <div class="features-icons-icon d-flex">
 
-              <img class="ico-img" src="img/rdf.png" />
 
+          <div onclick="location.href='http://dev.restore.ovi.cnr.it/lodlive/';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
 
+            <div class="features-icons-item">
 
+              <div class="features-icons-icon d-flex">
 
+                <img class="ico-img" src="img/rdf.png" />
 
+              </div>
 
+              <h3 class="title">LOD</h3>
 
             </div>
 
-            <h3>LOD</h3>
 
           </div>
 
         </div>
 
       </div>
 
-    </div>
 
-  </section>
 
-
 
+    </section>
 
 
-  <!-- Testimonials -->
 
-  <section class="testimonials text-center bg-light">
 
-    <div class="container">
 
-      <h2 class="mb-5">Partner del progetto</h2>
 
-      <div class="row">
 
-        <div class="col">
 
-          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
-            <img class="img-fluid rounded-circle mb-3" src="img/OVI.png" alt="">
 
-            <h5>OVI</h5>
 
-          </div>
 
-        </div>
 
-        <div class="col">
 
-          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
-            <img class="img-fluid rounded-circle mb-3" src="img/ASPO.jpg" alt="">
 
-            <h5>ASPO</h5>
 
+    <!-- Testimonials -->
 
+    <section class="testimonials text-center bg-light">
 
+      <div class="container">
 
+        <div class="d-lg-flex align-items-center justify-content-between">
 
+          <div class="mb-5 pr-lg-5">
 
+            <h2 class="section-title">Partner del progetto</h2>
 
           </div>
 
-        </div>
 
-        <div class="col">
 
-          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
-            <img class="img-fluid rounded-circle mb-3" src="img/MPP.png" alt="">
 
-            <h5>MPP</h5>
 
-          </div>
 
-        </div>
 
-		<div class="col">
 
-          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
-            <img class="img-fluid rounded-circle mb-3" src="img/SABTOS.jpg" alt="">
 
-            <h5>SABTOS</h5>
 
-          </div>
 
-        </div>
 
-		<div class="col">
 
-          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
-            <img class="img-fluid rounded-circle mb-3" src="img/SPACE.jpg" alt="">
 
-            <h5>SPACE</h5>
 
+          <div class="row flex-shrink-0 ml-auto">
 
+            <div class="col-sm-4 col-md col-lg-auto">
 
+              <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
+                <img class="img-fluid rounded-circle mb-3" src="img/OVI.png" alt="">
 
+                <h5 class="title">OVI</h5>
 
+              </div>
 
+            </div>
 
+            <div class="col-sm-4 col-md col-lg-auto">
 
+              <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
+                <img class="img-fluid rounded-circle mb-3" src="img/ASPO.jpg" alt="">
 
+                <h5 class="title">ASPO</h5>
 
+              </div>
 
+            </div>
 
+            <div class="col-sm-4 col-md col-lg-auto">
 
+              <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
+                <img class="img-fluid rounded-circle mb-3" src="img/MPP.png" alt="">
 
+                <h5 class="title">MPP</h5>
 
+              </div>
 
+            </div>
 
+            <div class="col-sm-4 col-md col-lg-auto">
 
+              <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
+                <img class="img-fluid rounded-circle mb-3" src="img/SABTOS.jpg" alt="">
 
+                <h5 class="title">SABTOS</h5>
 
+              </div>
 
+            </div>
 
+            <div class="col-sm-4 col-md col-lg-auto">
 
+              <div class="testimonial-item mx-auto mb-5 mb-lg-0">
 
+                <img class="img-fluid rounded-circle mb-3" src="img/SPACE.jpg" alt="">
 
+                <h5 class="title">SPACE</h5>
 
+              </div>
 
+            </div>
 
           </div>
 
         </div>
 
       </div>
 
-    </div>
 
-  </section>
 
+    </section>
 
+  </main>
 
 
-  <!-- Footer -->
 
-  <footer class="footer bg-dark">
 
+  <footer class="footer">
 
     <div class="container">
 
       <div class="row">
 
         <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
 
@@ -224,7 +244,7 @@
 
               <a href="#">Privacy Policy</a>
 
             </li>
 
           </ul>
 
-          <p class="text-muted small mb-4 mb-lg-0">&copy; Your Website 2020. All Rights Reserved.</p>
 
+          <p class="small mb-4 mb-lg-0">&copy; Restore. All Rights Reserved.</p>
 
         </div>
 
         <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
 
           <ul class="list-inline mb-0">
 
@@ -252,7 +272,6 @@
 
   <!-- Bootstrap core JavaScript -->
 
   <script src="vendor/jquery/jquery.min.js"></script>
 
   <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
-
 
 </body>
 
 
-</html>
 
+</html>

+ 7 - 2
scss/_footer.scss
Näytä tiedosto 

@@ -1,4 +1,9 @@
 
 footer.footer {
 
-  padding-top: 4rem;
 
-  padding-bottom: 4rem;
 
+  background-color: #a2171c;
 
+  color: white;
 
+  padding-top: 3rem;
 
+  padding-bottom: 3rem;
 
+  a {
 
+    color: white;
 
+  }
 
 }

+ 19 - 0
scss/_global.scss
Näytä tiedosto 

@@ -11,3 +11,22 @@ h6 {
 
   @include body-font;
 
   font-weight: 700;
 
 }
 
+
 
+a {
 
+  color: $theme-color;
 
+  &:hover {
 
+    color: #a2171c;
 
+  }
 
+}
 
+
 
+.container {
 
+  @media (min-width: $sm) {
 
+    max-width: 100%;
 
+  }
 
+  @media (min-width: $md) {
 
+    max-width: 720px;
 
+  }
 
+  @media (min-width: $lg) {
 
+    max-width: 1180px;
 
+  }
 
+}

+ 36 - 14
scss/_icons.scss
Näytä tiedosto 

@@ -1,20 +1,42 @@
 
 .features-icons {
 
-  padding-top: 7rem;
 
-  padding-bottom: 7rem;
 
-  .features-icons-item {
 
-    max-width: 20rem;
 
-    .features-icons-icon {
 
-      height: 7rem;
 
-      i {
 
-        font-size: 4.5rem;
 
-      }
 
+    padding-top: 2rem;
 
+    padding-bottom: 2rem;
 
+    @media (min-width: 768px) {
 
+        padding-top: 6rem;
 
+        padding-bottom: 6rem;
 
+    }
 
+    .features-icons-item {
 
+        max-width: 20rem;
 
+        margin: auto;
 
+        .features-icons-icon {
 
+            width: 10rem;
 
+            height: 10rem;
 
+            margin: auto;
 
+            border-radius: 100%;
 
+            box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.3);
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            transition-duration: 200ms;
 
+            img {
 
+              height: 5rem;
 
+            }
 
+            &:hover {
 
+                transform: scale(1.05);
 
+                transition-property: all;
 
+                transition-timing-function: linear;
 
+            }
 
+        }
 
+        .title {
 
+          font-size: 1.4375rem;
 
+          margin-top: 0.625rem;
 
+        }
 
     }
 
-    &:hover {
 
-      .features-icons-icon {
 
-        i {
 
-          font-size: 5rem;
 
+    .index-btn {
 
+      &:hover {
 
+        .title {
 
+          color: $theme-color;
 
         }
 
       }
 
     }
 
-  }
 
 }

+ 13 - 7
scss/_masthead.scss
Näytä tiedosto 

@@ -1,10 +1,10 @@
 
-header.masthead {
 
+.masthead {
 
   position: relative;
 
   background-color: $gray-800;
 
   background: url('../img/bg-masthead.jpg') no-repeat center center;
 
   @include background-cover;
 
-  padding-top: 8rem;
 
-  padding-bottom: 8rem;
 
+  padding-top: 2rem;
 
+  padding-bottom: 2rem;
 
   .overlay {
 
     position: absolute;
 
     background-color: $gray-900;
 
@@ -15,13 +15,19 @@ header.masthead {
 
     opacity: 0.3;
 
   }
 
   h1 {
 
-    font-size: 2rem;
 
+    font-size: 3rem;
 
+  }
 
+  h2 {
 
+    font-size: 1.5rem;
 
   }
 
   @media (min-width: 768px) {
 
-    padding-top: 12rem;
 
-    padding-bottom: 12rem;
 
+    padding-top: 6rem;
 
+    padding-bottom: 6rem;
 
     h1 {
 
-      font-size: 3rem;
 
+      font-size: 4rem;
 
+    }
 
+    h2 {
 
+      font-size: 2rem;
 
     }
 
   }
 
 }

+ 54 - 0
scss/_navbar.scss
Näytä tiedosto 

@@ -0,0 +1,54 @@
 
+.navbar-light {
 
+    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.navbar-nav {
 
+    .nav-item {
 
+        position: relative;
 
+        &:hover {
 
+            @media (min-width: $lg) {
 
+                &:before {
 
+                    content: "";
 
+                    width: 100%;
 
+                    border-top: 4px solid $theme-color;
 
+                    position: absolute;
 
+                    top: 3px;
 
+                }
 
+            }
 
+        }
 
+        &.active {
 
+            @media (min-width: $lg) {
 
+                &:before {
 
+                    content: "";
 
+                    width: 100%;
 
+                    border-top: 4px solid $theme-color;
 
+                    position: absolute;
 
+                    top: 3px;
 
+                }
 
+            }
 
+            .nav-link {
 
+                color: $theme-color;
 
+            }
 
+        }
 
+        .nav-link {
 
+            color: #3d3d3d;
 
+        }
 
+    }
 
+}
 
+
 
+.navbar-expand-lg {
 
+    .navbar-nav {
 
+        .nav-link {
 
+            @media (min-width: $lg) {
 
+                padding-right: 0.625rem;
 
+                padding-left: 0.625rem;
 
+                padding-bottom: 0;
 
+                font-size: 1.0625rem;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.navbar-toggler {
 
+    padding: 0.3125rem;
 
+}

+ 19 - 8
scss/_testimonials.scss
Näytä tiedosto 

@@ -1,11 +1,22 @@
 
 .testimonials {
 
-  padding-top: 7rem;
 
-  padding-bottom: 7rem;
 
-  .testimonial-item {
 
-    max-width: 18rem;
 
-    img {
 
-      max-width: 12rem;
 
-      box-shadow: 0px 5px 5px 0px $gray-500;
 
+    padding-top: 2rem;
 
+    padding-bottom: 2rem;
 
+    @media (min-width: 768px) {
 
+        padding-top: 4rem;
 
+        padding-bottom: 4rem;
 
+    }
 
+    .testimonial-item {
 
+        max-width: 100%;
 
+        img {
 
+            width: 7rem;
 
+            height: 7rem;
 
+            box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.3);
 
+            object-fit: contain;
 
+            background: white;
 
+        }
 
+    }
 
+    .section-title {
 
+        font-size: 2.5rem;
 
+        font-weight: 400;
 
     }
 
-  }
 
 }

+ 9 - 2
scss/_variables.scss
Näytä tiedosto 

@@ -1,7 +1,5 @@
 
 // Variables
 
-
 
 // Restated Bootstrap Variables
 
-
 
 $white: #fff !default;
 
 $gray-100: #f8f9fa !default;
 
 $gray-200: #e9ecef !default;
 
@@ -33,3 +31,12 @@ $warning: $yellow !default;
 
 $danger: $red !default;
 
 $light: $gray-100 !default;
 
 $dark: $gray-800 !default;
 
+
 
+// Custom variables
 
+$theme-color: #c41c22;
 
+
 
+// Bootstrap breakpoints
 
+$sm: 576px;
 
+$md: 768px;
 
+$lg: 992px;
 
+$xl: 120px;

+ 1 - 0
scss/landing-page.scss → scss/styles.scss
Näytä tiedosto 

@@ -4,6 +4,7 @@
 
 // Global CSS
 
 @import "global.scss";
 
 // Components
 
+@import "navbar.scss";
 
 @import "masthead.scss";
 
 @import "showcase.scss";
 
 @import "icons.scss";

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä