Landing page view, helpdesk carousel fixes

* added partners to landing page * fixed helpdesk carousel styling in some viewport sizes
2018-08-26 19:42:54 +03:00
parent 66fb3ca306
commit 84e45e01cb
12 changed files with 215 additions and 90 deletions
--- a/_data/partners.yml
+++ b/_data/partners.yml
@@ -0,0 +1,35 @@
+- name: Tehnopol
+  image: tehnopollogo.png
+  url: https://www.tehnopol.ee/
+  additionalText:
+
+
+- name: TTÜ
+  image: tty_logo_2.png
+  url: https://www.ttu.ee/
+  additionalText:
+
+- name: Skeemipesa
+  image: skeemipesa_logo.png
+  url: http://www.skeemipesa.ee/
+  additionalText:
+
+
+- name: TTÜ Robotiklubi
+  image: robotiklubi_logo.png
+  url: https://www.robotiklubi.ee/
+  additionalText:
+
+
+
+- name: TTÜ Infotehnoloogia teaduskond
+  image: IT_teaduskond_logo.gif
+  url: https://www.ttu.ee/teaduskond/infotehnoloogia-teaduskond/
+  additionalText:
+
+
+- name: Koopia Niini & Rauam
+  image: koopia_niini_rauam.png
+  url: https://www.koopia.ee/
+  additionalText: Tule köida oma lõputöö SIIN!
+
--- a/_sass/helpdesk.scss
+++ b/_sass/helpdesk.scss
@@ -56,6 +56,20 @@
      height     : 60vh;
      max-height : 300px;
    }
+
+    .siema {
+      .carousel-image-container {
+        display         : flex;
+        justify-content : center;
+        align-items     : center;
+        img {
+          max-height : 300px;
+          width      : 100%;
+          height     : auto;
+          object-fit : scale-down;
+        }
+      }
+    }
  }

  #pricing {
--- a/_sass/home.scss
+++ b/_sass/home.scss
@@ -1,61 +1,100 @@
 .home {
+
+  @media (max-width : 900px) {
+    h1 {
+      font-size : 3.6rem;
+    }
+  }
+
  .logo_container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        margin: 4rem 0;
+    display         : flex;
+    flex-direction  : row;
+    flex-wrap       : wrap;
+    align-items     : center;
+    justify-content : center;
+    text-align      : center;
+    margin          : 4rem 0;

    .logo {
-            max-width: 60rem;
-            width: 100%;
-            padding: 0 1rem;
+      max-width : 60rem;
+      width     : 100%;
+      padding   : 0 1rem;
    }
  }

  .lg-icon-container {
-        justify-content: flex-start;
-        align-content: flex-start;
-        align-items: flex-start;
-        margin: 0;
-        margin-top: 4rem;
+    justify-content : flex-start;
+    align-content   : flex-start;
+    align-items     : flex-start;
+    margin          : 0;
+    margin-top      : 4rem;
    .column {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            align-content: flex-start;
-            text-align: left;
+      display         : flex;
+      flex-direction  : row;
+      justify-content : center;
+      align-items     : center;
+      align-content   : flex-start;
+      text-align      : left;

      .lg-icon {
-                fill: #f0941d;
-                width: 10rem;
-                height: 10rem;
-                flex: 1;
+        fill   : #f0941d;
+        width  : 10rem;
+        height : 10rem;
+        flex   : 1;
      }

      div {
-                flex: 2;
+        flex : 2;
      }
    }
-        @media (min-width: 40.0rem) {
+    @media (min-width : 40.0rem) {
      .column {
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                align-content: flex-start;
-                text-align: center;
+        flex-direction  : column;
+        justify-content : flex-start;
+        align-items     : center;
+        align-content   : flex-start;
+        text-align      : center;
      }
    }
  }
  .description {
-        margin-top: 1em;
+    margin-top : 1em;
  }
-    @media (min-width: 40.0rem) {
+  @media (min-width : 40.0rem) {
    .description {
-            margin-top: 3em;
+      margin-top : 3em;
    }
  }
+
+  .partners {
+    #partners-container {
+      display         : flex;
+      flex-wrap       : wrap;
+      justify-content : space-evenly;
+      align-items     : center;
+
+      a {
+        color : #1e1e1e;
+        img {
+          max-width  : 300px;
+          max-height : 150px;
+          width      : 100%;
+          height     : auto;
+          object-fit : scale-down;
+          margin     : 1rem auto;
+        }
+        h4 {
+          text-align : center;
+        }
+      }
+    }
+
+    @media (max-width : 900px) {
+      #partners-container {
+
+        flex-direction : column
+      }
+    }
+  }
+
 }
--- a/assets/partners/IT_teaduskond_logo.gif
+++ b/assets/partners/IT_teaduskond_logo.gif
--- a/assets/partners/koopia_niini_rauam.png
+++ b/assets/partners/koopia_niini_rauam.png
--- a/assets/partners/robotiklubi_logo.png
+++ b/assets/partners/robotiklubi_logo.png
--- a/assets/partners/skeemipesa_logo.png
+++ b/assets/partners/skeemipesa_logo.png
--- a/assets/partners/tehnopollogo.png
+++ b/assets/partners/tehnopollogo.png
--- a/assets/partners/tty_logo_2.png
+++ b/assets/partners/tty_logo_2.png
--- a/assets/partners/yli6pilasesindus_logo.png
+++ b/assets/partners/yli6pilasesindus_logo.png
--- a/helpdesk.html
+++ b/helpdesk.html
@@ -125,14 +125,24 @@ title: Helpdesk - Lapikud
    <div id="maparea">
      <div id="map"></div>
      <div class="siema">
+        <div class="carousel-image-container">
          <img src="assets/carousel-images/1.jpg">
+        </div>
+        <div class="carousel-image-container">
          <img src="assets/carousel-images/2.jpg">
+        </div>
+        <div class="carousel-image-container">
          <img src="assets/carousel-images/3.jpg">
+        </div>
+        <div class="carousel-image-container">
          <img src="assets/carousel-images/4.jpg">
+        </div>
+        <div class="carousel-image-container">
          <img src="assets/carousel-images/5.jpg">
        </div>
      </div>
    </div>
+  </div>

  <div id="contact">

--- a/index.html
+++ b/index.html
@@ -5,12 +5,12 @@ title: Lapikud

 <!-- home -->
 <section class="container home">
-<div class="logo_container">
+  <div class="logo_container">
    <img class="logo" src="{{ "/assets/logo.svg " | relative_url }}">
-</div>
+  </div>

-<!-- three icons -->
-<div class="row row-center lg-icon-container">
+  <!-- three icons -->
+  <div class="row row-center lg-icon-container">
    <div class="column">
      <svg class=lg-icon height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 2v11h3v9l7-12h-4l4-8z"/>
@@ -23,7 +23,8 @@ title: Lapikud
    </div>
    <div class="column">
      <svg class=lg-icon height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
+        <path
+            d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
      </svg>
      <div>
        <h3>Helpdesk</h3>
@@ -33,7 +34,8 @@ title: Lapikud
    </div>
    <div class="column">
      <svg class=lg-icon height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
+        <path
+            d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
      </svg>
      <div>
        <h3>Ettevõttele</h3>
@@ -41,16 +43,41 @@ title: Lapikud
        <p><a href="/ourwork">Tehtud tööd -></a></p>
      </div>
    </div>
-</div>
+  </div>

-<div class="description">
-    <h1>KES ME OLEME?</h1>
+  <div class="description">
+    <h1>Kes me oleme?</h1>
    <p>
-    MTÜ Lapikud on TTÜ Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi TTÜ üliõpilasi. Organisatsioon loodi 2002 aastal informaatika tudengite poolt, kelle erialatunnuseks oli “LAP”. Targad mehed otsustasid, et järelikult on nad “Lapikud”.
+      MTÜ Lapikud on TTÜ Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi TTÜ üliõpilasi. Organisatsioon
+      loodi 2002 aastal informaatika tudengite poolt, kelle erialatunnuseks oli “LAP”. Targad mehed otsustasid, et
+      järelikult on nad “Lapikud”.
    </p>

-    <h1>MILLEGA TEGELEME?</h1>
-    <p>Meie põhieesmärgiks on TTÜ IT tudengite erialase lisandväärtuse loomine. Kaasame tudengeid huvitavatesse IT projektidesse ning anname tudengitele võimaluse reaalselt oma käega midagi ära teha. Meie projektidest kooruvad välja huvitavad ja reaalselt tarvilikud lõputööd. Pakume nutikatele tudengitele võimalust saada meie juures esimene töökogemus. Lapikud ei ole ainult IT tudengite organisatsioon – püüame kaasata oma tegevusse ka majandusteaduskonna tudengeid, et projektides oleks esindatud ka pehmem, äri pool.
+    <h1>Millega tegeleme?</h1>
+    <p>Meie põhieesmärgiks on TTÜ IT tudengite erialase lisandväärtuse loomine. Kaasame tudengeid huvitavatesse IT
+      projektidesse ning anname tudengitele võimaluse reaalselt oma käega midagi ära teha. Meie projektidest kooruvad
+      välja huvitavad ja reaalselt tarvilikud lõputööd. Pakume nutikatele tudengitele võimalust saada meie juures
+      esimene töökogemus. Lapikud ei ole ainult IT tudengite organisatsioon – püüame kaasata oma tegevusse ka
+      majandusteaduskonna tudengeid, et projektides oleks esindatud ka pehmem, äri pool.
    <p>
-</div>
+  </div>
+
+
+  <div class="partners">
+    <h1>Koostööpartnerid</h1>
+    <div id="partners-container">
+      {% for partner in site.data.partners %}
+      <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer">
+        <img src="{{ "/assets/partners/" | append: partner.image }}" alt="{{ partner.name }}">
+        {% if partner.additionalText != null %}
+        <h4>{{ partner.additionalText}}</h4>
+        {% endif %}
+      </a>
+      {% endfor %}
+
+    </div>
+
+  </div>
+
+
 </section>