diff --git a/src/fonts/Baloo2-Medium.ttf b/src/fonts/Baloo2-Medium.ttf new file mode 100644 index 0000000..f4518b1 Binary files /dev/null and b/src/fonts/Baloo2-Medium.ttf differ diff --git a/src/fonts/Balsamiq.ttf b/src/fonts/Balsamiq.ttf new file mode 100644 index 0000000..5f3febf Binary files /dev/null and b/src/fonts/Balsamiq.ttf differ diff --git a/src/fonts/Poppins-Medium.ttf b/src/fonts/Poppins-Medium.ttf new file mode 100644 index 0000000..89aae6b Binary files /dev/null and b/src/fonts/Poppins-Medium.ttf differ diff --git a/src/fonts/QuantumRegular.woff b/src/fonts/QuantumRegular.woff new file mode 100644 index 0000000..1497163 Binary files /dev/null and b/src/fonts/QuantumRegular.woff differ diff --git a/src/fonts/Raleway-Medium.ttf b/src/fonts/Raleway-Medium.ttf new file mode 100644 index 0000000..070ac76 Binary files /dev/null and b/src/fonts/Raleway-Medium.ttf differ diff --git a/src/images/about.png b/src/images/about.png new file mode 100644 index 0000000..3d998cf Binary files /dev/null and b/src/images/about.png differ diff --git a/src/images/aboutt.png b/src/images/aboutt.png new file mode 100644 index 0000000..5e9c7d1 Binary files /dev/null and b/src/images/aboutt.png differ diff --git a/src/images/benefit.png b/src/images/benefit.png new file mode 100644 index 0000000..a4bdb7c Binary files /dev/null and b/src/images/benefit.png differ diff --git a/src/images/fb.png b/src/images/fb.png new file mode 100644 index 0000000..c56926b Binary files /dev/null and b/src/images/fb.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000..df3b040 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/ls.png b/src/images/ls.png new file mode 100644 index 0000000..bfebe2b Binary files /dev/null and b/src/images/ls.png differ diff --git a/src/images/main.png b/src/images/main.png new file mode 100644 index 0000000..23cd963 Binary files /dev/null and b/src/images/main.png differ diff --git a/src/images/nice.png b/src/images/nice.png new file mode 100644 index 0000000..28d3335 Binary files /dev/null and b/src/images/nice.png differ diff --git a/src/images/tech.png b/src/images/tech.png new file mode 100644 index 0000000..7901d1b Binary files /dev/null and b/src/images/tech.png differ diff --git a/src/images/tw.png b/src/images/tw.png new file mode 100644 index 0000000..b1f077c Binary files /dev/null and b/src/images/tw.png differ diff --git a/src/images/vc1.png b/src/images/vc1.png new file mode 100644 index 0000000..8695836 Binary files /dev/null and b/src/images/vc1.png differ diff --git a/src/images/vc2.png b/src/images/vc2.png new file mode 100644 index 0000000..016968f Binary files /dev/null and b/src/images/vc2.png differ diff --git a/src/images/vc3.png b/src/images/vc3.png new file mode 100644 index 0000000..34c774c Binary files /dev/null and b/src/images/vc3.png differ diff --git a/src/images/vc4.png b/src/images/vc4.png new file mode 100644 index 0000000..9bac075 Binary files /dev/null and b/src/images/vc4.png differ diff --git a/src/images/you.png b/src/images/you.png new file mode 100644 index 0000000..4076ee1 Binary files /dev/null and b/src/images/you.png differ diff --git a/src/index.html b/src/index.html index c1de13f..4fba07f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,312 @@ - - - - Title - - - -

Hello Mate Academy

- - + + + + + Title + + + + +
+ +
+
+

THE NEW START OF

+

VR LOCOMOTION

+

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

+

1200$

+ +
+ +
+ +
+
+
+

MORE THAN GAMING!

+

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

+
+
+
+ education logo +

education

+

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

+
+
+ real estate logo +

real estate

+

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

+
+
+ fitness logo +

fitness

+

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

+
+
+ social interactions logo +

social interactions

+

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

+
+
+
+
+
+
+

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.

+
+ +
+
+
+

Uniwersally
compatible

+

User friendly
hardware

+

Complete SDK
for Developers

+
+
+ photo of vr +
+
+

Complete
locomotion system

+

Smart wireless
sensor

+

Multifunctional
software

+
+
+
+ person who game VR +
+

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

+
+
+
+
+

Tech specs +

+
+
+ logo for tech block +

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 +

+
+
+ logo for tech block +

sensor

+

Weight: 35g/1.23oz each
+ Dimension: 50mm/1.97in (diameter)*
+ 24mm/0.94in
+ Light: LED lights +

+
+
+ logo for tech block +

connection

+

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

+
+
+
+
+
+

our benefits

+
+ 1 +

SUPER DURABLE BATTERIES

+

for enhanced convenience

+
+
+ 2 +

INDEPENDENT HEAD AND BODY TRACKING

+

for increased realism

+
+
+ 3 +

PC/VR INTEGRATED CONTROL PANEL

+

for ultimate user experience

+
+ +
+ photo of vr +
+
+
+ + + + +
+
+

Have any questions?

+

GET IN TOUCH

+

Our manager will reply you within 15
minutes

+ +86-0571-86105373 + global@katvr.com + overseas@katvr.com + +
+
+ + + + diff --git a/src/styles/_about.scss b/src/styles/_about.scss new file mode 100644 index 0000000..052c382 --- /dev/null +++ b/src/styles/_about.scss @@ -0,0 +1,104 @@ +.about { + padding: 5% 10%; + overflow: hidden; + height: 1443px; + background: linear-gradient(143.64deg, #191536 -0.5%, #000 99.5%); + &__title { + display: flex; + align-items: center; + justify-content: space-between; + } + &__name { + @extend %title; + &--accent { + @extend %title-accent; + } + } + &__text { + font-family: "Balsamiq Sans", sans-serif; + font-size: 16px; + line-height: 150%; + color: #929292; + } + &__kat { + position: relative; + top: -600px; + display: flex; + justify-content: space-between; + } +} + +.vr__center { + background-image: url(../images/about.png); + background-size: contain; + width: 515px; + height: 463px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + left: 50%; + top: -400px; + transform: translate(-50%); +} + +.vr__left { + color: #fff; + font-family: "Balsamiq Sans", sans-serif; + position: relative; + left: 12%; + top: 120px; +} + +.vr__right { + color: #fff; + font-family: "Balsamiq Sans", sans-serif; + position: relative; + left: 78%; + top: -825px; +} + +.left__par { + margin-bottom: 115px; +} + +.right__par { + margin-bottom: 115px; +} + +.nice__hello { + font-family: "Balsamiq Sans", sans-serif; + font-size: 14px; + line-height: 18px; + color: #05c2df; + position: relative; + right: 2%; +} + +.nice__title { + @extend %title; + &--accent { + @extend %title-accent; + } +} + +.nice__text { + font-size: 16px; + line-height: 150%; + color: #929292; + font-family: "Balsamiq Sans", sans-serif; +} + +.vr__img { + transition: 2s; + &:hover { + transform: rotate(360deg); + } +} + +.nice__img { + transition: 2s; + &:hover { + transform: scale(1.2); + } +} diff --git a/src/styles/_benefit.scss b/src/styles/_benefit.scss new file mode 100644 index 0000000..b807eeb --- /dev/null +++ b/src/styles/_benefit.scss @@ -0,0 +1,83 @@ +.benefit { + display: flex; + justify-content: center; + padding: 0 10%; + height: 639px; + background: linear-gradient(124.02deg, #191536 0%, #000 77.34%); + &__label { + @extend %title; + margin-top: 100px; + margin-bottom: 0; + &--accent { + @extend %title-accent; + } + } + + &__img { + position: relative; + left: 10%; + transition: 2s; + &:hover { + transform: scale(1.1); + } + } + + &__numb { + display: inline; + font-size: 72px; + font-family: "Quantum", sans-serif; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #05c2df; + color: rgba(#191536, 0.1); + position: relative; + left: -50px; + top: 50px; + } + + &__name { + display: inline; + white-space: nowrap; + font-family: "Roboto", sans-serif; + font-weight: 900; + font-size: 18px; + line-height: 23px; + color: #fff; + margin: 0; + text-align: left; + } + + &__text { + margin-top: 0; + font-size: 16px; + font-family: "Balsamiq Sans", sans-serif; + line-height: 150%; + color: #929292; + &:after { + content: ""; + display: block; + width: 47px; + height: 1px; + background-color: #05c2df; + } + } + + &__block { + display: flex; + flex-direction: column; + justify-content: center; + height: 100px; + } + + &__button { + font-family: "Balsamiq Sans", sans-serif; + width: 200px; + height: 50px; + border: none; + background: #05c2df; + border-radius: 4px; + font-size: 16px; + line-height: 130%; + color: #fff; + margin-top: 53px; + } +} diff --git a/src/styles/_contact.scss b/src/styles/_contact.scss new file mode 100644 index 0000000..eccbf55 --- /dev/null +++ b/src/styles/_contact.scss @@ -0,0 +1,73 @@ +.contact { + padding: 0 10%; + height: 589px; + background: #05040b; + display: flex; + align-items: center; + &__form { + display: flex; + flex-direction: column; + width: 520px; + } + &__input { + outline: none; + background-color: #05040b; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #929292; + font-family: "Balsamiq Sans", sans-serif; + line-height: 64px; + font-size: 14px; + &:last-child { + height: 150px; + } + } +} + +.info { + position: relative; + top: -3%; + margin-left: 115px; + display: flex; + flex-direction: column; + &__title { + @extend %title; + margin-top: 0; + margin-bottom: 0; + &--accent { + @extend %title-accent; + } + } + + &__top { + position: relative; + left: -30px; + font-size: 14px; + line-height: 18px; + color: #05c2df; + font-family: "Balsamiq Sans", sans-serif; + } + + &__text { + text-decoration: none; + font-family: "Balsamiq Sans", sans-serif; + font-size: 16px; + line-height: 150%; + color: #929292; + margin-bottom: 5px; + &:nth-child(3) { + margin-bottom: 52px; + } + } + + &__button { + background: #05c2df; + border-radius: 4px; + width: 200px; + height: 50px; + border: none; + font-family: "Balsamiq Sans", sans-serif; + color: #fff; + margin-top: 50px; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3f..514e5ab 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -4,3 +4,14 @@ font-weight: normal; font-style: normal; } + +@font-face { + font-family: "Quantum"; + src: url("../fonts/QuantumRegular.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap"); + +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"); diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000..478c22c --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,142 @@ +.header { + box-sizing: border-box; + width: 100%; + height: 740px; + background: linear-gradient(118.69deg, #191536 0%, #000 100%); + overflow: hidden; + padding: 0 10%; + &__content { + z-index: 5; + width: 800px; + } +} + +.nav__list { + @extend %list; + position: relative; + top: 65px; + left: 50%; + transform: translate(-50%); +} + +.nav__link { + @extend %list_link; + + position: relative; + margin-right: 50px; + &:hover { + color: #05c2df; + text-shadow: 2px 0 10px #fff; + } +} + +.nav__logo { + position: relative; + left: 60%; +} + +.nav__select { + background-color: rgba(#191536, 0.1); + color: #fff; + border: none; + margin-right: 350px; + position: relative; + font-family: "Balsamiq Sans", sans-serif; + margin-left: 100px; +} + +.nav__button { + position: relative; + background: #05c2df; + border-radius: 4px; + width: 200px; + height: 48px; + border: none; + font-size: 16px; + line-height: 130%; + color: #fff; + font-family: "Balsamiq Sans", sans-serif; +} + +.header__text { + font-size: 16px; + line-height: 150%; + color: #929292; + font-family: "Balsamiq Sans", sans-serif; + position: relative; + left: 30%; +} + +.header__price { + color: #fff; + font-size: 18px; + line-height: 23px; + font-family: "Balsamiq Sans", sans-serif; + position: relative; + left: 30%; +} + +.header__title { + @extend %title; + font-size: 46px; + margin: 0; + white-space: nowrap; + &--accent { + @extend %title-accent; + + margin: 0; + font-size: 46px; + } +} + +.button__play { + border: 1px solid #05c2df; + background: rgba(#191536, 0.1); + color: #fff; + box-sizing: border-box; + border-radius: 4px; + position: relative; + width: 200px; + height: 50px; + font-family: "Balsamiq Sans", sans-serif; +} + +.header__main { + display: flex; + align-items: center; + justify-content: space-between; +} + +.foot__link { + @extend %list_link; + transition: 1s; +} + +.foot__list { + @extend %list; + justify-content: space-between; + position: relative; + top: -100px; + padding-left: 0; + :nth-child(3) { + margin: 0 150px; + } +} + +.foot__link:hover { + color: #05c2df; + text-shadow: 2px 0 10px #fff; +} + +.is-active { + color: #05c2df; + &:after { + content: " "; + border: 5px solid transparent; + border-top: 5px solid #05c2df; + transform: rotate(-180deg); + position: relative; + top: 30px; + right: 50%; + } +} diff --git a/src/styles/_interested.scss b/src/styles/_interested.scss new file mode 100644 index 0000000..50f8de4 --- /dev/null +++ b/src/styles/_interested.scss @@ -0,0 +1,59 @@ +.interested { + overflow: hidden; + height: 622px; + background: #05040b; + padding: 0 10%; + &__block { + display: flex; + justify-content: space-between; + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__label { + @extend %title; + + margin-top: 80px; + margin-bottom: 0; + + &--accent { + @extend %title-accent; + } + } + + &__img { + transition: 2s; + &:hover { + transform: scale(1.4); + } + } + + &__descr { + color: #05c2df; + margin-bottom: 80px; + font-size: 14px; + line-height: 18px; + font-family: "Balsamiq Sans", sans-serif; + position: relative; + left: 5%; + } + + &__name { + font-size: 16px; + line-height: 20px; + color: #fff; + font-family: "Roboto", sans-serif; + font-weight: 900; + text-transform: uppercase; + } + + &__text { + font-family: "Balsamiq Sans", sans-serif; + color: #929292; + } +} diff --git a/src/styles/_tech.scss b/src/styles/_tech.scss new file mode 100644 index 0000000..998889f --- /dev/null +++ b/src/styles/_tech.scss @@ -0,0 +1,47 @@ +.tech { + padding: 0 10%; + height: 690px; + background: #05040b; + overflow: hidden; + &__block { + display: flex; + justify-content: space-around; + margin-top: 100px; + } + + &__label { + @extend %title; + + margin-top: 100px; + + &--accent { + @extend %title-accent; + } + } + + &__name { + font-family: "Roboto", sans-serif; + font-size: 18px; + line-height: 23px; + color: #fff; + font-weight: 700; + text-transform: uppercase; + text-align: center; + } + + &__text { + font-family: "Balsamiq Sans", sans-serif; + font-size: 16px; + line-height: 150%; + color: #929292; + } + + &__img { + position: relative; + left: 25%; + transition: 2s; + &:hover { + transform: scale(1.4); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..c418bcf 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,65 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "header"; +@import "interested"; +@import "about"; +@import "tech"; +@import "benefit"; +@import "contact"; -body { - background: $c-gray; +body, +html, +li, +ul, +div { + margin: 0; +} + +.body { + background: #05040b; +} + +button { + cursor: pointer; + transition: 1s; + &:hover { + transform: scale(1.1); + box-shadow: 2px 2px 50px 2px rgba(161,240,242,0.45); + } +} + +.footer { + height: 100px; + background: #000; + padding: 0 10%; + display: flex; + justify-content: space-between; + align-items: center; + &__list { + display: flex; + list-style: none; + color: #f2f2f2; + padding: 0; + position: relative; + width: 380px; + justify-content: space-between; + } + + &__link { + color: #f2f2f2; + text-decoration: none; + font-family: "Balsamiq Sans", sans-serif; + transition: 2s; + font-size: 16px; + &:hover { + position: relative; + color: #05c2df; + text-shadow: 2px 0 10px #fff; + } + } + + &__logo { + margin-right: 15px; + } } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0..f0a20bd 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -2,3 +2,35 @@ font-family: "Roboto", sans-serif; font-weight: 400; } + +%list_link { + color: #fff; + text-decoration: none; + font-size: 16px; + font-family: "Balsamiq Sans", sans-serif; +} + +%list { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + list-style: none; +} + +%title { + font-size: 36px; + line-height: 46px; + color: #fff; + font-family: Roboto, sans-serif; + font-weight: 800; + text-transform: uppercase; +} + +%title-accent { + font-family: "Quantum", sans-serif; + color: #05c2df; + font-size: 36px; + line-height: 46px; + text-transform: uppercase; +}