diff --git a/dist/fonts/Roboto-Regular-webfont.woff b/dist/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7..0000000 Binary files a/dist/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/dist/images/logo.svg b/dist/images/logo.svg deleted file mode 100644 index 058f4c3..0000000 --- a/dist/images/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index f26f42b..0000000 --- a/dist/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Title - - - - Logo -

Hello Mate academy

- - - diff --git a/dist/scripts/main.js b/dist/scripts/main.js deleted file mode 100644 index df811b4..0000000 --- a/dist/scripts/main.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict'; - -console.log('hello mate academy!'); diff --git a/dist/styles/main.css b/dist/styles/main.css deleted file mode 100644 index d04391a..0000000 --- a/dist/styles/main.css +++ /dev/null @@ -1,14 +0,0 @@ -h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; } - -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; } - -body { - background: #eee; } - -/*# sourceMappingURL=main.css.map */ diff --git a/dist/styles/main.css.map b/dist/styles/main.css.map deleted file mode 100644 index b97d669..0000000 --- a/dist/styles/main.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["utils/_extends.scss","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,iCAAiC;EACjC,gBAAgB,EAAA;;ACFlB;EACE,qBAAqB;EACrB,+DAA+D;EAC/D,mBAAmB;EACnB,kBAAkB,EAAA;;ACApB;EACE,gBCLW,EAAA","file":"main.css","sourcesContent":["%h1 {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n}\n","@font-face {\n font-family: \"Roboto\";\n src: url(\"../fonts/Roboto-Regular-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n","@import \"utils\";\n@import \"fonts\";\n@import \"typography\";\n\nbody {\n background: $c-gray;\n}\n","$c-gray: #eee;\n"]} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index c5aac67..6bb647e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,11 +19,14 @@ const imagesBlob = 'src/images/**'; const fontsBlob = 'src/fonts/**'; const stylesBlob = 'src/styles/**'; const jsBlob = 'src/scripts/**'; +const faviconBlob = 'src/favicon/**'; const { series, parallel } = gulp; gulp.task('cleanDist', function() { - return gulp.src(distDirectory, { read: false, allowEmpty: true }) + return gulp.src(distDirectory, { + read: false, allowEmpty: true, + }) .pipe(clean()); }); @@ -34,6 +37,8 @@ gulp.task('processHtml', function() { }, function(filepath, issues) { issues.forEach(function(issue) { const { line, column, code, msg } = issue; + + // eslint-disable-next-line no-console console.log( ` ❌ ${colors.red('htmllint error')} 📁 file: ${filepath} @@ -48,6 +53,11 @@ gulp.task('processImages', function() { .pipe(gulp.dest(`${distDirectory}/images/`)); }); +gulp.task('processFavicon', function() { + return gulp.src(faviconBlob) + .pipe(gulp.dest(distDirectory)); +}); + gulp.task('processFonts', function() { return gulp.src(fontsBlob) .pipe(gulp.dest(`${distDirectory}/fonts/`)); @@ -59,7 +69,9 @@ gulp.task('lintCss', function() { .pipe(gulpStylelint({ failAfterError: false, reporters: [ - { formatter: 'string', console: true }, + { + formatter: 'string', console: true, + }, ], debug: true, })); @@ -91,6 +103,7 @@ gulp.task('build', series( 'processStyles', 'processHtml', 'processImages', + 'processFavicon', 'processFonts', 'processJs', ) @@ -110,6 +123,9 @@ gulp.task('serve', function() { gulp.watch(imagesBlob, series('processImages')) .on('change', browserSync.reload); + gulp.watch(faviconBlob, series('processFavicon')) + .on('change', browserSync.reload); + gulp.watch(fontsBlob, series('processFonts')) .on('change', browserSync.reload); diff --git a/src/favicon/android-icon-144x144.png b/src/favicon/android-icon-144x144.png new file mode 100644 index 0000000..5fe06e9 Binary files /dev/null and b/src/favicon/android-icon-144x144.png differ diff --git a/src/favicon/android-icon-192x192.png b/src/favicon/android-icon-192x192.png new file mode 100644 index 0000000..839ecbd Binary files /dev/null and b/src/favicon/android-icon-192x192.png differ diff --git a/src/favicon/android-icon-36x36.png b/src/favicon/android-icon-36x36.png new file mode 100644 index 0000000..30b366d Binary files /dev/null and b/src/favicon/android-icon-36x36.png differ diff --git a/src/favicon/android-icon-48x48.png b/src/favicon/android-icon-48x48.png new file mode 100644 index 0000000..23193cf Binary files /dev/null and b/src/favicon/android-icon-48x48.png differ diff --git a/src/favicon/android-icon-72x72.png b/src/favicon/android-icon-72x72.png new file mode 100644 index 0000000..a26c315 Binary files /dev/null and b/src/favicon/android-icon-72x72.png differ diff --git a/src/favicon/android-icon-96x96.png b/src/favicon/android-icon-96x96.png new file mode 100644 index 0000000..d86763f Binary files /dev/null and b/src/favicon/android-icon-96x96.png differ diff --git a/src/favicon/apple-icon-114x114.png b/src/favicon/apple-icon-114x114.png new file mode 100644 index 0000000..d39c79d Binary files /dev/null and b/src/favicon/apple-icon-114x114.png differ diff --git a/src/favicon/apple-icon-120x120.png b/src/favicon/apple-icon-120x120.png new file mode 100644 index 0000000..05faeff Binary files /dev/null and b/src/favicon/apple-icon-120x120.png differ diff --git a/src/favicon/apple-icon-144x144.png b/src/favicon/apple-icon-144x144.png new file mode 100644 index 0000000..5fe06e9 Binary files /dev/null and b/src/favicon/apple-icon-144x144.png differ diff --git a/src/favicon/apple-icon-152x152.png b/src/favicon/apple-icon-152x152.png new file mode 100644 index 0000000..a32e708 Binary files /dev/null and b/src/favicon/apple-icon-152x152.png differ diff --git a/src/favicon/apple-icon-180x180.png b/src/favicon/apple-icon-180x180.png new file mode 100644 index 0000000..0cfb929 Binary files /dev/null and b/src/favicon/apple-icon-180x180.png differ diff --git a/src/favicon/apple-icon-57x57.png b/src/favicon/apple-icon-57x57.png new file mode 100644 index 0000000..8765a2a Binary files /dev/null and b/src/favicon/apple-icon-57x57.png differ diff --git a/src/favicon/apple-icon-60x60.png b/src/favicon/apple-icon-60x60.png new file mode 100644 index 0000000..c1fb56b Binary files /dev/null and b/src/favicon/apple-icon-60x60.png differ diff --git a/src/favicon/apple-icon-72x72.png b/src/favicon/apple-icon-72x72.png new file mode 100644 index 0000000..a26c315 Binary files /dev/null and b/src/favicon/apple-icon-72x72.png differ diff --git a/src/favicon/apple-icon-76x76.png b/src/favicon/apple-icon-76x76.png new file mode 100644 index 0000000..01598c5 Binary files /dev/null and b/src/favicon/apple-icon-76x76.png differ diff --git a/src/favicon/apple-icon-precomposed.png b/src/favicon/apple-icon-precomposed.png new file mode 100644 index 0000000..2647ad6 Binary files /dev/null and b/src/favicon/apple-icon-precomposed.png differ diff --git a/src/favicon/apple-icon.png b/src/favicon/apple-icon.png new file mode 100644 index 0000000..2647ad6 Binary files /dev/null and b/src/favicon/apple-icon.png differ diff --git a/src/favicon/browserconfig.xml b/src/favicon/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/src/favicon/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/src/favicon/favicon-16x16.png b/src/favicon/favicon-16x16.png new file mode 100644 index 0000000..3a59a2e Binary files /dev/null and b/src/favicon/favicon-16x16.png differ diff --git a/src/favicon/favicon-32x32.png b/src/favicon/favicon-32x32.png new file mode 100644 index 0000000..32476d3 Binary files /dev/null and b/src/favicon/favicon-32x32.png differ diff --git a/src/favicon/favicon-96x96.png b/src/favicon/favicon-96x96.png new file mode 100644 index 0000000..d86763f Binary files /dev/null and b/src/favicon/favicon-96x96.png differ diff --git a/src/favicon/favicon.ico b/src/favicon/favicon.ico new file mode 100644 index 0000000..e1c0e61 Binary files /dev/null and b/src/favicon/favicon.ico differ diff --git a/src/favicon/ms-icon-144x144.png b/src/favicon/ms-icon-144x144.png new file mode 100644 index 0000000..5fe06e9 Binary files /dev/null and b/src/favicon/ms-icon-144x144.png differ diff --git a/src/favicon/ms-icon-150x150.png b/src/favicon/ms-icon-150x150.png new file mode 100644 index 0000000..1750103 Binary files /dev/null and b/src/favicon/ms-icon-150x150.png differ diff --git a/src/favicon/ms-icon-310x310.png b/src/favicon/ms-icon-310x310.png new file mode 100644 index 0000000..6cf66cb Binary files /dev/null and b/src/favicon/ms-icon-310x310.png differ diff --git a/src/favicon/ms-icon-70x70.png b/src/favicon/ms-icon-70x70.png new file mode 100644 index 0000000..d047d26 Binary files /dev/null and b/src/favicon/ms-icon-70x70.png differ diff --git a/src/fonts/Mark-Heavy.ttf b/src/fonts/Mark-Heavy.ttf new file mode 100644 index 0000000..867b267 Binary files /dev/null and b/src/fonts/Mark-Heavy.ttf differ diff --git a/src/fonts/Mark-Medium.ttf b/src/fonts/Mark-Medium.ttf new file mode 100644 index 0000000..2ec17a8 Binary files /dev/null and b/src/fonts/Mark-Medium.ttf differ diff --git a/src/fonts/Mark-Regular.ttf b/src/fonts/Mark-Regular.ttf new file mode 100644 index 0000000..3c424f9 Binary files /dev/null and b/src/fonts/Mark-Regular.ttf differ diff --git a/src/fonts/Quantum.otf b/src/fonts/Quantum.otf new file mode 100644 index 0000000..b26c789 Binary files /dev/null and b/src/fonts/Quantum.otf differ diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7..0000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/about-product.png b/src/images/about-product.png new file mode 100644 index 0000000..b7ed041 Binary files /dev/null and b/src/images/about-product.png differ diff --git a/src/images/about-product_mobile.png b/src/images/about-product_mobile.png new file mode 100644 index 0000000..55e026c Binary files /dev/null and b/src/images/about-product_mobile.png differ diff --git a/src/images/control-panel.svg b/src/images/control-panel.svg new file mode 100644 index 0000000..cb54186 --- /dev/null +++ b/src/images/control-panel.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/education.svg b/src/images/education.svg new file mode 100644 index 0000000..0757371 --- /dev/null +++ b/src/images/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 0000000..e4de883 --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/fitness.svg b/src/images/fitness.svg new file mode 100644 index 0000000..d6f2040 --- /dev/null +++ b/src/images/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/katTech.png b/src/images/katTech.png new file mode 100644 index 0000000..c1b02aa Binary files /dev/null and b/src/images/katTech.png differ diff --git a/src/images/katVR__tablet.png b/src/images/katVR__tablet.png new file mode 100644 index 0000000..453f01a Binary files /dev/null and b/src/images/katVR__tablet.png differ diff --git a/src/images/katVR__tablet1.png b/src/images/katVR__tablet1.png new file mode 100644 index 0000000..3aba373 Binary files /dev/null and b/src/images/katVR__tablet1.png differ diff --git a/src/images/katVR__tablet2.png b/src/images/katVR__tablet2.png new file mode 100644 index 0000000..ac66a05 Binary files /dev/null and b/src/images/katVR__tablet2.png differ diff --git a/src/images/katVR_lg.png b/src/images/katVR_lg.png new file mode 100644 index 0000000..d6a750d Binary files /dev/null and b/src/images/katVR_lg.png differ diff --git a/src/images/katVR_logo.svg b/src/images/katVR_logo.svg new file mode 100644 index 0000000..105f9e7 --- /dev/null +++ b/src/images/katVR_logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/katVR_md.png b/src/images/katVR_md.png new file mode 100644 index 0000000..515f957 Binary files /dev/null and b/src/images/katVR_md.png differ diff --git a/src/images/katVR_mobile.png b/src/images/katVR_mobile.png new file mode 100644 index 0000000..885d0b3 Binary files /dev/null and b/src/images/katVR_mobile.png differ diff --git a/src/images/network.svg b/src/images/network.svg new file mode 100644 index 0000000..78c83a8 --- /dev/null +++ b/src/images/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/robot.svg b/src/images/robot.svg new file mode 100644 index 0000000..53bade5 --- /dev/null +++ b/src/images/robot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/skyline.svg b/src/images/skyline.svg new file mode 100644 index 0000000..dbaed9f --- /dev/null +++ b/src/images/skyline.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 0000000..084900b --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/universally.svg b/src/images/universally.svg new file mode 100644 index 0000000..575fab1 --- /dev/null +++ b/src/images/universally.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/wireless.svg b/src/images/wireless.svg new file mode 100644 index 0000000..f41ec58 --- /dev/null +++ b/src/images/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/youtube.svg b/src/images/youtube.svg new file mode 100644 index 0000000..7d1775f --- /dev/null +++ b/src/images/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.html b/src/index.html index 300ceb0..0efda9f 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,340 @@ - Title + + + + + + + + + + + + + + + + + + Kat VR - Logo -

Hello Mate Academy

+
+ + Kat VR + + + + +
+
+
+ Buy now +
+
+
+
+ + + + + katVR sensors + +

The new start of
VR Motion

+
+

Discover the most comprehensive VR Locomotion system, and unlock infinite motion in any games on any platforms!

+

1200$

+ +
+
+
+ + More + +
+
+
+
+
+

More than gaming

+

This also made for people who are interested in...

+
+
+ education +

Education

+

Create educational simulations, trainings and much more with unlimited virtual space and minimum physical space

+
+
+ skyline +

Real estate

+

Design architectural projects in a deeply realistic environment allowing visitors to freely walk around, and feel their vibe

+
+
+ fitness +

Fitness

+

Combine business with pleasure, and discover countless ways to stay fit while playing your favorite VR Games!

+
+
+ network +

Social interactions

+

Hang out with your friends in the virtual world when you can’t meet space requirements

+
+
+
+
+
+
+
+ about katVR +
+

About product

+

KAT loco is a foot-based VR locomotion system that gives complete physical control over lower-body actions, allowing you to freely walk, run, and carry out just any other movement in virtual reality.

+ +
+
+
+
+

Hello,

+

Nice to meet you!

+

KAT VR is an independent company dedicated to the research, development, and sales of VR Locomotion products and solutions. Founded in 2013, we have quickly grown to become one of the world’s leading professional suppliers of VR games’ & simulations’ equipment

+
+
+ About us + About us + About us + About us + About us + About us + About us +
+
+
+
+
+
+

Tech specs

+
+ katVR tech specs + + + + + + + + + +
+

Sensor

+
    +
  • Weight: 35g/1.23oz each
    • +
  • Dimension: 50mm/1.97in
    • +
  • 24mm/0.94in
    • +
  • Light: LED lights
    • +
+
+ + + + + + + + +
+

Connection

+
    +
  • Wireless: Bluetooth 4.2
    • +
  • Signal range: 5m
    • +
  • Receiver: USB 2.0 and above
    • +
+
+ + + + + + + +
+

Batteries

+
    +
  • Type: Lthium-lon polymer batteries
    • +
  • Capacity: 370mAh
    • +
  • Battery life: 10h of continuous use 150 hours on stand by
    • +
  • Charging: Fast charging - 1 hour
    • +
  • Charging voltage and current: 5V = 0.5A
    • +
+
+
+
+
+
+
+

Why kat loco?

+
+
+ universally +

Universally compatible

+

KAT Loco offers universal compatibility across all major VR headsets and platforms allowing you to play any VR game with support for Free Locomotion

+
+
+ control panel +

VR/PC control panel

+

Our Multifunctional Software allows for quick access to KAT Loco’s control panel both from a computer desktop, and directly from your VR headset.

+
+
+ wireless +

Wireless sensors

+

What makes it even more advanced, KAT Loco is entirely wireless, and comes with a complete system of algorithms, super durable batteries and more!

+
+
+ Buy now +
+
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+

Our manager will reply you within 15 minutes

+
+
+ +
+
+ +
diff --git a/src/scripts/main.js b/src/scripts/main.js index df811b4..4659c89 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,65 @@ 'use strict'; -console.log('hello mate academy!'); +const techSpecs = document.querySelector('.kat-tech'); +const techSpecsContainers = document.querySelectorAll('.kat-tech__spec'); +const techSpecsLines = document.querySelectorAll('.kat-tech__line'); + +const [a1, a2, a3] = [ + document.getElementById('a1'), + document.getElementById('a2'), + document.getElementById('a3'), +]; + +const intersectionObserver = new IntersectionObserver( + (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + [...techSpecsContainers, ...techSpecsLines].forEach( + container => container.classList.toggle('is-active') + ); + a1.beginElement(); + a2.beginElement(); + a3.beginElement(); + observer.unobserve(techSpecs); + } + }); + }, { + threshold: 0.8, + }); + +intersectionObserver.observe(techSpecs); + +const infoButtons = document.querySelectorAll('.kat-tech__button'); +const toggleActive = (e) => { + const { target } = e; + + if (target.classList.contains('is-active')) { + target.classList.remove('is-active'); + } else { + infoButtons.forEach(button => { + button.classList.remove('is-active'); + }); + target.classList.add('is-active'); + } +}; + +infoButtons.forEach(button => { + button.addEventListener('click', toggleActive, false); +}); + +document.addEventListener('click', (e) => { + const { target } = e; + + if (!target.classList.contains('kat-tech__button')) { + infoButtons.forEach(button => { + button.classList.remove('is-active'); + }); + } +}); + +// burger button +const burger = document.querySelector('.header__burger-button'); + +burger.addEventListener('click', () => { + burger.classList.toggle('is-active'); +}); diff --git a/src/styles/_about-product.scss b/src/styles/_about-product.scss new file mode 100644 index 0000000..8c398be --- /dev/null +++ b/src/styles/_about-product.scss @@ -0,0 +1,77 @@ +.about-product { + max-width: 1000px; + margin: 0 0 100px auto; + display: flex; + flex-direction: column; + + &__inner { + width: 330px; + text-align: left; + @include for-tablet-portrait-up { + text-align: center; + margin: 0 auto; + } + @include for-tablet-landscape-up { + padding-right: 48px; + margin-left: 50px; + text-align: left; + } + @include for-desktop-up { + margin-left: 100px; + } + } + + &__header { + margin: 0 0 32px; + text-align: left; + + @include for-tablet-portrait-up { + text-align: center; + } + + @include for-tablet-landscape-up { + text-align: left; + } + } + + &__description { + margin: 0 0 48px; + } + + &__play-button { + display: block; + margin: 0 auto; + + @include for-tablet-landscape-up { + display: inline-block; + margin: 0; + } + } + + @include for-tablet-landscape-up { + flex-direction: row; + justify-content: space-between; + align-items: center; + } +} + +.about-product__img { + display: block; + height: auto; + width: 100%; + margin-bottom: 32px; + + @include for-tablet-portrait-up { + width: 80%; + margin: 0 auto 32px; + } + + @include for-tablet-landscape-up { + width: calc(100% - 450px); + margin: 0; + } + + @include for-desktop-up { + width: calc(100% - 500px); + } +} diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss new file mode 100644 index 0000000..b8e8bd8 --- /dev/null +++ b/src/styles/_about-us.scss @@ -0,0 +1,51 @@ +.about-us { + display: flex; + align-items: center; + position: relative; + + &__inner { + @include for-tablet-portrait-up { + margin-right: 50px; + width: 430px; + } + + @include for-tablet-landscape-up { + margin-right: 100px; + } + } +} + +.about-us__decor { + position: absolute; + left: 650px; + top: 50%; + display: none; + flex-direction: column-reverse; + transform: rotate(-90deg) translateX(50%); + pointer-events: none; + width: 400px; + height: 400px; + + @include for-tablet-portrait-up { + display: flex; + } +} + +.about-us__decor-el { + text-transform: uppercase; + font-weight: 900; + font-size: 64px; + -webkit-text-stroke: 1px $contrast; + width: 335px; + height: 80px; + + &:nth-child(2n+1) { + transform: rotate(180deg); + } +} + +@for $i from 1 through 5 { + .about-us__decor-el:nth-child(n + #{$i}) { + opacity: calc(0.08 * #{$i}); + } +} diff --git a/src/styles/_advantages.scss b/src/styles/_advantages.scss new file mode 100644 index 0000000..e227167 --- /dev/null +++ b/src/styles/_advantages.scss @@ -0,0 +1,62 @@ +.advantages { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.advantages__card { + display: flex; + flex-direction: column; + box-sizing: border-box; + + @include for-phone-only { + flex-basis: 100%; + margin-bottom: 20px; + + } + + @include for-tablet-portrait-up { + flex-basis: 340px; + margin-bottom: 40px; + align-items: center; + } + + @include for-tablet-landscape-up { + flex-basis: 400px; + padding: 0 40px; + } + + @include for-desktop-up { + flex-basis: 250px; + margin-bottom: 0; + padding: 0; + } +} + +.advantages__img { + margin-bottom: 32px; + display: none; + + @include for-tablet-portrait-up { + display: block; + } +} + +.advantages__description { + margin: 0; + + @include for-tablet-portrait-up { + text-align: center; + } +} + +.advantages__header { + margin-bottom: 16px; + text-align: left; + + @include for-tablet-portrait-up { + text-align: center; + } +} diff --git a/src/styles/_burger-button.scss b/src/styles/_burger-button.scss new file mode 100644 index 0000000..32d8c64 --- /dev/null +++ b/src/styles/_burger-button.scss @@ -0,0 +1,60 @@ +.burger-button__el { + display: block; + position: absolute; + height: 1px; + background-color: $white; + width: 70%; + right: 0; + transform-origin: left center; + transition-property: transform, opacity; + transition-timing-function: $transition-ease; + transition-duration: $transition-duration; + + &--top { + top: 0; + } + + &--middle { + right: auto; + left: 0; + top: 50%; + transform: translate(0, -50%); + } + + &--bottom { + bottom: 0; + } +} + +.burger-button { + height: 14px; + width: 30px; + border: none; + cursor: pointer; + background-color: transparent; + position: relative; + margin: 0; + padding: 0; + + &:hover, + &:focus { + outline: none; + .burger-button__el--middle { + transform: translate(-5px, -50%); + } + } + + &.is-active { + .burger-button__el--middle { + transform: translate(-30px, -50%); + opacity: 0; + pointer-events: none; + } + .burger-button__el--top { + transform: rotate(45deg) translate(-1px, -1px); + } + .burger-button__el--bottom { + transform: rotate(-45deg); + } + } +} diff --git a/src/styles/_contacts.scss b/src/styles/_contacts.scss new file mode 100644 index 0000000..3007990 --- /dev/null +++ b/src/styles/_contacts.scss @@ -0,0 +1,20 @@ +.contacts { + flex-direction: column; + justify-content: flex-start; + font-style: normal; +} + +.contacts__contact-link { + color: $text; + font-weight: 400; + margin-bottom: 10px; + transition-property: color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + + &:hover, + &:focus { + outline: none; + color: $contrast; + } +} diff --git a/src/styles/_fixed-area.scss b/src/styles/_fixed-area.scss new file mode 100644 index 0000000..7c24798 --- /dev/null +++ b/src/styles/_fixed-area.scss @@ -0,0 +1,25 @@ +.fixed-area { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + bottom: 0; + right: 0; + left: 0; + height: 60px; + padding: 10px 20px; + z-index: 2; + background: linear-gradient(transparent 0.67%, black 100%); + @include for-tablet-landscape-up { + display: none; + } +} + +.fixed-area__buy-now { + text-align: center; + width: 40%; + + @include for-phone-only { + width: 100%; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3f..877f3e6 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,23 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: Mark; + src: url("../fonts/Mark-Heavy.ttf") format("truetype"); + font-weight: 900; +} + +@font-face { + font-family: Mark; + src: url("../fonts/Mark-Regular.ttf") format("truetype"); font-weight: normal; - font-style: normal; +} + +@font-face { + font-family: Mark; + src: url("../fonts/Mark-Medium.ttf") format("truetype"); + font-weight: 700; +} + +@font-face { + font-family: Quantum; + src: url("../fonts/Quantum.otf") format("opentype"); + font-weight: 700; } diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000..5d03a0c --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,87 @@ +.footer { + display: flex; + height: 100px; + justify-content: space-between; + align-items: center; + margin: 0 auto 60px; + position: relative; + z-index: 1; + max-width: 1400px; + + &__contacts { + display: none; + } + + .footer__nav { + @include for-tablet-portrait-up { + display: none; + + &--social { + display: flex; + width: auto; + } + } + + @include for-tablet-landscape-up { + display: block; + &--social { + display: flex; + width: 250px; + } + } + } + + @include for-phone-only { + flex-direction: column; + padding: 45px 0 50px; + height: 190px; + justify-content: stretch; + align-items: flex-start; + flex-wrap: wrap; + + &__logo { + margin-bottom: 16px; + } + + &__nav-list { + flex-direction: column; + align-items: flex-start; + } + + &__nav-item { + margin: 0; + } + + &__nav-link { + padding: 8px 0; + } + + &__contacts { + display: inline-flex; + margin: auto 0 16px auto; + } + } + + @include for-tablet-landscape-up { + margin-bottom: 0; + } +} + +.footer__logo { + @include for-tablet-portrait-up { + width: 250px; + } +} + +.footer__nav--social { + display: flex; + justify-content: flex-end; + + .nav__list { + display: inline-flex; + } + + @include for-phone-only { + margin-left: auto; + } +} diff --git a/src/styles/_form.scss b/src/styles/_form.scss new file mode 100644 index 0000000..745ad4b --- /dev/null +++ b/src/styles/_form.scss @@ -0,0 +1,102 @@ +.form { + display: flex; + flex-direction: column; +} + +.form__submit { + width: 100%; + + @include for-tablet-portrait-up { + width: 200px; + } +} + +.form__input-outer { + height: 60px; + margin-bottom: 12px; + width: 100%; + display: flex; + align-items: flex-end; + position: relative; + + @include for-tablet-landscape-up { + margin-bottom: 24px; + } +} + +.form__textarea-outer { + height: 148px; + margin-bottom: 40px; + + @include for-tablet-landscape-up { + margin-bottom: 100px; + } +} + +.form__label { + position: absolute; + top: 24px; + left: 6px; + color: $text; + cursor: text; + line-height: 150%; + font-size: 14px; + transition-property: transform, color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; +} + +.form__input { + height: 40px; + width: 100%; + padding: 6px; + line-height: 150%; + background-color: transparent; + border: none; + border-bottom: 1px solid $dark-grey; + box-sizing: border-box; + font-size: 16px; + color: $white; + caret-color: $contrast; + cursor: text; + transition-property: border-bottom-color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + + &::placeholder { + font-family: Mark, sans-serif; + font-size: 16px; + color: $text; + } + + &:focus { + outline: none; + border-bottom-color: $contrast; + } + + &:placeholder-shown::placeholder { + opacity: 0; + transition-property: opacity; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + } + + &:focus:placeholder-shown::placeholder { + opacity: 1; + } + + &:not(:placeholder-shown) + .form__label, + &:focus + .form__label { + transform: translateY(-24px); + color: $contrast; + + @include for-tablet-landscape-up { + transform: translateY(-32px); + } + } +} + +.form__textarea { + height: 120px; + resize: none; +} diff --git a/src/styles/_get-in-touch.scss b/src/styles/_get-in-touch.scss new file mode 100644 index 0000000..56b54b6 --- /dev/null +++ b/src/styles/_get-in-touch.scss @@ -0,0 +1,53 @@ +.get-in-touch { + display: flex; + flex-direction: column; + width: 100%; + + @include for-tablet-portrait-up { + flex-direction: row; + justify-content: space-between; + } +} + +.get-in-touch__header { + margin: 0 0 24px; +} + +.get-in-touch__description { + margin: 0 0 50px; + display: none; + + &--mobile { + margin: 24px 0 50px; + } + + @include for-tablet-portrait-up { + &--mobile { + display: none; + } + } +} + +.get-in-touch__content { + width: 100%; + + @include for-tablet-portrait-up { + width: 46%; + } +} + +.get-in-touch__form { + width: 100%; + + @include for-tablet-portrait-up { + width: 50%; + } +} + +.get-in-touch__contacts { + display: none; + + @include for-tablet-portrait-up { + display: inline-flex; + } +} diff --git a/src/styles/_header-cover.scss b/src/styles/_header-cover.scss new file mode 100644 index 0000000..2aedab7 --- /dev/null +++ b/src/styles/_header-cover.scss @@ -0,0 +1,129 @@ +.header-cover { + position: relative; + box-sizing: border-box; + padding: 40px 0; + max-width: 1400px; + margin: 0 auto; + + @include for-tablet-landscape-up { + padding-top: 32px; + height: calc(100vh - 180px); + max-height: 768px; + padding-bottom: 100px; + min-height: 500px; + } +} + +.header-cover__img { + position: absolute; + width: 100%; + z-index: -1; + top: 20%; + right: 0; + transform: translate(50px, -100px); + opacity: 0; + transition-property: opacity, transform; + transition-duration: $transition-duration-long; + transition-timing-function: ease; + + @include for-desktop-up { + width: 60%; + } + + &.is-active { + transform: translate(50px, 0); + opacity: 1; + } +} + +.header-cover__description-wrapper { + + @include for-tablet-portrait-up { + max-width: 320px; + } + + @include for-desktop-up { + margin-left: 90px; + } +} + +.header-cover__description { + margin-bottom: 8px; +} + +.header-cover__price { + font-size: 18px; + margin-bottom: 48px; + color: $white; + + @include for-phone-only { + text-align: center; + } +} + +.header-cover__header { + text-align: left; + margin: 0 0 16px; +} + +// navigation +.header-cover__navigation { + display: none; + position: absolute; + width: 100%; + bottom: 24px; + left: 0; + + @include for-tablet-landscape-up { + display: block; + } +} + +.header-cover__more-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + background-color: transparent; + border: none; + + font-weight: 700; + font-size: 16px; + padding: 16px; + color: $contrast; + cursor: pointer; + letter-spacing: 0.15em; + + transition-property: color; + transition-timing-function: $transition-ease; + transition-duration: $transition-duration; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + border: 10px solid transparent; + border-top-color: $contrast; + transform: translate(-50%, 60%); + transition-property: border-color, transform; + transition-timing-function: $transition-ease; + transition-duration: $transition-duration; + } + + &:visited { + color: $contrast; + } + + &:hover, + &:focus { + outline: none; + color: $white; + + &::after { + border-top-color: $white; + transform: translate(-50%, 120%); + } + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000..5799c75 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,82 @@ +@import "utils/vars"; +@import "utils/extends"; + +.header { + padding: 18px 20px; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1400px; + margin: 0 auto; + + @include for-tablet-portrait-up { + padding: 18px 30px; + } + + @include for-tablet-landscape-up { + padding: 64px 50px; + } + + @include for-desktop-up { + padding: 64px 110px; + } +} + +.header__button { + box-sizing: border-box; + width: 200px; + text-align: center; +} + +.header__nav { + display: none; + @include for-tablet-landscape-up { + display: block; + } +} + +.header__nav--burger { + display: block; + transform: translateY(-100%); + position: absolute; + box-sizing: border-box; + width: 100%; + padding: 32px; + background-color: $purple; + top: 0; + left: 0; + opacity: 0; + z-index: 2; + + .nav__list { + flex-direction: column; + } + + transition-property: transform, opacity; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + + @include for-tablet-landscape-up { + display: none; + } +} + +.header__burger-button { + position: relative; + z-index: 3; + &.is-active { + ~ .header__nav--burger { + display: block; + transform: translateY(0); + opacity: 1; + + @include for-tablet-landscape-up { + display: none; + } + } + } + + @include for-tablet-landscape-up { + display: none; + } +} diff --git a/src/styles/_kat-tech.scss b/src/styles/_kat-tech.scss new file mode 100644 index 0000000..757c0d1 --- /dev/null +++ b/src/styles/_kat-tech.scss @@ -0,0 +1,234 @@ +.kat-tech__img { + display: block; + max-height: 300px; + max-width: 300px; + width: 100%; + height: auto; + margin: 0 auto; +} + +.kat-tech__header { + margin: 0 0 80px; +} + +.kat-tech__spec-list-item { + color: $text; + line-height: 150%; +} + +.kat-tech__container { + outline: none; + padding-top: 60px; + position: relative; +} + +.kat-tech__spec { + opacity: 0; + pointer-events: none; + transform: translateY(-50px); + transition-property: opacity, transform; + transition-duration: $transition-duration-long, $transition-duration; + transition-timing-function: $transition-ease; + position: absolute; + + background-color: $purple; + border-radius: 8px; + padding: 16px; + font-size: 14px; + + .kat-tech__spec-header { + font-size: 16px; + margin-bottom: 8px; + } + + &--connection { + width: 200px; + top: 43%; + left: 5%; + } + &--batteries { + width: 240px; + top: -13%; + right: 0; + } + &--sensor { + top: 26%; + left: 9%; + width: 200px; + } + + @include for-tablet-portrait-up { + &--connection { + top: 84%; + left: 41%; + } + &--batteries { + top: 24%; + right: 44%; + } + &--sensor { + top: -18%; + left: 46%; + } + } + + @include for-desktop-up { + background-color: transparent; + border-radius: 0; + padding: 0; + font-size: inherit; + display: block; + + &.is-active { + opacity: 1; + transform: translateY(0); + } + + &--connection { + width: 240px; + bottom: 30px; + right: calc(50% + 180px); + left: auto; + } + &--batteries { + width: 340px; + top: 0; + left: calc(50% + 220px); + right: auto; + } + &--sensor { + top: 0; + right: calc(50% + 250px); + left: auto; + width: 250px; + } + } +} + +.kat-tech__line { + opacity: 0; + transition: opacity; + transition-timing-function: $transition-ease; + transition-duration: $transition-duration; + display: none; + + &.is-active { + opacity: 1; + } + + @include for-desktop-up { + display: block; + } +} + +#line-connections { + position: absolute; + left: calc(50% - 120px); + top: calc(40% + 60px); + transform: translate(-100%, -50%); +} + +#line-sensor { + position: absolute; + top: 8px; + right: 50%; +} + +#line-batteries { + position: absolute; + left: 50%; + bottom: 30%; +} + +.kat-tech__button { + display: block; + width: 62px; + height: 62px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.14); + cursor: pointer; + background-color: $contrast; + box-sizing: border-box; + position: absolute; + transition-property: background-color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + + &--batteries { + top: 50%; + left: 57%; + + &.is-active { + ~ .kat-tech__spec--batteries { + opacity: 1; + transform: translateY(0); + } + } + } + + &--connection { + top: 84%; + right: 60%; + + &.is-active { + ~ .kat-tech__spec--connection { + opacity: 1; + transform: translateY(0); + } + } + } + + &--sensor { + top: 5%; + right: 55%; + + &.is-active { + ~ .kat-tech__spec--sensor { + opacity: 1; + transform: translateY(0); + } + } + } + + &.is-active { + background-color: darken($contrast, 20%); + + &::after { + transform: translate(-50%, -50%) rotate(90deg); + transform-origin: center center; + } + } + + &::after, + &::before { + content: ""; + position: absolute; + background: $white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition-property: background-color, transform; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + } + + &::after { + width: 2px; + height: 30px; + } + + &::before { + width: 30px; + height: 2px; + } + + &:hover, + &:focus { + outline: none; + background-color: darken($contrast, 20%); + } + + @include for-desktop-up { + display: none; + } +} diff --git a/src/styles/_more-than-gaming.scss b/src/styles/_more-than-gaming.scss new file mode 100644 index 0000000..b7f8cad --- /dev/null +++ b/src/styles/_more-than-gaming.scss @@ -0,0 +1,8 @@ +.more-than-gaming__description { + margin: 0 0 64px; + font-size: 14px; +} + +.more-than-gaming__header { + margin-bottom: 16px; +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000..ca6d98a --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,67 @@ +.nav { + &__list { + display: flex; + } + + &__item { + display: flex; + align-items: center; + margin-left: 16px; + } +} + +.nav__link { + display: inline-block; + position: relative; + padding: 16px; + + &::after, + &::before { + content: ""; + position: absolute; + width: 50px; + height: 50px; + border: 2px solid rgba($contrast, 0.5); + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0.8); + background-color: rgba($contrast, 0); + z-index: -1; + opacity: 0; + transition-property: transform, opacity, background-color, box-shadow; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + } + + &::before { + width: 60px; + height: 60px; + border-width: 1px; + transform: translate(-50%, -50%) scale(0.2); + box-shadow: 0 0 15px 5px rgba($contrast, 0.1); + } + + &:hover, + &:focus { + outline: none; + &::after, + &::before { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + } + + &:active { + &::after { + background-color: rgba($contrast, 0.2); + } + &::before { + box-shadow: 0 0 25px 10px rgba($contrast, 0.12); + } + } + + &--social { + padding: 8px; + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb4..1e23d52 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,26 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +a { + @extend %a; +} + +p { + color: $text; + font-size: 16px; + line-height: 150%; +} + +.quantum { + font-family: Quantum, sans-serif; + color: $contrast; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 1366a06..930bdef 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import "utils/vars"; @import "utils/mixins"; @import "utils/extends"; +@import "utils/reset"; diff --git a/src/styles/_why-kat.scss b/src/styles/_why-kat.scss new file mode 100644 index 0000000..29a4e82 --- /dev/null +++ b/src/styles/_why-kat.scss @@ -0,0 +1,17 @@ +.why-kat { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + &__header, + &__advantages { + width: 100%; + margin: 0 0 82px; + } + &__button { + margin: 0 auto; + width: 200px; + text-align: center; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..71de388 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,253 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "header"; +@import "nav"; +@import "header-cover"; +@import "more-than-gaming"; +@import "advantages"; +@import "about-product"; +@import "about-us"; +@import "why-kat"; +@import "footer"; +@import "get-in-touch"; +@import "contacts"; +@import "form"; +@import "kat-tech"; +@import "fixed-area"; +@import "burger-button"; + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} body { - background: $c-gray; + font-family: Mark, sans-serif; + min-height: 100vh; + background: linear-gradient(149.28deg, #191536 0.67%, black 100%); + overflow-x: hidden; +} + +.button { + font-family: Mark, sans-serif; + font-weight: 700; + font-size: 16px; + border: 3px solid $contrast; + padding: 12px 32px; + cursor: pointer; + background-color: $contrast; + box-sizing: border-box; + color: $white; + border-radius: 4px; + transition-property: background-color, color, border-color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + display: inline-block; + + &:hover { + background-color: $white; + border-color: $white; + color: $contrast; + } + + &:focus { + outline: none; + border: 3px solid $white; + } +} + +.contrast { + color: $contrast; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.small-text { + font-weight: 14px; +} + +.layout-block { + padding: 0 20px; + position: relative; + outline: none; + + @include for-tablet-portrait-up { + padding: 0 30px; + } + + @include for-tablet-landscape-up { + padding: 0 50px; + } + + @include for-desktop-up { + padding: 0 110px; + } + + &--gradient { + background: linear-gradient(149.28deg, #191536 0.67%, black 100%); + } + + &--dark { + background-color: $bg-black; + } +} + +.content-block { + padding: 50px 0; + max-width: 1400px; + margin: 0 auto; + + @include for-tablet-portrait-up { + padding: 70px 0; + } + + @include for-desktop-up { + padding: 100px 0; + } +} + +.play-button { + display: flex; + align-items: center; + width: 200px; + height: 48px; + background-color: transparent; + border: none; + cursor: pointer; + padding-left: 90px; + position: relative; + + .text { + color: $white; + display: inline-block; + font-size: 18px; + padding: 8px; + position: relative; + + &::before { + content: ""; + width: 100%; + height: 2px; + background-color: $contrast; + position: absolute; + bottom: 0; + left: 0; + opacity: 0; + transform: translateX(50%); + transition-property: transform, opacity; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + } + } + + .play { + position: absolute; + width: 65px; + height: 65px; + border: $contrast solid 2px; + border-radius: 50%; + left: 30px; + top: 50%; + transform: translate(-50%, -50%); + + &::after { + content: ""; + border: 15px solid transparent; + border-left: solid $contrast 25px; + display: inline-block; + top: 50%; + left: 50%; + position: absolute; + transform: translate(-25%, -50%); + transition-property: border-left-color; + transition-duration: $transition-duration; + transition-timing-function: $transition-ease; + } + + &::before { + content: ""; + border: 4px solid rgba($contrast, 0.7); + border-left-color: transparent; + border-radius: 50%; + display: inline-block; + width: 80px; + height: 80px; + top: 50%; + left: 50%; + position: absolute; + transform: translate(-50%, -50%); + transition-property: transform, border-color; + transition-duration: $transition-duration-long, $transition-duration; + transition-timing-function: $transition-ease; + } + } + + &:hover, + &:focus { + outline: none; + .text { + &::before { + transform: translateX(0); + opacity: 1; + } + } + .play { + &::before { + transform: translate(-50%, -50%) rotate(180deg); + border-color: rgba($white, 0.8); + border-left-color: transparent; + } + &::after { + border-left-color: $white; + } + } + } +} + +.image { + width: 80%; + margin: 0 auto; + display: block; + + @include for-phone-only { + width: 100%; + } + + @include for-tablet-portrait-up { + position: absolute; + top: 50%; + left: 76%; + width: 60%; + height: auto; + max-height: 380px; + max-width: 380px; + transform: translate(-50%, -50%); + } + + @include for-tablet-landscape-up { + max-width: unset; + max-height: unset; + top: 8%; + right: 0; + left: auto; + width: 80%; + height: auto; + transform: translateX(30px); + } + + @include for-desktop-up { + top: 0; + transform: translateX(100px); + } } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0..09e24b2 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,47 @@ +@import "vars"; + +%headers { + font-family: Mark, sans-serif; + font-weight: 900; + color: $white; + text-transform: uppercase; + text-align: center; + margin-top: 0; + outline: none; +} + %h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; + @extend %headers; + font-size: 26px; + line-height: 130%; + + @include for-tablet-landscape-up { + font-size: 46px; + } +} + +%h2 { + @extend %headers; + font-size: 21px; + + @include for-tablet-landscape-up { + font-size: 36px; + } +} + +%h3 { + @extend %headers; + font-size: 18px; +} + +%a { + font-family: Mark, sans-serif; + font-weight: 700; + font-size: 16px; + color: $white; + text-decoration: none; + + &:visited { + color: $white; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c7978..ed41db7 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,29 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin for-phone-only { + @media (max-width: 599px) { + @content; + } +} + +@mixin for-tablet-portrait-up { + @media (min-width: 600px) { + @content; + } +} + +@mixin for-tablet-landscape-up { + @media (min-width: 900px) { + @content; + } +} + +@mixin for-desktop-up { + @media (min-width: 1280px) { + @content; + } +} + +@mixin for-big-desktop-up { + @media (min-width: 1800px) { + @content; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000..e149aeb --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,21 @@ +ul { + padding: 0; + margin: 0; + list-style: none; +} + +body { + margin: 0; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006f..215c0d2 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,11 @@ -$c-gray: #eee; +$white: #fff; +$text: #929292; +$dark-grey: #2f2f2f; +$bg-black: #05040b; +$contrast: #05c2df; +$purple: #191536; + +// transition +$transition-duration: 0.3s; +$transition-duration-long: 0.7s; +$transition-ease: cubic-bezier(0.3, 0.1, 0.3, 1);