feat: implemented home page
This commit is contained in:
daniyal
parent
5c820f16c2
commit
9e686b2466
@ -16,6 +16,10 @@
|
||||
content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
@ -45,5 +49,6 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { HomePage } from '../pages/home'
|
||||
import mainStyles from '../styles/main.module.scss'
|
||||
import { Footer } from './footer'
|
||||
import { Header } from './header'
|
||||
@ -6,6 +7,7 @@ export const Layout = () => {
|
||||
return (
|
||||
<div className={mainStyles.bodyMain}>
|
||||
<Header />
|
||||
<HomePage />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
|
||||
349
src/pages/home.tsx
Normal file
349
src/pages/home.tsx
Normal file
@ -0,0 +1,349 @@
|
||||
import '../styles/cardBlogs.css'
|
||||
import '../styles/cardGames.css'
|
||||
import '../styles/cardLists.css'
|
||||
import '../styles/cardMod.css'
|
||||
import '../styles/SimpleSlider.css'
|
||||
import '../styles/styles.css'
|
||||
|
||||
export const HomePage = () => {
|
||||
return (
|
||||
<div className='InnerBodyMain'>
|
||||
<div className='SliderWrapper'>
|
||||
<div className='ContainerMain'>
|
||||
<div className='IBMSecMain'>
|
||||
<div className='simple-slider IBMSMSlider'>
|
||||
<div className='swiper-container IBMSMSliderContainer'>
|
||||
<div className='swiper-wrapper IBMSMSliderContainerWrapper'>
|
||||
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
|
||||
<div
|
||||
className='IBMSMSCWSPic'
|
||||
style={{
|
||||
background:
|
||||
'url(https://www.ggrecon.com/media/fd1bxcwr/tifa-s-cowboy-costume-change.png) center / cover no-repeat'
|
||||
}}
|
||||
></div>
|
||||
<div className='IBMSMSCWSInfo'>
|
||||
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
|
||||
<p className='IBMSMSCWSInfoText'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Integer nec odio. Praesent libero. Sed cursus ante
|
||||
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
|
||||
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
|
||||
nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. className aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Curabitur sodales ligula in
|
||||
libero.
|
||||
<br />
|
||||
</p>
|
||||
<div className='IBMSMSliderContainerWrapperSliderAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
|
||||
role='button'
|
||||
href='mods-inner.html'
|
||||
>
|
||||
Check it out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
|
||||
<div
|
||||
className='IBMSMSCWSPic'
|
||||
style={{
|
||||
background:
|
||||
'url(https://www.kakuchopurei.com/wp-content/uploads/2022/08/Marvels-Spider-Man-PC-Flag-Mod-1.jpg) center / cover no-repeat'
|
||||
}}
|
||||
></div>
|
||||
<div className='IBMSMSCWSInfo'>
|
||||
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
|
||||
<p className='IBMSMSCWSInfoText'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Integer nec odio. Praesent libero. Sed cursus ante
|
||||
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
|
||||
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
|
||||
nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. className aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Curabitur sodales ligula in
|
||||
libero.
|
||||
<br />
|
||||
</p>
|
||||
<div className='IBMSMSliderContainerWrapperSliderAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
|
||||
role='button'
|
||||
href='mods-inner.html'
|
||||
>
|
||||
Check it out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='swiper-slide IBMSMSliderContainerWrapperSlider'>
|
||||
<div
|
||||
className='IBMSMSCWSPic'
|
||||
style={{
|
||||
background:
|
||||
'url("/assets/img/DEGMods%20Placeholder%20Img.png") center / cover no-repeat'
|
||||
}}
|
||||
></div>
|
||||
<div className='IBMSMSCWSInfo'>
|
||||
<h3 className='IBMSMSCWSInfoHeading'>Game Mod Title</h3>
|
||||
<p className='IBMSMSCWSInfoText'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Integer nec odio. Praesent libero. Sed cursus ante
|
||||
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
|
||||
imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
|
||||
nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. className aptent
|
||||
taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Curabitur sodales ligula in
|
||||
libero.
|
||||
<br />
|
||||
</p>
|
||||
<div className='IBMSMSliderContainerWrapperSliderAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
|
||||
role='button'
|
||||
href='mods-inner.html'
|
||||
>
|
||||
Check it out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='swiper-pagination'></div>
|
||||
<div className='swiper-button-prev'></div>
|
||||
<div className='swiper-button-next'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='ContainerMain'>
|
||||
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
|
||||
<div className='IBMSecMain IBMSMListWrapper'>
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
|
||||
</div>
|
||||
<div className='IBMSMList IBMSMListFeaturedAlt'>
|
||||
<GameCard backgroungLink='https://m.media-amazon.com/images/M/MV5BZTRiNTgxMjQtNDE3OS00YTg4LTg3NTItY2EyNGUzYjAzZGZmXkEyXkFqcGdeQXVyMTI0MzI0MzE4._V1_FMjpg_UX1000_.jpg' />
|
||||
<GameCard backgroungLink='https://upload.wikimedia.org/wikipedia/en/0/0c/Witcher_3_cover_art.jpg' />
|
||||
<GameCard backgroungLink='https://cdn2.steamgriddb.com/file/sgdb-cdn/grid/9153bb77795515274c2be61ccc59c952.jpg' />
|
||||
<GameCard backgroungLink='https://static.trueachievements.com/boxart/Game_12493.jpg' />
|
||||
<GameCard backgroungLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||
</div>
|
||||
<div className='IBMSMAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMActionBtn'
|
||||
role='button'
|
||||
href='blog.html'
|
||||
>
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='IBMSecMain IBMSMListWrapper'>
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Awesome Mods</h2>
|
||||
</div>
|
||||
<div className='IBMSMList IBMSMListAlt'>
|
||||
<ModCard backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg' />
|
||||
<ModCard backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg' />
|
||||
<ModCard backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&imh=256&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true' />
|
||||
</div>
|
||||
<div className='IBMSMAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMActionBtn'
|
||||
role='button'
|
||||
href='blog.html'
|
||||
>
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='IBMSecMain IBMSMListWrapper'>
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Latest Mods</h2>
|
||||
</div>
|
||||
<div className='IBMSMList'>
|
||||
<ModCard backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg' />
|
||||
<ModCard backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg' />
|
||||
<ModCard backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&imh=256&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true' />
|
||||
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||
</div>
|
||||
|
||||
<div className='IBMSMAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMActionBtn'
|
||||
role='button'
|
||||
href='blog.html'
|
||||
>
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='IBMSecMain IBMSMListWrapper'>
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Blog Posts</h2>
|
||||
</div>
|
||||
<div className='IBMSMList'>
|
||||
<BlogCard backgroundLink='https://image.nostr.build/d6af39fb1d47feaf09831ddf9d447ccc435ba10fcbb9b6d6e800390f6bbac851.png' />
|
||||
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
||||
<BlogCard backgroundLink='https://pbs.twimg.com/media/GDrRJOOXYAAeysT.jpg:large' />
|
||||
<BlogCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||||
</div>
|
||||
|
||||
<div className='IBMSMAction'>
|
||||
<a
|
||||
className='btn btnMain IBMSMActionBtn'
|
||||
role='button'
|
||||
href='blog.html'
|
||||
>
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type GameCardProps = {
|
||||
backgroungLink: string
|
||||
}
|
||||
|
||||
const GameCard = ({ backgroungLink }: GameCardProps) => {
|
||||
return (
|
||||
<a className='cardGameMainWrapperLink' href='search.html'>
|
||||
<div
|
||||
className='cardGameMain'
|
||||
style={{
|
||||
background: `url("${backgroungLink}") center / cover no-repeat`
|
||||
}}
|
||||
></div>
|
||||
<div className='cardGameMainTitle'>
|
||||
<p>This is a game title, the best game title</p>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
type ModCardProps = {
|
||||
backgroundLink: string
|
||||
}
|
||||
|
||||
const ModCard = ({ backgroundLink }: ModCardProps) => {
|
||||
return (
|
||||
<a className='cardModMainWrapperLink' href='mods-inner.html'>
|
||||
<div className='cardModMain'>
|
||||
<div
|
||||
className='cMMPicture'
|
||||
style={{
|
||||
background: `url("${backgroundLink}") center / cover no-repeat`
|
||||
}}
|
||||
></div>
|
||||
<div className='cMMBody'>
|
||||
<h3 className='cMMBodyTitle'>
|
||||
This is a mod title for an awesome game that will make everyone
|
||||
happy! The happiest!
|
||||
</h3>
|
||||
<p className='cMMBodyText'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
|
||||
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
|
||||
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
|
||||
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos.
|
||||
Curabitur sodales ligula in libero.
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
<div className='cMMFoot'>
|
||||
<div className='cMMFootReactions'>
|
||||
<div className='cMMFootReactionsElement'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 512 512'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
|
||||
</svg>
|
||||
<p>420</p>
|
||||
</div>
|
||||
<div className='cMMFootReactionsElement'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 512 512'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
|
||||
</svg>
|
||||
<p>420</p>
|
||||
</div>
|
||||
<div className='cMMFootReactionsElement'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 512 512'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
|
||||
</svg>
|
||||
<p>420</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
type BlogCardProps = {
|
||||
backgroundLink: string
|
||||
}
|
||||
|
||||
const BlogCard = ({ backgroundLink }: BlogCardProps) => {
|
||||
return (
|
||||
<a className='cardBlogMainWrapperLink' href='blog-inner.html'>
|
||||
<div
|
||||
className='cardBlogMain'
|
||||
style={{
|
||||
background: `url("${backgroundLink}") center / cover no-repeat`
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='cardBlogMainInside'
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient( rgba(255, 255, 255, 0) 0%, #232323 100%)'
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
WebkitLineClamp: 2,
|
||||
fontSize: '20px',
|
||||
lineHeight: 1.5,
|
||||
color: 'rgba(255, 255, 255, 0.75)',
|
||||
textShadow: '0 0 8px rgba(0, 0, 0, 0.25)'
|
||||
}}
|
||||
>
|
||||
This is a blog title, the best blog title in the world!
|
||||
</h3>
|
||||
</div>
|
||||
</div>{' '}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
257
src/styles/SimpleSlider.css
Normal file
257
src/styles/SimpleSlider.css
Normal file
@ -0,0 +1,257 @@
|
||||
.swiper-pagination-bullet-active {
|
||||
background: rgba(255,255,255,0.5);
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.simple-slider .swiper-slide {
|
||||
height: 400px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.simple-slider .swiper-slide {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.simple-slider .swiper-slide {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
|
||||
width: 50px;
|
||||
margin-left: 00px;
|
||||
margin-right: 00px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
padding: 10px;
|
||||
height: 75px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.simple-slider .swiper-button-next:hover, .simple-slider .swiper-button-prev:hover {
|
||||
background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
}
|
||||
|
||||
.swiper-button-next:after, .swiper-button-prev:after {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width:992px) {
|
||||
.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
width: 48%;
|
||||
height: unset;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-slider.IBMSMSlider {
|
||||
cursor: grab;
|
||||
/*border-radius: 10px;*/
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.simple-slider.IBMSMSlider:active {
|
||||
border-radius: 10px;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.swiper-container.IBMSMSliderContainer {
|
||||
padding: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.swiper-wrapper.IBMSMSliderContainerWrapper {
|
||||
}
|
||||
|
||||
.swiper-slide.IBMSMSliderContainerWrapperSlider {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 0.75fr;
|
||||
grid-gap: 25px;
|
||||
padding: 0 75px;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.swiper-slide.IBMSMSliderContainerWrapperSlider {
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
padding: 0 0 25px 0;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swiper-slide.IBMSMSliderContainerWrapperSlider {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMSliderContainerWrapperSliderAction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btnMain.IBMSMSliderContainerWrapperSliderActionbtn::before {
|
||||
transition: ease 0.4s;
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
z-index: -1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btnMain.IBMSMSliderContainerWrapperSliderActionbtn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btnMain.IBMSMSliderContainerWrapperSliderActionbtn:hover::before {
|
||||
transition: ease 0.4s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.swiper-button-next {
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.swiper-button-prev {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.SliderWrapper {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
background: rgba(0,0,0,0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: -25px 0 0 0;
|
||||
border-bottom: solid 1px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.IBMSMSCWSPic {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: solid 1px rgba(255,255,255,0.05);
|
||||
padding-top: 50%;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.IBMSMSCWSInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 25px;
|
||||
justify-content: center;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(to top right, rgb(38,38,38), rgb(41,41,41), rgb(38,38,38));
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
border: solid 1px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.IBMSMSCWSInfo {
|
||||
/*margin: -25px 10px 0 10px;*/
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.IBMSMSCWSInfo {
|
||||
grid-gap: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMSCWSInfoHeading {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.IBMSMSCWSInfoText {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 8;
|
||||
color: rgba(255,255,255,0.5);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.IBMSMSCWSInfoText {
|
||||
-webkit-line-clamp: 4;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.swiper-pagination {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background: rgba(0,0,0,0.5);
|
||||
opacity: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background: rgba(128,0,255,0.5);
|
||||
}
|
||||
|
||||
40
src/styles/cardBlogs.css
Normal file
40
src/styles/cardBlogs.css
Normal file
@ -0,0 +1,40 @@
|
||||
.cardBlogMain {
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cardBlogMainWrapperLink {
|
||||
transition: ease 0.4s;
|
||||
text-decoration: unset;
|
||||
color: unset;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
position: relative;
|
||||
border: solid 1px #232323;
|
||||
}
|
||||
|
||||
.cardBlogMainWrapperLink:hover {
|
||||
transition: ease 0.4s;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.cardBlogMainWrapperLink:active {
|
||||
transition: ease 0.1s;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.cardBlogMainInside {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: start;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
39
src/styles/cardGames.css
Normal file
39
src/styles/cardGames.css
Normal file
@ -0,0 +1,39 @@
|
||||
.cardGameMainWrapperLink {
|
||||
transition: ease 0.4s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.cardGameMainWrapperLink:hover {
|
||||
transition: ease 0.4s;
|
||||
transform: scale(1.02);
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.cardGameMainWrapperLink:active {
|
||||
transition: ease 0.1s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.cardGameMain {
|
||||
padding-top: 150%;
|
||||
border-radius: 15px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.cardGameMainTitle {
|
||||
transition: ease 0.4s;
|
||||
color: rgba(255,255,255,0.5);
|
||||
padding: 0 15px;
|
||||
font-weight: bold;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
87
src/styles/cardLists.css
Normal file
87
src/styles/cardLists.css
Normal file
@ -0,0 +1,87 @@
|
||||
.IBMSecMain.IBMSMListWrapper {
|
||||
grid-gap: 25px 0;
|
||||
}
|
||||
|
||||
.IBMSMList {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
.IBMSMListAlt {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.IBMSMList {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.IBMSMList {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.IBMSMList {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMList.IBMSMListFeatured {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.IBMSMList.IBMSMListFeatured {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.IBMSMList.IBMSMListFeatured {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMList.IBMSMListFeaturedAlt {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.IBMSMList.IBMSMListFeaturedAlt {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.IBMSMList.IBMSMListFeaturedAlt {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.IBMSMList.IBMSMListFeaturedAlt {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMList.IBMSMListFeed {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.IBMSMList.IBMSMListFeed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
118
src/styles/cardMod.css
Normal file
118
src/styles/cardMod.css
Normal file
@ -0,0 +1,118 @@
|
||||
.cardModMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to top right, #262626, #292929, #262626);
|
||||
}
|
||||
|
||||
.cMMPicture {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.cMMBody {
|
||||
padding: 15px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 15px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.cMMFoot {
|
||||
width: 100%;
|
||||
padding: 10px 25px;
|
||||
border-top: solid 1px rgba(255,255,255,0.05);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardModMainWrapperLink {
|
||||
transition: ease 0.4s;
|
||||
text-decoration: unset;
|
||||
color: unset;
|
||||
transform: scale(1);
|
||||
border-radius: 12px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.cardModMainWrapperLink:hover {
|
||||
transition: ease 0.4s;
|
||||
text-decoration: unset;
|
||||
color: unset;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.cardModMainWrapperLink:active {
|
||||
transition: ease 0.1s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.cardModMainWrapperLink::before {
|
||||
transition: ease 0.4s;
|
||||
background: linear-gradient(to top, #8000ff 0%, #232323 50%, rgba(255,255,255,0) 100%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cardModMainWrapperLink:hover::before {
|
||||
transition: 0.4s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cMMBodyTitle {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cMMBodyText {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
color: rgba(255,255,255,0.5);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cMMFootReactions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
grid-gap: 25px;
|
||||
}
|
||||
|
||||
.cMMFootReactionsElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
520
src/styles/styles.css
Normal file
520
src/styles/styles.css
Normal file
@ -0,0 +1,520 @@
|
||||
.htmlMain {
|
||||
Background: linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
|
||||
Background: -webkit-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
|
||||
Background: -moz-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
|
||||
.bodyMain {
|
||||
background: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
letter-spacing: 1px;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
word-break: break-word;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ContainerMain {
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: end;
|
||||
padding: 0 10px 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.InnerBodyMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.IBMSecMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.IBMSMTitleMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.IBMSMTitleMain {
|
||||
}
|
||||
}
|
||||
|
||||
.IBMSMTitleMainHeading {
|
||||
color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
.btnMain {
|
||||
transition: ease 0.4s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
outline: unset;
|
||||
border: unset;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.btnMain:hover {
|
||||
transition: ease 0.4s;
|
||||
outline: unset;
|
||||
border: unset;
|
||||
color: rgba(255,255,255,0.75);
|
||||
background: rgba(255,255,255,0.1);
|
||||
transform: scale(1.01);
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.btnMain:active {
|
||||
transition: ease 0.1s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.btnMain:focus {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btnMain.btnMainClear {
|
||||
background: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
.btnMain.btnMainClear:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btnMain.btnMainClear.btnMainClearActive {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.btnMain.btnMainAltText {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.IBMSecMainGroup {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 75px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.IBMSMAction {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btnMain.IBMSMActionBtn::before {
|
||||
transition: ease 0.4s;
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
z-index: -1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btnMain.IBMSMActionBtn {
|
||||
background: unset;
|
||||
box-shadow: unset;
|
||||
padding: 10px 25px;
|
||||
border: solid 1px rgba(255,255,255,0.05);
|
||||
color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.btnMain.IBMSMActionBtn:hover {
|
||||
border: solid 1px rgba(255,255,255,0);
|
||||
color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
.btnMain.IBMSMActionBtn:hover::before {
|
||||
transition: ease 0.4s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.IBMSecMainGroup.IBMSecMainGroupAlt {
|
||||
grid-gap: 25px;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
.IBMSMTitleMainHeadingSpan {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.blockquoteMainWrapper {
|
||||
padding: 0 0 0 25px;
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blockquoteMain {
|
||||
width: 100%;
|
||||
border-radius: 0 10px 10px 0;
|
||||
border-left: solid 6px rgba(255,255,255,0.1);
|
||||
padding: 25px;
|
||||
background: #232323;
|
||||
font-style: italic;
|
||||
color: rgba(255,255,255,0.75);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blockquoteMainText {
|
||||
}
|
||||
|
||||
.dropdownMain {
|
||||
/*width: 100%;*/
|
||||
background-color: unset;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.btnMain.btnMainDropdown {
|
||||
width: 100%;
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
padding: 5px 15px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.btnMain.btnMainDropdown:focus {
|
||||
outline: unset;
|
||||
box-shadow: unset;
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.dropdownMainMenu {
|
||||
width: 100%;
|
||||
padding: 5px 5px 0 5px;
|
||||
background: #232323;
|
||||
border-radius: 10px;
|
||||
border: solid 1px rgba(255,255,255,0.1);
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dropdownMainMenuItem {
|
||||
transition: ease 0.4s;
|
||||
background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
color: rgba(255,255,255,0.75);
|
||||
border-radius: 5px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
padding: 5px 10px;
|
||||
margin: 0 0 5px 0;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.dropdownMainMenuItem:hover {
|
||||
transition: ease 0.4s;
|
||||
background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626);
|
||||
color: rgba(255,255,255,0.75);
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.inputMain {
|
||||
transition: ease 0.4s;
|
||||
background: rgba(0,0,0,0.1);
|
||||
outline: unset;
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
border: solid 1px rgba(255,255,255,0.1);
|
||||
box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inputMain:focus {
|
||||
border: solid 1px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.labelMain {
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inputWrapperMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.inputWrapperMainWrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.labelDescriptionMain {
|
||||
color: rgba(255,255,255,0.35);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btnMain.btnMainRemove {
|
||||
background: rgba(255,255,255,0);
|
||||
padding: 0;
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.btnMain.btnMainRemove:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
.btnMain.btnMainAdd {
|
||||
background: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
.btnMain.btnMainAdd:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.labelWrapperMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inputLabelWrapperMain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.inputLabelWrapperMain.inputLabelWrapperMainAlt {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inputLabelWrapperMain.inputLabelWrapperMainAltStylized {
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.linkMain {
|
||||
color: rgba(255,115,255,0.5);
|
||||
}
|
||||
|
||||
.FundingCampaign {
|
||||
width: 100%;
|
||||
background: rebeccapurple;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.FundingCampaign {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.FundingCampaignLink {
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-weight: bold;
|
||||
text-decoration: unset;
|
||||
padding: 10px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.FundingCampaignLink {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.FundingCampaignLink:hover {
|
||||
color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.CheckboxMain {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-radius: 8px;
|
||||
border: solid 1px rgba(255,255,255,0.1);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CheckboxMain::before {
|
||||
transition: ease 0.4s;
|
||||
content: "\2713";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: scale(0);
|
||||
transition: 120ms transform ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CheckboxMain:checked::before {
|
||||
transition: ease 0.2s;
|
||||
transform: scale(1);
|
||||
background: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.CheckboxMain:hover {
|
||||
border: solid 1px rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(44,44,44);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255,115,255,0.5);
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgba(255,115,255,0.75);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.inputWrapperMainBox {
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.form-range.inputRangeMain {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-range.inputRangeMain::-webkit-slider-runnable-track {
|
||||
transition: ease 0.4s;
|
||||
background: rgba(0,0,0,0.25);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-range.inputRangeMain::-webkit-slider-runnable-track:hover {
|
||||
transition: ease 0.4s;
|
||||
background: rgba(0,0,0,0.35);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-range.inputRangeMain::-webkit-slider-thumb {
|
||||
transition: ease 0.4s;
|
||||
background: #a0a0a0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-range.inputRangeMain::-webkit-slider-thumb:hover {
|
||||
transition: ease 0.4s;
|
||||
background: #dcdcdc;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.inputLabelWrapperMainSliderWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user