Merge pull request #51 from IanBohanan/master

WIP: Ian Bohanan One Month Submission
UAH-ACM · Nov 6, 2023 · 13299d2 · 13299d2
2 parents de6412b + db2daee
commit 13299d2
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 0 deletions.
diff --git a/members/IanBohanan/about.html b/members/IanBohanan/about.html
@@ -0,0 +1,24 @@
+
+<!doctype html>
+<html>
+    <head>
+        <title>Wind Sail Studio</title>
+        <link href="style.css" rel="stylesheet">
+        <link href="waveAnim.css" rel="stylesheet">
+				<!-- BOOTSTRAP IMPORTS -->
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+        <script src="functions.js"></script>
+        <script src="components/header.js" type="text/javascript" defer></script>
+    </head>
+
+<body class="main-container">
+    <!--Waves Container-->
+    <!--From https://codepen.io/goodkatz/pen/LYPGxQz-->
+    <div id="sky">
+        <header-component></header-component>
+    </div>
+    <!--Waves end-->
+    ABOUT page.
+</body>
+</html>
diff --git a/members/IanBohanan/assets/buoy.svg b/members/IanBohanan/assets/buoy.svg
diff --git a/members/IanBohanan/components/header.js b/members/IanBohanan/components/header.js
@@ -0,0 +1,49 @@
+class Header extends HTMLElement {
+    constructor() {
+      super();
+    }
+    connectedCallback() {
+        this.innerHTML = `
+        <div id="sky">
+        <!-- All the buoys in the header.js file-->
+        <svg class="overlay waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+            
+            <defs>
+                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+            </defs>
+            <g class="parallax">
+                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(48, 178, 206, 0.72)" />
+                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(48, 178, 206, 0.72)" />
+                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(48, 178, 206, 0.72)" />
+                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(48, 178, 206, 0.72)" />
+            </g>
+        </svg>
+
+        <div class="flex-container buoy">
+            <div>
+                <div class = "rectangle"> 
+                    <a href="index.html">HOME</a> 
+                </div>
+                <img src="./assets/buoy.svg" height="100px"/>
+            </div>
+            <div>
+                <div class = "rectangle"> 
+                    <a href="about.html">ABOUT</a> 
+                </div>
+                <img src="./assets/buoy.svg" height="100px"/>
+            </div>
+            <div>
+                <div class = "rectangle"> 
+                    <a href="https://uah.acm.org/">Back to ACM</a> 
+                </div>
+                <img src="./assets/buoy.svg" height="100px"/>
+            </div>
+        </div>
+    </div>
+        `;
+      }
+    }
+
+
+customElements.define('header-component', Header);
diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html
@@ -0,0 +1,25 @@
+
+<!doctype html>
+<html>
+    <head>
+        <title>Wind Sail Studio</title>
+        <link href="style.css" rel="stylesheet">
+        <link href="waveAnim.css" rel="stylesheet">
+				<!-- BOOTSTRAP IMPORTS -->
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+        <script src="functions.js"></script>
+        <script src="components/header.js" type="text/javascript" defer></script>
+    </head>
+
+<body class="main-container">
+    <!--Waves Container-->
+    <!--From https://codepen.io/goodkatz/pen/LYPGxQz-->
+    <header-component></header-component>
+    <!--Waves end-->
+
+    <div>
+        Main Page
+    </div>
+</body>
+</html>
diff --git a/members/IanBohanan/style.css b/members/IanBohanan/style.css
@@ -0,0 +1,14 @@
+.main-container {
+    background-color: rgba(48, 178, 206, 1);
+    color: black;
+}
+
+.overlay {
+    position: absolute;
+  }
+
+  .flex-container {
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+  }
diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css
@@ -0,0 +1,81 @@
+#sky {
+  background-color: #ffffff;
+  padding-top: 5em;
+}
+
+/*Basic rectangle */
+.rectangle {
+  height: 8vh;
+  width: 8vw;
+  border: 10px solid #000000;
+  background-color: #f7f7f7;
+}
+
+.buoy{
+  z-index: 1;
+  position: relative;
+  animation: move-up-down 7s cubic-bezier(.55,.5,.45,.5)     infinite; 
+}
+/*Moves the buoy up and down independent of the waves */
+@keyframes move-up-down {
+  0% {
+   transform: translate3d(0,-25%,0);
+  }
+  50% { 
+    transform: translate3d(0,-50%,0);
+  }
+  100% {
+    transform: translate3d(0,-25%,0);
+   }
+}
+
+.waves {
+    z-index: 2;
+    width: 100%;
+    height:15vh;
+    min-height:100px;
+    max-height:150px;
+  }
+
+  /* Animation */
+
+  .parallax > use {
+      animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
+    }
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+  }
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+  }
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+  }
+  .parallax > use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+  }
+  @keyframes move-forever {
+    0% {
+     transform: translate3d(-90px,0,0);
+    }
+    100% { 
+      transform: translate3d(85px,0,0);
+    }
+  }
+  /*Shrinking for mobile*/
+  @media (max-width: 768px) {
+    .waves {
+      height:40px;
+      min-height:40px;
+    }
+    .content {
+      height:30vh;
+    }
+    h1 {
+      font-size:24px;
+    }
+  }