commit
This commit is contained in:
DmitriyB
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
@@ -0,0 +1,315 @@
|
||||
.demo__container_mobile {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
width: 84%;
|
||||
}
|
||||
|
||||
.demos__tittle {
|
||||
width: 484px;
|
||||
margin: auto auto 60px auto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
|
||||
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
|
||||
border-radius: 16px;
|
||||
|
||||
width: 200px;
|
||||
height: 255px;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
box-sizing: border-box;
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
padding-right: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.caption {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 25px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
margin: 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.width {
|
||||
align-items: flex-end
|
||||
}
|
||||
|
||||
.title__block {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 36px;
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
.demos_container:hover>div>img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
.demos__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.demos__tittle {
|
||||
font-size: 48px;
|
||||
width: 580px;
|
||||
margin: auto auto 72px auto;
|
||||
|
||||
}
|
||||
|
||||
.demo {
|
||||
gap: 24px;
|
||||
height: 306px;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
width: 70%;
|
||||
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
top: 43px;
|
||||
right: 43px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.demo__container {
|
||||
box-sizing: border-box;
|
||||
padding: 120px 12px 80px;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 3.7vw;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 2.8vw;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 2.1vw;
|
||||
}
|
||||
|
||||
.demo {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.demos__list {
|
||||
padding: 120px 20px 80px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.width {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
box-sizing: border-box;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.demos__tittle {
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
margin: auto auto 60px auto;
|
||||
|
||||
}
|
||||
|
||||
.demo__container_mobile {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 10px 80px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
object-fit: cover;
|
||||
|
||||
width: 100%;
|
||||
height: 169px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-weight: 400;
|
||||
font-size: 4.5vw;
|
||||
line-height: 140%;
|
||||
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-weight: 400;
|
||||
font-size: 3.6vw;
|
||||
line-height: 140%;
|
||||
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-weight: 500;
|
||||
font-size: 6vw;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: 600;
|
||||
font-size: 3.6vw;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import './demos.css'
|
||||
import "../../styles/styles.css";
|
||||
import building from './building.png'
|
||||
import building1 from './building1.png'
|
||||
import building2 from './building2.png'
|
||||
import iconButton from "./iconButton.svg"
|
||||
|
||||
|
||||
export const Demos: React.FC<any> = ({ text }) => {
|
||||
const { card } = text;
|
||||
const { card1 } = text;
|
||||
const { card2 } = text;
|
||||
|
||||
return (<div className=" demo__container_mobile main-block__container width demo__container">
|
||||
<h3 className='demos__tittle'>
|
||||
{text.title}
|
||||
</h3>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="100" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building1} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card.title}</h4>
|
||||
<p className='caption'>{card.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card.caption}</p>
|
||||
<p className='caption2'>{card.caption1}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="300" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building2} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card1.title}</h4>
|
||||
<p className='caption'>{card1.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card1.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-aos="fade-up"
|
||||
data-aos-delay="500" className='demos_container'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img src={building} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card2.title}</h4>
|
||||
<p className='caption'>{card2.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card2.caption}</p>
|
||||
<p className='caption2'>{card2.caption1}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 801 B |
Reference in New Issue
Block a user