v1.2.0-beta/website redesign done
This commit is contained in:
+47
-75
@@ -1,98 +1,70 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="apple-touch-icon" sizes="57x57" href="../apple-icon-57x57.png" />
|
<link rel="apple-touch-icon" sizes="57x57" href="../icons/apple-icon-57x57.png" />
|
||||||
<link rel="apple-touch-icon" sizes="60x60" href="../apple-icon-60x60.png" />
|
<link rel="apple-touch-icon" sizes="60x60" href="../icons/apple-icon-60x60.png" />
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="../apple-icon-72x72.png" />
|
<link rel="apple-touch-icon" sizes="72x72" href="../icons/apple-icon-72x72.png" />
|
||||||
<link rel="apple-touch-icon" sizes="76x76" href="../apple-icon-76x76.png" />
|
<link rel="apple-touch-icon" sizes="76x76" href="../icons/apple-icon-76x76.png" />
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="../apple-icon-114x114.png" />
|
<link rel="apple-touch-icon" sizes="114x114" href="../icons/apple-icon-114x114.png" />
|
||||||
<link rel="apple-touch-icon" sizes="120x120" href="../apple-icon-120x120.png" />
|
<link rel="apple-touch-icon" sizes="120x120" href="../icons/apple-icon-120x120.png" />
|
||||||
<link rel="apple-touch-icon" sizes="144x144" href="../apple-icon-144x144.png" />
|
<link rel="apple-touch-icon" sizes="144x144" href="../icons/apple-icon-144x144.png" />
|
||||||
<link rel="apple-touch-icon" sizes="152x152" href="../apple-icon-152x152.png" />
|
<link rel="apple-touch-icon" sizes="152x152" href="../icons/apple-icon-152x152.png" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="../apple-icon-180x180.png" />
|
<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-icon-180x180.png" />
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="../android-icon-192x192.png" />
|
<link rel="icon" type="image/png" sizes="192x192" href="../icons/android-icon-192x192.png" />
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png" />
|
<link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png" />
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png" />
|
<link rel="icon" type="image/png" sizes="96x96" href="../icons/favicon-96x96.png" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png" />
|
<link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png" />
|
||||||
|
<link rel="icon" href="../icons/favicon.ico" />
|
||||||
<link rel="manifest" href="../manifest.json" />
|
<link rel="manifest" href="../manifest.json" />
|
||||||
<meta name="msapplication-TileImage" content="../ms-icon-144x144.png" />
|
<meta name="msapplication-TileImage" content="../icons/ms-icon-144x144.png" />
|
||||||
<link rel="stylesheet" type="text/css" href="../font.css" />
|
<link rel="stylesheet" type="text/css" href="../font.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="../style.css" />
|
<link rel="stylesheet" type="text/css" href="../styles/index.css" />
|
||||||
<title>Watch Party | Beta</title>
|
<script src="../scripts/Stickied.js"></script>
|
||||||
|
<title>Watch Party</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="beta-body">
|
<body>
|
||||||
<script>
|
<header data-header-visible="false">
|
||||||
window.onload = function () {
|
<brand data-font="serif">WATCH PARTY</brand>
|
||||||
let originalTitlePosition = null;
|
<spacer></spacer>
|
||||||
window.addEventListener('scroll', function (ev) {
|
<a target="_self" href="#request" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
const title = document.getElementsByClassName('title')[0];
|
<a target="_self" href="https://www.paypal.me/Ayushya" data-font="sans"
|
||||||
const support = document.getElementsByClassName('support')[0];
|
>SUPPORT WATCH PARTY</a
|
||||||
|
>
|
||||||
if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
|
</header>
|
||||||
if (window.scrollY > originalTitlePosition) {
|
<section class="landing">
|
||||||
support.classList.add('stickied');
|
<a target="_self" href="#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
title.classList.add('stickied');
|
<a target="_self" href="../" class="brand" data-font="serif">
|
||||||
} else {
|
|
||||||
support.classList.remove('stickied');
|
|
||||||
title.classList.remove('stickied');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<section>
|
|
||||||
<div class="page">
|
|
||||||
<a class="cta-container" href="#request" target="_self">
|
|
||||||
<mark class="cta">
|
|
||||||
Request Beta Access Below
|
|
||||||
</mark>
|
|
||||||
</a>
|
|
||||||
<a href="../" target="_self" class="title">
|
|
||||||
<span>
|
<span>
|
||||||
WATCH PARTY
|
WATCH PARTY
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="cta-container support" href="https://www.paypal.me/Ayushya">
|
|
||||||
<mark class="cta">
|
|
||||||
Support Watch Party
|
|
||||||
</mark>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<section id="request" data-page="2">
|
<section id="request" class="beta">
|
||||||
<div class="page">
|
|
||||||
<script
|
<script
|
||||||
src="../GoogleFormStyler.js"
|
src="../scripts/GoogleFormStyler.js"
|
||||||
form="https://docs.google.com/forms/d/e/1FAIpQLSfhGxX7rJ4gNEYuQsx_wgg0GJqJq9XRWlgbpMZCrK14iPyuZA/viewform?embedded=true"
|
form="https://docs.google.com/forms/d/e/1FAIpQLSfhGxX7rJ4gNEYuQsx_wgg0GJqJq9XRWlgbpMZCrK14iPyuZA/viewform?embedded=true"
|
||||||
></script>
|
></script>
|
||||||
|
|
||||||
<mark id="powered">Powered by Google Forms</mark>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<footer>
|
<footer data-font="sans">
|
||||||
|
<div class="inner">
|
||||||
|
<footerline>
|
||||||
<div>
|
<div>
|
||||||
<span class="full">© Ayushya Amitabh, 2020</span>
|
© Ayushya Amitabh, 2020
|
||||||
<span>
|
</div>
|
||||||
Built with ❤️ for
|
<spacer></spacer>
|
||||||
<a href="https://www.google.com/chrome/">Google Chrome</a>
|
<div>
|
||||||
using
|
Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
|
||||||
<a href="https://firebase.google.com/">Firebase</a>,
|
<a href="https://firebase.google.com/">Firebase</a>,
|
||||||
<a href="https://material-ui.com/">Material-UI</a>,
|
<a href="https://material-ui.com/">Material-UI</a>,
|
||||||
<a href="https://reactjs.org/">React JS</a> ,
|
<a href="https://reactjs.org/">React JS</a> ,
|
||||||
<a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
|
<a href="https://nodejs.org/en/">Node.js</a> & <a href="https://giphy.com/">Giphy</a>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</footerline>
|
||||||
<span class="full">
|
<footerline>
|
||||||
<a href="http://get.chromewatchparty.com">
|
<a href="#request" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
<mark>Get Chrome Extension</mark>
|
<spacer></spacer>
|
||||||
</a>
|
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
|
||||||
</span>
|
</footerline>
|
||||||
<span>
|
|
||||||
Help keep Watch Party free -
|
|
||||||
<a href="https://www.paypal.me/Ayushya">
|
|
||||||
<mark>Support Watch Party</mark>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+64
-7
@@ -26,13 +26,11 @@
|
|||||||
<header data-header-visible="false">
|
<header data-header-visible="false">
|
||||||
<brand data-font="serif">WATCH PARTY</brand>
|
<brand data-font="serif">WATCH PARTY</brand>
|
||||||
<spacer></spacer>
|
<spacer></spacer>
|
||||||
<a href="http://get.chromewatchparty.com" data-font="sans">GET CHROME EXTENSION</a>
|
<a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
|
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
|
||||||
</header>
|
</header>
|
||||||
<section class="landing">
|
<section class="landing">
|
||||||
<a href="http://get.chromewatchparty.com" class="get" data-font="sans"
|
<a href="./beta/#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
>GET CHROME EXTENSION</a
|
|
||||||
>
|
|
||||||
<a href="#" class="brand" data-font="serif">
|
<a href="#" class="brand" data-font="serif">
|
||||||
<span>
|
<span>
|
||||||
WATCH PARTY
|
WATCH PARTY
|
||||||
@@ -42,6 +40,7 @@
|
|||||||
<section class="intro">
|
<section class="intro">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<img src="./media/intro.gif" />
|
<img src="./media/intro.gif" />
|
||||||
|
<div class="supports" data-font="sans">Watch your favorites, with your favorite people</div>
|
||||||
<div class="supports" data-font="sans">Watch Party Works With</div>
|
<div class="supports" data-font="sans">Watch Party Works With</div>
|
||||||
<div class="supported" data-font="sans">
|
<div class="supported" data-font="sans">
|
||||||
<div class="netflix"></div>
|
<div class="netflix"></div>
|
||||||
@@ -52,10 +51,68 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="features">
|
||||||
<div class="inner">
|
<div class="inner" data-font="sans">
|
||||||
234
|
<feature>
|
||||||
|
<img src="./media/hideable.gif" data-color="rgb(100,100,100)" />
|
||||||
|
<div>
|
||||||
|
Hide the chat - focus on the show, while staying synced. Built to not be in your way
|
||||||
|
but, also be there when you need it.
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
|
<feature>
|
||||||
|
<img src="./media/noauth.gif" />
|
||||||
|
<div>
|
||||||
|
No signup or login required. Just ready to go.
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
|
<feature>
|
||||||
|
<img src="./media/giphy.gif" />
|
||||||
|
<div>
|
||||||
|
When words aren't enough, use a GIF from Giphy
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
|
<feature>
|
||||||
|
<img src="./media/timed.gif" />
|
||||||
|
<div>
|
||||||
|
What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
|
<feature>
|
||||||
|
<img src="./media/beforeorafter.gif" />
|
||||||
|
<div>
|
||||||
|
Start the party before the show, or after the show. Just do what you want.
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
|
<feature>
|
||||||
|
<img src="./media/track.jpeg" />
|
||||||
|
<div>
|
||||||
|
Watch Party syncs your video with your party. Know when they pause and play.
|
||||||
|
</div>
|
||||||
|
</feature>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<footer data-font="sans">
|
||||||
|
<div class="inner">
|
||||||
|
<footerline>
|
||||||
|
<div>
|
||||||
|
© Ayushya Amitabh, 2020
|
||||||
|
</div>
|
||||||
|
<spacer></spacer>
|
||||||
|
<div>
|
||||||
|
Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
|
||||||
|
<a href="https://firebase.google.com/">Firebase</a>,
|
||||||
|
<a href="https://material-ui.com/">Material-UI</a>,
|
||||||
|
<a href="https://reactjs.org/">React JS</a> ,
|
||||||
|
<a href="https://nodejs.org/en/">Node.js</a> & <a href="https://giphy.com/">Giphy</a>
|
||||||
|
</div>
|
||||||
|
</footerline>
|
||||||
|
<footerline>
|
||||||
|
<a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
|
||||||
|
<spacer></spacer>
|
||||||
|
<a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
|
||||||
|
</footerline>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,8 +4,15 @@ function handleSticky() {
|
|||||||
} else {
|
} else {
|
||||||
document.querySelector('header').setAttribute('data-header-visible', false);
|
document.querySelector('header').setAttribute('data-header-visible', false);
|
||||||
}
|
}
|
||||||
|
if (document.querySelector('.intro')) {
|
||||||
|
const intro = document.querySelector('.intro');
|
||||||
|
intro.style = `--percentIntroScroll : ${window.scrollY / intro.offsetTop - 0.2}`;
|
||||||
|
}
|
||||||
|
if (document.querySelector('.features')) {
|
||||||
|
const features = document.querySelector('.features');
|
||||||
|
features.style = `--percentFeatureScroll : ${window.scrollY / features.offsetTop - 0.4}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
this.handleSticky();
|
|
||||||
window.addEventListener('scroll', this.handleSticky);
|
window.addEventListener('scroll', this.handleSticky);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -323,66 +323,3 @@ footer > div > span.full {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
G O O G L E F O R M S
|
|
||||||
C U S T O M I Z A T I O N
|
|
||||||
*/
|
|
||||||
.freebirdFormviewerViewHeaderTitle {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewHeaderDescription {
|
|
||||||
color: #848484 !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewHeaderHeader {
|
|
||||||
border: none !important;
|
|
||||||
background-color: black !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewHeaderThemeStripe {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewItemsItemItem {
|
|
||||||
background-color: black !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewItemsItemItem a {
|
|
||||||
font-family: 'Glacial';
|
|
||||||
color: cornflowerblue;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewItemsItemItemTitle {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewFooterEmbeddedBackground {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewItemsItemItemHelpText {
|
|
||||||
color: #848484 !important;
|
|
||||||
}
|
|
||||||
.docssharedWizToggleLabeledLabelWrapper * {
|
|
||||||
color: #848484 !important;
|
|
||||||
}
|
|
||||||
.quantumWizTextinputPaperinputContentArea input {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.quantumWizTextinputPapertextareaInput {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.freebirdThemedFilledButtonM2 {
|
|
||||||
background-color: #c0f300 !important;
|
|
||||||
}
|
|
||||||
.freebirdThemedFilledButtonM2 * {
|
|
||||||
color: black !important;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewResponseThemeStripe {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewResponseConfirmContentContainer {
|
|
||||||
background-color: black !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewResponsePageTitle {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.freebirdFormviewerViewResponseMessage {
|
|
||||||
color: #c0f300 !important;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
section.intro .inner,
|
||||||
|
section.features .inner {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|||||||
+139
-11
@@ -21,6 +21,8 @@ header {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
header brand {
|
header brand {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@@ -71,8 +73,9 @@ section.landing {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
section.landing .brand {
|
section.landing .brand {
|
||||||
font-size: 1.75rem;
|
font-size: 2rem;
|
||||||
border-radius: 1.75rem;
|
letter-spacing: 2.5px;
|
||||||
|
border-radius: 2rem;
|
||||||
border: 2px solid rgb(var(--primary));
|
border: 2px solid rgb(var(--primary));
|
||||||
padding: 10px 26px;
|
padding: 10px 26px;
|
||||||
color: rgb(var(--secondary));
|
color: rgb(var(--secondary));
|
||||||
@@ -89,31 +92,30 @@ section.landing .brand span {
|
|||||||
section.landing .get {
|
section.landing .get {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background-color: rgb(var(--primary));
|
background-color: rgb(var(--primary));
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 3.5px;
|
||||||
color: rgb(var(--secondary));
|
color: rgb(var(--secondary));
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding: 5px 13px;
|
padding: 5px 13px;
|
||||||
border-radius: 13px;
|
border-radius: 13px;
|
||||||
}
|
}
|
||||||
section.intro {
|
section.intro,
|
||||||
|
section.features {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
section.intro .inner {
|
section.intro .inner,
|
||||||
|
section.features .inner {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
}
|
}
|
||||||
section.intro .inner img {
|
section.intro .inner img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 26px;
|
border-radius: 26px;
|
||||||
transition: all ease-in-out 0.3s;
|
transition: all ease-out 0.3s;
|
||||||
border: 2px solid transparent;
|
border: 2px solid rgba(var(--secondary), var(--percentIntroScroll));
|
||||||
}
|
filter: drop-shadow(0 0 40px rgba(var(--tertiary), var(--percentIntroScroll)));
|
||||||
section.intro .inner img:hover {
|
|
||||||
border: 2px solid rgb(var(--secondary));
|
|
||||||
filter: drop-shadow(0 0 40px rgba(var(--tertiary), 0.5));
|
|
||||||
}
|
}
|
||||||
section.intro .inner .supported {
|
section.intro .inner .supported {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -125,6 +127,7 @@ section.intro .inner .supports {
|
|||||||
font-variant: all-small-caps;
|
font-variant: all-small-caps;
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 1.5px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
section.intro .inner .supported div {
|
section.intro .inner .supported div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -148,3 +151,128 @@ section.intro .inner .supported div.prime {
|
|||||||
section.intro .inner .supported div.youtube {
|
section.intro .inner .supported div.youtube {
|
||||||
background-image: url('../media/Youtube.png');
|
background-image: url('../media/Youtube.png');
|
||||||
}
|
}
|
||||||
|
section.features,
|
||||||
|
section.beta {
|
||||||
|
height: fit-content;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
section.features img {
|
||||||
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 26px;
|
||||||
|
transition: all ease-in-out 0.3s;
|
||||||
|
filter: drop-shadow(-200px 0px 5rem rgba(var(--tertiary-complement), 0.1));
|
||||||
|
}
|
||||||
|
section.features div {
|
||||||
|
color: rgb(var(--primary-complement));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-variant: all-small-caps;
|
||||||
|
letter-spacing: 2.5px;
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(1):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem rgb(var(--secondary)));
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(2):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary-complement)));
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(3):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem yellow);
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(4):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem red);
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(5):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem rgb(var(--tertiary)));
|
||||||
|
}
|
||||||
|
section.features feature:nth-of-type(6):hover img {
|
||||||
|
filter: drop-shadow(0px 0px 7rem rgb(var(--primary-complement)));
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: rgb(var(--primary));
|
||||||
|
color: rgb(var(--primary-complement));
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
footerline {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
footerline a {
|
||||||
|
display: inline-block;
|
||||||
|
color: rgb(var(--secondary));
|
||||||
|
padding: 0px 5px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 2rem;
|
||||||
|
margin: 10px 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
footer {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
G O O G L E F O R M S
|
||||||
|
C U S T O M I Z A T I O N
|
||||||
|
*/
|
||||||
|
.freebirdFormviewerViewHeaderTitle {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewHeaderDescription {
|
||||||
|
color: #848484 !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewHeaderHeader {
|
||||||
|
border: none !important;
|
||||||
|
background-color: black !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewHeaderThemeStripe {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewItemsItemItem {
|
||||||
|
background-color: black !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewItemsItemItem a {
|
||||||
|
font-family: 'Glacial';
|
||||||
|
color: cornflowerblue;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewItemsItemItemTitle {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewFooterEmbeddedBackground {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewItemsItemItemHelpText {
|
||||||
|
color: #848484 !important;
|
||||||
|
}
|
||||||
|
.docssharedWizToggleLabeledLabelWrapper * {
|
||||||
|
color: #848484 !important;
|
||||||
|
}
|
||||||
|
.quantumWizTextinputPaperinputContentArea input {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.quantumWizTextinputPapertextareaInput {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.freebirdThemedFilledButtonM2 {
|
||||||
|
font-family: 'PixelSplitter' !important;
|
||||||
|
background-color: #c0f300 !important;
|
||||||
|
}
|
||||||
|
.freebirdThemedFilledButtonM2 * {
|
||||||
|
color: black !important;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewResponseThemeStripe {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewResponseConfirmContentContainer {
|
||||||
|
background-color: black !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewResponsePageTitle {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.freebirdFormviewerViewResponseMessage {
|
||||||
|
color: #c0f300 !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
section.landing .brand {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
border-radius: 3.5rem;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
section.features feature {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
section.features feature img {
|
||||||
|
max-width: 45%;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
section.features feature div {
|
||||||
|
text-align: left;
|
||||||
|
max-width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footerline,
|
||||||
|
footerline a {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footerline a {
|
||||||
|
padding: 4px 7.5px;
|
||||||
|
}
|
||||||
|
footerline:nth-of-type(2) a {
|
||||||
|
padding: 4px 15px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
section.landing .brand {
|
||||||
|
font-size: 3rem;
|
||||||
|
border-radius: 3rem;
|
||||||
|
letter-spacing: 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.intro .inner .supported {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.intro .inner .supported div {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footerline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,49 +11,17 @@ header a {
|
|||||||
padding: 5px 13px;
|
padding: 5px 13px;
|
||||||
border-radius: 13px;
|
border-radius: 13px;
|
||||||
}
|
}
|
||||||
section.landing .brand {
|
section.intro .inner .supports {
|
||||||
font-size: 3.25rem;
|
font-size: 1.2rem;
|
||||||
border-radius: 3.25rem;
|
|
||||||
padding: 5px 45px;
|
|
||||||
}
|
}
|
||||||
section.landing .get {
|
section.features div {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
footerline:nth-of-type(2) {
|
||||||
section.intro {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
section.intro .inner {
|
footerline:nth-of-type(2) a {
|
||||||
max-width: 50%;
|
margin: 10px 0px;
|
||||||
}
|
|
||||||
section.intro .inner img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 26px;
|
|
||||||
transition: all ease-in-out 0.3s;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
}
|
|
||||||
section.intro .inner img:hover {
|
|
||||||
border: 2px solid rgb(var(--secondary));
|
|
||||||
filter: drop-shadow(0 0 40px rgba(var(--tertiary), 0.5));
|
|
||||||
}
|
|
||||||
section.intro .inner .supported {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
section.intro .inner .supports {
|
|
||||||
color: rgb(var(--secondary));
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-variant: all-small-caps;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
section.intro .inner .supported div {
|
|
||||||
flex: 1;
|
|
||||||
height: 100px;
|
|
||||||
background-size: 75%;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user