DmitriyB/streaming-landing1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added backlight to vector images

Browse Source
This commit is contained in:
DmitriyB
2022-11-21 16:17:38 +05:00
parent 204e080c3b
commit 3c9da35add
9 changed files with 166 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cloudSolution/cloudSolution.css
+46 -4
View File
@@ -4,6 +4,7 @@
}
.block__container {
overflow: hidden;
background: #141414;
border-radius: 32px;
padding: 74px 80px;
@@ -11,8 +12,9 @@
box-sizing: border-box;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
gap: 66px;
margin-bottom: 160px;
}
@@ -22,8 +24,32 @@
margin-bottom: 0;
}
.image {}
.image__container {
z-index: 1;
width: 260px;
position: relative;
height: 190px;
}
.image__container:after {
position: absolute;
content: "";
top: 5vw;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background: radial-gradient(50% 50% at 50% 50%, #212121 0%, rgba(33, 33, 33, 60%) 92.19%);
background-size: 200% 200%;
}
@@ -36,11 +62,18 @@
width: 300px;
}
.image__container {
width: 300px;
height: 228px;
}
.block__container {
padding: 96px 84px;
-webkit-box-pack: normal;
-ms-flex-pack: normal;
justify-content: normal;
gap: 80px;
margin-bottom: 192px;
@@ -70,10 +103,19 @@
justify-content: center;
}
.image {
width: 50%;
.image__container {
justify-content: flex-start;
width: auto;
height: 372px;
}
.image {
width: auto;
height: 372px;
}
.block__container {
display: -webkit-box;
display: -ms-flexbox;
src/components/content/content.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import "../../styles/styles.css";
export const Content: React.FC<any> = ({ text }) => {
export const Content: React.FC<any> = ({ text, captionSmall }) => {
return (
<div data-aos="fade-up"
data-aos-delay="400"
@@ -13,7 +13,7 @@ export const Content: React.FC<any> = ({ text }) => {
{text.mainBlockCaptionColor}
</p>
: <></>}
<p className="main-block__caption multiplayer__caption">
<p className={captionSmall ? "main-block__caption main-block__caption_small" : "main-block__caption"}>
{text.mainBlockCaption}
</p>
</div>
src/components/devices/devices.css
+20
View File
@@ -20,6 +20,8 @@
}
.card {
overflow: hidden;
z-index: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
@@ -37,6 +39,24 @@
gap: 20px;
}
.card:after {
position: absolute;
content: "";
top: 10vw;
left: 0;
right: 0;
z-index: -1;
height: 66%;
width: 100%;
margin: 0 auto;
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background: radial-gradient(50% 50% at 50% 50%, #212121 0%, rgba(33, 33, 33, 60%) 92.19%);
background-size: 200% 200%;
}
.card__name {
margin: 0;
font-style: normal;
src/components/footer/footer.css
-1
View File
@@ -487,7 +487,6 @@
.footer__main-block {
padding: 60px 10px;
gap: 42px;
src/components/multiplayer/multiplayer.tsx
+4 -2
View File
@@ -6,15 +6,17 @@ import photo2 from "./Photo2.png";
import photo3 from "./Photo3.png";
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
import { useState } from "react";
export const Multiplayer: React.FC<any> = ({text}) => {
const [captionSmall, setCaptionSmall] = useState(true);
return (
<div
data-aos="zoom-in"
data-aos-duration="400"
className="multiplayer__container"
>
<Content text={text}></Content>
<Content captionSmall={captionSmall} text={text}></Content>
<div className="multiplayer__photo-container">
<img alt="device" src={photo1} className="multiplayer__image" />
<img alt="device" src={photo} className="multiplayer__image" />
@@ -22,7 +24,7 @@ export const Multiplayer: React.FC<any> = ({text}) => {
<img alt="device" src={photo3} className="multiplayer__image" />
</div>
<div className="main-block__subblock-container">
<div className="main-block_subblock">
<div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
{text.mainBlockSubblock}
<Button text={text}></Button>
</div>
src/components/photoComponent/photoComponent.tsx
+5 -2
View File
@@ -4,19 +4,22 @@ import './photoComponent.css'
import photo1 from './Photo1.png'
import photo2 from './Photo2.png'
import { Content } from '../content/content'
import { useState } from 'react'
export const PhotoComponent: React.FC<any> = ({ text }) => {
const [captionSmall, setCaptionSmall] = useState(true);
return (
<div className="photo___container">
<Content text={text}></Content>
<Content captionSmall={captionSmall} text={text}></Content>
<div className='photo__container_grid'>
<img alt='photoImg' data-aos="fade-up" data-aos-delay="100" src={photo1} className='photo__container_image'></img>
<img alt='photoImg' data-aos="fade-up" data-aos-delay="200" src={photo2} className='photo__container_image'></img>
</div>
<div className="main-block_subblock">
<div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
{text.mainBlockSubblock}
</div>
src/components/player/player.tsx
+5 -2
View File
@@ -4,18 +4,21 @@ import "./player.css"
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
import ReactPlayer from 'react-player'
import { useState } from "react";
export const Player: React.FC<any> = ({ text }) => {
const [captionSmall, setCaptionSmall] = useState(true);
return (
<div data-aos="zoom-in" data-aos-duration="500" className="player__container">
<Content text={text}></Content>
<Content captionSmall={captionSmall} text={text}></Content>
<div className="video__container">
<ReactPlayer width={'100%'} height={'100%'} controls={true} url='https://www.youtube.com/watch?v=eDanRHahbGY&ab_channel=GRAFFtech' />
</div>
<div className="main-block__subblock-container">
<div className="main-block_subblock">
<div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
{text.mainBlockSubblock}
<Button text={text}></Button>
</div>
src/components/sliderComponent/sliderComponent.tsx
+11 -9
View File
@@ -7,16 +7,18 @@ export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
return (
<div data-aos="zoom-in" data-aos-duration="500" className="slider-container">
<div className="slider">
<div data-aos="fade-up" data-aos-delay="400"
className="main-block__container">
<div>
<p className="main-block__title">Graff.estate </p>
<p className="main-block__title_gardient title__gardient_pos">stream</p>
<div className="main-block__content_slider">
<div data-aos="fade-up" data-aos-delay="400"
className="main-block__container_slider main-block__container">
<div>
<p className="main-block__title">Graff.estate </p>
<p className="main-block__title_gardient title__gardient_pos">stream</p>
</div>
<p className=" main-block__caption_color main-block__caption_color_slider">
{text.mainBlockCaptionColor}
</p>
<p className="main-block__caption_l">{text.mainBlockCaption}</p>
</div>
<p className=" main-block__caption_color">
{text.mainBlockCaptionColor}
</p>
<p className="main-block__caption_l">{text.mainBlockCaption}</p>
</div>
</div>
<Swiper
src/styles/styles.css
+73 -7
View File
@@ -6,7 +6,7 @@
*/
.main-block__container {
width: 536px;
width: 480px;
margin: 0 auto 80px;
display: -webkit-box;
display: -ms-flexbox;
@@ -21,6 +21,17 @@
gap: 20px;
}
.main-block__container_slider {
width: 100%;
}
.main-block__content_slider {
width: 522px;
margin: 0 auto;
padding-right: 110px;
box-sizing: border-box;
}
.main-block__caption_l {
font-style: normal;
font-weight: 400;
@@ -224,17 +235,34 @@
.link {
text-decoration: none;
}
.main-block__caption_small {
width: 416px;
}
@media screen and (min-width: 1600px) {
.main-block__container {
width: 640px;
width: 576px;
gap: 24px;
margin: 0 auto 96px;
}
.main-block__content_slider {
width: 610px;
}
.main-block__container_slider {
width: 100%;
}
.main-block__title {
font-size: 76px;
}
@@ -249,6 +277,11 @@
margin-top: 24px;
}
.main-block__caption_color_slider {
width: 100%;
}
.main-block__caption_l {
font-size: 22px;
}
@@ -266,10 +299,14 @@
}
.main-block_subblock {
width: 640px;
width: 576px;
font-size: 22px;
}
.main-block__caption_small {
width: 500px;
}
.main-block__button {
width: 196px;
height: 60px;
@@ -295,11 +332,23 @@
@media screen and (max-width: 1024px) {
.main-block__container {
width: 536px;
width: 85%;
margin: 0 0 60px;
}
.main-block__content_slider {
width: 526px;
}
.main-block__container_slider {
width: 100%;
}
.main-block__caption {
font-size: 2.8vw;
@@ -325,20 +374,21 @@
.main-block__title {
font-size: 10.6vw;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
.main-block__title_gardient {
font-size: 10.6vw;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
.main-block_subblock {
font-weight: 400;
line-height: 140%;
@@ -353,6 +403,8 @@
}
.main-block__title_gardient_small {
font-size: 6.25vw;
@@ -371,6 +423,10 @@
font-size: 3vw
}
.main-block__caption_small {
width: 75%;
}
}
@@ -381,6 +437,12 @@
width: 100%;
}
.main-block__content_slider {
padding-right: 0;
width: 100%;
}
.main-block_subblock {
gap: 30px;
width: 100%;
@@ -460,6 +522,10 @@
font-size: 4.5vw;
}
.main-block__caption_small {
width: 100%;
}
}