v1.4.1-beta/website
This commit is contained in:
+4
-5
@@ -31,7 +31,7 @@
|
||||
<h5 data-font="sans" class="logo-tag">
|
||||
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
|
||||
</h5>
|
||||
<p data-font="sans" class="works-title">WORKS WITH</p>
|
||||
<p data-font="sans" class="works-title">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>
|
||||
@@ -41,8 +41,7 @@
|
||||
<div class="supported-logo" id="hbonow"></div>
|
||||
<div class="supported-logo" id="hbomax"></div>
|
||||
</div>
|
||||
<p data-font="sans" class="works-title">FREE. NO SIGNUP. NO BS.</p>
|
||||
<a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
|
||||
<a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
|
||||
</div>
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
@@ -82,8 +81,8 @@
|
||||
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>
|
||||
<a data-font="sans" href="./beta/" class="link-button">Support Watch Party</a>
|
||||
<a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
|
||||
<a data-font="sans-bold" href="./beta/" class="link-button">Support Watch Party</a>
|
||||
<a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
var LOGO_INIT = 0;
|
||||
var GET_INIT = 0;
|
||||
function handleSticky() {
|
||||
const logo = document.querySelector('.logo');
|
||||
const logoCircle = document.querySelector('.logo-circle');
|
||||
if (window.scrollY >= LOGO_INIT) {
|
||||
const get = document.querySelector('.landing .link-button');
|
||||
if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
|
||||
logo.classList.add('stickied');
|
||||
logoCircle.classList.add('stickied');
|
||||
} else {
|
||||
logo.classList.remove('stickied');
|
||||
logoCircle.classList.remove('stickied');
|
||||
}
|
||||
if (window.scrollY >= GET_INIT + get.offsetHeight) {
|
||||
get.classList.add('stickied');
|
||||
} else {
|
||||
get.classList.remove('stickied');
|
||||
}
|
||||
}
|
||||
window.onload = function () {
|
||||
LOGO_INIT = document.querySelector('.logo').offsetTop;
|
||||
GET_INIT = document.querySelector('.landing .link-button').offsetTop;
|
||||
window.addEventListener('scroll', this.handleSticky);
|
||||
};
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
* {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -34,7 +35,7 @@ body {
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding-top: 17.5rem;
|
||||
padding-top: 12.5rem;
|
||||
padding-left: 10rem;
|
||||
}
|
||||
|
||||
@@ -70,7 +71,7 @@ body {
|
||||
}
|
||||
|
||||
.works-title {
|
||||
font-size: 2.4rem;
|
||||
font-size: 3rem;
|
||||
color: var(--primary-text);
|
||||
letter-spacing: 0.75rem;
|
||||
margin: 3rem 0;
|
||||
@@ -94,11 +95,11 @@ body {
|
||||
.link-button {
|
||||
display: table;
|
||||
text-decoration: none;
|
||||
padding: 1rem 7.5rem;
|
||||
padding: 3rem 7.5rem;
|
||||
color: var(--primary);
|
||||
background-color: var(--cta);
|
||||
font-size: 4rem;
|
||||
border-radius: 4rem;
|
||||
border-radius: 7.5rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
@@ -108,22 +109,22 @@ body {
|
||||
|
||||
.feature-card {
|
||||
background-color: var(--primary-light);
|
||||
padding: 6rem 10rem;
|
||||
padding: 6rem 7.5rem;
|
||||
margin: 10rem 0;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
padding: 5rem;
|
||||
background-position: center !important;
|
||||
background-position: left !important;
|
||||
background-size: contain !important;
|
||||
background-repeat: no-repeat !important;
|
||||
margin: 2.5rem;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: var(--primary-text);
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -133,7 +134,6 @@ footer {
|
||||
|
||||
footer .works-title {
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.built-with {
|
||||
@@ -142,8 +142,6 @@ footer .works-title {
|
||||
|
||||
.built-with a {
|
||||
color: var(--cta);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.3rem;
|
||||
}
|
||||
|
||||
footer .link-button {
|
||||
|
||||
@@ -1,73 +1,4 @@
|
||||
.logo {
|
||||
font-size: 10rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.logo.stickied {
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.8rem;
|
||||
position: fixed;
|
||||
background-color: var(--primary);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 3rem 10rem;
|
||||
}
|
||||
|
||||
.features,
|
||||
.supported {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.features {
|
||||
max-width: 65%;
|
||||
}
|
||||
.feature-card {
|
||||
background-color: var(--primary-medium);
|
||||
z-index: 1;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: -1px;
|
||||
display: inline-block;
|
||||
padding: 3rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.feature-icon {
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 30% !important;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.feature-card .feature-text {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
.feature-card:hover {
|
||||
background-color: var(--primary-light);
|
||||
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;
|
||||
}
|
||||
footer {
|
||||
padding-right: 55%;
|
||||
}
|
||||
footer .works-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
footer .built-with {
|
||||
display: block;
|
||||
}
|
||||
footer .link-button {
|
||||
max-width: fit-content;
|
||||
display: inline-table;
|
||||
margin-right: 3rem;
|
||||
padding: 0.8rem 3.375rem;
|
||||
font-size: 2.5rem;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,86 @@ html {
|
||||
body {
|
||||
font-size: 7.5px !important;
|
||||
}
|
||||
|
||||
.features,
|
||||
.supported {
|
||||
max-width: 85%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.logo {
|
||||
font-size: 10rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.logo.stickied {
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.8rem;
|
||||
position: fixed;
|
||||
background-color: var(--primary);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
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;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
font-size: 2rem;
|
||||
z-index: 1999 !important;
|
||||
}
|
||||
.feature-card {
|
||||
background-color: var(--primary-medium);
|
||||
z-index: 1;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: -1px;
|
||||
display: inline-block;
|
||||
padding: 3rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.feature-card .feature-text {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
.feature-card:hover {
|
||||
background-color: var(--primary-light);
|
||||
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;
|
||||
}
|
||||
footer {
|
||||
padding-right: 45%;
|
||||
}
|
||||
footer .works-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
footer .built-with {
|
||||
display: block;
|
||||
}
|
||||
footer .link-button {
|
||||
max-width: fit-content;
|
||||
display: inline-table;
|
||||
margin-right: 3rem;
|
||||
padding: 0.8rem 3.375rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:root {
|
||||
--primary: white;
|
||||
--primary-medium: #6f8d00;
|
||||
--primary-medium: #c5c5c5;
|
||||
--primary-light: #c0f300;
|
||||
--cta: black;
|
||||
--primary-text: black;
|
||||
|
||||
Reference in New Issue
Block a user