User-Interface-Project-Week

components/CTA/cta.less

@@ -0,0 +1,74 @@
+.CTA {
+  width: 100%;
+  margin-top: 3%;
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+    .cta-content {
+      width: 50%;
+      padding: 7% 1% 0% 8%;
+    }
+
+    h3 {
+      padding-bottom: 21px;
+    }
+
+    p {
+      font-size: 1.6rem;
+      padding-bottom: 28px;
+    }
+
+    button {
+      background: #FFFFFF;
+      font-size: 1.6rem;
+      padding: 3% 7%;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .smith-jones-img {
+      padding-top: 5%;
+      padding-right: 17%;
+    }
+
+    .futuristic-img {
+      padding-top: 13%;
+      padding-left: 17%;
+    }
+
+    .futuristic {
+      padding: 10% 0 2% 1%;
+    }
+
+    .mobile-sj-img, .mobile-futuristic-img {
+      display: none;
+    }
+
+}
+
+@media (max-width: 525px) {
+  .CTA {
+    flex-wrap: wrap-reverse;
+    padding: 2%;
+
+    .smith-jones-img, .futuristic-img {
+        width: 100%;
+        padding: 2%;
+    }
+  }
+
+  .home .cta-content {
+    width: 100%;
+    padding: 2%;
+
+     button {
+      width: 100%;
+    }
+
+     h3 {
+      font-size: 2.2rem;
+    }
+  }
+}

components/Footer/footer.less

@@ -0,0 +1,86 @@
+footer {
+  width: 100%;
+  background-color: #828282;
+
+  .footer-email {
+    width: 45%;
+  }
+
+    h6 {
+      padding-bottom: 5px;
+      font-size: 1.9rem;
+      color: #FFFFFF;
+      margin-bottom: 2%;
+    }
+
+    p {
+      font-size: 1.3rem;
+      color: #FFFFFF;
+      font-weight: normal;
+    }
+
+    input {
+      font-size: 1.5rem;
+      padding: 4%;
+      width: 100%;
+      border-radius: 5px;
+      margin-top: 5px;
+    }
+
+    .footer-content {
+      padding: 5%;
+      display: flex;
+
+    .footer-address {
+      width: 100%;
+      display: flex;
+      justify-content: space-evenly;
+    }
+  }
+
+    .copyright {
+      font-size: 1.3rem;
+      text-align: center;
+  }
+}
+
+@media (max-width: 525px) {
+  footer {
+    width: 100%;
+
+    .footer-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .footer-email {
+      width: 100%;
+      padding-bottom: 3%;
+    }
+
+    .footer-address {
+      padding-top: 3%;
+      padding-bottom: 5%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    h5 {
+      font-size: 2.3rem;
+      font-weight: 400;
+      padding-bottom: 3%;
+    }
+
+    h6 {
+      font-weight: 400;
+      font-size: 2.3rem;
+    }
+
+    p {
+      padding-top: 2%;
+      padding-bottom: 5%;
+      font-weight: normal;
+    }
+  }  
+}
+

components/Jumbotron/jumbotron.less

@@ -0,0 +1,37 @@
+
+.jumbotron {
+  width: 100%;
+  position: relative;
+  z-index: -1;
+
+
+  .jumbotron h2 {
+    position: absolute;
+    top: 54%;
+    left: 8.1%;
+    z-index: 1;
+  }
+
+  .jumbo-services {
+    width: 100%;
+    position: relative;
+    z-index: -1;
+  }
+
+  .jumbo-contact {
+    width: 100%;
+    position: relative;
+  }
+
+  h2 {
+    position: absolute;
+    top: 54%;
+    left: 7.7%;
+    z-index: 1;
+  }
+
+  .mobile-jumbo {
+      display: none;
+  }
+
+}

components/Navigation/navigation.less

@@ -0,0 +1,93 @@
+.menucontainer {
+  background-color: #99A4AF;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.2% 7.75%;
+  width: 100%;
+  z-index: 1;
+
+  .hamburger  {
+    cursor: pointer;
+  }
+
+  .nav-content {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 1px;
+    left: 0;
+    background: #99A4AE;
+    opacity: 0.9;
+    transition: all 0.4s ease;
+    z-index: 2;
+  }
+
+  .expanded-menu {
+    background-color: #99A4AE;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .75% 19.9%;
+    width: 100%;
+    z-index: 2;
+
+    .close {
+      cursor: pointer;
+      padding-right: .6%;
+    }
+  }
+
+  .nav-links {
+    padding-top: 15%;
+  }
+
+  .nav-link {
+    color: #FFFFFF;
+    padding-left: 43.5%;
+    text-decoration: none;
+    list-style: none;
+    place-items: center;
+    text-align: center;
+    font-size: 4.5rem;
+    line-height: 81px;
+    letter-spacing: 2px;
+    cursor: pointer;
+
+     &:hover {
+      color: #504446;
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}
+
+.mobile-jumbo-img {
+  display: none;
+}
+
+@media ( max-width: 525px) {
+  .container {
+    width: 100%;
+    padding: 1%;
+
+    .logo {
+      padding: 1.2% 7.75%;
+    }
+  }
+
+  .jumbo-img {
+  display: none;
+  }
+
+  .mobile-jumbo-img {
+    display: block;
+    width: 100%;
+  }
+  .jumbo-title {
+    font-size: 4rem;
+    line-height: 1.2em;
+  }
+}

components/RecentProjects/recentProjects.less

@@ -0,0 +1,80 @@
+.rp-title {
+  width: 100%;
+  padding: 6.5% 0 4.5% 8.5%;
+}
+
+.recent-projects {
+  width: 100%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+
+  .project-img {
+    position: relative;
+    text-align: center;
+  }
+
+  .mobile-villas-img, .mobile-outskirts-img, .mobile-blocks-img {
+    display: none;
+  }
+  p {
+    padding: 9% 28%;
+  }
+}
+
+.box-title {
+   width: 31%;
+   position: absolute;
+   top: 75%;
+   right: 8.2%;
+   bottom: 2%;
+
+    h4 {
+    text-align: center;
+    font-weight: normal;
+    font-size: 2.5rem;
+    letter-spacing: 7.3px;
+    padding: 35px 0px;
+    background-color: #D8D8D8;
+  }
+}
+
+.outskirts {
+     position: absolute;
+     left: 8.2%;
+   }
+
+@media (max-width: 525px) {
+  .home .recent-projects {
+    width: 100%;
+    padding: 2%;
+
+    .rp-title {
+      font-size: 2.2rem;
+      text-align: left;
+      padding: 6.5% 0 4.5% 1.5%;
+    }
+
+    p {
+      font-size: 1.6rem;
+      width: 100%;
+      margin-top: 6%;
+      padding: 10% 2%;
+    }
+
+    .villas-img, .outskirts-img, .blocks-img {
+      display: none;
+    }
+
+    .mobile-villas-img, .mobile-outskirts-img, .mobile-blocks-img {
+      display: block;
+      width: 100%;
+    }
+
+    .box-title {
+      width: 100%;
+      padding: 2%;
+      left: .1%;
+    }
+  }
+}