added vision and philosophy section
This commit is contained in:
parent
813ef36401
commit
1065aa65d3
10 changed files with 298 additions and 34 deletions
67
awwwards_ss3/package-lock.json
generated
67
awwwards_ss3/package-lock.json
generated
|
@ -13,7 +13,9 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3"
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-slick": "^0.30.2",
|
||||
"slick-carousel": "^1.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
|
@ -1759,6 +1761,11 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
@ -1977,6 +1984,11 @@
|
|||
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/enquire.js": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
|
||||
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.23.3",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
|
||||
|
@ -3416,6 +3428,12 @@
|
|||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
@ -3463,6 +3481,14 @@
|
|||
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/json2mq": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
|
||||
"integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
|
||||
"dependencies": {
|
||||
"string-convert": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/json5": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
|
||||
|
@ -3542,6 +3568,11 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
|
@ -4258,6 +4289,22 @@
|
|||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-slick": {
|
||||
"version": "0.30.2",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
|
||||
"integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"enquire.js": "^2.1.6",
|
||||
"json2mq": "^0.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"resize-observer-polyfill": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
@ -4318,6 +4365,11 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "2.0.0-next.5",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
|
||||
|
@ -4561,6 +4613,14 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/slick-carousel": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
|
||||
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
|
||||
"peerDependencies": {
|
||||
"jquery": ">=1.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
|
@ -4570,6 +4630,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-convert": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
|
||||
"integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
|
||||
|
|
|
@ -15,7 +15,9 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3"
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-slick": "^0.30.2",
|
||||
"slick-carousel": "^1.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import About from "./components/About"
|
||||
import Header from "./components/Header"
|
||||
import Home from "./components/Home"
|
||||
import Philosophy from "./components/Philosophy"
|
||||
import Visions from "./components/Visions"
|
||||
import PreLoader from "./components/preloader/PreLoader"
|
||||
|
||||
|
||||
|
@ -12,6 +14,8 @@ function App() {
|
|||
<Header/>
|
||||
<Home/>
|
||||
<About/>
|
||||
<Visions/>
|
||||
<Philosophy/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
BIN
awwwards_ss3/src/assets/Website-homepage-Work-01_1.mp4
Normal file
BIN
awwwards_ss3/src/assets/Website-homepage-Work-01_1.mp4
Normal file
Binary file not shown.
BIN
awwwards_ss3/src/assets/Website-homepage-Work-02_1.mp4
Normal file
BIN
awwwards_ss3/src/assets/Website-homepage-Work-02_1.mp4
Normal file
Binary file not shown.
BIN
awwwards_ss3/src/assets/Website-homepage-Work-03_1.mp4
Normal file
BIN
awwwards_ss3/src/assets/Website-homepage-Work-03_1.mp4
Normal file
Binary file not shown.
|
@ -1,6 +1,8 @@
|
|||
import { PiArrowElbowRightDown, PiArrowElbowDownRightLight } from "react-icons/pi";
|
||||
import { PiArrowElbowRightDown} from "react-icons/pi";
|
||||
|
||||
|
||||
const About = () => {
|
||||
|
||||
return (
|
||||
<div className="px-14 mt-[120px]">
|
||||
<div className="flex-col text-3xl">
|
||||
|
@ -11,12 +13,12 @@ const About = () => {
|
|||
</div>
|
||||
<div className="border-[#555555] border-t-2 mt-2"></div>
|
||||
</div>
|
||||
<div className="w-full h-screen flex flex-col justify-between">
|
||||
<div className="mr-20">
|
||||
<p className="mr-20 mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity
|
||||
<div className="flex flex-col justify-between">
|
||||
<div>
|
||||
<p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity
|
||||
off set through our Venture Model-your vision, your decision.</p>
|
||||
</div>
|
||||
<div >
|
||||
<div className=" mt-[20vw] mb-[12vw]">
|
||||
<div className="flex gap-2 items-center justify-center mb-10">
|
||||
<p className="text-xl">Agency & Venture </p>
|
||||
<span className="py-1 px-3 bg-[#0E0E0E] text-xs text-white rounded-full mr-2">Models</span>
|
||||
|
@ -28,15 +30,6 @@ const About = () => {
|
|||
<span className="btn-about">and engagement models</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-screen mt-[15vw]">
|
||||
<div className="flex justify-between text-3xl tracking-tight">
|
||||
<p>Transforming visions into brands.</p>
|
||||
<a href="" className="flex gap-2">
|
||||
<PiArrowElbowDownRightLight className="text-2xl"/>
|
||||
<p className="btn">See the work</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
34
awwwards_ss3/src/components/Philosophy.jsx
Normal file
34
awwwards_ss3/src/components/Philosophy.jsx
Normal file
|
@ -0,0 +1,34 @@
|
|||
const Philosophy = () => {
|
||||
return (
|
||||
<div className="w-full h-screen ">
|
||||
<div className="flex-col text-3xl px-14">
|
||||
<p>We operate on a simple philosophy:</p>
|
||||
<p>Quality over quantity.</p>
|
||||
<div className="border-[#555555] border-t-2 mt-2"></div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between px-14">
|
||||
<div>
|
||||
<p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We collaborate with five clients each year. This allows for intense focus on the trabsformation and
|
||||
launch of you brand by our very best team, which is the only team we have.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">
|
||||
<div className="gradients-container">
|
||||
<div className="gradient1"></div>
|
||||
<div className="gradient2"></div>
|
||||
<div className="gradient3"></div>
|
||||
<div className="gradient4"></div>
|
||||
<div className="gradient5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute text-center">
|
||||
<h1 className="text-[4vw] leading-none text-white mt-20">3 seats</h1>
|
||||
<p className="text-[1.4vw] text-white">available for 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Philosophy
|
76
awwwards_ss3/src/components/Visions.jsx
Normal file
76
awwwards_ss3/src/components/Visions.jsx
Normal file
|
@ -0,0 +1,76 @@
|
|||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import {PiArrowElbowDownRightLight } from "react-icons/pi";
|
||||
|
||||
|
||||
const Visions = () => {
|
||||
|
||||
const slideSettings = {
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
initialSlide: 0,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
initialSlide: 0,
|
||||
infinite: true,
|
||||
dots: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
initialSlide: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="w-full h-screen">
|
||||
<div className="flex justify-between text-3xl tracking-tight px-14 mb-5">
|
||||
<p>Transforming visions into brands.</p>
|
||||
<a href="" className="flex gap-2">
|
||||
<PiArrowElbowDownRightLight className="text-2xl"/>
|
||||
<p className="btn">See the work</p>
|
||||
</a>
|
||||
</div>
|
||||
<div className=" px-10">
|
||||
<Slider {...slideSettings}>
|
||||
<div className="relative overflow-hidden">
|
||||
<img src="https://images.prismic.io/rejouice/d8e1fa1f-4f24-41e1-a249-098c62df5aff_Group+46+%281%29.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
|
||||
<video src="../src/assets/Website-homepage-Work-01_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<img src="https://images.prismic.io/rejouice/e0350a3d-c390-4d97-af1a-5c86bc822b52_Group+3929.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
|
||||
<video src="../src/assets/Website-homepage-Work-02_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<img src="https://images.prismic.io/rejouice/2874f084-ec6c-4a19-b025-a55c1e6db929_Group+3692.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
|
||||
<video src="../src/assets/Website-homepage-Work-03_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Visions
|
|
@ -1,6 +1,11 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@font-face{
|
||||
font-family: "NB-International-Pro-Bold";
|
||||
src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: #FAF8F3;
|
||||
|
@ -34,7 +39,7 @@ body{
|
|||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
/*==========*/
|
||||
.btn-about::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
@ -63,36 +68,121 @@ body{
|
|||
transform-origin: bottom right;
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
/*==========*/
|
||||
.btn-1{
|
||||
background: linear-gradient(to right, #0E0E0E 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
.btn-1:hover {
|
||||
.btn-1:hover{
|
||||
background-position: left bottom;
|
||||
}
|
||||
.text {
|
||||
.text{
|
||||
transition: all .6s ease-out;
|
||||
}
|
||||
.text:hover {
|
||||
.text:hover{
|
||||
color: #FF5F38;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "NB-International-Pro-Bold";
|
||||
src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");
|
||||
font-weight: normal;
|
||||
/*==========*/
|
||||
.gradient-bg{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle, #FF5F38, #FAF8F3, #FAF8F3);
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.gradients-container{
|
||||
filter: blur(40px) ;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.gradient1{
|
||||
position: absolute;
|
||||
background: radial-gradient(circle, rgba(18, 101, 255, 0.808) 0, rgba(18, 113, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: normal;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: calc(50% - 80% / 2);
|
||||
left: calc(50% - 80% / 2);
|
||||
transform-origin: center center;
|
||||
animation: moveVertical 30s ease infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
.gradient2{
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, rgba(52, 81, 247, 0.884) 0, rgba(221, 74, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: hard-light;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: calc(50% - 80% / 2);
|
||||
right: calc(50% - 90% / 2);
|
||||
transform-origin: calc(50% - 400px);
|
||||
animation: moveVertical 20s reverse infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
.gradient3{
|
||||
position: relative;
|
||||
background: radial-gradient(circle at left, rgba(115, 39, 236, 0.603) 0, rgba(100, 220, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: normal;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
transform-origin: calc(50% + 500px);
|
||||
animation: moveHorizontal 40s linear infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
.gradient4 {
|
||||
position: relative;
|
||||
background: radial-gradient(circle at top, rgba(233, 118, 10, 0.938) 0, rgba(200, 50, 50, 0) 50%) no-repeat;
|
||||
mix-blend-mode: hard-light;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: calc(50% - 60% / 2);
|
||||
left: calc(50% - 80% / 2);
|
||||
transform-origin: calc(50% - 100px);
|
||||
animation: moveHorizontal 40s ease infinite;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.gradient5 {
|
||||
position: relative;
|
||||
background: radial-gradient(circle at bottom, rgba(29, 112, 236, 0.8) 0, rgba(180, 180, 50, 0) 50%) no-repeat;
|
||||
mix-blend-mode: hard-light;
|
||||
width: calc(80% * 2);
|
||||
height: calc(80% * 2);
|
||||
left: calc(50% - 50%);
|
||||
transform-origin: calc(50% - 800px) calc(50% + 100px);
|
||||
animation: moveVertical 20s ease infinite;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes moveVertical {
|
||||
0% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(20%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveHorizontal {
|
||||
0% {
|
||||
transform: translateX(-50%) translateY(10%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(20%) translateY(20%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(50%) translateY(10%);
|
||||
}
|
||||
}
|
||||
/*==========*/
|
||||
|
||||
|
||||
|
||||
/*========== Responsive ==========*/
|
||||
@media (min-width: 1000px){
|
||||
.video-container{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
Loading…
Add table
Reference in a new issue