Website update 07.06.2024

assets/css/index_styles.css

@@ -0,0 +1,178 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Custom Styles */
+body {
+  font-family: "Poppins", sans-serif;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+
+.logo {
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.menu {
+  display: flex;
+}
+
+.menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu ul li {
+  margin-left: 20px;
+}
+
+.menu ul li a {
+  text-decoration: none;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.showcase {
+  position: relative;
+}
+.showcase {
+  position: absolute;
+  right: 0;
+  width: 100%;
+  min-height: 100vh;
+  padding: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #111;
+  transition: 0.5s;
+  z-index: 2;
+}
+.showcase.active {
+  right: 300px;
+}
+.showcase video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+}
+.text {
+  position: relative;
+  z-index: 10;
+}
+.text h2 {
+  font-size: 5em;
+  font-weight: 800;
+  color: #fff;
+  line-height: 1em;
+  text-transform: uppercase;
+}
+.text h3 {
+  font-size: 4em;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1em;
+  text-transform: uppercase;
+}
+.text p {
+  font-size: 1.1em;
+  color: #fff;
+  margin: 20px 0;
+  font-weight: 400;
+  max-width: 700px;
+}
+.text a {
+  display: inline-block;
+  font-size: 1em;
+  background: #fff;
+  padding: 10px 30px;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #111;
+  letter-spacing: 2px;
+  transition: 0.2s;
+}
+.text a:hover {
+  letter-spacing: 6px;
+}
+.social {
+  position: absolute;
+  z-index: 10;
+  bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social li {
+  list-style: none;
+}
+.social li a {
+  display: inline-block;
+  margin-right: 20px;
+  filter: invert(1);
+  transform: scale(0.5);
+  transition: 0.5s;
+}
+.social li a:hover {
+  transform: scale(0.5) translateY(-15px);
+}
+.menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 300px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.menu ul {
+  position: relative;
+}
+.menu ul li {
+  list-style: none;
+}
+.menu ul li a {
+  text-decoration: none;
+  font-size: 24px;
+  color: #111;
+}
+.menu ul li a:hover {
+  color: #03a9f4;
+}
+@media (max-width: 991px) {
+  .showcase,
+  .showcase header {
+    padding: 40px;
+  }
+  .text h2 {
+    font-size: 3em;
+  }
+  .text h3 {
+    font-size: 2em;
+  }
+}

assets/css/style.css

@@ -6,7 +6,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Montserrat", sans-serif;
   color: #555555;
 }
 
@@ -79,7 +79,7 @@ h6 {
 }
 
 #header .logo h1 {
-  font-size: 28px;
+  font-size: 5em;
   margin: 0;
   line-height: 1;
   font-weight: 400;
@@ -142,9 +142,9 @@ h6 {
   color: #151515;
   padding: 15px 25px;
   transition: 0.3s;
-  font-size: 15px;
+  font-size: 1em;
   text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
 .nav-menu a:hover,
@@ -181,7 +181,7 @@ h6 {
 
 .nav-menu .drop-down ul a {
   padding: 10px 20px;
-  font-size: 14px;
+  font-size: 0.85em;
   font-weight: 400;
   color: #151515;
 }
@@ -372,22 +372,32 @@ video {
 }
 
 #hero .hero-logo {
-  margin-bottom: 30px;
+  margin-bottom: 0;
 }
 
 #hero h1 {
-  margin: 0 0 30px 0;
-  font-size: 48px;
-  font-weight: 500;
-  line-height: 56px;
-  color: #fff;
+  font-size: 3.5em;
+  font-weight: 800;   
+  color: #fff !important;
+  line-height: 1em;
+  text-transform: uppercase;
 }
 
 #hero h2 {
-  color: #ebebeb;
-  margin-bottom: 30px;
-  font-size: 16px;
-  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 1.75em;
+  font-weight: 600;
+  color: #fff !important;
+  line-height: 1em;
+  text-transform: uppercase;
+  margin-bottom: 1em;
+}
+#hero h3 {
+  text-transform: uppercase;
+  font-size: 2em;
+  font-weight:500;
+  color: #fff;
+  line-height: 1em;
   text-transform: uppercase;
 }
 
@@ -419,11 +429,11 @@ video {
 
 @media (max-width: 768px) {
   #hero h1 {
-    font-size: 28px;
-    line-height: 36px;
+    font-size: 2em;
   }
 
   #hero h2 {
+    font-size: 1em;
     line-height: 22px;
   }
 }
@@ -853,7 +863,7 @@ section {
 # Footer
 --------------------------------------------------------------*/
 #footer {
-  background: url("../img/cool-footer-img.jpg") center center repeat;
+  background: url("../img/footer-bg.png") center center repeat;
   color: #fff;
   font-size: 14px;
   position: relative;
@@ -1850,7 +1860,7 @@ ul {
 body {
   color: #768390;
   background: #FFF;
-  font-family: "Effra", Helvetica, sans-serif;
+  font-family: "Montserrat", sans-serif;
   padding: 0;
   -webkit-font-smoothing: antialiased;
 }

assets/js/index_script.js

@@ -0,0 +1,7 @@
+const menuToggle = document.querySelector(".toggle");
+const showcase = document.querySelector(".showcase");
+
+menuToggle.addEventListener("click", () => {
+  menuToggle.classList.toggle("active");
+  showcase.classList.toggle("active");
+});

auv-timeline.html

@@ -81,7 +81,7 @@
                     <li class="nav-logo"><a href="index.html#hero"><img src="assets/img/logo.png" alt=""
                                 class="img-fluid"></a></li>
                     <li><a href="gallery.html">Gallery</a></li>
-                    <li class="drop-down"><a href="bot-details.html">Our Bots</a>
+                    <li class="drop-down"><a href="bot-details.html">AUV</a>
                         <ul>
                             <li><a href="bot-details.html#Turret">Turret</a></li>
                             <li><a href="bot-details.html#Skyline">Skyline</a></li>