@font-face {
font-family: "kalameh";
src: url("../fonts/woff2/KalamehWeb-Regular.woff2") format(woff2);
}
:root {
--app-bg-color: #07101D;
--orange-color: #FF3C00;
}
/*
--Reset Styles
*/
input,
button {
border: none !important;
outline: none !important;
}
/*
--Utinities
*/
.w_40 {
width: 40%;
}
.w_60 {
width: 60%;
}
.bg_orange {
background-color: var(--orange-color);
color: #ffffff;
}
.text_orange {
color: var(--orange-color);
}
.border_orange {
border: 1px solid var(--orange-color);
}
.main__gradient {
background: linear-gradient(to right, #7011AD, #BC0505, #FC630F);
}
/*
--Healpers
*/
.section__head {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 3rem;
}
.section__info {
display: flex;
align-items: center;
gap: 16px;
color: #ffffff;
}
.section__icon {
display: flex;
align-items: center;
justify-content: center;
width: 81px;
height: 81px;
border-radius: 100%;
}
.section__svg {
color: #ffffff;
width: 48px;
height: 48px;
}
.section__title {
font-size: 32px;
}
.section__subtitle {
font-size: 20px;
}
.section__link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
color: #ffffff;
}
.section-link__svg {
width: 36px;
height: 36px;
}
/*
--App style
*/
body {
font-family: "kalameh";
background-color: var(--app-bg-color);
position: relative;
overflow-x: hidden !important;
}
/*
------------
Header
------------
*/
.header__svg {
width: 32px;
height: 32px;
}
/*
------------
Main
------------
*/
/*
===========
Home
===========
*/
.home::before {
content: url("../images/home-bacground-img.png");
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.home::after {
content: '';
position: absolute;
right: -274px;
top: -273px;
z-index: -1;
width: 904px;
height: 876px;
background-image: radial-gradient(rgb(140 28 204 / 38%), rgb(7, 15, 28, 0%));
filter: blur(70px);
opacity: 0.5;
border-radius: 100%;
}
.home__title {
font-size: 3.5rem;
}
.home__links {
width: 75%;
}
.search-input__icon {
width: 32px;
height: 32px;
}
.home__link {
height: 68px;
border-radius: 30px;
}
.home__img-wrapper {
position: relative;
}
.home__img-wrapper::before {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
bottom: 15%;
left: 0;
width: 64px;
height: 30px;
}
.home__img-wrapper::after {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
top: 10%;
right: 20%;
width: 35px;
height: 47px;
}
.home-users__img {
width: 117px;
}
.home__users-icon {
position: absolute;
display: flex;
align-items: center;
gap: 13px;
bottom: 15%;
right: 15%;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
}
.home-img__text {
word-spacing: 4px;
}
/*
===========
Wallet
===========
*/
.wallet__box {
padding: 1px;
height: 188px;
background: linear-gradient(to right bottom, #07101D, #FC280C);
}
.wallet__box::after {
content: '';
width: 43px;
height: 24px;
background-color: #07101D;
position: absolute;
right: -14px;
bottom: -5px;
transform: rotate(-45deg);
border-top: 1px solid #FC280C;
}
.wallet_box--second {
background: linear-gradient(to right bottom, #07101D, #00D1FF);
}
.wallet_box--second::after {
border-top: 1px solid #00D1FF;
}
.wallet__box--third {
background: linear-gradient(to right bottom, #07101D, #760AFF);
}
.wallet__box--third::after {
border-top: 1px solid #760AFF;
}
.wallet__box--fourth {
background: linear-gradient(to right bottom, #07101D, #FE007A);
}
.wallet__box--fourth::after {
border-top: 1px solid #FE007A;
}
.wallet__box--fifth {
background: linear-gradient(to right bottom, #07101D, #FFBB0D);;
}
.wallet__box--fifth::after {
border-top: 1px solid #FFBB0D;
}
.wallet__item {
background-color: #161E2A;
}
.wallet__text {
font-size: 20px;
}
/*
===============
Hot Affers
===============
*/
.hot-affers {
margin-top: 100px;
position: relative;
}
.hot-affers::after {
content: '';
position: absolute;
bottom: -20rem;
left: -8rem;
width: 952px;
height: 991px;
z-index: -1;
filter: blur(50px);
background: radial-gradient(62.37% 62.37% at 50.00% 50.00%, rgba(8, 164, 117, 0.10) 28.57%, rgba(7, 15, 28, 0.00) 100%);
}
.hot-affers__item {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
padding: 19px 16px 22px 16px;
border-radius: 20px;
}
.hot-affer__banner {
position: relative;
}
.hot-affer-banner__svg-wrapper {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
backdrop-filter: blur(10px);
cursor: pointer;
}
.hot-affer-banner__svg {
width: 32px;
height: 32px;
}
.hot-affer__timer {
position: absolute;
right: 0;
left: 0;
top: 20px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 25px;
backdrop-filter: blur(10px);
height: 58px;
width: 172px;
font-size: 20px;
font-weight: bold;
}
.hot-affer__svg {
width: 21px;
height: 34px;
}
.hot-affer__price,
.trend__price {
font-size: 20px;
}
/*
============
Options
============
*/
.options {
margin-top: 160px;
}
.options__row {
row-gap: 4rem;
}
.options__item {
background: linear-gradient(100deg, rgba(0, 255, 26, 0.1), rgba(255, 255, 255, 0.1));
border: 1px solid #00FF1A;
border-radius: 10px;
padding: 50px 18px 30px 18px;
}
.options__item--second {
background: linear-gradient(100deg, rgba(74, 1, 224, 0.1), rgba(255, 255, 255, 0.1));
border: 1px solid #5300FF;
}
.options__item--third {
background: linear-gradient(100deg, rgba(255, 19, 4, 0.1), rgba(255, 255, 255, 0.1));
border: 1px solid #FF1F00;
}
.options__icon {
position: absolute;
top: -48px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(25px);
}
.options__svg {
width: 32px;
height: 32px;
}
/*
===========
Trends
===========
*/
.trends {
margin-top: 120px;
}
.trends::after {
content: '';
position: absolute;
bottom: 65rem;
right: -30rem;
width: 1000px;
height: 1000px;
background: radial-gradient(62.37% 62.37% at 50% 50%, rgba(189, 9, 95, 0.13) 37.62%, rgba(7, 15, 28, 0.00) 100%);
z-index: -1;
}
.trends__row {
row-gap: 2rem;
}
.trends__item {
padding-right: 20px;
padding-left: 20px;
}
.trend__cover {
margin-bottom: -5rem;
}
.trend__info {
padding: 100px 22px 20px 22px;
margin: 0 -20px 0 -20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.trend-item__title {
font-size: 26px;
}
/*
================
Top Artists
================
*/
.top-artists {
margin-top: 100px;
}
.artists__row {
row-gap: 1.5rem;
}
.artist__item {
display: flex;
align-items: center;
justify-content: end;
gap: 24px;
padding: 36px 24px;
border: 2px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
text-align: left;
color: #ffffff;
border-radius: 10px;
}
.artist__name {
margin-bottom: 12px;
}
.artist__svg {
width: 16px;
height: 16px;
}
.yellow-star {
color: #FFE500;
}
.grey-star {
color: rgba(255, 255, 255, 0.5);
}
.artist__sale {
margin-top: 12px;
}
.artist__img {
width: 125px;
}
/*
================
Contact Us
================
*/
.contact-us {
margin-top: 100px;
}
.contact-us__wrapper {
background: linear-gradient(90deg, #A50E86 0.16%, #C10B70 24.02%, #E83947 38.73%, #DF330D 55.88%, #C55212 81.05%, #D37506 100%);
height: 324px;
padding: 16px;
}
.contact-us__wrapper::after {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.contact-us__wrapper::before {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
}
.contact-us__content {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 149px 0 rgba(255,255,255,0.6);
z-index: 3;
}
.contact-us__title {
font-size: 40px;
margin-bottom: 24px;
}
.contact-us__text {
font-size: 20px;
padding: 5px;
}
.contact-us__form {
width: 65%;
margin-top: 37px;
z-index: 3;
}
.contact-us__input {
width: 80%;
text-align: right;
background-color: #ffffff;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
padding: 1rem;
}
.contact-us__btn {
width: 20%;
color: #ffffff;
background-color: #07101D;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
/*
-------------
Footer
-------------
*/
.footer {
position: relative;
margin-top: 100px;
background-color: #091028;
padding: 70px 0 50px 0;
border-top: 1px solid;
border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 1;
overflow: hidden;
z-index: 3;
}
.footer::before {
content: '';
position: absolute;
top: 2rem;
right: -15rem;
width: 615px;
height: 584px;
background: linear-gradient(rgba(8, 52, 164, 0.2), rgba(7, 15, 28, 0));
border-radius: 100%;
filter: blur(50px);
z-index: -1;
}
.footer__row {
row-gap: 2rem;
}
.footer__lists {
list-style: none;
}
.footer__link {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 150ms ease-in;
}
.footer__link:hover {
background: linear-gradient(to right, #7011AD, #BC0505, #FC630F);
}
.footer__link:hover .footer__svg {
color: #ffffff;
}
.footer__svg {
width: 40px;
height: 40px;
color: rgba(255, 255, 255, 0.5);
transition: all 100ms ease-in;
}
/*
==Media Queries
*/
@media (max-width: 1400px) {
.hot-affer__timer {
width: 150px;
font-size: 18px;
}
}
@media (max-width: 1200px) {
.home__text,
.home__caption {
font-size: 1rem !important;
}
.home__title {
font-size: 2.5rem;
}
.search-input__icon {
width: 24px;
height: 24px;
}
.home__link {
height: 45px;
font-size: 14px;
}
.home-users__img {
width: 65px;
}
.home-img__text {
font-size: 13px !important;
word-spacing: 0 !important;
}
.section__icon {
width: 68px;
height: 68px;
}
.section__svg {
width: 38px;
height: 38px;
}
.section__title {
font-size: 26px;
}
.section__subtitle {
font-size: 16px;
}
.section__link {
font-size: 15px;
}
.section-link__svg {
width: 24px;
height: 24px;
}
.hot-affer-banner__svg-wrapper {
top: 14px;
left: 14px;
width: 50px;
height: 50px;
}
.hot-affer-banner__svg {
width: 26px;
height: 26px;
}
.hot-affer__timer {
width: 120px;
font-size: 15px;
top: 15px;
height: 50px;
}
.trends::after {
content: none;
}
}
@media (max-width: 992px) {
.header__svg {
width: 24px;
height: 24px;
}
.home__title {
font-size: 2rem;
}
.home__text, .home__caption {
font-size: 14px !important;
}
.home__links {
width: 100%;
}
.hot-affers {
margin-top: 50px;
}
.options {
margin-top: 90px;
}
.trends {
margin-top: 60px
}
.trend-item__title {
font-size: 21px;
}
.trend__price {
font-size: 14px;
}
.contact-us {
margin-top: 50px;
}
.contact-us__title {
font-size: 35px;
}
.contact-us__text {
font-size: 16px;
}
}
@media (max-width: 768px) {
.home__mobile-img {
width: 350px !important;
}
.home__img-wrapper::after {
right: 10%;
width: 26px;
height: 21px;
}
.home__img-wrapper::before {
width: 30px;
height: 25px;
}
.hot-affer__price {
font-size: 16px;
}
.hot-affer__link {
font-size: 13px;
}
}
@media (max-width: 567px) {
.home__mobile-img {
margin-right: -5rem;
}
.home::after {
position: static;
}
.home__input,
.home__link {
font-size: 12px;
}
.section__icon {
width: 40px;
height: 40px;
}
.section__svg {
width: 24px;
height: 24px;
}
.section__title {
font-size: 19px;
}
.section__link {
font-size: 12px;
}
.section-link__svg {
width: 18px;
height: 18px;
}
.wallet__box {
height: 144px;
}
.wallet-item__img-wrapper {
width: 50%;
}
.wallet__text {
font-size: 14px;
}
.hot-affer__price,
.hot-affer__link,
.trend__price {
font-size: 16px;
}
.trends::after {
top: -10rem;
width: 815px;
height: 815px;
}
.contact-us__wrapper {
background: linear-gradient(180deg, #D37506 0%, #DF330D 46.72%, #A50E86 100%);
}
.contact-us__title {
font-size: 30px;
}
.contact-us__text {
font-size: 13px;
}
.contact-us__form {
width: 90%;
}
.contact-us__input {
width: 70%;
padding: 13px;
font-size: 14px;
}
.contact-us__btn {
width: 30%;
}
.footer {
margin-top: 60px;
padding: 50px 0 50px 0;
}
}