INTRODUCING STARK
@@ -146,6 +174,9 @@Monetize Your Talent
Why Stark®?
+
-
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..2010fb9
--- /dev/null
+++ b/index.js
@@ -0,0 +1,23 @@
+const hamburger = document.querySelector('.hamburger');
+const hamburgerMenu = document.querySelector('.hamburger-menu');
+const navbar = document.querySelector('.navbar');
+hamburger.addEventListener('click', () =>{
+ hamburger.classList.toggle('active');
+ hamburgerMenu.classList.toggle('visible');
+ navbar.classList.toggle('menu')
+})
+
+const featureHeading = document.querySelector('.features-heading .emphasis');
+console.log(featureHeading);
+const mediaQuery = window.matchMedia('(max-width: 1024px)');
+function handleTabletChange(e) {
+ if (e.matches) {
+ featureHeading.textContent = 'every thing';
+ }
+ else {
+ featureHeading.textContent = 'everything';
+ }
+}
+
+mediaQuery.addListener(handleTabletChange);
+handleTabletChange(mediaQuery);
\ No newline at end of file
diff --git a/style.css b/style.css
index 96bc63a..e8f0df8 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
+ overflow-wrap: break-word;
}
:root {
@@ -30,12 +31,36 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
- background: rgba(255, 255, 255, 0.05);
+ background: rgba(51, 51, 51, 0.95);
+ /* background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'style='fill-opacity%3A%200.3%3B'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); */
border-radius: 32px;
padding: 32px 24px;
margin: 32px 28px;
font-weight: 700;
- backdrop-filter: blur(30px);
+ backdrop-filter: blur(10px);
+}
+
+.hamburger {
+ display: none;
+ cursor: pointer;
+}
+
+.hamburger-menu {
+ display: none;
+}
+
+.hamburger-links {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.hamburger-links .nav-link-item a {
+ color: #fff;
+ font-size: 1.5rem;
+ text-decoration: none;
+ padding: 1rem;
+ transition: all 0.2s ease-in-out;
}
.logo-holder img {
@@ -98,14 +123,17 @@ body {
justify-content: space-between;
}
-#hero-svg-left {
+[id*="hero-svg"] {
position: absolute;
+ z-index: -1;
+}
+
+#hero-svg-left {
top: 10%;
left: 0;
}
#hero-svg-right {
- position: absolute;
top: 4%;
right: 0;
}
@@ -351,8 +379,11 @@ body {
background: url(images/earn.jpeg);
background-size: cover;
background-position: center 20%;
+ background-repeat: no-repeat;
+
+}
-}.features-card:hover {
+.features-card:hover {
transform: scale(1.01);
}
@@ -376,13 +407,19 @@ body {
.why-holder {
display: flex;
+ flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
+ gap: 15vw;
+}
+
+.why-text {
+ flex: 2;
}
.why-text-item {
margin-bottom: 60px;
- padding-right: 25vw;
+ /* padding-right: 25vw; */
}
@@ -409,7 +446,8 @@ body {
}
.why-image {
- transform: scale(1.25);
+ flex: 3;
+ overflow: hidden;
}
.footer {
@@ -484,4 +522,275 @@ body {
.footer-bottom .legal a:hover {
text-decoration: underline;
-}
\ No newline at end of file
+}
+
+
+/* Replace nav menu with hamburger under 1024px width */
+@media screen and (max-width: 1024px){
+
+ .navbar {
+ margin-top: 0;
+ top: 0px;
+ border-radius: 0 0 32px 32px;
+ padding: 0 24px;
+ height: 10svh;
+ }
+ .nav-links {
+ display: none;
+ }
+ .login-btn-container {
+ display: none;
+ }
+
+ .hamburger, .hamburger::before, .hamburger::after {
+ display: block;
+ background-color: #fff;
+ width: 30px;
+ height: 3px;
+ border-radius: 2px;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .hamburger::before {
+ content: '';
+ margin-top: -8px;
+ }
+
+ .hamburger::after {
+ content: '';
+ margin-top: 12px;
+ }
+
+ .hamburger.active{
+ background-color: var(--yes);
+ rotate: 360deg;
+ }
+
+ .hamburger.active::before {
+ rotate: 45deg;
+ margin-top: 0px;
+ }
+
+ .hamburger.active::after {
+ rotate: -45deg;
+ margin-top: -4px;
+ }
+
+ .navbar.menu {
+ position: fixed;
+ background: #1b1b1b;
+ width: 100%;
+ margin: 0;
+ border-radius: 0;
+ padding: 0 52px;
+ border-bottom: solid 2px #fff;
+ }
+
+ .hamburger-links > * {
+ flex: 1;
+ border-bottom: dashed 2px #fff;
+ display: flex;
+ align-items: center;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .hamburger-links > *:hover {
+ background: #fff;
+ }
+ .hamburger-links a {
+ transition: all 0.2s ease-in-out;
+ width: 100%;
+ }
+
+ .hamburger-links *:hover a {
+ color: var(--accent-color);
+ }
+
+ .hamburger-menu.visible {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: fixed;
+ top: 10svh;
+ height: 90svh;
+ width: 100%;
+ background: #1b1b1b;
+ z-index: 999;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .hamburger-links {
+ flex: 3;
+ }
+
+ .hamburger-login-btn-container {
+ flex: 2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 3rem;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .hamburger-login-btn-container p {
+ color: #fff;
+ font-family: Inter;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ text-align: center;
+ }
+
+ .hamburger-login-btn-container a {
+ color: var(--accent-color);
+ font-weight: 700;
+ text-decoration: none;
+ }
+
+ .hamburger-login-btn-container a:hover {
+ text-decoration: underline;
+ }
+
+ #hamburger-login-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font-weight: 700;
+ width: 60%;
+ background: var(--accent-color);
+ color: #fff;
+ padding: 32px 16px;
+ border-radius: 32px;
+ font-size: 1.5rem;
+ text-decoration: none;
+ user-select: none;
+ cursor: pointer;
+ border: 1px solid #00000000;
+ transition: all 0.2s ease-in-out;
+ }
+
+ #hamburger-login-btn:hover {
+ border-radius: 10px;
+ }
+
+ .why-holder {
+ display: block;
+ }
+
+ .why-image {
+ display: flex;
+ justify-content: center;
+ }
+
+ .overview-images {
+ gap: 2vw;
+ }
+
+ .legal {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .legal > * {
+ margin: 0;
+ }
+
+}
+
+
+/* under 768px width */
+@media screen and (max-width: 768px) {
+
+ .overview {
+ margin: 100px 10px 10px;
+ padding: 100px 0px;
+ }
+
+ .overview-images {
+ padding: 0 60px;
+ display: grid;
+ gap: 30px; ;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .overview-image-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .overview-text {
+ margin: 40px 50px;
+ }
+
+ .whystark {
+ padding: 100px 40px;
+ }
+
+ .features {
+ padding: 100px 0;
+ }
+
+ .hero-text {
+ padding: 40px;
+ }
+
+ .features-container {
+ padding: 40px;
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(15,30px) ;
+ gap: 100px;
+ }
+
+ .features-heading {
+ padding: 100px 0;
+ }
+
+ .features-card:nth-child(1) {
+ grid-area: 1/1/6/2;
+ }
+
+ .features-card:nth-child(1) .features-card-text {
+ display: block;
+ text-align: left;
+ }
+
+ .features-card:nth-child(1) .features-card-text h2 {
+ margin-bottom: 1rem;
+ }
+
+ .features-card:nth-child(2) {
+ grid-area: 6/1/11/2;
+ }
+
+ .features-card:nth-child(3) {
+ grid-area: 11/1/16/2;
+ }
+
+ .footer {
+ margin: 100px 15px 0;
+ padding: 65px 40px 35px;
+ border-radius: 50px 50px 0px 0px;
+ background: #313131;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .footer-links {
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ .hero-btn-container {
+ gap: 20px;
+ flex-direction: column;
+ }
+ #hero-svg-left {
+ top: 10%;
+ left: -50%;
+ }
+}
+ 
+
+
@@ -234,9 +265,6 @@
Why Stark®?
Build your reputation and trust in the community.
-
-
-