v1.4.1-beta/website

website/index.html

@@ -27,11 +27,11 @@
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
-      <h1 data-font="sans-bold" class="logo">WATCH PARTY</h1>
+      <h1 data-font="serif" class="logo">WATCH PARTY</h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h5>
-      <p data-font="sans" class="works-title">FREE. NO SIGNUP. NO BS. <br />WORKS WITH</p>
+      <p data-font="sans-bold" class="title subtitle">FREE. NO SIGNUP. NO BS.<br />WORKS WITH</p>
       <div class="supported">
         <div class="supported-logo" id="netflix"></div>
         <div class="supported-logo" id="hulu"></div>
@@ -44,8 +44,9 @@
       <a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
     </div>
     <div class="features">
+      <p data-font="sans-bold" class="title subtitle">FEATURES</p>
       <div class="feature-card">
-        <div class="feature-icon" id="phone"></div>
+        <div class="feature-icon" id="sync"></div>
         <p data-font="sans" class="feature-text">
           Free group voice calls - for when text and GIFs just won't do.
         </p>
@@ -57,27 +58,33 @@
         </p>
       </div>
       <div class="feature-card">
-        <div class="feature-icon" id="phone"></div>
+        <div class="feature-icon" id="chat"></div>
         <p data-font="sans" class="feature-text">
           Free group voice calls - for when text and GIFs just won't do.
         </p>
       </div>
       <div class="feature-card">
-        <div class="feature-icon" id="phone"></div>
+        <div class="feature-icon" id="delete"></div>
         <p data-font="sans" class="feature-text">
           Free group voice calls - for when text and GIFs just won't do.
         </p>
       </div>
       <div class="feature-card">
-        <div class="feature-icon" id="phone"></div>
+        <div class="feature-icon" id="custom"></div>
+        <p data-font="sans" class="feature-text">
+          Free group voice calls - for when text and GIFs just won't do.
+        </p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon" id="signup"></div>
         <p data-font="sans" class="feature-text">
           Free group voice calls - for when text and GIFs just won't do.
         </p>
       </div>
     </div>
     <footer data-font="sans">
-      <p class="works-title">© AYUSHYA AMITABH, 2020</p>
+      <p class="title">© AYUSHYA AMITABH, 2020</p>
-      <p class="works-title built-with">
+      <p class="title built-with">
         BUILT WITH ❤ FOR <a>GOOGLE CHROME</a> USING <a>FIREBASE</a>, <a>MATERIAL-UI</a>,
         <a>REACT JS</a>, <a>NODE JS</a>, & <a>GIPHY</a>.
       </p>

website/scripts/Stickied.js

@@ -3,12 +3,12 @@ var GET_INIT = 0;
 function handleSticky() {
   const logo = document.querySelector('.logo');
   const get = document.querySelector('.landing .link-button');
-  if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
+  if (window.scrollY >= LOGO_INIT + logo.offsetHeight * 1.5) {
     logo.classList.add('stickied');
   } else {
     logo.classList.remove('stickied');
   }
-  if (window.scrollY >= GET_INIT + get.offsetHeight) {
+  if (window.scrollY >= GET_INIT + get.offsetHeight * 1.5) {
     get.classList.add('stickied');
   } else {
     get.classList.remove('stickied');

website/styles/extrasmall.css

@@ -32,6 +32,7 @@ html {
 body {
   font-size: 10px;
   background-color: var(--primary);
+  overflow-x: hidden;
 }
 
 .landing {
@@ -68,14 +69,20 @@ body {
   font-size: 3.2rem;
   letter-spacing: 1.375rem;
   margin: 6rem 0;
+  line-height: 6.4rem;
 }
 
-.works-title {
+.title {
   font-size: 3rem;
   color: var(--primary-text);
   letter-spacing: 0.75rem;
   margin: 3rem 0;
   display: inline-block;
+  line-height: 6rem;
+}
+
+.subtitle {
+  font-size: 2.5rem;
 }
 
 .supported-logo {
@@ -88,10 +95,6 @@ body {
   transition: all ease-in-out 0.2s;
 }
 
-.supported-logo:hover {
-  transform: scale(1.2);
-}
-
 .link-button {
   display: table;
   text-decoration: none;
@@ -107,6 +110,11 @@ body {
   padding-left: 10rem;
 }
 
+.features .title {
+  display: block;
+  margin-top: 10rem;
+}
+
 .feature-card {
   background-color: var(--primary-light);
   padding: 6rem 7.5rem;
@@ -118,7 +126,11 @@ body {
   background-position: left !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
+  background-color: black;
   margin: 2.5rem 0;
+  display: table;
+  width: fit-content;
+  border-radius: 100%;
 }
 
 .feature-text {
@@ -132,7 +144,7 @@ footer {
   padding: 6rem 10rem;
 }
 
-footer .works-title {
+footer .title {
   width: 100%;
 }
 

website/styles/medium.css

@@ -9,6 +9,15 @@ body {
 .supported {
   max-width: 75%;
 }
+.link-button {
+  transition: all ease-in-out 0.2s !important;
+  border: 3px solid transparent;
+}
+
+.link-button:hover {
+  border: 3px solid var(--primary-text);
+  box-shadow: 0 0 10px var(--primary-text);
+}
 .logo {
   font-size: 10rem;
   transition: all ease-in-out 0.3s;
@@ -24,9 +33,6 @@ body {
   padding: 3rem 10rem;
   z-index: 999 !important;
 }
-.landing .link-button {
-  transition: all ease-in-out 0.3s;
-}
 .landing .link-button.stickied {
   position: fixed;
   right: 0rem;
@@ -34,6 +40,8 @@ body {
   border-radius: 0;
   font-size: 2rem;
   z-index: 1999 !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 .feature-card {
   background-color: var(--primary-medium);
@@ -43,39 +51,54 @@ body {
   margin: -1px;
   display: inline-block;
   padding: 3rem;
-  transition: all ease-in-out 0.3s;
+  transition: all 0.3s ease-in;
+  position: relative;
 }
 .feature-icon {
   z-index: 1;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  background-size: 30% !important;
   background-position: center !important;
-  transition: all ease-in-out 0.3s;
+  transition: all ease-out 0.3s;
+  border-radius: 100%;
+  width: 0;
+  margin: 0 auto;
+  height: 0;
+  background-size: cover !important;
+  padding: 5rem;
+  background-color: black;
+  position: absolute;
+  top: 13rem;
+  left: 13rem;
 }
 .feature-card .feature-text {
   z-index: 1;
-  display: none;
+  display: table;
+  line-height: 0;
+  opacity: 0;
   text-align: center;
+  overflow: hidden;
 }
 .feature-card:hover {
-  background-color: var(--primary-light);
+  background-color: var(--cta);
   box-shadow: -5px 5px 100px #000000;
   z-index: 100;
   transform: scale(1.1);
 }
-.feature-card:hover .feature-icon {
-  height: 50%;
-}
 .feature-card:hover .feature-text {
   display: table;
+  color: var(--primary-light);
+  line-height: initial;
+  opacity: 1;
+}
+.feature-card:hover .feature-icon {
+  position: relative;
+  top: unset;
+  left: unset;
+  margin-bottom: 3rem;
 }
 footer {
   padding-right: 45%;
 }
-footer .works-title {
+footer .title {
   font-size: 2rem;
 }
 footer .built-with {

website/styles/variables-dark.css

@@ -6,20 +6,17 @@
   --primary-text: white;
 }
 .supported-logo#disney {
-  background: url('../media/Disney.png');
+  background-image: url('../media/Disney.png');
 }
 .supported-logo#prime {
-  background: url('../media/Prime.png');
+  background-image: url('../media/Prime.png');
 }
 .supported-logo#youtube {
-  background: url('../media/Youtube.png');
+  background-image: url('../media/Youtube.png');
 }
 .supported-logo#hbonow {
-  background: url('../media/HBONowWhite.png');
+  background-image: url('../media/HBONowWhite.png');
 }
 .supported-logo#hbomax {
-  background: url('../media/HBOMaxWhite.png');
+  background-image: url('../media/HBOMaxWhite.png');
-}
-.feature-icon#phone {
-  background: url('../media/PhoneWhite.png');
 }

website/styles/variables.css

@@ -7,26 +7,42 @@
   font-size: 10px;
 }
 .supported-logo#netflix {
-  background: url('../media/Netflix.png');
+  background-image: url('../media/Netflix.png');
 }
 .supported-logo#hulu {
-  background: url('../media/Hulu.png');
+  background-image: url('../media/Hulu.png');
 }
 .supported-logo#disney {
-  background: url('../media/DisneyColor.png');
+  background-image: url('../media/DisneyColor.png');
 }
 .supported-logo#prime {
-  background: url('../media/PrimeColor.png');
+  background-image: url('../media/PrimeColor.png');
 }
 .supported-logo#youtube {
-  background: url('../media/YoutubeColor.png');
+  background-image: url('../media/YoutubeColor.png');
 }
 .supported-logo#hbonow {
-  background: url('../media/HBONowBlack.png');
+  background-image: url('../media/HBONowBlack.png');
 }
 .supported-logo#hbomax {
-  background: url('../media/HBOMax.png');
+  background-image: url('../media/HBOMax.png');
 }
+
 .feature-icon#phone {
-  background: url('../media/PhoneBlack.png');
+  background-image: url('../media/Phone.gif');
+}
+.feature-icon#delete {
+  background-image: url('../media/Delete.gif');
+}
+.feature-icon#signup {
+  background-image: url('../media/Signup.gif');
+}
+.feature-icon#sync {
+  background-image: url('../media/Sync.gif');
+}
+.feature-icon#custom {
+  background-image: url('../media/Custom.gif');
+}
+.feature-icon#chat {
+  background-image: url('../media/Chat.gif');
 }