From e7bab304a0e95e69c2589619ef82fa0cc26bd7fb Mon Sep 17 00:00:00 2001 From: Phil-Eggtree Date: Tue, 29 Aug 2023 19:29:02 -0500 Subject: [PATCH 1/7] Created index.html its blankt tho --- members/IanBohanan/index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 members/IanBohanan/index.html diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html new file mode 100644 index 0000000..e69de29 From ea6d4ee3c0878b340455c4f346418db324a17744 Mon Sep 17 00:00:00 2001 From: Phil-Eggtree Date: Tue, 26 Sep 2023 19:42:00 -0500 Subject: [PATCH 2/7] Ocean wave Background Adds waves to the top and makes the main page have the same color as the waves --- members/IanBohanan/index.html | 33 ++++++++++++++++++++ members/IanBohanan/style.css | 4 +++ members/IanBohanan/waveAnim.css | 55 +++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+) create mode 100644 members/IanBohanan/style.css create mode 100644 members/IanBohanan/waveAnim.css diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html index e69de29..71e5fb7 100644 --- a/members/IanBohanan/index.html +++ b/members/IanBohanan/index.html @@ -0,0 +1,33 @@ + + + + + Wind Sail Studio + + + + + + + + + + +
+ + + + + + + + + + + +
+ + Content goes here. + + diff --git a/members/IanBohanan/style.css b/members/IanBohanan/style.css new file mode 100644 index 0000000..e379d43 --- /dev/null +++ b/members/IanBohanan/style.css @@ -0,0 +1,4 @@ +.main-container { + background-color: rgba(48, 178, 206, 1); + color: black; +} \ No newline at end of file diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css new file mode 100644 index 0000000..084a922 --- /dev/null +++ b/members/IanBohanan/waveAnim.css @@ -0,0 +1,55 @@ +#sky { + background-color: #ffffff; +} + +.waves { + position:relative; + width: 100%; + height:15vh; + margin-bottom:-7px; /*Fix for safari gap*/ + 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; + } + } From d046bcc2043144086c75e69d30dc4fa78e568b50 Mon Sep 17 00:00:00 2001 From: Phil-Eggtree Date: Tue, 26 Sep 2023 21:03:14 -0500 Subject: [PATCH 3/7] buoy adds buoy with aniamtion floating up and down --- members/IanBohanan/assets/buoy.svg | 32 ++++++++++++++++++++++++++++++ members/IanBohanan/index.html | 22 ++++++++++---------- members/IanBohanan/style.css | 7 ++++++- members/IanBohanan/waveAnim.css | 23 ++++++++++++++++++--- 4 files changed, 70 insertions(+), 14 deletions(-) create mode 100644 members/IanBohanan/assets/buoy.svg diff --git a/members/IanBohanan/assets/buoy.svg b/members/IanBohanan/assets/buoy.svg new file mode 100644 index 0000000..fe56e4d --- /dev/null +++ b/members/IanBohanan/assets/buoy.svg @@ -0,0 +1,32 @@ + + + + + + + + + + \ No newline at end of file diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html index 71e5fb7..6c3b8ed 100644 --- a/members/IanBohanan/index.html +++ b/members/IanBohanan/index.html @@ -13,18 +13,20 @@ +
+ - - - - - - - - - + viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> + + + + + + + + +
diff --git a/members/IanBohanan/style.css b/members/IanBohanan/style.css index e379d43..851683f 100644 --- a/members/IanBohanan/style.css +++ b/members/IanBohanan/style.css @@ -1,4 +1,9 @@ .main-container { background-color: rgba(48, 178, 206, 1); color: black; -} \ No newline at end of file +} + +.overlay { + position: absolute; + + } \ No newline at end of file diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css index 084a922..a5a7fa6 100644 --- a/members/IanBohanan/waveAnim.css +++ b/members/IanBohanan/waveAnim.css @@ -1,5 +1,22 @@ #sky { background-color: #ffffff; + padding-top: 5em; +} + +.buoy{ + 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,0vh,0); + } + 50% { + transform: translate3d(0,-25%,0); + } + 100% { + transform: translate3d(0,0vh,0); + } } .waves { @@ -13,9 +30,9 @@ /* Animation */ -.parallax > use { - animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; - } + .parallax > use { + animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; + } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; From 8931aef504c912d12bf5e272863aa2a690a1be0b Mon Sep 17 00:00:00 2001 From: Phil-Eggtree Date: Tue, 10 Oct 2023 20:49:20 -0500 Subject: [PATCH 4/7] Moving buoy header --- members/IanBohanan/about.html | 35 +++++++++++++++++++++++++ members/IanBohanan/components/header.js | 26 ++++++++++++++++++ members/IanBohanan/index.html | 26 +++++++++++++++--- members/IanBohanan/style.css | 9 ++++++- members/IanBohanan/waveAnim.css | 20 ++++++++++---- 5 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 members/IanBohanan/about.html create mode 100644 members/IanBohanan/components/header.js diff --git a/members/IanBohanan/about.html b/members/IanBohanan/about.html new file mode 100644 index 0000000..c796eff --- /dev/null +++ b/members/IanBohanan/about.html @@ -0,0 +1,35 @@ + + + + + Wind Sail Studio + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + ABOUT page. + + diff --git a/members/IanBohanan/components/header.js b/members/IanBohanan/components/header.js new file mode 100644 index 0000000..aa8ffd7 --- /dev/null +++ b/members/IanBohanan/components/header.js @@ -0,0 +1,26 @@ +class Header extends HTMLElement { + constructor() { + super(); + } + connectedCallback() { + this.innerHTML = ` +
+
+
+ HOME +
+ +
+
+
+ ABOUT +
+ +
+
+ `; + } + } + + +customElements.define('header-component', Header); \ No newline at end of file diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html index 6c3b8ed..de82846 100644 --- a/members/IanBohanan/index.html +++ b/members/IanBohanan/index.html @@ -9,15 +9,20 @@ + + + +
- - + + @@ -28,8 +33,23 @@ + +
+
+
+ HOME +
+ +
+
+
+ ABOUT +
+ +
+
- Content goes here. + Main Page diff --git a/members/IanBohanan/style.css b/members/IanBohanan/style.css index 851683f..f8fead0 100644 --- a/members/IanBohanan/style.css +++ b/members/IanBohanan/style.css @@ -5,5 +5,12 @@ .overlay { position: absolute; - + } + + .flex-container { + display: flex; + justify-content: center; + align-items: stretch; + align-content: space-between; + border: 1px solid black; } \ No newline at end of file diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css index a5a7fa6..738446b 100644 --- a/members/IanBohanan/waveAnim.css +++ b/members/IanBohanan/waveAnim.css @@ -3,29 +3,39 @@ padding-top: 5em; } +/*Basic rectangle */ +.rectangle { + height: 50px; + width: 100px; + 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,0vh,0); + transform: translate3d(0,-25%,0); } 50% { - transform: translate3d(0,-25%,0); + transform: translate3d(0,-50%,0); } 100% { - transform: translate3d(0,0vh,0); + transform: translate3d(0,-25%,0); } } .waves { - position:relative; + z-index: 2; width: 100%; height:15vh; - margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px; + border: 1px solid red; } /* Animation */ From 0328dac538051862fe9930a9bca722d7968beb9b Mon Sep 17 00:00:00 2001 From: Phil-Eggtree Date: Tue, 10 Oct 2023 20:59:56 -0500 Subject: [PATCH 5/7] Waves in basic javascript --- members/IanBohanan/about.html | 15 ++------- members/IanBohanan/components/header.js | 43 +++++++++++++++++-------- members/IanBohanan/index.html | 38 +++------------------- members/IanBohanan/style.css | 2 -- members/IanBohanan/waveAnim.css | 1 - 5 files changed, 36 insertions(+), 63 deletions(-) diff --git a/members/IanBohanan/about.html b/members/IanBohanan/about.html index c796eff..e8da7d6 100644 --- a/members/IanBohanan/about.html +++ b/members/IanBohanan/about.html @@ -9,25 +9,14 @@ +
- - - - - - - - - - - - +
ABOUT page. diff --git a/members/IanBohanan/components/header.js b/members/IanBohanan/components/header.js index aa8ffd7..931ef06 100644 --- a/members/IanBohanan/components/header.js +++ b/members/IanBohanan/components/header.js @@ -4,20 +4,37 @@ class Header extends HTMLElement { } connectedCallback() { this.innerHTML = ` -
-
-
- HOME -
- -
-
-
- ABOUT -
- -
+
+ + + + + + + + + + + + + + +
+
+
+ HOME +
+ +
+
+
+ ABOUT +
+ +
+
`; } } diff --git a/members/IanBohanan/index.html b/members/IanBohanan/index.html index de82846..7c0830b 100644 --- a/members/IanBohanan/index.html +++ b/members/IanBohanan/index.html @@ -13,43 +13,13 @@ - - - -
- - - - - - - - - - - - - + + -
-
-
- HOME -
- -
-
-
- ABOUT -
- -
-
+
+ Main Page
- - Main Page diff --git a/members/IanBohanan/style.css b/members/IanBohanan/style.css index f8fead0..0dc665a 100644 --- a/members/IanBohanan/style.css +++ b/members/IanBohanan/style.css @@ -11,6 +11,4 @@ display: flex; justify-content: center; align-items: stretch; - align-content: space-between; - border: 1px solid black; } \ No newline at end of file diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css index 738446b..edc58bc 100644 --- a/members/IanBohanan/waveAnim.css +++ b/members/IanBohanan/waveAnim.css @@ -35,7 +35,6 @@ height:15vh; min-height:100px; max-height:150px; - border: 1px solid red; } /* Animation */ From 748fe390502273402322f72700a091399dc26e2a Mon Sep 17 00:00:00 2001 From: Ian-Bohanan Date: Tue, 24 Oct 2023 19:59:39 -0500 Subject: [PATCH 6/7] Added back to ACM button --- members/IanBohanan/components/header.js | 6 ++++++ members/IanBohanan/waveAnim.css | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/members/IanBohanan/components/header.js b/members/IanBohanan/components/header.js index 931ef06..e321fe0 100644 --- a/members/IanBohanan/components/header.js +++ b/members/IanBohanan/components/header.js @@ -33,6 +33,12 @@ class Header extends HTMLElement {
+
+
+ Back to ACM +
+ +
`; diff --git a/members/IanBohanan/waveAnim.css b/members/IanBohanan/waveAnim.css index edc58bc..8eb3405 100644 --- a/members/IanBohanan/waveAnim.css +++ b/members/IanBohanan/waveAnim.css @@ -5,8 +5,8 @@ /*Basic rectangle */ .rectangle { - height: 50px; - width: 100px; + height: 8vh; + width: 8vw; border: 10px solid #000000; background-color: #f7f7f7; } From db2daee1147810b7908a5c271b20ec247462a52b Mon Sep 17 00:00:00 2001 From: Ian-Bohanan Date: Tue, 24 Oct 2023 20:09:14 -0500 Subject: [PATCH 7/7] fixed back to acm button --- members/IanBohanan/components/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/members/IanBohanan/components/header.js b/members/IanBohanan/components/header.js index e321fe0..7c26789 100644 --- a/members/IanBohanan/components/header.js +++ b/members/IanBohanan/components/header.js @@ -35,7 +35,7 @@ class Header extends HTMLElement {