diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0d32366 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +package.json \ No newline at end of file diff --git a/README.md b/README.md index 29271f9..de07e4b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1 @@ -# Landing Theme Intro -... - -# Pages -- basket -- product details -- product list and packages -- sign-in -- sign-up -- blog -- - -# License -... +# BeeTheme diff --git a/app-land/css/style.css b/app-land/css/style.css new file mode 100644 index 0000000..b610f24 --- /dev/null +++ b/app-land/css/style.css @@ -0,0 +1,1458 @@ +@charset "UTF-8"; +/*======================================================================================== +********* +******* IMPORT ALL OF THE STYLES HERE +***** +*** +*/ +/*-------------------------------- +*** shared files +** +*/ +/* =================================== + 🌐 MAIN IMPORT FILE + Collects and imports all SASS modules +====================================== */ +/* ~~~~~~~~~~~~~~🔹 ABSTRACTS 🔹~~~~~~~~~~~~~~ */ +/* Variables, Mixins, Media Queries, and Functions */ +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ +/*-------------------------------- +*** GENERAL DIFINITIONS +** CSS3 , CLEARFIX +*/ +@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans"); +.container { + width: 90%; +} + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** 4K AND HIGH RESOULOTIONS +** MIN-WIDTH : 2560px OR 160em +*/ +/*-------------------------------- +*** LAPTOP OR DESKTOP +** MIN-WIDTH : 1400px OR 87.5em +*/ +/*-------------------------------- +*** FOR SOM OF THE DEVICES +** MIN-WIDTH : 1201px OR 75.0625em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1200px OR 75em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1024px OR 64em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 992px OR 62em +*/ +/*-------------------------------- +*** FOR RETINA MOBILE AND LANSCAPE +** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em +*/ +/*-------------------------------- +*** FOR MOBILE +** MAX : 640PX / 40em +*/ +/*-------------------------------- +*** FOR MINI MOBILE +** MAX : 400PX / 25em +*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/* ~~~~~~~~~~~~~~🔸 BASE 🔸~~~~~~~~~~~~~~ */ +/* Global styles, Resets, and Utilities */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; + width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +/* ~~~~~~~~~~~~~~🟢 COMPONENTS 🟢~~~~~~~~~~~~~~ */ +/* Reusable components and UI elements */ +/*========================================================= +********* Generic Button Component +******* +*/ +/* ~~~~~~~~~~~~~~⚙️ LAYOUT ⚙️~~~~~~~~~~~~~~ */ +/* Grid systems, structure, and layout styles */ +/*======================= +********* GRIDS COL +******* MEDIA QUERY +***** +*** +*/ +.row { + width: 100%; + display: block; + clear: both; +} + +@media screen and (min-width: 75.0625em) { + .col-xl-1 { + width: 8.3333333333%; + float: left; + } + .col-xl-2 { + width: 16.6666666667%; + float: left; + } + .col-xl-3 { + width: 25%; + float: left; + } + .col-xl-4 { + width: 33.3333333333%; + float: left; + } + .col-xl-5 { + width: 41.6666666667%; + float: left; + } + .col-xl-6 { + width: 50%; + float: left; + } + .col-xl-7 { + width: 58.3333333333%; + float: left; + } + .col-xl-8 { + width: 66.6666666667%; + float: left; + } + .col-xl-9 { + width: 75%; + float: left; + } + .col-xl-10 { + width: 83.3333333333%; + float: left; + } + .col-xl-11 { + width: 91.6666666667%; + float: left; + } + .col-xl-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 75em) { + .col-lg-1 { + width: 8.3333333333%; + float: left; + } + .col-lg-2 { + width: 16.6666666667%; + float: left; + } + .col-lg-3 { + width: 25%; + float: left; + } + .col-lg-4 { + width: 33.3333333333%; + float: left; + } + .col-lg-5 { + width: 41.6666666667%; + float: left; + } + .col-lg-6 { + width: 50%; + float: left; + } + .col-lg-7 { + width: 58.3333333333%; + float: left; + } + .col-lg-8 { + width: 66.6666666667%; + float: left; + } + .col-lg-9 { + width: 75%; + float: left; + } + .col-lg-10 { + width: 83.3333333333%; + float: left; + } + .col-lg-11 { + width: 91.6666666667%; + float: left; + } + .col-lg-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 62em) { + .col-md-1 { + width: 8.3333333333%; + float: left; + } + .col-md-2 { + width: 16.6666666667%; + float: left; + } + .col-md-3 { + width: 25%; + float: left; + } + .col-md-4 { + width: 33.3333333333%; + float: left; + } + .col-md-5 { + width: 41.6666666667%; + float: left; + } + .col-md-6 { + width: 50%; + float: left; + } + .col-md-7 { + width: 58.3333333333%; + float: left; + } + .col-md-8 { + width: 66.6666666667%; + float: left; + } + .col-md-9 { + width: 75%; + float: left; + } + .col-md-10 { + width: 83.3333333333%; + float: left; + } + .col-md-11 { + width: 91.6666666667%; + float: left; + } + .col-md-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 47.9375em) { + .col-sm-1 { + width: 8.3333333333%; + float: left; + } + .col-sm-2 { + width: 16.6666666667%; + float: left; + } + .col-sm-3 { + width: 25%; + float: left; + } + .col-sm-4 { + width: 33.3333333333%; + float: left; + } + .col-sm-5 { + width: 41.6666666667%; + float: left; + } + .col-sm-6 { + width: 50%; + float: left; + } + .col-sm-7 { + width: 58.3333333333%; + float: left; + } + .col-sm-8 { + width: 66.6666666667%; + float: left; + } + .col-sm-9 { + width: 75%; + float: left; + } + .col-sm-10 { + width: 83.3333333333%; + float: left; + } + .col-sm-11 { + width: 91.6666666667%; + float: left; + } + .col-sm-12 { + width: 100%; + float: left; + } +} +/*-------------------------------- +*** IMPORT GENERAL AND IMPORTANT +** VARIABLES +*/ +/*======================================================================================== +********* ALL OF THE VARIABLES TYPE +******* COLORS +***** GRIDS +*** +*/ +/*========================================================================================*\ +*---------------------------- COLORS ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** FLAT UI COLORS +** flatuicolors.com/palette/defo +*/ +/*========================================================================================*\ +*---------------------------- SHADOW ---------------------------- +\*========================================================================================*/ +/*========================================================================================*\ +*---------------------------- FONTS ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** SET DIRECTION BEFORE ANYTHING +** +*/ +body { + font-family: "Poppins", sans-serif; + overflow-x: hidden; +} +body * { + padding: 0; + margin: 0; + font: revert; +} +body a { + text-decoration: none; + color: rgb(0, 0, 0); +} +body a:hover { + transition: 0.5s; + color: rgb(170, 170, 170); +} +body li { + list-style-type: none; +} + +/*-------------------------------- +*** SET DIRECTION BEFORE ANYTHING +** +*/ +.cta__button--button { + width: 7rem; + height: 3rem; + background: rgb(84, 234, 84); + border: none; + border-radius: 2rem; + cursor: pointer; +} +.cta__button--button:hover { + transition: 0.3s ease-in-out; + background: rgb(71, 198, 71); +} + +/*-------------------------------- +*** IMPORT GENERAL AND IMPORTANT +** MIXINS +*/ +/*-------------------------------- +*** LAYOUT +** HEADER, HERO SECTION, EXPLORE HUB, SMART SOLUTIONS, CUSTOMER REVIEWS, PLAN SELECTOR HUB +*/ +.header .hide-on-laptop { + display: none; +} +.header__main { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.25em; +} +.header__main nav ul { + padding: 0; + margin: 0; + display: flex; + list-style: none; +} +.header__main nav ul li { + margin: 0 0.75em; +} +.header__hidden { + position: fixed; + top: 0; + right: 0; + height: 100vh; + width: 250px; + z-index: 13; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.2); + box-shadow: -10px 0 0.75em rgba(0, 0, 0, 0.1); + text-align: center; + display: none; +} +.header__hidden .logo { + height: 2rem; + width: 100%; +} +.header__hidden--nav { + top: 2rem; + position: relative; +} +.header__hidden--nav ul li { + height: 3rem; + width: 100%; +} +.header .cta__button--button { + background-color: rgb(84, 234, 84); +} +.header .cta__button--button:hover { + background-color: rgb(71, 198, 71); +} +@media screen and (max-width: 40em) { + .header .hide-on-laptop { + display: block; + } + .header .hide-on-mobile { + display: none; + } +} +@media screen and (min-width: 31.25em) and (max-width: 47.9375em) { + .header .hide-on-laptop { + display: block; + } + .header .hide-on-mobile { + display: none; + } +} + +.hero__section { + border-radius: 1.5em; + position: relative; + left: 1.2rem; + width: 97%; + height: 50rem; + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ +} +.hero__section--img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 2em; +} +.hero__section--text-overlay { + background-color: rgba(0, 0, 0, 0.5); + border-radius: 1.5em; + position: absolute; + color: rgb(255, 255, 255); + width: 28rem; + left: 8rem; + height: 24rem; + top: 10rem; +} +.hero__section--text-overlay .container { + width: 95%; + top: 0rem; + position: relative; + left: 0.5rem; + height: 100%; +} +.hero__section--text-overlay .container h1 { + text-align: center; + padding-top: 1em; + font-size: 1.875em; + font-weight: 700; +} +.hero__section--text-overlay .container p { + padding-top: 1em; + line-height: 1.4; +} +.hero__section--text-overlay .container .cta__button { + position: relative; + text-align: center; + display: flex; + width: 27rem; + gap: 2em; + left: 0rem; + padding-top: 1em; + text-align: center; + place-content: center; +} +.hero__section--text-overlay .container .cta__button--button { + width: 9rem; + border: none; + border-radius: 0.5em; + height: 3rem; + font-size: 1em; +} +.hero__section--text-overlay .container .cta__button--button-more { + background-color: rgb(170, 170, 170); + width: 9rem; + border: none; + border-radius: 0.5em; + height: 3rem; + cursor: pointer; + font-size: 1em; +} +.hero__section--text-overlay .container .cta__button--button-more:hover { + transition: 0.3s ease-in-out; + background-color: rgb(139, 135, 135); +} +.hero__section--text-overlay .container .stats-container { + position: relative; + padding-top: 1em; + display: flex; + width: 27rem; + justify-content: center; + gap: 2em; +} +@media screen and (max-width: 40em) { + .hero__section { + overflow-x: hidden; + left: 0.5rem; + } + .hero__section .hero__section--text-overlay { + font-size: 0.75em; + height: 100%; + width: 100%; + left: 0; + top: 0; + } + .hero__section .hero__section--text-overlay .container { + top: 10rem; + text-align: center; + left: 0.7rem; + height: 20rem; + } + .hero__section .hero__section--text-overlay .container h1 { + font-size: 3em; + } + .hero__section .hero__section--text-overlay .container p { + font-size: 1.25em; + width: 76%; + left: 3rem; + position: relative; + font-weight: 700; + padding-top: 2em; + } + .hero__section .hero__section--text-overlay .container .cta__button { + position: relative; + text-align: center; + display: flex; + gap: 2em; + padding-top: 2em; + text-align: center; + place-content: center; + width: 100%; + left: 0; + } + .hero__section .hero__section--text-overlay .container .cta__button--button { + font-size: 1.25em; + } + .hero__section .hero__section--text-overlay .container .cta__button--button-more { + font-size: 1.25em; + } + .hero__section .hero__section--text-overlay .container .stats-container { + left: 0; + font-size: 1.125em; + padding-top: 2em; + gap: 3em; + margin: 0 auto; + } + .hero__section .hero__section--text-overlay .container .stats-container .stat-item p { + width: 100%; + } + .hero__section .hero__section--text-overlay .container .stats-container .stat-item p:first { + left: 2.5rem; + } + .hero__section .hero__section--text-overlay .container .stats-container .stat-item p:last-child { + left: 0.5rem; + } +} + +.explore__hub { + position: relative; + padding-top: 5rem; + width: 97%; + left: 1rem; + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1200px OR 75em + */ + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + /*-------------------------------- + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + /*-------------------------------- + *** FOR MOBILE + ** MAX : 640PX / 40em + */ +} +.explore__hub h2 { + font-size: 3em; + font-weight: 600; +} +.explore__hub .header__section { + display: flex; + justify-content: space-between; + padding-top: 2em; +} +.explore__hub .header__section p { + width: 24rem; + line-height: 1.4; +} +.explore__hub .header__section .cta__button { + width: 24rem; +} +.explore__hub .header__section .cta__button--button { + width: 15rem; + font-size: 1.125em; + background-color: rgba(229, 229, 229, 0.81); + border-radius: 1em; +} +.explore__hub .header__section .cta__button--button:hover { + background-color: rgba(193, 193, 193, 0.81); +} +.explore__hub .card__section { + padding-top: 2em; + display: flex; + justify-content: space-between; +} +.explore__hub .card__section .card { + width: 24rem; + border-radius: 2em; + background-color: rgb(255, 255, 255); +} +.explore__hub .card__section .card__img img { + width: 100%; + height: 20rem; + object-fit: cover; + border-top-left-radius: 2em; + border-top-right-radius: 2em; +} +.explore__hub .card__section .card__text-box { + padding: 0.5em; +} +.explore__hub .card__section .card__text-box p { + font-size: 1.5em; +} +.explore__hub .card__section .card__text-box .btn { + background: rgba(229, 229, 229, 0.81); + position: relative; + border-radius: 0.375em; + cursor: pointer; + font-size: 0.875em; + height: 1.5rem; + border: none; + top: -21rem; + width: 6rem; + left: 1rem; +} +.explore__hub .card__section .card__text-box .btn:hover { + background: rgba(193, 193, 193, 0.81); + transition: 0.5s; +} +@media screen and (max-width: 75em) { + .explore__hub h2 { + text-align: center; + } + .explore__hub .header__section { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + .explore__hub .header__section .cta__button { + width: 100%; + text-align: center; + padding-top: 2em; + position: relative; + } + .explore__hub .card__section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; + align-items: center; + left: -0.5rem; + position: relative; + } + .explore__hub .card__section .card { + margin: 0 auto; + } +} +@media screen and (max-width: 62em) { + .explore__hub { + text-align: center; + } + .explore__hub .header__section { + display: grid; + justify-content: space-around; + } + .explore__hub .header__section p { + margin: 0 auto; + width: 60%; + line-height: 1.7; + padding-top: 1em; + text-align: center; + } + .explore__hub .header__section .cta__button { + margin: 0 auto; + padding-top: 1em; + } + .explore__hub .card__section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; + align-items: center; + left: -0.5rem; + position: relative; + } + .explore__hub .card__section .card { + margin: 0 auto; + } + .explore__hub .card__section .card__text-box .btn { + left: -6rem; + } +} +@media screen and (max-width: 25em) { + .explore__hub { + text-align: center; + padding: 5rem 0.5em 0rem 0.5em; + width: 100%; + left: 0rem; + } + .explore__hub .header__section { + display: grid; + place-items: center; + } + .explore__hub .header__section p { + max-width: 100%; + width: 100%; + line-height: 1.7; + } + .explore__hub .card__section { + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + .explore__hub .card__section .card { + margin-top: 1em; + } + .explore__hub .card__section .card__text-box .btn { + left: -6rem; + } +} +@media screen and (max-width: 40em) { + .explore__hub { + text-align: center; + padding: 5rem 0.5em 0rem 0.5em; + width: 100%; + left: 0rem; + } + .explore__hub h2 { + text-align: center; + } + .explore__hub .header__section { + display: grid; + place-items: center; + } + .explore__hub .header__section p { + max-width: 100%; + width: 100%; + line-height: 1.7; + } + .explore__hub .card__section { + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + .explore__hub .card__section .card { + margin-top: 1em; + } + .explore__hub .card__section .card__text-box .btn { + left: -6rem; + } +} + +.smart__solutions { + padding-top: 5rem; + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + /*-------------------------------- + + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ +} +.smart__solutions .container { + background-color: rgb(244, 245, 246); + width: 100%; + display: flex; + justify-content: space-evenly; +} +.smart__solutions--img-box { + top: 5rem; + position: relative; + width: 27rem; +} +.smart__solutions--information-box { + padding-top: 2em; +} +.smart__solutions--information-box .menuItem { + display: flex; + align-items: center; + width: 20rem; + border-radius: 1em; + background: rgb(255, 255, 255); + height: 4rem; + padding: 0.75em; + margin-bottom: 1em; +} +.smart__solutions--information-box .menuItem span { + left: 1rem; + position: relative; + font-size: 1.125em; +} +.smart__solutions--information-box .selected { + background-color: rgb(32, 34, 35); + color: rgb(255, 255, 255); + height: auto; + display: block; +} +.smart__solutions--information-box .selected p { + line-height: 1.6; + left: 1rem; + position: relative; + width: 96%; +} +@media screen and (max-width: 62em) { + .smart__solutions .container .smart__solutions--img-box { + display: none; + } +} +@media screen and (min-width: 31.25em) and (max-width: 47.9375em) { + .smart__solutions .container .smart__solutions--img-box { + display: none; + } +} +@media screen and (max-width: 40em) { + .smart__solutions .container .smart__solutions--img-box { + display: none; + } +} + +.customer__reviews { + padding-top: 5rem; + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1024px OR 64em + */ + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + /*-------------------------------- + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + /*-------------------------------- + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ +} +.customer__reviews .moonlitLavender { + background-color: rgb(204, 186, 254); +} +.customer__reviews .skyBreeze { + background-color: rgb(165, 228, 249); +} +.customer__reviews .sringGreen { + background-color: rgb(187, 249, 158); +} +.customer__reviews--header-section { + display: flex; + justify-content: space-evenly; + line-height: 1.4; +} +.customer__reviews--header-section p { + width: 24rem; +} +.customer__reviews--header-section h1 { + font-size: 1.875em; + font-weight: 600; + width: 24rem; +} +.customer__reviews--card-section { + padding-top: 2em; + display: flex; + justify-content: space-evenly; +} +.customer__reviews--card-section .card { + width: 24rem; + border-radius: 2em; + border: none; + height: 21rem; +} +.customer__reviews--card-section .card .card__text-box { + width: 95%; + left: 0.5rem; + position: relative; + display: grid; + top: 0.5rem; + height: 20rem; +} +.customer__reviews--card-section .card .card__text-box .paragraph { + padding: 0.25em; +} +.customer__reviews--card-section .card .card__text-box .paragraph p { + font-size: 1.25em; + line-height: 1.4; +} +.customer__reviews--card-section .information-box { + display: flex; + gap: 1em; + top: 2rem; + position: relative; + height: 5rem; +} +.customer__reviews--card-section .information-box img { + border-radius: 50%; + width: 4rem; + height: 4rem; + top: 0.5rem; + position: relative; + object-fit: cover; +} +.customer__reviews--card-section .information-box .about { + align-items: center; + display: grid; + gap: 1em; + height: 4rem; + top: 0.5rem; + position: relative; +} +@media screen and (max-width: 64em) { + .customer__reviews--header-section { + display: grid; + gap: 1em; + grid-template-columns: repeat(1, 1fr); + text-align: center; + place-content: center; + } + .customer__reviews--header-section h1 { + text-align: center; + } + .customer__reviews--header-section p { + width: 50%; + margin: 0 auto; + } + .customer__reviews--card-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; + } + .customer__reviews--card-section .card { + margin: 0 auto; + } +} +@media screen and (max-width: 62em) { + .customer__reviews--header-section { + display: grid; + gap: 1em; + grid-template-columns: repeat(1, 1fr); + text-align: center; + place-content: center; + } + .customer__reviews--header-section h1 { + text-align: center; + } + .customer__reviews--header-section p { + width: 50%; + margin: 0 auto; + } + .customer__reviews--card-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; + } + .customer__reviews--card-section .card { + margin: 0 auto; + } +} +@media screen and (max-width: 64em) { + .customer__reviews--header-section h1 { + width: 100%; + } +} +@media screen and (max-width: 40em) { + .customer__reviews--header-section { + display: grid; + text-align: center; + gap: 1em; + align-items: center; + } + .customer__reviews--header-section p { + width: 24rem; + } + .customer__reviews--card-section { + display: grid; + gap: 1em; + grid-template-columns: repeat(1, 1fr); + } +} + +.plan__Selector__Hub { + padding: 5rem 1em 0.25em 1em; + /* Responsive part */ + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + /*-------------------------------- + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + /*-------------------------------- + *** FOR MOBILE + ** MAX : 640PX / 40em + */ +} +.plan__Selector__Hub .plans { + background: rgb(24, 26, 27); + color: rgb(255, 255, 255); + padding: 1em; + border-radius: 2em; +} +.plan__Selector__Hub .plans h1 { + font-size: 2.25em; + margin-top: 1em; + position: relative; +} +.plan__Selector__Hub .plans .mainBox { + padding-top: 1em; +} +.plan__Selector__Hub .plans .mainBox .subscription { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em 1.5em; + background-color: rgb(38, 39, 40); + border-radius: 0.5em; +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-level { + display: flex; + align-items: center; + gap: 0.75em; +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-level h3 { + margin: 0; + font-size: 1.5em; + color: rgb(255, 255, 255); +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options { + display: flex; + gap: 1.25em; +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options span { + width: 8rem; + height: 2.5rem; + border-radius: 0.5em; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + color: rgb(47, 58, 46); + gap: 0.5em; + font-size: 1em; + font-weight: bold; + transition: background 0.3s ease, transform 0.3s ease; +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options span:hover { + transform: scale(1.05); +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options .basic { + background: rgb(187, 249, 158); +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options .advanced { + background: rgb(204, 186, 254); +} +.plan__Selector__Hub .plans .mainBox .subscription .subscription-options .premium { + background: rgb(237, 208, 135); +} +.plan__Selector__Hub .plans .mainBox .box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75em 1.25em; +} +.plan__Selector__Hub .plans .mainBox .box .status { + width: 26rem; + justify-content: space-between; + display: flex; +} +.plan__Selector__Hub .plans .mainBox .box .status span { + padding: 0.25em 0.75em; +} +.plan__Selector__Hub .plans .mainBox .custom-divider { + background-color: rgba(0, 0, 0, 0.5); + margin: 0.75em 0; + height: 0.1875rem; +} +.plan__Selector__Hub .plans .download-box { + position: relative; + display: flex; +} +.plan__Selector__Hub .plans .download-box p { + line-height: 1.7; + margin-top: 1em; +} +.plan__Selector__Hub .plans .download-box .information-section { + width: 50%; + text-align: center; + padding: 5rem 0.25em 1em 7rem; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download { + margin-top: 5rem; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download ul { + margin-top: 5rem; + width: 41%; + text-align: center; + padding: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download li { + display: inline-block; + margin: 0.75em; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .download { + width: 12.5rem; + height: 4.6875rem; + background: black; + float: left; + border-radius: 0.375em; + position: relative; + color: rgb(255, 255, 255); + cursor: pointer; + border: 0.0625rem solid rgb(255, 255, 255); +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .download > .fa { + color: rgb(255, 255, 255); + position: absolute; + top: 50%; + left: 0.9375rem; + transform: translateY(-50%); +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .df, +.plan__Selector__Hub .plans .download-box .information-section .btn-download .dfn { + position: absolute; + left: 4.375rem; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .df { + top: 1.25rem; + font-size: 0.75em; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .dfn { + top: 2.0625rem; + font-size: 1em; +} +.plan__Selector__Hub .plans .download-box .information-section .btn-download .download:hover { + -webkit-filter: invert(100%); + filter: invert(100%); + transition: 0.3s ease-in-out; +} +.plan__Selector__Hub .plans .download-box .image-box { + top: 1rem; + position: relative; +} +@media screen and (max-width: 62em) { + .plan__Selector__Hub .plans { + padding: 2em; + border-radius: 10px; + margin: auto; + } + .plan__Selector__Hub .plans h1 { + font-size: 2.25em; + text-align: center; + margin-bottom: 1.5em; + } + .plan__Selector__Hub .plans .mainBox { + padding-top: 1.5em; + } + .plan__Selector__Hub .plans .mainBox .subscription { + display: grid; + grid-template-columns: 1fr; + gap: 1em; + padding: 1.5em; + background-color: rgb(38, 39, 40); + border-radius: 0.5em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-level { + justify-content: center; + gap: 1em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-level h3 { + font-size: 1.5em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-options { + justify-content: center; + gap: 1em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-options span { + width: 100%; + height: 2.5rem; + font-size: 1em; + } + .plan__Selector__Hub .plans .mainBox .box { + flex-direction: column; + gap: 1em; + align-items: center; + } + .plan__Selector__Hub .plans .mainBox .box .status { + width: 100%; + display: flex; + justify-content: space-between; + } + .plan__Selector__Hub .plans .download-box { + flex-direction: column; + align-items: center; + } + .plan__Selector__Hub .plans .download-box .image-box { + display: none; + } + .plan__Selector__Hub .plans .download-box .information-section { + width: 100%; + padding: 2em 1em; + } + .plan__Selector__Hub .plans .download-box .information-section .btn-download ul { + display: contents; + } + .plan__Selector__Hub .plans .download-box .image-box { + margin-top: 1em; + } +} +@media screen and (min-width: 31.25em) and (max-width: 47.9375em) { + .plan__Selector__Hub .plans .mainBox .subscription { + justify-content: center; + gap: 2em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-level { + justify-content: center; + } + .plan__Selector__Hub .plans .mainBox .box { + display: grid; + text-align: center; + width: 100%; + gap: 1em; + } + .plan__Selector__Hub .plans .mainBox .box h3, + .plan__Selector__Hub .plans .mainBox .box .status { + width: 34rem; + text-align: center; + } + .plan__Selector__Hub .plans .download-box .information-section .btn-download ul { + display: flex; + } +} +@media screen and (max-width: 40em) { + .plan__Selector__Hub .plans h1 { + font-size: 1.875em; + text-align: center; + } + .plan__Selector__Hub .plans .mainBox .subscription { + display: grid; + text-align: center; + width: 100%; + gap: 1em; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-level, + .plan__Selector__Hub .plans .mainBox .subscription .subscription-options { + flex-wrap: wrap; + width: 100%; + } + .plan__Selector__Hub .plans .mainBox .subscription .subscription-options { + justify-content: space-between; + } + .plan__Selector__Hub .plans .mainBox .box { + display: grid; + text-align: center; + left: -1rem; + position: relative; + } + .plan__Selector__Hub .plans .mainBox .box h3, + .plan__Selector__Hub .plans .mainBox .box .status { + width: 19rem; + text-align: center; + } + .plan__Selector__Hub .plans .download-box .information-section .information-box { + width: 100%; + left: 0; + position: relative; + } + .plan__Selector__Hub .plans .download-box .information-section .information-box .btn-download { + left: -1.5rem; + } + .plan__Selector__Hub .plans .download-box .information-section .information-box .btn-download ul { + display: contents; + top: 3rem; + } +} + +.footer__section { + padding: 5rem 0.5em 0rem 0.5em; + /*-------------------------------- + + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + /*-------------------------------- + + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ +} +.footer__section .footer { + display: flex; + justify-content: space-between; + height: 3rem; +} +.footer__section .footer__brand { + font-size: 1.875em; + font-weight: 600; +} +.footer__section .footer__nav-list { + display: flex; + gap: 1em; +} +.footer__section .footer__social-list { + display: flex; + gap: 1em; +} +.footer__section hr { + width: 100%; + margin: 0.75em 0; + background-color: rgba(0, 0, 3, 0.2); +} +.footer__section .footer__copyright { + display: flex; + justify-content: space-between; + padding-top: 1em; +} +@media screen and (max-width: 64em) { + .footer__section .footer__brand { + font-size: 1.25em; + } + .footer__section .footer__social { + display: none; + } + .footer__section .footer__social-list { + gap: 0.5em; + } +} +@media screen and (min-width: 31.25em) and (max-width: 47.9375em) { + .footer__section .footer__social { + display: none; + } + .footer__section .footer__social-list { + gap: 0.25em; + } +} +@media screen and (max-width: 40em) { + .footer__section .footer__brand { + font-size: 1.25em; + } + .footer__section .footer__social { + display: none; + } + .footer__section .footer__social-list { + gap: 0.5em; + } +} + +/* +*** +***** +******* +********* +========================================================================================*/ + +/*# sourceMappingURL=style.css.map */ diff --git a/app-land/css/style.css.map b/app-land/css/style.css.map new file mode 100644 index 0000000..45295be --- /dev/null +++ b/app-land/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../shared/scss/shared.scss","../../shared/scss/abstracts/_media-query.scss","../scss/layout/_planSelectorHub.scss","../../shared/scss/abstracts/_variables.scss","../../shared/scss/base/_reset.scss","../../shared/scss/components/_button.scss","../../shared/scss/layout/_grid.scss","../scss/_variables.scss","../scss/_typography.scss","../scss/component/_button.scss","../scss/layout/_header.scss","../scss/layout/_heroSection.scss","../scss/layout/_exploreHub.scss","../scss/layout/_smartSolutions.scss","../scss/layout/_customerReviews.scss","../scss/layout/_footer.scss"],"names":[],"mappings":"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EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,eRgBE;EQfF;EACA,WRlDK;;AQoDL;EACE,kBJzCU;EI0CV;EACA;EACA,eRQA;EQPA;EACA;EACA,WR3DG;;AQ6DH;EACE;EACA,kBJvCQ;;AI6ChB;EACE;EACA;EACA;EACA;EACA;EACA;;AViBN;EUrGF;IAkGI;IACA;;EAEA;IACE,WR/FO;IQgGP;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAEA;IACE,WRpGI;;EQuGN;IACE,WR5GG;IQ6GH;IACA;IACA;IACA,aRtHO;IQuHP;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE,WRhIC;;EQkID;IACE,WRnID;;EQwIL;IACE;IACA,WR3IG;IQ4IH;IACA;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;;;;ACnKd;EACE;EACA;EACA;EACA;AA4EA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AA6CA;AAAA;AAAA;AAAA;AAqCA;AAAA;AAAA;AAAA;;AAjMA;EACE,WTUU;ESTV,aTFiB;;ASInB;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA,WTXK;ESYL;EACA,eToDK;;ASnDL;EACE;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA,eTuCO;EStCP,kBLxBgB;;AK2Bd;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAEA;EACE,WT1CI;;AS6CN;EACE,YLbc;EKcd;EACA,eTYE;ESXF;EACA,WTtDG;ESuDH;EACA;EACA;EACA;EACA;;AAEA;EACE,YLvBY;EKwBZ;;AXdV;EW4BE;IACE;;EAEF;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AX/BN;EWhFF;IA0HI;;EACA;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;E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","file":"style.css"} \ No newline at end of file diff --git a/app-land/img/book.jpg b/app-land/img/book.jpg new file mode 100644 index 0000000..e8e0216 Binary files /dev/null and b/app-land/img/book.jpg differ diff --git a/app-land/img/face.jpg b/app-land/img/face.jpg new file mode 100644 index 0000000..82c096c Binary files /dev/null and b/app-land/img/face.jpg differ diff --git a/app-land/img/face2.jpg b/app-land/img/face2.jpg new file mode 100644 index 0000000..06d0c88 Binary files /dev/null and b/app-land/img/face2.jpg differ diff --git a/app-land/img/face3.jpg b/app-land/img/face3.jpg new file mode 100644 index 0000000..acb003d Binary files /dev/null and b/app-land/img/face3.jpg differ diff --git a/app-land/img/heroSection.jpg b/app-land/img/heroSection.jpg new file mode 100644 index 0000000..25c6980 Binary files /dev/null and b/app-land/img/heroSection.jpg differ diff --git a/app-land/img/logo.jpg b/app-land/img/logo.jpg new file mode 100644 index 0000000..9b0cd07 Binary files /dev/null and b/app-land/img/logo.jpg differ diff --git a/app-land/img/profsional.jpg b/app-land/img/profsional.jpg new file mode 100644 index 0000000..5e81758 Binary files /dev/null and b/app-land/img/profsional.jpg differ diff --git a/app-land/img/smartsolutions.png b/app-land/img/smartsolutions.png new file mode 100644 index 0000000..de1fc30 Binary files /dev/null and b/app-land/img/smartsolutions.png differ diff --git a/app-land/img/students.jpg b/app-land/img/students.jpg new file mode 100644 index 0000000..2d2fbe2 Binary files /dev/null and b/app-land/img/students.jpg differ diff --git a/app-land/index.html b/app-land/index.html new file mode 100644 index 0000000..44d75da --- /dev/null +++ b/app-land/index.html @@ -0,0 +1,431 @@ + + + + + + + + + + + + + + + + + + AppLand + + + + +
+
+ + + + +
+ +
+
+ +
+ +
+
+ + +
+ Hero Section + +
+
+

Unleash the full potential of app

+ +

+ Empower your vision, elevate your experience—unlock the true + capabilities of your app and watch it transform the way you connect, + create, and conquer. +

+ +
+ + + +
+ +
+
+

4.8

+ +

Rating on AppStore

+
+ +
+

700k+

+ +

Active users

+
+
+
+
+
+ + +
+

ExploreHub

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero + quidem dolor voluptas, tenetur velit amet eligendi nisi. +

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero + quidem dolor voluptas, tenetur velit amet eligendi nisi. +

+ +
+ +
+
+ +
+
+
+ Students +
+ +
+

Students

+ +
+ Lorem ipsum, dolor sit amet consectetur adipisicing. +
+ + +
+
+ +
+
+ Professionals +
+ +
+

Professionals

+ +
+ Lorem ipsum, dolor sit amet consectetur adipisicing. +
+ + +
+
+ +
+
+ Books +
+ +
+

Writers

+ +
+ Lorem ipsum, dolor sit amet consectetur adipisicing. +
+ + +
+
+
+
+ + +
+
+
+ Smart solutions +
+
+
+ Finding + information +
+
+ Help for designers +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos + nobis tempore nostrum asperiores vel quisquam, doloribus expedita + illo maiores voluptate. +

+
+
+ Home automation +
+
+ Entertainment +
+
+ Planning + assistance +
+
+
+
+ + +
+
+

Customer Reviews

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, + dolorem quia delectus omnis ipsum quibusdam error nobis quasi magni + ullam. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, + dolorem quia delectus omnis ipsum quibusdam error nobis quasi magni + ullam. +

+
+ +
+
+
+
+

+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam + reprehenderit alias, deserunt minima doloremque corporis + distinctio dolorum inventore cupiditate aut." +

+
+ +
+ Human 1 + +
+

Liam Anderson

+

Architect

+
+
+
+
+ +
+
+
+

+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam + reprehenderit alias, deserunt minima doloremque corporis + distinctio dolorum inventore cupiditate aut." +

+
+ +
+ Human 1 + +
+

Sophie Carter

+

Programmer

+
+
+
+
+ +
+
+
+

+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam + reprehenderit alias, deserunt minima doloremque corporis + distinctio dolorum inventore cupiditate aut." +

+
+ +
+ Human 1 + +
+

Ethan Reynolds

+

Graphic Designer

+
+
+
+
+
+
+ + +
+
+

Choose your favorite plan

+
+
+

Subscription level

+
+ BasicAdvancedPremium +
+
+
+

Number of Users

+
+ 1up to 5Unlimited +
+
+
+
+

Customer Support

+
+ OnlinePriorityPremium +
+
+
+
+

Monthly Requests

+
+ 10005000Unlimited +
+
+
+
+

Data Packages

+
+ 1 GB5 GB10 GB +
+
+
+
+

Flexible Cancellation

+
+ AvailableAvailableAvailable +
+
+
+
+

Monthly Cost

+
+ $9.99$19.99$39.99 +
+
+
+
+
+
+
+

Try it right now

+

+ download the AI Ally on the AppStore and Google Play and + discover the world of artificail intelligence! Enjoy innovative + AI technologies directly on your device. +

+
+
    +
  • +
    + + Download from + Google Play +
    +
    • +
  • +
    + + Download from + App Store +
    +
    • +
+
+
+
+
+ +
+
+
+
+ + + + + + + diff --git a/app-land/js/mian.js b/app-land/js/mian.js new file mode 100644 index 0000000..3081535 --- /dev/null +++ b/app-land/js/mian.js @@ -0,0 +1,7 @@ +const sidebar = document.querySelector(".header__hidden"); +function showSidebar() { + sidebar.style.display = "block"; +} +function closeSidebar() { + sidebar.style.display = "none"; +} \ No newline at end of file diff --git a/app-land/licenses.md b/app-land/licenses.md new file mode 100644 index 0000000..271a7d5 --- /dev/null +++ b/app-land/licenses.md @@ -0,0 +1,31 @@ +# Licenses + +## Fonts + +The font used in this project is **Poppins**, imported from [Google Fonts](https://fonts.google.com/). + +## Image + +**Hero section Image** + +Photo by [Daria Nepriakhina](https://unsplash.com/@epicantus?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/woman-in-blue-chambray-long-sleeved-top-sitting-on-black-leather-chair-with-silver-macbook-on-lap-i5iIhHSAtp4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +**ExploreHub** + +Photo by [Annie Spratt](https://unsplash.com/@anniespratt?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/woman-in-black-jacket-using-macbook-pro-xKJUnFwfz3s?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +Photo by [Pierre Bamin](https://unsplash.com/@bamin?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-person-reaching-for-a-book-on-a-book-shelf-lM4_Nmcj4Xk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +Photo by [bruce mars](https://unsplash.com/@brucemars?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/man-sitting-near-window-holding-phone-and-laptop-S8ffHr_dxHo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +## Smart Solutions + +Photo by [www.pngkit.com](https://www.pngkit.com/bigpic/u2e6w7w7r5e6r5q8/) + +## Customer Reviews + +Photo by [Elizeu Dias](https://unsplash.com/@elishavision?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/selective-focus-of-man-smiling-during-daytime-2EGNqazbAMk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +Photo by [Luis Machado](https://unsplash.com/@luismachadodirector?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/woman-in-red-shirt-IipMu8OvS6k?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) + +Photo by [Alireza Npa](https://unsplash.com/@npaw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-close-up-of-a-person-wearing-a-jacket-fI9R5Aj6UfU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) diff --git a/app-land/scss/_typography.scss b/app-land/scss/_typography.scss new file mode 100644 index 0000000..7de617b --- /dev/null +++ b/app-land/scss/_typography.scss @@ -0,0 +1,24 @@ +body { + font-family: $primaryFontFamily; + overflow-x: hidden; + + * { + padding: 0; + margin: 0; + font: revert; + } + + a { + text-decoration: none; + color: $black; + } + + a:hover { + transition: 0.5s; + color: $lightGray; + } + + li { + list-style-type: none; + } +} diff --git a/app-land/scss/_variables.scss b/app-land/scss/_variables.scss new file mode 100644 index 0000000..9ca145a --- /dev/null +++ b/app-land/scss/_variables.scss @@ -0,0 +1,56 @@ +/*======================================================================================== +********* ALL OF THE VARIABLES TYPE +******* COLORS +***** GRIDS +*** +*/ + +/*========================================================================================*\ +*---------------------------- COLORS ---------------------------- +\*========================================================================================*/ + + /*-------------------------------- + *** FLAT UI COLORS + ** flatuicolors.com/palette/defo + */ + + $black : rgb(000, 000, 000); // #000 + $white : rgb(255, 255, 255); // #fff + + $shadowBlack : rgb(024, 026, 027); // #181a1b + $vibrantGreen : rgb(084, 234, 084); // #54ea54 + + $limeGreen : rgb(071, 198, 071); // #47c647 + $lightGray : rgb(170, 170, 170); // #aaa + + $darkGray : rgb(032, 034, 035); // #202223 + $mistGray : rgb(244, 245, 246); // #f4f5f6 + + $sringGreen : rgb(187, 249, 158); // #bbf99e + $skyBreeze : rgb(165, 228, 249); // #a5e4f9 + + $charcoalGray : rgb(038, 039, 040); // #262728 + $forestGreen : rgb(047, 058, 046); // #2f3a2e + + $softGold : rgb(237, 208, 135); // #edd087 + $stoneGray : rgb(139, 135, 135); // #8b8787 + + $moonlitLavender : rgb(204, 186, 254); // #ccbafe + + /*========================================================================================*\ + *---------------------------- SHADOW ---------------------------- + \*========================================================================================*/ + + $transparentBlack : rgba(0, 0, 0, 0.5); // shadow Black + $lightShadow : rgba(0, 0, 0, 0.1); // light shadow + + $frostedWhite : rgba(255, 255, 255, 0.2); // frosted-white + $softLightGray : rgba(229, 229, 229, 0.81); // Soft Light Gray + + $mutedSilver : rgba(193, 193, 193, 0.81); // Muted Silver + +/*========================================================================================*\ +*---------------------------- FONTS ---------------------------- +\*========================================================================================*/ + + $primaryFontFamily: "Poppins", sans-serif; \ No newline at end of file diff --git a/app-land/scss/component/_button.scss b/app-land/scss/component/_button.scss new file mode 100644 index 0000000..49c02ce --- /dev/null +++ b/app-land/scss/component/_button.scss @@ -0,0 +1,15 @@ +.cta__button { + &--button { + width: 7rem; + height: 3rem; + background: $vibrantGreen; + border: none; + border-radius: 2rem; + cursor: pointer; + + &:hover { + transition: 0.3s ease-in-out; + background: $limeGreen; + } + } +} diff --git a/app-land/scss/layout/_customerReviews.scss b/app-land/scss/layout/_customerReviews.scss new file mode 100644 index 0000000..9955865 --- /dev/null +++ b/app-land/scss/layout/_customerReviews.scss @@ -0,0 +1,197 @@ +@use "sass:list"; + +.customer__reviews { + padding-top: 5rem; + + .moonlitLavender { + background-color: $moonlitLavender; + } + + .skyBreeze { + background-color: $skyBreeze; + } + + .sringGreen { + background-color: $sringGreen; + } + + &--header-section { + display: flex; + justify-content: space-evenly; + line-height: 1.4; + + p { + width: 24rem; + } + + h1 { + font-size: $fontSize3Xl; + font-weight: $fontWeightSemibold; + width: 24rem; + } + } + + &--card-section { + padding-top: list.nth($spaces, 8); + display: flex; + justify-content: space-evenly; + + .card { + width: 24rem; + border-radius: $rounded4Xl; + border: none; + height: 21rem; + + .card__text-box { + width: 95%; + left: 0.5rem; + position: relative; + display: grid; + top: 0.5rem; + height: 20rem; + + .paragraph { + padding: list.nth($spaces, 1); + + p { + font-size: $fontSizeXl; + line-height: 1.4; + } + } + } + } + + .information-box { + display: flex; + gap: list.nth($spaces, 4); + top: 2rem; + position: relative; + height: 5rem; + + img { + border-radius: 50%; + width: 4rem; + height: 4rem; + top: 0.5rem; + position: relative; + object-fit: cover; + } + + .about { + align-items: center; + display: grid; + gap: list.nth($spaces, 4); + height: 4rem; + top: 0.5rem; + position: relative; + } + } + } + + // RESPONSIVE SECTION + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1024px OR 64em + */ + + @include mini_laptop { + &--header-section { + display: grid; + gap: list.nth($spaces, 4); + grid-template-columns: repeat(1, 1fr); + text-align: center; + place-content: center; + + h1 { + text-align: center; + } + + p { + width: 50%; + margin: 0 auto; + } + } + + &--card-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: list.nth($spaces, 4); + + .card { + margin: 0 auto; + } + } + } + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + + @include tablet { + &--header-section { + display: grid; + gap: list.nth($spaces, 4); + grid-template-columns: repeat(1, 1fr); + text-align: center; + place-content: center; + + h1 { + text-align: center; + } + + p { + width: 50%; + margin: 0 auto; + } + } + + &--card-section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: list.nth($spaces, 4); + + .card { + margin: 0 auto; + } + } + } + + /*-------------------------------- + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + + @include mini_laptop { + &--header-section { + h1 { + width: 100%; + } + } + } + + /*-------------------------------- + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @include mobile { + &--header-section { + display: grid; + text-align: center; + gap: list.nth($spaces, 4); + align-items: center; + + p { + width: 24rem; + } + } + + &--card-section { + display: grid; + gap: list.nth($spaces, 4); + grid-template-columns: repeat(1, 1fr); + } + } +} diff --git a/app-land/scss/layout/_exploreHub.scss b/app-land/scss/layout/_exploreHub.scss new file mode 100644 index 0000000..c231a6d --- /dev/null +++ b/app-land/scss/layout/_exploreHub.scss @@ -0,0 +1,240 @@ +@use "sass:list"; +.explore__hub { + position: relative; + padding-top: 5rem; + width: 97%; + left: 1rem; + h2 { + font-size: $fontSize5Xl; + font-weight: $fontWeightSemibold; + } + .header__section { + display: flex; + justify-content: space-between; + padding-top: nth($spaces, 8); + + p { + width: 24rem; + line-height: 1.4; + } + .cta__button { + width: 24rem; + &--button { + width: 15rem; + font-size: $fontSizeLg; + background-color: rgba(229, 229, 229, 0.81); + border-radius: $rounded2Xl; + &:hover { + background-color: rgba(193, 193, 193, 0.81); + } + } + } + } + + .card__section { + padding-top: nth($spaces, 8); + display: flex; + justify-content: space-between; + + .card { + width: 24rem; + border-radius: $rounded4Xl; + background-color: $white; + + &__img { + img { + width: 100%; + height: 20rem; + object-fit: cover; + border-top-left-radius: nth($spaces, 8); + border-top-right-radius: nth($spaces, 8); + } + } + &__text-box { + padding: nth($spaces, 2); + + p { + font-size: $fontSize2Xl; + } + + .btn { + background: $softLightGray; + position: relative; + border-radius: $roundedMd; + cursor: pointer; + font-size: $fontSizeSm; + height: 1.5rem; + border: none; + top: -21rem; + width: 6rem; + left: 1rem; + + &:hover { + background: $mutedSilver; + transition: 0.5s; + } + } + } + } + } + // RESPONSIVE SECTION + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1200px OR 75em + */ + + @include laptop { + h2 { + text-align: center; + } + .header__section { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + .cta__button { + width: 100%; + text-align: center; + padding-top: nth($spaces, 8); + position: relative; + } + } + + .card__section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: nth($spaces, 4); + align-items: center; + left: -0.5rem; + position: relative; + + .card { + margin: 0 auto; + } + } + } + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + + @include tablet { + text-align: center; + .header__section { + display: grid; + justify-content: space-around; + + p { + margin: 0 auto; + width: 60%; + line-height: 1.7; + padding-top: nth($spaces, 4); + text-align: center; + } + + .cta__button { + margin: 0 auto; + padding-top: nth($spaces, 4); + } + } + + .card__section { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: nth($spaces, 4); + align-items: center; + left: -0.5rem; + position: relative; + + .card { + margin: 0 auto; + + &__text-box { + .btn { + left: -6rem; + } + } + } + } + } + + /*-------------------------------- + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @include mini_mobile { + text-align: center; + padding: 5rem nth($spaces, 2) 0rem nth($spaces, 2); + width: 100%; + left: 0rem; + + .header__section { + display: grid; + place-items: center; + + p { + max-width: 100%; + width: 100%; + line-height: 1.7; + } + } + + .card__section { + display: flex; + flex-wrap: wrap; + flex-direction: column; + .card { + margin-top: nth($spaces, 4); + &__text-box { + .btn { + left: -6rem; + } + } + } + } + } + + /*-------------------------------- + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + + @include mobile { + text-align: center; + padding: 5rem nth($spaces, 2) 0rem nth($spaces, 2); + width: 100%; + left: 0rem; + + h2 { + text-align: center; + } + + .header__section { + display: grid; + place-items: center; + + p { + max-width: 100%; + width: 100%; + line-height: 1.7; + } + } + + .card__section { + display: flex; + flex-wrap: wrap; + flex-direction: column; + .card { + margin-top: nth($spaces, 4); + &__text-box { + .btn { + left: -6rem; + } + } + } + } + } +} diff --git a/app-land/scss/layout/_footer.scss b/app-land/scss/layout/_footer.scss new file mode 100644 index 0000000..77d6ab2 --- /dev/null +++ b/app-land/scss/layout/_footer.scss @@ -0,0 +1,99 @@ +.footer__section { + padding: 5rem nth($spaces, 2) 0rem nth($spaces, 2); + + .footer { + display: flex; + justify-content: space-between; + height: 3rem; + + &__brand { + font-size: $fontSize3Xl; + font-weight: $fontWeightSemibold; + } + + &__nav { + &-list { + display: flex; + gap: nth($spaces, 4); + } + } + + &__social { + &-list { + display: flex; + gap: nth($spaces, 4); + } + } + } + + hr { + width: 100%; + margin: nth($spaces, 3) 0; + background-color: rgba(0, 0, 3, 0.2); + } + + .footer__copyright { + display: flex; + justify-content: space-between; + padding-top: nth($spaces, 4); + } + + // Responsive part + + /*-------------------------------- + + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + + @include mini_laptop { + .footer { + &__brand { + font-size: $fontSizeXl; + } + &__social { + display: none; + &-list { + gap: nth($spaces, 2); + } + } + } + } + + /*-------------------------------- + + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + + @include retinaMobile { + .footer { + &__social { + display: none; + &-list { + gap: nth($spaces, 1); + } + } + } + } + + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @include mobile { + .footer { + &__brand { + font-size: $fontSizeXl; + } + &__social { + display: none; + &-list { + gap: nth($spaces, 2); + } + } + } + } +} diff --git a/app-land/scss/layout/_header.scss b/app-land/scss/layout/_header.scss new file mode 100644 index 0000000..7d81325 --- /dev/null +++ b/app-land/scss/layout/_header.scss @@ -0,0 +1,86 @@ +@use "sass:list"; + +.header { + .hide-on-laptop { + display: none; + } + + &__main { + display: flex; + justify-content: space-between; + align-items: center; + padding: nth($spaces, 5); + + nav ul { + padding: 0; + margin: 0; + display: flex; + list-style: none; + + li { + margin: 0 nth($spaces, 3); + } + } + } + + &__hidden { + position: fixed; + top: 0; + right: 0; + height: 100vh; + width: 250px; + z-index: 13; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + background-color: $frostedWhite; + box-shadow: -10px 0 $roundedXl $lightShadow; + text-align: center; + display: none; + + .logo { + height: 2rem; + width: 100%; + } + + &--nav { + top: 2rem; + position: relative; + + ul { + li { + height: 3rem; + width: 100%; + } + } + } + } + + .cta__button { + &--button { + background-color: $vibrantGreen; + + &:hover { + background-color: $limeGreen; + } + } + } + + // Responsive + @include mobile { + .hide-on-laptop { + display: block; + } + .hide-on-mobile { + display: none; + } + } + + @include retinaMobile { + .hide-on-laptop { + display: block; + } + .hide-on-mobile { + display: none; + } + } +} diff --git a/app-land/scss/layout/_heroSection.scss b/app-land/scss/layout/_heroSection.scss new file mode 100644 index 0000000..d12ed99 --- /dev/null +++ b/app-land/scss/layout/_heroSection.scss @@ -0,0 +1,172 @@ +@use "sass:list"; + +.hero__section { + border-radius: $rounded3Xl; + position: relative; + left: 1.2rem; + width: 97%; + height: 50rem; + + &--img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $rounded4Xl; + } + + &--text-overlay { + background-color: $transparentBlack; + border-radius: $rounded3Xl; + position: absolute; + color: $white; + width: 28rem; + left: 8rem; + height: 24rem; + top: 10rem; + + .container { + width: 95%; + top: 0rem; + position: relative; + left: 0.5rem; + height: 100%; + + h1 { + text-align: center; + padding-top: list.nth($spaces, 4); + font-size: $fontSize3Xl; + font-weight: $fontWeightBold; + } + + p { + padding-top: list.nth($spaces, 4); + line-height: 1.4; + } + + .cta__button { + position: relative; + text-align: center; + display: flex; + width: 27rem; + gap: list.nth($spaces, 8); + left: 0rem; + padding-top: list.nth($spaces, 4); + text-align: center; + place-content: center; + + &--button { + width: 9rem; + border: none; + border-radius: $roundedLg; + height: 3rem; + font-size: $fontSizeBase; + + &-more { + background-color: $lightGray; + width: 9rem; + border: none; + border-radius: $roundedLg; + height: 3rem; + cursor: pointer; + font-size: $fontSizeBase; + + &:hover { + transition: 0.3s ease-in-out; + background-color: $stoneGray; + } + } + } + } + + .stats-container { + position: relative; + padding-top: list.nth($spaces, 4); + display: flex; + width: 27rem; + justify-content: center; + gap: list.nth($spaces, 8); + } + } + } + + // Responsive part + + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @include mobile { + overflow-x: hidden; + left: 0.5rem; + + .hero__section--text-overlay { + font-size: $fontSizeXs; + height: 100%; + width: 100%; + left: 0; + top: 0; + + .container { + top: 10rem; + text-align: center; + left: 0.7rem; + height: 20rem; + + h1 { + font-size: $fontSize5Xl; + } + + p { + font-size: $fontSizeXl; + width: 76%; + left: 3rem; + position: relative; + font-weight: $fontWeightBold; + padding-top: nth($spaces, 8); + } + + .cta__button { + position: relative; + text-align: center; + display: flex; + gap: list.nth($spaces, 8); + padding-top: list.nth($spaces, 8); + text-align: center; + place-content: center; + width: 100%; + left: 0; + + &--button { + font-size: $fontSizeXl; + + &-more { + font-size: $fontSizeXl; + } + } + } + + .stats-container { + left: 0; + font-size: $fontSizeLg; + padding-top: nth($spaces, 8); + gap: nth($spaces, 12); + margin: 0 auto; + + .stat-item p { + width: 100%; + + &:first { + left: 2.5rem; + } + + &:last-child { + left: 0.5rem; + } + } + } + } + } + } +} diff --git a/app-land/scss/layout/_planSelectorHub.scss b/app-land/scss/layout/_planSelectorHub.scss new file mode 100644 index 0000000..67edb13 --- /dev/null +++ b/app-land/scss/layout/_planSelectorHub.scss @@ -0,0 +1,368 @@ +@use "sass:list"; +@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); +@import url("https://fonts.googleapis.com/css?family=Open+Sans"); + +.plan__Selector__Hub { + padding: 5rem nth($spaces, 4) nth($spaces, 1) nth($spaces, 4); + + .plans { + background: $shadowBlack; + color: $white; + padding: nth($spaces, 4); + border-radius: $rounded4Xl; + + h1 { + font-size: $fontSize4Xl; + margin-top: nth($spaces, 4); + position: relative; + } + + .mainBox { + padding-top: nth($spaces, 4); + + .subscription { + display: flex; + justify-content: space-between; + align-items: center; + padding: #{nth($spaces, 4)} #{nth($spaces, 6)}; + background-color: $charcoalGray; + border-radius: $roundedLg; + + .subscription-level { + display: flex; + align-items: center; + gap: nth($spaces, 3); + + h3 { + margin: 0; + font-size: $fontSize2Xl; + color: $white; + } + } + + .subscription-options { + display: flex; + gap: nth($spaces, 5); + + span { + width: 8rem; + height: 2.5rem; + border-radius: $roundedLg; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + color: $forestGreen; + gap: nth($spaces, 2); + font-size: $fontSizeBase; + font-weight: bold; + transition: background 0.3s ease, transform 0.3s ease; + + &:hover { + transform: scale(1.05); + } + } + + .basic { + background: $sringGreen; + } + + .advanced { + background: $moonlitLavender; + } + + .premium { + background: $softGold; + } + } + } + + .box { + display: flex; + justify-content: space-between; + align-items: center; + padding: #{nth($spaces, 3)} #{nth($spaces, 5)}; + + .status { + width: 26rem; + justify-content: space-between; + display: flex; + + span { + padding: #{nth($spaces, 1)} #{nth($spaces, 3)}; + } + } + } + + .custom-divider { + background-color: $transparentBlack; + margin: nth($spaces, 3) 0; + height: 0.1875rem; + } + } + + .download-box { + position: relative; + display: flex; + + p { + line-height: 1.7; + margin-top: nth($spaces, 4); + } + + .information-section { + width: 50%; + text-align: center; + padding: 5rem nth($spaces, 1) nth($spaces, 4) 7rem; + + .btn-download { + margin-top: 5rem; + + ul { + margin-top: 5rem; + width: 41%; + text-align: center; + padding: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + li { + display: inline-block; + margin: nth($spaces, 3); + } + + .download { + width: 12.5rem; + height: 4.6875rem; + background: black; + float: left; + border-radius: $roundedMd; + position: relative; + color: $white; + cursor: pointer; + border: 0.0625rem solid $white; + } + + .download > .fa { + color: $white; + position: absolute; + top: 50%; + left: 0.9375rem; + transform: translateY(-50%); + } + + .df, + .dfn { + position: absolute; + left: 4.375rem; + } + + .df { + top: 1.25rem; + font-size: $fontSizeXs; + } + + .dfn { + top: 2.0625rem; + font-size: $fontSizeBase; + } + + .download:hover { + -webkit-filter: invert(100%); + filter: invert(100%); + transition: 0.3s ease-in-out; + } + } + } + + .image-box { + top: 1rem; + position: relative; + } + } + } + + /* Responsive part */ + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + + @include tablet { + .plans { + padding: nth($spaces, 8); + border-radius: 10px; + margin: auto; + + h1 { + font-size: $fontSize4Xl; + text-align: center; + margin-bottom: nth($spaces, 6); + } + + .mainBox { + padding-top: nth($spaces, 6); + + .subscription { + display: grid; + grid-template-columns: 1fr; + gap: nth($spaces, 4); + padding: nth($spaces, 6); + background-color: $charcoalGray; + border-radius: $roundedLg; + + .subscription-level { + justify-content: center; + gap: nth($spaces, 4); + + h3 { + font-size: $fontSize2Xl; + } + } + + .subscription-options { + justify-content: center; + gap: nth($spaces, 4); + + span { + width: 100%; + height: 2.5rem; + font-size: $fontSizeBase; + } + } + } + + .box { + flex-direction: column; + gap: nth($spaces, 4); + align-items: center; + + .status { + width: 100%; + display: flex; + justify-content: space-between; + } + } + } + + .download-box { + flex-direction: column; + align-items: center; + + .image-box { + display: none; + } + + .information-section { + width: 100%; + padding: nth($spaces, 8) nth($spaces, 4); + + .btn-download { + ul { + display: contents; + } + } + } + + .image-box { + margin-top: nth($spaces, 4); + } + } + } + } + + /*-------------------------------- + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + + @include retinaMobile { + .plans { + .mainBox .subscription { + justify-content: center; + gap: nth($spaces, 8); + .subscription-level { + justify-content: center; + } + } + .mainBox .box { + display: grid; + text-align: center; + width: 100%; + gap: nth($spaces, 4); + + h3, + .status { + width: 34rem; + text-align: center; + } + } + .download-box .information-section .btn-download ul { + display: flex; + } + } + } + + /*-------------------------------- + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + + @include mobile { + .plans { + h1 { + font-size: $fontSize3Xl; + text-align: center; + } + .mainBox { + .subscription { + display: grid; + text-align: center; + width: 100%; + gap: nth($spaces, 4); + + .subscription-level, + .subscription-options { + flex-wrap: wrap; + width: 100%; + } + + .subscription-options { + justify-content: space-between; + } + } + + .box { + display: grid; + text-align: center; + left: -1rem; + position: relative; + + h3, + .status { + width: 19rem; + text-align: center; + } + } + } + + .download-box .information-section .information-box { + width: 100%; + left: 0; + position: relative; + + .btn-download { + left: -1.5rem; + + ul { + display: contents; + top: 3rem; + } + } + } + } + } +} diff --git a/app-land/scss/layout/_smartSolutions.scss b/app-land/scss/layout/_smartSolutions.scss new file mode 100644 index 0000000..6672760 --- /dev/null +++ b/app-land/scss/layout/_smartSolutions.scss @@ -0,0 +1,96 @@ +@use "sass:list"; + +.smart__solutions { + padding-top: 5rem; + + .container { + background-color: $mistGray; + width: 100%; + display: flex; + justify-content: space-evenly; + } + + &--img-box { + top: 5rem; + position: relative; + width: 27rem; + } + + &--information-box { + padding-top: $rounded4Xl; + + .menuItem { + display: flex; + align-items: center; + width: 20rem; + border-radius: $rounded2Xl; + background: $white; + height: 4rem; + padding: list.nth($spaces, 3); + margin-bottom: nth($spaces, 4); + + span { + left: 1rem; + position: relative; + font-size: $fontSizeLg; + } + } + + .selected { + background-color: $darkGray; + color: $white; + height: auto; + display: block; + + p { + line-height: 1.6; + left: 1rem; + position: relative; + width: 96%; + } + } + } + + // Responsive part + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + + @include tablet { + .container { + .smart__solutions--img-box { + display: none; + } + } + } + + /*-------------------------------- + + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + + @include retinaMobile { + .container { + .smart__solutions--img-box { + display: none; + } + } + } + + /*-------------------------------- + + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @include mobile { + .container { + .smart__solutions--img-box { + display: none; + } + } + } +} diff --git a/app-land/scss/main.scss b/app-land/scss/main.scss new file mode 100644 index 0000000..bf6c432 --- /dev/null +++ b/app-land/scss/main.scss @@ -0,0 +1,67 @@ +/*======================================================================================== +********* +******* IMPORT ALL OF THE STYLES HERE +***** +*** +*/ + + /*-------------------------------- + *** shared files + ** + */ + + @import "../../shared/scss/shared.scss"; + + /*-------------------------------- + *** IMPORT GENERAL AND IMPORTANT + ** VARIABLES + */ + + @import "variables"; + + /*-------------------------------- + *** SET DIRECTION BEFORE ANYTHING + ** + */ + + @import "typography"; + + /*-------------------------------- + *** SET DIRECTION BEFORE ANYTHING + ** + */ + + @import "./component/_button.scss"; + + /*-------------------------------- + *** IMPORT GENERAL AND IMPORTANT + ** MIXINS + */ + + @import "./mixins/mixins"; + + /*-------------------------------- + *** LAYOUT + ** HEADER, HERO SECTION, EXPLORE HUB, SMART SOLUTIONS, CUSTOMER REVIEWS, PLAN SELECTOR HUB + */ + + @import "layout/header"; + + @import "layout/heroSection"; + + @import "layout/exploreHub"; + + @import "layout/smartSolutions"; + + @import "layout/customerReviews"; + + @import "layout/planSelectorHub"; + + @import "layout/footer"; + +/* +*** +***** +******* +********* +========================================================================================*/ \ No newline at end of file diff --git a/app-land/scss/mixins/_mixins.scss b/app-land/scss/mixins/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/event-land/README.md b/event-land/README.md new file mode 100644 index 0000000..7e3ca2a --- /dev/null +++ b/event-land/README.md @@ -0,0 +1,9 @@ +## Licenses + +### Fonts + +The font used in this project is **Inter**, imported from [Google Fonts](https://fonts.google.com/). + +### Images + +The images used in this project were downloaded from [Pexels](https://www.pexels.com/). Images on Pexels are free to use under the [Pexels License](https://www.pexels.com/license/), which allows personal and commercial use without the need for attribution. diff --git a/event-land/css/style.css b/event-land/css/style.css new file mode 100644 index 0000000..e3dacc3 --- /dev/null +++ b/event-land/css/style.css @@ -0,0 +1,1078 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ +/*-------------------------------- +*** GENERAL DIFINITIONS +** CSS3 , CLEARFIX +*/ +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +.container { + width: 90%; +} + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** 4K AND HIGH RESOULOTIONS +** MIN-WIDTH : 2560px OR 160em +*/ +/*-------------------------------- +*** LAPTOP OR DESKTOP +** MIN-WIDTH : 1400px OR 87.5em +*/ +/*-------------------------------- +*** FOR SOM OF THE DEVICES +** MIN-WIDTH : 1201px OR 75.0625em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1200px OR 75em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1024px OR 64em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 992px OR 62em +*/ +/*-------------------------------- +*** FOR RETINA MOBILE AND LANSCAPE +** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em +*/ +/*-------------------------------- +*** FOR MOBILE +** MAX : 640PX / 40em +*/ +/*-------------------------------- +*** FOR MINI MOBILE +** MAX : 400PX / 25em +*/ +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #SPACE +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER +\*------------------------------------*/ +/*------------------------------------*\ + #FORNT +\*------------------------------------*/ +body { + font-family: "Inter", sans-serif; +} + +.paragraph { + color: #24222c; + font-weight: 600; + line-height: 1.8; +} +.paragraph--primary { + color: #24222c; +} +.paragraph--secondary { + color: rgb(113.5, 113.5, 113.5); +} +.paragraph--tertiary { + color: #bebebe; +} + +.tag { + padding: 0.5em 1.25em; + border-radius: 9999px; + font-weight: 700; + text-transform: uppercase; + text-align: center; +} +.tag--primary { + color: #50cb8b; + background-color: #effff7; +} + +.title { + display: flex; + align-items: center; + gap: 0.5em; + font-size: 1.5em; + font-weight: 600; +} +.title__arrow { + transform: rotate(-45deg); +} +.title--primary { + color: #24222c; +} +.title--secondary { + color: #ffffff; +} + +/*------------------------------------*\ + #HEADINGS +\*------------------------------------*/ +.heading-1, +.heading-2, +.heading-3 { + font-weight: 700; + text-transform: uppercase; +} +.heading-1--primary, +.heading-2--primary, +.heading-3--primary { + color: #24222c; +} +.heading-1--secondary, +.heading-2--secondary, +.heading-3--secondary { + color: #ffffff; +} + +.heading-1 { + font-size: 4.5em; +} + +.heading-2 { + font-size: 3em; +} + +.heading-3 { + font-size: 2.25em; +} + +/*------------------------------------*\ + #MEDIA QUERIES +\*------------------------------------*/ +@media screen and (max-width: 75em) { + .heading-1 { + font-size: 3em; + } + .heading-2 { + font-size: 2.25em; + } + .heading-3 { + font-size: 1.875em; + } +} +@media screen and (max-width: 40em) { + .heading-1 { + font-size: 2.25em; + } + .heading-2 { + font-size: 1.875em; + } + .heading-3 { + font-size: 1.5em; + } +} +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; + width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +/*------------------------------------*\ + #COMPONENTS +\*------------------------------------*/ +/*========================================================= +********* Generic DropDown Component +******* Whenever .dropdown is hovered .dropdown__content appears +*/ +.dropdown { + position: relative; +} +.dropdown:hover .dropdown__content { + display: unset; +} +.dropdown .dropdown__content { + display: none; + position: absolute; + z-index: 1; + top: 100%; +} + +.cta__button--button { + width: 7rem; + height: 3rem; + border: none; + border-radius: 2rem; + cursor: pointer; +} +.cta__button--button:hover { + transition: 0.3s ease-in-out; +} + +/*========================================================= +********* Generic Button Component +******* +*/ +/*========================================================= +********* This customizes the generic dropdown for this project +******* +*/ +.dropdown { + display: flex; + align-items: center; + gap: 0.75em; +} +.dropdown__content { + background-color: #ffffff; + color: #24222c; + border-radius: 0.375em; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + padding: 1em; + gap: 0.5em; + flex-direction: column; + text-wrap: nowrap; +} +.dropdown__icon { + transition: transform 150ms; +} +.dropdown:hover .dropdown__content { + display: flex; +} +.dropdown:hover .dropdown__icon { + transform: rotate(180deg); +} + +/*========================================================= +********* This customizes the generic button for this project +******* +*/ +.button { + background: transparent; + color: #fff; + border-radius: 9999px; + border: none; + padding: 1em 1.5em; + font-size: 0.875em; + font-weight: 600; + transition: 150ms; + text-align: center; + cursor: pointer; + display: flex; + align-items: center; +} +.button:hover { + background-color: none; +} +@media screen and (max-width: 40em) { + .button { + padding: 0.75em 1em; + } +} +.button--primary { + background-color: #50cb8b; + color: #ffffff; +} +.button--secondary { + background-color: #ffffff; + color: #24222c; + border: 2px solid #24222c; + gap: 0.75em; +} +.button--secondary .button__icon { + transform: rotate(-45deg); + font-size: 1.875em; +} +@media screen and (max-width: 40em) { + .button--secondary .button__icon { + font-size: 1.25em; + } +} +.button:hover { + opacity: 70%; +} + +.input-group { + display: flex; + border-radius: 9999px; + padding: 0.75em; + gap: 0.75em; + justify-content: space-between; +} +.input-group__input { + border: none; + outline: none; + flex-grow: 1; +} +.input-group__button { + display: flex; + gap: 0.5em; +} +.input-group--primary { + background-color: #ffffff; +} + +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +.top-bar { + padding: 0 7rem; + color: rgb(228.25, 228.25, 228.25); + background-color: #24222c; + display: flex; + align-items: center; + justify-content: space-between; + text-transform: capitalize; + gap: 2em; + font-size: 0.875em; + font-weight: 600; + text-wrap: nowrap; +} +@media screen and (max-width: 40em) { + .top-bar { + display: none; + } +} +@media screen and (max-width: 62em) { + .top-bar { + justify-content: center; + } +} +.top-bar__business { + display: flex; + gap: 1px; + background-color: rgb(113.5, 113.5, 113.5); +} +@media screen and (max-width: 62em) { + .top-bar__business { + display: none; + } +} +.top-bar__business span { + background-color: #24222c; + padding: 1.25em; +} +.top-bar__business span:first-child { + padding-left: 0; +} +.top-bar__actions { + display: flex; + gap: 2em; +} +.top-bar__actions > li { + padding: 1.25em 0; +} +.top-bar__actions > li > a { + color: inherit; + text-decoration: none; + transition: all 150ms; +} +.top-bar__actions > li > a:hover { + opacity: 70%; +} + +.main-navigation { + display: flex; + align-items: center; + gap: 3em; + padding: 1em 7rem; + border-bottom: 2px solid #f1f1f1; + font-weight: 600; + color: #24222c; +} +@media screen and (max-width: 75em) { + .main-navigation { + padding: 1em; + justify-content: space-between; + font-size: 1.25em; + } +} +.main-navigation__logo { + width: 8rem; +} +.main-navigation__menu-button-divider { + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; +} +@media screen and (max-width: 75em) { + .main-navigation__menu-button-divider { + display: none; + justify-content: flex-start; + position: fixed; + top: 0; + z-index: 2; + left: 0; + background-color: #ffffff; + width: 100%; + flex-direction: column; + align-items: start; + padding: 1em; + min-height: 100vh; + gap: 3em; + } + .main-navigation__menu-button-divider.open { + display: flex; + } + .main-navigation__menu-button-divider.close { + display: none; + } +} +.main-navigation__close-menu-button { + align-self: flex-end; +} +.main-navigation__menu { + display: flex; + gap: 2em; +} +@media screen and (max-width: 75em) { + .main-navigation__menu { + flex-direction: column; + } +} +.main-navigation__menu > li > a { + transition: all 150ms; +} +.main-navigation__menu > li > a:hover { + opacity: 70%; +} +.main-navigation__close-menu-button, .main-navigation__open-menu-button { + display: none; + background-color: transparent; + border: none; + font-size: 2.25em; +} +@media screen and (max-width: 75em) { + .main-navigation__close-menu-button, .main-navigation__open-menu-button { + display: flex; + } +} + +.hero-header { + background-color: #ffffff; + padding: 3.75em 7rem; + display: flex; + gap: 3em; +} +@media screen and (max-width: 40em) { + .hero-header { + font-size: 1em; + padding: 3.75em 1.5rem; + } +} +.hero-header__left { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2em; + flex-basis: 50%; +} +@media screen and (max-width: 62em) { + .hero-header__left { + flex-basis: 100%; + } +} +.hero-header__btns-container { + display: flex; + gap: 1.5em; +} +.hero-header__reviews { + align-self: stretch; + border-radius: 1.5em; + border: 2px solid #f1f1f1; + padding: 2em; + margin-top: 3.75em; + display: flex; + justify-content: space-between; + align-items: center; + gap: 3em; +} +@media screen and (max-width: 40em) { + .hero-header__reviews { + gap: 1.5em; + flex-direction: column; + margin-top: 0; + align-items: flex-start; + } +} +@media screen and (min-width: 87.5em) { + .hero-header__reviews { + margin-top: auto; + } +} +.hero-header__reviews-stars { + display: flex; + flex-direction: column; + gap: 0.5em; +} +.hero-header__stars { + font-size: 1.125em; + color: #ffa534; +} +.hero-header__stars-number { + font-weight: 700; +} +.hero-header__reviews-logo { + height: 3em; + width: 12em; +} +@media screen and (max-width: 75em) { + .hero-header__reviews-logo { + height: 2em; + width: 8em; + } +} +.hero-header__right { + flex-basis: 50%; +} +@media screen and (max-width: 62em) { + .hero-header__right { + display: none; + } +} +.hero-header__image { + height: 100%; + object-fit: cover; + border-radius: 1em; +} + +.about-section { + display: flex; + flex-direction: column; + background-color: #f1f1f1; + padding: 7rem; + gap: 3em; +} +@media screen and (max-width: 40em) { + .about-section { + padding: 3.75em 1.5rem; + } +} +.about-section__top { + display: flex; + align-items: flex-start; + gap: 2em; + justify-content: space-between; +} +@media screen and (max-width: 64em) { + .about-section__top { + flex-direction: column; + } +} +.about-section__mid-title { + flex-basis: 55%; + display: flex; + flex-direction: column; + gap: 1.5em; +} +.about-section__bottom { + display: flex; + gap: 2em; +} +@media screen and (max-width: 64em) { + .about-section__bottom { + flex-direction: column; + } +} +.about-section__feature { + display: flex; + flex-direction: column; + gap: 2em; + padding: 2em; + border-radius: 1.5em; +} +@media screen and (max-width: 64em) { + .about-section__feature { + gap: 1.5em; + padding: 1.5em; + } +} +.about-section__feature--polling-vote { + flex-basis: 30%; + background-color: rgb(228.25, 228.25, 228.25); +} +.about-section__feature--virtual-events { + flex-basis: 70%; + background-color: #24222c; + background: linear-gradient(16deg, #24222c 80%, #50cb8b 120%); +} +.about-section__feature--virtual-events p { + width: 75%; +} +@media screen and (max-width: 64em) { + .about-section__feature--virtual-events p { + width: auto; + } +} +.about-section__feature img { + border-radius: 1.5em 1.5em 0 0; + margin: auto 0 -2em 0; + height: 40rem; + object-fit: cover; +} +@media screen and (max-width: 64em) { + .about-section__feature img { + height: 20rem; + margin: auto 0 -1.5em 0; + } +} + +.features-section { + background-color: #24222c; + background-image: radial-gradient(at left top, #50cb8b -6%, #24222c 20%); + display: flex; + flex-direction: column; + gap: 2em; + padding: 3.75em 7rem; +} +@media screen and (max-width: 40em) { + .features-section { + padding: 3.75em 1.5rem; + } +} +.features-section__top, .features-section__bottom { + display: flex; + gap: 4em; +} +.features-section__top > *:first-child, .features-section__bottom > *:first-child { + flex-basis: 45%; +} +.features-section__top > *:last-child, .features-section__bottom > *:last-child { + flex-basis: 55%; +} +@media screen and (max-width: 75em) { + .features-section__top, .features-section__bottom { + flex-direction: column; + gap: 2em; + } +} +.features-section__image { + border-radius: 1.5em; + height: 100%; + object-fit: cover; +} +.features-section__features-list { + display: flex; + flex-direction: column; + gap: 1.5em; + justify-content: space-between; +} +.features-section__feature-item { + display: flex; + flex-direction: column; + gap: 1.5em; + padding-bottom: 1.5em; + border-bottom: 1px solid rgb(113.5, 113.5, 113.5); +} +.features-section__feature-link-divider { + display: flex; + justify-content: space-between; +} +.features-section__feature-link { + color: #ffffff; + font-size: 1.5em; +} +.features-section__feature-link .features-section__feature-arrow { + transform: rotate(-45deg); + padding: 0.25em; +} +.features-section__feature-link--active .features-section__feature-arrow { + transform: rotate(45deg); + background-color: #50cb8b; + border-radius: 9999px; +} + +.advantage-section { + display: flex; + flex-direction: column; + background-color: #24222c; + padding: 7rem; + gap: 3em; +} +@media screen and (max-width: 40em) { + .advantage-section { + padding: 3.75em 1.5rem; + } +} +.advantage-section__top { + display: flex; + align-items: flex-start; + gap: 2em; + justify-content: space-between; +} +@media screen and (max-width: 64em) { + .advantage-section__top { + flex-direction: column; + } +} +.advantage-section__mid-title { + flex-basis: 55%; + display: flex; + flex-direction: column; + gap: 1.5em; +} +.advantage-section__bottom { + display: flex; + gap: 2em; +} +@media screen and (max-width: 64em) { + .advantage-section__bottom { + flex-direction: column; + } +} +.advantage-section__card { + display: flex; + flex-direction: column; + gap: 1em; + flex-basis: 33%; +} +.advantage-section__card img { + height: 45rem; + border-radius: 1.5em; + object-fit: cover; +} +@media screen and (max-width: 64em) { + .advantage-section__card img { + height: 35rem; + } +} +@media screen and (max-width: 40em) { + .advantage-section__card img { + height: 25rem; + } +} + +.testimonial-section { + display: flex; + flex-direction: column; + background-color: #f1f1f1; + background-image: radial-gradient(circle at 0 35%, #50cb8b -19%, transparent 10%), radial-gradient(circle at 100% 0%, #50cb8b -19%, transparent 10%); + padding: 7rem; + gap: 4em; +} +@media screen and (max-width: 40em) { + .testimonial-section { + padding: 3.75em 1.5rem; + } +} +.testimonial-section__top { + display: flex; + flex-direction: column; + gap: 1em; +} +.testimonial-section__heading { + width: 38%; +} +@media screen and (max-width: 75em) { + .testimonial-section__heading { + width: 80%; + } +} +.testimonial-section__bottom { + display: flex; + gap: 3em; +} +@media screen and (max-width: 64em) { + .testimonial-section__bottom { + flex-direction: column; + } +} +.testimonial-section__review { + display: flex; + gap: 3em; +} +@media screen and (max-width: 40em) { + .testimonial-section__review { + gap: 1.5em; + flex-direction: column; + } +} +.testimonial-section__review-profile { + border-radius: 9999px; + width: 7rem; + height: 7rem; +} +@media screen and (max-width: 75em) { + .testimonial-section__review-profile { + width: 5rem; + height: 5rem; + } +} +.testimonial-section__review-info { + font-size: 1.5em; +} +@media screen and (max-width: 75em) { + .testimonial-section__review-info { + font-size: 1em; + } +} +.testimonial-section__review-text { + line-height: 1.7; + margin-bottom: 1em; +} +.testimonial-section__review-person-info { + font-weight: 700; +} +.testimonial-section__move-btns-container { + display: flex; + gap: 1.25em; + align-self: flex-start; +} +@media screen and (max-width: 64em) { + .testimonial-section__move-btns-container { + align-self: center; + } +} +.testimonial-section__move-btn { + padding: 0.5em; + font-size: 1.5em; +} + +.cta-section { + background-color: #ffffff; + padding: 7rem; + display: flex; + gap: 4em; + min-height: 35rem; + align-items: center; +} +@media screen and (max-width: 40em) { + .cta-section { + padding: 3.75em 1.5rem; + } +} +@media screen and (max-width: 75em) { + .cta-section { + flex-direction: column; + align-items: stretch; + } +} +.cta-section__left, .cta-section__right { + display: flex; + flex-direction: column; + flex-basis: 50%; +} +.cta-section__btns-container { + display: flex; + gap: 0.5em; +} +.cta-section__left { + gap: 2em; +} +.cta-section__right { + gap: 4em; +} +.cta-section__message { + position: relative; +} +.cta-section__message--left { + align-self: flex-start; +} +.cta-section__message--right { + align-self: flex-end; +} +@media screen and (max-width: 40em) { + .cta-section__message--left { + align-self: stretch; + } + .cta-section__message--right { + align-self: stretch; + } +} +.cta-section__message-profile { + object-fit: cover; + border-radius: 9999px; +} +.cta-section__message-profile--big { + height: 6.5rem; + width: 6.5rem; +} +@media screen and (max-width: 40em) { + .cta-section__message-profile--big { + display: none; + } +} +.cta-section__message-profile--small { + height: 3.5rem; + width: 3.5rem; +} +.cta-section__message-box { + display: flex; + position: absolute; + top: 50%; + color: #ffffff; + background-color: #24222c; + gap: 1em; + padding: 1em; + width: 25rem; +} +@media screen and (max-width: 40em) { + .cta-section__message-box { + width: 10rem; + position: static; + width: 100%; + } +} +.cta-section__message-box--left { + left: 50%; + border-radius: 0 1.5em 1.5em 1.5em; +} +.cta-section__message-box--right { + right: 50%; + border-radius: 1.5em 0 1.5em 1.5em; +} +.cta-section__message-info { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1em; + max-width: 20rem; +} +@media screen and (max-width: 75em) { + .cta-section__message-info { + font-size: 0.75em; + max-width: 100%; + } +} +.cta-section__message-text { + font-weight: 600; +} +.cta-section__message-profile-name { + font-weight: 400; +} + +.footer { + background-color: #24222c; + color: #bebebe; + display: flex; + flex-direction: column; + gap: 3em; + padding: 3.75em 7rem; + font-size: 1.125em; +} +@media screen and (max-width: 40em) { + .footer { + font-size: 0.875em; + padding: 3.75em 1.5rem; + } +} +.footer a { + transition: all 150ms; + text-transform: capitalize; +} +.footer a:hover { + opacity: 70%; +} +.footer__logo { + width: 15rem; +} +.footer__columns { + display: flex; + justify-content: space-between; + border-bottom: 1px solid rgb(113.5, 113.5, 113.5); + padding-bottom: 4em; + gap: 2em; +} +@media screen and (max-width: 75em) { + .footer__columns { + gap: 4em; + align-items: flex-start; + flex-direction: column; + } +} +.footer__column { + display: flex; + flex-direction: column; + gap: 1.5em; +} +.footer__column-heading { + font-size: 1.25em; + font-weight: 700; + text-transform: uppercase; + color: #ffffff; +} +.footer__column-list { + display: flex; + flex-direction: column; + gap: 1em; +} +.footer__contact { + display: flex; + gap: 2em; +} +@media screen and (max-width: 25em) { + .footer__input-group input { + max-width: 10rem; + } +} +.footer__bottom { + display: flex; + gap: 1.5em; +} +@media screen and (max-width: 40em) { + .footer__bottom { + flex-direction: column; + } +} +.footer__copyright { + margin-right: auto; +} +@media screen and (max-width: 40em) { + .footer__copyright { + margin-bottom: 1.5em; + } +} + +/*# sourceMappingURL=style.css.map */ diff --git a/event-land/css/style.css.map b/event-land/css/style.css.map new file mode 100644 index 0000000..38b9f80 --- /dev/null +++ b/event-land/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../shared/scss/abstracts/_variables.scss","../../shared/scss/abstracts/_media-query.scss","../scss/_typography.scss","../scss/_variables.scss","../../shared/scss/base/_reset.scss","../../shared/scss/components/_dropdown.scss","../../shared/scss/components/_button.scss","../scss/components/_dropdown.scss","../scss/components/_button.scss","../scss/components/_input-group.scss","../scss/layout/_top-bar.scss","../scss/layout/_main-navigation.scss","../scss/layout/_hero-header.scss","../scss/layout/_about-section.scss","../scss/layout/_features-section.scss","../scss/layout/_advantage-section.scss","../scss/layout/_testimonial-section.scss","../scss/layout/_cta-section.scss","../scss/layout/_footer.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/event-land/images/advantage-section-1.jpg b/event-land/images/advantage-section-1.jpg new file mode 100644 index 0000000..efd7cd8 Binary files /dev/null and b/event-land/images/advantage-section-1.jpg differ diff --git a/event-land/images/advantage-section-2.jpg b/event-land/images/advantage-section-2.jpg new file mode 100644 index 0000000..16642d2 Binary files /dev/null and b/event-land/images/advantage-section-2.jpg differ diff --git a/event-land/images/advantage-section-3.jpg b/event-land/images/advantage-section-3.jpg new file mode 100644 index 0000000..b7010bf Binary files /dev/null and b/event-land/images/advantage-section-3.jpg differ diff --git a/event-land/images/cta-review-profile-1.jpg b/event-land/images/cta-review-profile-1.jpg new file mode 100644 index 0000000..423e15e Binary files /dev/null and b/event-land/images/cta-review-profile-1.jpg differ diff --git a/event-land/images/cta-review-profile-2.jpg b/event-land/images/cta-review-profile-2.jpg new file mode 100644 index 0000000..035fecc Binary files /dev/null and b/event-land/images/cta-review-profile-2.jpg differ diff --git a/event-land/images/hero-header.jpg b/event-land/images/hero-header.jpg new file mode 100644 index 0000000..c4a43d0 Binary files /dev/null and b/event-land/images/hero-header.jpg differ diff --git a/event-land/images/logo-black.svg b/event-land/images/logo-black.svg new file mode 100644 index 0000000..77ae615 --- /dev/null +++ b/event-land/images/logo-black.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/event-land/images/logo-white.svg b/event-land/images/logo-white.svg new file mode 100644 index 0000000..9c484be --- /dev/null +++ b/event-land/images/logo-white.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/event-land/images/random-logo.svg b/event-land/images/random-logo.svg new file mode 100644 index 0000000..f7a0bea --- /dev/null +++ b/event-land/images/random-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/event-land/images/review-profile.jpg b/event-land/images/review-profile.jpg new file mode 100644 index 0000000..c8efb73 Binary files /dev/null and b/event-land/images/review-profile.jpg differ diff --git a/event-land/index.html b/event-land/index.html new file mode 100644 index 0000000..4e1d697 --- /dev/null +++ b/event-land/index.html @@ -0,0 +1,580 @@ + + + + + + EventLand + + + + + + + + +
+ + + + +
+ + + Try free +
+ + +
+ +
+
+ Lorem ipsum dolor sit amet 🔥 +

+ let's improve your skills at zentive virtual events +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit + praesentium est, quibusdam laboriosam commodi perferendis cupiditate + sint aliquid assumenda eum. +

+
+ + +
+ +
+
+ + + +

+ 4 out of 5 stars from 7.9k reviews at +

+
+ + +
+
+
+ +
+
+ +
+
+
+

+ About + +

+
+

+ User-friendly event technology for a smooth experience +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique + voluptatem sequi molestias pariatur consectetur nemo eius + aspernatur assumenda minus, ipsum aperiam reprehenderit quisquam + doloremque earum delectus impedit, cupiditate blanditiis ipsam. +

+
+ +
+
+
+

Polling vote

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem + ipsam necessitatibus sit. +

+ +
+
+

Virtual events

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam + quam placeat ullam tempora eos pariatur enim eius explicabo quia + laudantium a illum quas, facilis, recusandae aspernatur iusto! +

+ +
+
+
+ +
+

+ Features + +

+ +
+

+ Features your colleagues will love. +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto + blanditiis harum accusamus quae praesentium repudiandae, assumenda + aliquam eligendi doloribus, magni pariatur nihil voluptas inventore, + quam maxime perspiciatis incidunt vitae alias. +

+
+
+ Placeholder +
    +
  • +
    +

    + Live Streaming & Simulive +

    + + + +
    +

    + Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet + consectetur. +

    +
    • +
  • +
    +

    + Audience Engagement +

    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit. +

    +
    • +
  • +
    +

    + Live Streaming & Simulive +

    + + + +
    +

    + Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet + consectetur. +

    +
    • +
  • +
    +

    + Audience Engagement +

    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit. +

    +
    • +
+
+
+ +
+
+

+ Advantage + +

+
+

+ Craft engaging virtual event experiences +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique + voluptatem sequi molestias pariatur consectetur nemo eius + aspernatur assumenda minus, ipsum aperiam reprehenderit quisquam + doloremque earum delectus impedit, cupiditate blanditiis ipsam. +

+
+ +
+
+
+ People working in office +

+ Leave a good impression +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci + culpa beatae. Lorem ipsum dolor sit amet consectetur adipisicing + elit. Vitae, qui! +

+
+
+ Support calling center +

Reach anyone easily

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci + culpa. Lorem ipsum dolor sit. +

+
+
+ Office meeting +

+ Get set up in minutes +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci + culpa beatae. Lorem ipsum dolor sit amet consectetur adipisicing + elit. Ullam, dolore. +

+
+
+
+ +
+
+

+ Testimonial + +

+

+ See why customers preer zentive meetings. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique + voluptatem sequi. +

+
+
+
+ +
+

+ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Maxime vitae a eaque deleniti quaerat nesciunt quidem officia + odio ea, expedita laboriosam dicta nisi dignissimos eius + possimus quas quia. Autem, nam. Lorem ipsum, dolor sit amet + consectetur adipisicing elit. Deserunt eos illo, totam saepe + repellendus nam reprehenderit minus nemo quisquam impedit est + temporibus obcaecati? Error minus deleniti est illo dignissimos + reiciendis. Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Minima dignissimos vero non hic laudantium doloribus + voluptatibus quam illo rem minus? " +

+ Jane Doe, Data Analyst at Google + +
+
+
+ + +
+
+
+ +
+
+

+ Upgrade your meeting experiences +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique + voluptatem sequi. Lorem, ipsum dolor sit amet consectetur + adipisicing elit. Ipsa, repellendus! Lorem ipsum dolor sit amet + consectetur adipisicing elit. Minima, quae. +

+
+ + +
+
+ +
+
+ Random blue eyed guy +
+ Random blue eyed guy +
+ Ahmad Mohammadirad +

+ Hey Mr. Brown, Have you upgraded your meeting with Zentiv? +

+
+
+
+
+ Random guy +
+ Random guy +
+ Daniel Brown +

+ Hey Ahmad, Yes I have. Zentive is amazing platform to get + virtual experience. +

+
+
+
+
+
+
+ + + + + + diff --git a/event-land/js/script.js b/event-land/js/script.js new file mode 100644 index 0000000..247d68f --- /dev/null +++ b/event-land/js/script.js @@ -0,0 +1,13 @@ +const menuButtonDividerEl = document.querySelector(".js-menu-button-divider"); +const openMenuBtnEl = document.querySelector(".js-open-menu-button"); +const closeMenuBtnEl = document.querySelector(".js-close-menu-button"); + +openMenuBtnEl.addEventListener("click", function () { + menuButtonDividerEl.classList.remove("close"); + menuButtonDividerEl.classList.add("open"); +}); + +closeMenuBtnEl.addEventListener("click", function () { + menuButtonDividerEl.classList.remove("open"); + menuButtonDividerEl.classList.add("close"); +}); diff --git a/event-land/scss/_typography.scss b/event-land/scss/_typography.scss new file mode 100644 index 0000000..434f88f --- /dev/null +++ b/event-land/scss/_typography.scss @@ -0,0 +1,116 @@ +@use "sass:list"; + +/*------------------------------------*\ + #FORNT +\*------------------------------------*/ + +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); + +body { + font-family: $primaryFontFamily; +} + +.paragraph { + color: $tertiaryColor; + font-weight: $fontWeightSemibold; + line-height: 1.8; + + &--primary { + color: $tertiaryColor; + } + &--secondary { + color: $forthColorDarker3; + } + &--tertiary { + color: $forthColorDarker2; + } +} + +.tag { + padding: list.nth($spaces, 2) list.nth($spaces, 5); + border-radius: $roundedFull; + font-weight: $fontWeightBold; + text-transform: uppercase; + text-align: center; + &--primary { + color: $primaryColor; + background-color: $fifthColor; + } +} + +.title { + display: flex; + align-items: center; + gap: list.nth($spaces, 2); + font-size: $fontSize2Xl; + font-weight: $fontWeightSemibold; + + &__arrow { + transform: rotate(-45deg); + } + &--primary { + color: $tertiaryColor; + } + &--secondary { + color: $secondaryColor; + } +} + +/*------------------------------------*\ + #HEADINGS +\*------------------------------------*/ +.heading-1, +.heading-2, +.heading-3 { + font-weight: $fontWeightBold; + text-transform: uppercase; + &--primary { + color: $tertiaryColor; + } + &--secondary { + color: $secondaryColor; + } +} + +.heading-1 { + font-size: $fontSize7Xl; +} + +.heading-2 { + font-size: $fontSize5Xl; +} + +.heading-3 { + font-size: $fontSize4Xl; +} + +/*------------------------------------*\ + #MEDIA QUERIES +\*------------------------------------*/ +@include laptop { + .heading-1 { + font-size: $fontSize5Xl; + } + + .heading-2 { + font-size: $fontSize4Xl; + } + + .heading-3 { + font-size: $fontSize3Xl; + } +} + +@include mobile { + .heading-1 { + font-size: $fontSize4Xl; + } + + .heading-2 { + font-size: $fontSize3Xl; + } + + .heading-3 { + font-size: $fontSize2Xl; + } +} \ No newline at end of file diff --git a/event-land/scss/_variables.scss b/event-land/scss/_variables.scss new file mode 100644 index 0000000..4390d18 --- /dev/null +++ b/event-land/scss/_variables.scss @@ -0,0 +1,37 @@ +@use "sass:list"; +@use "sass:color"; + +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ + +$primaryColor: #50cb8b; +$secondaryColor: #ffffff; +$tertiaryColor: #24222c; +$forthColor: #f1f1f1; +$fifthColor: #effff7; +$starColor: #ffa534; + +$forthColorDarker1 : color.adjust($forthColor , $lightness: -5); +$forthColorDarker2 : color.adjust($forthColor , $lightness: -20); +$forthColorDarker3 : color.adjust($forthColor , $lightness: -50); + +/*------------------------------------*\ + #FONT +\*------------------------------------*/ + +$primaryFontFamily: "Inter", sans-serif; + +/*------------------------------------*\ + #SPACE +\*------------------------------------*/ + +$containerSidePadding: 7rem; +$containerSidePaddingMobile : 1.5rem; + +/*------------------------------------*\ + #BORDER +\*------------------------------------*/ + +$primaryBorder : 2px solid $forthColor; +$borderSecondary : 1px solid $forthColorDarker3; \ No newline at end of file diff --git a/event-land/scss/components/_button.scss b/event-land/scss/components/_button.scss new file mode 100644 index 0000000..6c24bb9 --- /dev/null +++ b/event-land/scss/components/_button.scss @@ -0,0 +1,47 @@ +/*========================================================= +********* This customizes the generic button for this project +******* +*/ + +@use "sass:list"; + +.button { + @include button( + $bg: transparent, + $radius: $roundedFull, + $padding: list.nth($spaces, 4) list.nth($spaces, 6), + $fontSize: $fontSizeSm, + $transition: map-get($durations, 150), + $hoverBgColor: none, + $fontWeight : $fontWeightSemibold + ); + display: flex; + align-items: center; + + @include mobile { + padding: list.nth($spaces, 3) list.nth($spaces, 4); + } + + &--primary { + background-color: $primaryColor; + color: $secondaryColor; + } + + &--secondary { + background-color: $secondaryColor; + color: $tertiaryColor; + border: 2px solid $tertiaryColor; + gap: list.nth($spaces, 3); + .button__icon { + transform: rotate(-45deg); + font-size: $fontSize3Xl; + @include mobile { + font-size: $fontSizeXl; + } + } + } + + &:hover { + opacity: 70%; + } +} diff --git a/event-land/scss/components/_dropdown.scss b/event-land/scss/components/_dropdown.scss new file mode 100644 index 0000000..020616b --- /dev/null +++ b/event-land/scss/components/_dropdown.scss @@ -0,0 +1,35 @@ +/*========================================================= +********* This customizes the generic dropdown for this project +******* +*/ + +@use "sass:list"; + +.dropdown { + display: flex; + align-items: center; + gap: list.nth($spaces, 3); + &__content { + background-color: $secondaryColor; + color: $tertiaryColor; + border-radius: $roundedMd; + box-shadow: $shadowSm; + padding: list.nth($spaces, 4); + gap: list.nth($spaces, 2); + flex-direction: column; + text-wrap: nowrap; + } + &__icon { + transition: transform map-get($durations , 150); + } + + &:hover { + .dropdown__content { + display: flex; + } + .dropdown__icon { + transform: rotate(180deg); + } + } + } + \ No newline at end of file diff --git a/event-land/scss/components/_input-group.scss b/event-land/scss/components/_input-group.scss new file mode 100644 index 0000000..ac91d8c --- /dev/null +++ b/event-land/scss/components/_input-group.scss @@ -0,0 +1,21 @@ +@use "sass:list"; + +.input-group { + display: flex; + border-radius: $roundedFull; + padding: list.nth($spaces, 3); + gap: list.nth($spaces, 3); + justify-content: space-between; + &__input { + border: none; + outline: none; + flex-grow: 1; + } + &__button { + display: flex; + gap: list.nth($spaces, 2); + } + &--primary { + background-color: $secondaryColor; + } +} diff --git a/event-land/scss/layout/_about-section.scss b/event-land/scss/layout/_about-section.scss new file mode 100644 index 0000000..ef7cb9d --- /dev/null +++ b/event-land/scss/layout/_about-section.scss @@ -0,0 +1,78 @@ +@use "sass:list"; + +.about-section { + display: flex; + flex-direction: column; + background-color: $forthColor; + padding: $containerSidePadding; + gap: list.nth($spaces, 12); + @include mobile { + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + &__top { + display: flex; + align-items: flex-start; + gap: list.nth($spaces, 8); + justify-content: space-between; + @include mini_laptop { + flex-direction: column; + } + } + &__mid-title { + flex-basis: 55%; + display: flex; + flex-direction: column; + gap: list.nth($spaces, 6); + } + + &__bottom { + display: flex; + gap: list.nth($spaces, 8); + @include mini_laptop() { + flex-direction: column; + } + } + &__feature { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 8); + padding: list.nth($spaces, 8); + border-radius: $rounded3Xl; + @include mini_laptop() { + gap: list.nth($spaces, 6); + padding: list.nth($spaces, 6); + } + + &--polling-vote { + flex-basis: 30%; + background-color: $forthColorDarker1; + } + &--virtual-events { + flex-basis: 70%; + background-color: $tertiaryColor; + background: linear-gradient( + 16deg, + $tertiaryColor 80%, + $primaryColor 120% + ); + + p { + width: 75%; + @include mini_laptop { + width: auto; + } + } + } + img { + border-radius: $rounded3Xl $rounded3Xl 0 0; + margin: auto 0 (-(list.nth($spaces, 8))) 0; + height: 40rem; + object-fit: cover; + @include mini_laptop() { + height: 20rem; + margin: auto 0 (-(list.nth($spaces, 6))) 0; + } + } + } +} diff --git a/event-land/scss/layout/_advantage-section.scss b/event-land/scss/layout/_advantage-section.scss new file mode 100644 index 0000000..7e16653 --- /dev/null +++ b/event-land/scss/layout/_advantage-section.scss @@ -0,0 +1,53 @@ +@use "sass:list"; + +.advantage-section { + display: flex; + flex-direction: column; + background-color: $tertiaryColor; + padding: $containerSidePadding; + gap: list.nth($spaces, 12); + @include mobile { + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + &__top { + display: flex; + align-items: flex-start; + gap: list.nth($spaces, 8); + justify-content: space-between; + @include mini_laptop { + flex-direction: column; + } + } + &__mid-title { + flex-basis: 55%; + display: flex; + flex-direction: column; + gap: list.nth($spaces, 6); + } + + &__bottom { + display: flex; + gap: list.nth($spaces, 8); + @include mini_laptop() { + flex-direction: column; + } + } + &__card { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 4); + flex-basis: 33%; + img { + height: 45rem; + border-radius: $rounded3Xl; + object-fit: cover; + @include mini_laptop() { + height: 35rem; + } + @include mobile() { + height: 25rem; + } + } + } +} diff --git a/event-land/scss/layout/_cta-section.scss b/event-land/scss/layout/_cta-section.scss new file mode 100644 index 0000000..116f7d3 --- /dev/null +++ b/event-land/scss/layout/_cta-section.scss @@ -0,0 +1,111 @@ +@use "sass:list"; + +.cta-section { + background-color: $secondaryColor; + padding: $containerSidePadding; + display: flex; + gap: list.nth($spaces, 16); + min-height: 35rem; + align-items: center; + @include mobile { + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + @include laptop { + flex-direction: column; + align-items: stretch; + } + + &__left, + &__right { + display: flex; + flex-direction: column; + flex-basis: 50%; + } + + &__btns-container { + display: flex; + gap: list.nth($spaces, 2); + } + + &__left { + gap: list.nth($spaces, 8); + } + &__right { + gap: list.nth($spaces, 16); + } + + &__message { + position: relative; + &--left { + align-self: flex-start; + } + &--right { + align-self: flex-end; + } + + @include mobile { + &--left { + align-self: stretch; + } + &--right { + align-self: stretch; + } + } + } + &__message-profile { + object-fit: cover; + border-radius: $roundedFull; + &--big { + height: 6.5rem; + width: 6.5rem; + @include mobile { + display: none; + } + } + &--small { + height: 3.5rem; + width: 3.5rem; + } + } + &__message-box { + display: flex; + position: absolute; + top: 50%; + color: $secondaryColor; + background-color: $tertiaryColor; + gap: list.nth($spaces, 4); + padding: list.nth($spaces, 4); + width: 25rem; + @include mobile { + width: 10rem; + position: static; + width: 100%; + } + + &--left { + left: 50%; + border-radius: 0 $rounded3Xl $rounded3Xl $rounded3Xl; + } + &--right { + right: 50%; + border-radius: $rounded3Xl 0 $rounded3Xl $rounded3Xl; + } + } + &__message-info { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: list.nth($spaces, 4); + max-width: 20rem; + @include laptop { + font-size: $fontSizeXs; + max-width: 100%; + } + } + &__message-text { + font-weight: $fontWeightSemibold; + } + &__message-profile-name { + font-weight: $fontWeightRegular; + } +} diff --git a/event-land/scss/layout/_features-section.scss b/event-land/scss/layout/_features-section.scss new file mode 100644 index 0000000..3855e4b --- /dev/null +++ b/event-land/scss/layout/_features-section.scss @@ -0,0 +1,67 @@ +@use "sass:list"; + +.features-section { + background-color: $tertiaryColor; + background-image: radial-gradient(at left top , $primaryColor -6%, $tertiaryColor 20%); + display: flex; + flex-direction: column; + gap: list.nth($spaces, 8); + padding: list.nth($spaces, 15) $containerSidePadding; + @include mobile { + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + &__top, + &__bottom { + display: flex; + gap: list.nth($spaces, 16); + & > *:first-child { + flex-basis: 45%; + } + & > *:last-child { + flex-basis: 55%; + } + @include laptop() { + flex-direction: column; + gap: list.nth($spaces, 8); + } + } + + &__image { + border-radius: $rounded3Xl; + height: 100%; + object-fit: cover; + } + &__features-list { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 6); + justify-content: space-between; + } + &__feature-item { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 6); + padding-bottom: list.nth($spaces, 6); + border-bottom: $borderSecondary; + } + &__feature-link-divider { + display: flex; + justify-content: space-between; + } + &__feature-link { + color: $secondaryColor; + font-size: $fontSize2Xl; + .features-section__feature-arrow { + transform: rotate(-45deg); + padding: list.nth($spaces, 1); + } + &--active { + .features-section__feature-arrow { + transform: rotate(45deg); + background-color: $primaryColor; + border-radius: $roundedFull; + } + } + } +} diff --git a/event-land/scss/layout/_footer.scss b/event-land/scss/layout/_footer.scss new file mode 100644 index 0000000..61674d0 --- /dev/null +++ b/event-land/scss/layout/_footer.scss @@ -0,0 +1,80 @@ +@use "sass:list"; + +.footer { + background-color: $tertiaryColor; + color: $forthColorDarker2; + display: flex; + flex-direction: column; + gap: list.nth($spaces, 12); + padding: list.nth($spaces, 15) $containerSidePadding; + font-size: $fontSizeLg; + @include mobile { + font-size: $fontSizeSm; + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + a { + transition: all map-get($durations, 150); + text-transform: capitalize; + &:hover { + opacity: 70%; + } + } + + &__logo { + width: 15rem; + } + &__columns { + display: flex; + justify-content: space-between; + border-bottom: $borderSecondary; + padding-bottom: list.nth($spaces, 16); + gap: list.nth($spaces, 8); + @include laptop { + gap: list.nth($spaces, 16); + align-items: flex-start; + flex-direction: column; + } + } + &__column { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 6); + } + &__column-heading { + font-size: $fontSizeXl; + font-weight: $fontWeightBold; + text-transform: uppercase; + color: $secondaryColor; + } + &__column-list { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 4); + } + &__contact { + display: flex; + gap: list.nth($spaces, 8); + } + &__input-group { + input { + @include mini-mobile { + max-width: 10rem; + } + } + } + + &__bottom { + display: flex; + gap: list.nth($spaces, 6); + @include mobile { + flex-direction: column; + } + } + &__copyright { + margin-right: auto; + @include mobile { + margin-bottom: list.nth($spaces, 6); + } + } +} diff --git a/event-land/scss/layout/_hero-header.scss b/event-land/scss/layout/_hero-header.scss new file mode 100644 index 0000000..1e0c67a --- /dev/null +++ b/event-land/scss/layout/_hero-header.scss @@ -0,0 +1,79 @@ +@use "sass:list"; + +.hero-header { + background-color: $secondaryColor; + padding: list.nth($spaces, 15) $containerSidePadding; + display: flex; + gap: list.nth($spaces, 12); + @include mobile { + font-size: $fontSizeBase; + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + &__left { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: list.nth($spaces, 8); + flex-basis: 50%; + @include tablet { + flex-basis: 100%; + } + } + &__btns-container { + display: flex; + gap: list.nth($spaces, 6); + } + &__reviews { + align-self: stretch; + border-radius: $rounded3Xl; + border:$primaryBorder; + padding: list.nth($spaces, 8); + margin-top: list.nth($spaces, 15); + display: flex; + justify-content: space-between; + align-items: center; + gap: list.nth($spaces, 12); + @include mobile { + gap: list.nth($spaces, 6); + flex-direction: column; + margin-top: 0; + align-items: flex-start; + } + @include led{ + margin-top: auto; + } + } + &__reviews-stars { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 2); + } + &__stars { + font-size: $fontSizeLg; + color: $starColor; + } + &__stars-number { + font-weight: $fontWeightBold; + } + &__reviews-logo { + height: 3em; + width: 12em; + @include laptop { + height: 2em; + width: 8em; + } + } + + &__right { + flex-basis: 50%; + @include tablet { + display: none; + } + } + &__image { + height: 100%; + object-fit: cover; + border-radius: $rounded2Xl; + } +} diff --git a/event-land/scss/layout/_main-navigation.scss b/event-land/scss/layout/_main-navigation.scss new file mode 100644 index 0000000..7a39f54 --- /dev/null +++ b/event-land/scss/layout/_main-navigation.scss @@ -0,0 +1,81 @@ +@use "sass:list"; + +.main-navigation { + display: flex; + align-items: center; + gap: list.nth($spaces, 12); + padding: list.nth($spaces, 4) $containerSidePadding; + border-bottom: $primaryBorder; + font-weight: $fontWeightSemibold; + color: $tertiaryColor; + @include laptop { + padding: list.nth($spaces, 4); + justify-content: space-between; + font-size: $fontSizeXl; + } + + &__logo { + width: 8rem; + } + + &__menu-button-divider { + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + @include laptop { + display: none; + justify-content: flex-start; + position: fixed; + top: 0; + z-index: 2; + left: 0; + background-color: $secondaryColor; + width: 100%; + flex-direction: column; + align-items: start; + padding: list.nth($spaces, 4); + min-height: 100vh; + gap: list.nth($spaces, 12); + + &.open { + display: flex; + } + &.close { + display: none; + } + } + } + + &__close-menu-button { + align-self: flex-end; + } + + &__menu { + display: flex; + gap: list.nth($spaces, 8); + @include laptop { + flex-direction: column; + } + + & > li { + & > a { + transition: all map-get($durations, 150); + &:hover { + opacity: 70%; + } + } + } + } + + &__close-menu-button, + &__open-menu-button { + display: none; + background-color: transparent; + border: none; + font-size: $fontSize4Xl; + @include laptop { + display: flex; + } + } +} diff --git a/event-land/scss/layout/_testimonial-section.scss b/event-land/scss/layout/_testimonial-section.scss new file mode 100644 index 0000000..3a70b66 --- /dev/null +++ b/event-land/scss/layout/_testimonial-section.scss @@ -0,0 +1,82 @@ +@use "sass:list"; + +.testimonial-section { + display: flex; + flex-direction: column; + background-color: $forthColor; + background-image: radial-gradient( + circle at 0 35%, + $primaryColor -19%, + transparent 10% + ), + radial-gradient(circle at 100% 0%, $primaryColor -19%, transparent 10%); + padding: $containerSidePadding; + gap: list.nth($spaces, 16); + @include mobile { + padding: list.nth($spaces, 15) $containerSidePaddingMobile; + } + + &__top { + display: flex; + flex-direction: column; + gap: list.nth($spaces, 4); + } + &__heading { + width: 38%; + @include laptop { + width: 80%; + } + } + + &__bottom { + display: flex; + gap: list.nth($spaces, 12); + @include mini-laptop { + flex-direction: column; + } + } + + &__review { + display: flex; + gap: list.nth($spaces, 12); + @include mobile { + gap: list.nth($spaces, 6); + flex-direction: column; + } + } + &__review-profile { + border-radius: $roundedFull; + width: 7rem; + height: 7rem; + @include laptop { + width: 5rem; + height: 5rem; + } + } + &__review-info { + font-size: $fontSize2Xl; + @include laptop { + font-size: $fontSizeBase; + } + } + &__review-text { + line-height: 1.7; + margin-bottom: list.nth($spaces, 4); + } + &__review-person-info { + font-weight: $fontWeightBold; + } + + &__move-btns-container { + display: flex; + gap: list.nth($spaces, 5); + align-self: flex-start; + @include mini-laptop { + align-self: center; + } + } + &__move-btn { + padding: list.nth($spaces, 2); + font-size: $fontSize2Xl; + } +} diff --git a/event-land/scss/layout/_top-bar.scss b/event-land/scss/layout/_top-bar.scss new file mode 100644 index 0000000..94a384f --- /dev/null +++ b/event-land/scss/layout/_top-bar.scss @@ -0,0 +1,58 @@ +@use "sass:list"; + +.top-bar { + padding: 0 $containerSidePadding; + color: $forthColorDarker1; + background-color: $tertiaryColor; + display: flex; + align-items: center; + justify-content: space-between; + text-transform: capitalize; + gap: list.nth($spaces, 8); + font-size: $fontSizeSm; + font-weight: $fontWeightSemibold; + text-wrap: nowrap; + @include mobile() { + display: none; + } + @include tablet { + justify-content: center; + } + + &__business { + display: flex; + // To make a thin space between the two span elements + gap: 1px; + // To give that thin space a color and make it look like a line + background-color: $forthColorDarker3; + + @include tablet { + display: none; + } + + span { + // To cover the background color of parent + background-color: $tertiaryColor; + padding: list.nth($spaces, 5); + } + span:first-child { + padding-left: 0; + } + } + + &__actions { + display: flex; + gap: list.nth($spaces, 8); + & > li { + padding: list.nth($spaces, 5) 0; + & > a { + color: inherit; + text-decoration: none; + transition: all map-get($durations, 150); + &:hover { + opacity: 70%; + } + } + } + } +} diff --git a/event-land/scss/main.scss b/event-land/scss/main.scss new file mode 100644 index 0000000..5859fa3 --- /dev/null +++ b/event-land/scss/main.scss @@ -0,0 +1,34 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +@import "../../shared/scss/abstracts/variables"; +@import "../../shared/scss/abstracts/media-query"; +@import "variables"; +@import "typography"; + +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +@import "../../shared/scss/base/reset"; + +/*------------------------------------*\ + #COMPONENTS +\*------------------------------------*/ +@import "../../shared/scss/components/dropdown"; +@import "../../shared/scss/components/button"; +@import "components/dropdown"; +@import "components/button"; +@import "components/input-group"; + +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +@import "layout/top-bar"; +@import "layout/main-navigation"; +@import "layout/hero-header"; +@import "layout/about-section"; +@import "layout/features-section"; +@import "layout/advantage-section"; +@import "layout/testimonial-section"; +@import "layout/cta-section"; +@import "layout/footer"; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3d1438e --- /dev/null +++ b/index.html @@ -0,0 +1,621 @@ + + + + + + Anvogue + + + + + + + + +
+
+
+

Anvogue

+ +
+
+
+

+ ultimate wordpress solurton + Top-Notch + Premium Design +

+ start yours store +
+ +
+
+ + + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
+

+ + + super fast +

+ +

Super Fast Loading Speed

+ +

+ Anvogue is optimized for fast loading speed by having a good + structure and well witten code for best user experience +

+ +

+ + + 90%Performance-A Grade +

+
+ +
+
+
+

A

+
+
+

90%

+

Performance

+
+
+

95%

+

structure

+
+
+ +

Performance Report By

+ +
+ + google + + + + GTmetrix +
+
+
+
+
+ +
+
+
+

24+

+

Ready To Use Home Pages

+

+ All home pages, inner pages, and elements are included with the + purchase. Easily +

+

+ import the demos and pages with the one-click demo import. +

+
+
+
+
+ +
+
+
+
+

+ + + elementor +

+

Elementor Page Builder

+

+ Enjoy intuitive interface and flexibility of one of the most user- + friendly page builder for WordPress. Enhanced with a set of + additional elements, it enables you to customize layouts with + ease. +

+ +
+
+

+ + + Drag And Drop Editor +

+
+
+

+ + Powerful Options +

+
+
+

+ + 50+Custom Elements +

+
+
+

+ + No Coding Required +

+
+
+ + view demo +
+
+
+ +
+

More Useful Ecommerce Features

+

+ Powerful features to create your next great online store. +

+
+
+ a store site with all kinds of goods +

Smaert Product Filters

+

+ Filtering products is fast, convenient and smart by auto tags + entry & multiple Product attributes. +

+
+
+ a store site with all kinds of goods +

Product Variant Swatches

+

+ Swatch products with multiple attributes for displaying Colors, + size and images swatches. +

+
+
+ a store site with all kinds of goods +

Quick View Popup

+

+ Allows users to get a quick look of products without opening the + product page. +

+
+
+ a store site with all kinds of goods +

Ajax Cart Popup

+

+ Ajax cart allows users to add products in the cart without to + reload the entire sit each time +

+
+
+
+
+ a store site with all kinds of goods +

Sales Countdown Timer

+

+ Boost sales and engagement for special occasions. +

+
+
+ a store site with all kinds of goods +

Frequently Bought Together

+

+ As recommendations are displayed as bundles on your product + page. +

+
+
+ a store site with all kinds of goods +

External Product

+

+ Increase the conversion by moving the customer right to checkout + with one click. +

+
+
+
+ view all +
+
+
+
+ +
+
+
+
+ awesome features +
+

Packed With Powerful Features

+

Building Made Easy!

+
+
+ + + +

24+ Home Demos

+

+ Choose from 24+ pre-made website demos to get tour business + going in no time! +

+
+
+ + + + +

140+ Sections

+

+ Use any of 140+ section included and enrich your website in + content & design +

+
+
+ + + +

Easily Demo Importer

+

+ Choose from 24+ pre-made website demos get your business going + in no time! +

+
+
+ + + + + + + +

Responsive & Retina Ready

+

+ Anvogue is 100% responsive to make your website look beautiful + in all major devices. +

+
+
+ + + +

Blazing Fast Performance

+

+ We optimized the themeś performance so that you get a blazing + fast website. +

+
+
+ + + + +

Extensive Documentation

+

+ The theme includes comprehensive documentation explaining major + features. +

+
+
+ + + +

Optimized For SEO

+

+ We optimized the theme to help your website rank well. +

+
+
+ + + +

Friendly & Efficient Support

+

+ Our numerous 5-star ratings reflect the quality of our customer + support. +

+
+
+
+
+
+ +
+
+ Powerful features section +
+
Help users section
+
trusted section
+
footer section
+
+ + + + diff --git a/old/AI-ALLY.html b/old/AI-ALLY.html new file mode 100644 index 0000000..01bd119 --- /dev/null +++ b/old/AI-ALLY.html @@ -0,0 +1,30 @@ + + + + + + + Document + + +
+
+
+ +

AI ALLY

+
+
+ +
+
+ +
+
+
+ + diff --git a/old/README.md b/old/README.md new file mode 100644 index 0000000..29271f9 --- /dev/null +++ b/old/README.md @@ -0,0 +1,14 @@ +# Landing Theme Intro +... + +# Pages +- basket +- product details +- product list and packages +- sign-in +- sign-up +- blog +- + +# License +... diff --git a/basket.html b/old/basket.html similarity index 100% rename from basket.html rename to old/basket.html diff --git a/blog.html b/old/blog.html similarity index 100% rename from blog.html rename to old/blog.html diff --git a/css/lib/normalize.css b/old/css/lib/normalize.css similarity index 100% rename from css/lib/normalize.css rename to old/css/lib/normalize.css diff --git a/css/lib/tiny-slider.css b/old/css/lib/tiny-slider.css similarity index 100% rename from css/lib/tiny-slider.css rename to old/css/lib/tiny-slider.css diff --git a/css/style.css b/old/css/style.css similarity index 92% rename from css/style.css rename to old/css/style.css index e3fa91b..de71225 100644 --- a/css/style.css +++ b/old/css/style.css @@ -48,9 +48,16 @@ *---------------------------- variable for product ---------------------------- \*========================================================================================*/ @import url("https://fonts.googleapis.com/css?family=Muli"); -@import url(lib/normalize.css); +@import "lib/normalize.css"; :root { - --gradient: linear-gradient(310deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f); + --gradient: linear-gradient( + 310deg, + #845ec2, + #d65db1, + #ff6f91, + #ff9671, + #ffc75f + ); } /*-------------------------------- @@ -152,62 +159,6 @@ *** GENERAL DIFINITIONS ** COMPASS , SUSY , CSS3 , CLEARFIX */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; -} - -html { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -caption, th, td { - text-align: left; - font-weight: normal; - vertical-align: middle; -} - -q, blockquote { - quotes: none; -} -q:before, q:after, blockquote:before, blockquote:after { - content: ""; - content: none; -} - -a img { - border: none; -} - -article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { - display: block; -} - .container { width: 90%; } @@ -265,60 +216,49 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @media screen and (min-width: 75.0625em) { .col-xl-1 { - width: 8.33333%; + width: 8.3333333333%; float: left; } - .col-xl-2 { - width: 16.66667%; + width: 16.6666666667%; float: left; } - .col-xl-3 { width: 25%; float: left; } - .col-xl-4 { - width: 33.33333%; + width: 33.3333333333%; float: left; } - .col-xl-5 { - width: 41.66667%; + width: 41.6666666667%; float: left; } - .col-xl-6 { width: 50%; float: left; } - .col-xl-7 { - width: 58.33333%; + width: 58.3333333333%; float: left; } - .col-xl-8 { - width: 66.66667%; + width: 66.6666666667%; float: left; } - .col-xl-9 { width: 75%; float: left; } - .col-xl-10 { - width: 83.33333%; + width: 83.3333333333%; float: left; } - .col-xl-11 { - width: 91.66667%; + width: 91.6666666667%; float: left; } - .col-xl-12 { width: 100%; float: left; @@ -326,60 +266,49 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } @media screen and (max-width: 75em) { .col-lg-1 { - width: 8.33333%; + width: 8.3333333333%; float: left; } - .col-lg-2 { - width: 16.66667%; + width: 16.6666666667%; float: left; } - .col-lg-3 { width: 25%; float: left; } - .col-lg-4 { - width: 33.33333%; + width: 33.3333333333%; float: left; } - .col-lg-5 { - width: 41.66667%; + width: 41.6666666667%; float: left; } - .col-lg-6 { width: 50%; float: left; } - .col-lg-7 { - width: 58.33333%; + width: 58.3333333333%; float: left; } - .col-lg-8 { - width: 66.66667%; + width: 66.6666666667%; float: left; } - .col-lg-9 { width: 75%; float: left; } - .col-lg-10 { - width: 83.33333%; + width: 83.3333333333%; float: left; } - .col-lg-11 { - width: 91.66667%; + width: 91.6666666667%; float: left; } - .col-lg-12 { width: 100%; float: left; @@ -387,60 +316,49 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } @media screen and (max-width: 62em) { .col-md-1 { - width: 8.33333%; + width: 8.3333333333%; float: left; } - .col-md-2 { - width: 16.66667%; + width: 16.6666666667%; float: left; } - .col-md-3 { width: 25%; float: left; } - .col-md-4 { - width: 33.33333%; + width: 33.3333333333%; float: left; } - .col-md-5 { - width: 41.66667%; + width: 41.6666666667%; float: left; } - .col-md-6 { width: 50%; float: left; } - .col-md-7 { - width: 58.33333%; + width: 58.3333333333%; float: left; } - .col-md-8 { - width: 66.66667%; + width: 66.6666666667%; float: left; } - .col-md-9 { width: 75%; float: left; } - .col-md-10 { - width: 83.33333%; + width: 83.3333333333%; float: left; } - .col-md-11 { - width: 91.66667%; + width: 91.6666666667%; float: left; } - .col-md-12 { width: 100%; float: left; @@ -448,60 +366,49 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } @media screen and (max-width: 47.9375em) { .col-sm-1 { - width: 8.33333%; + width: 8.3333333333%; float: left; } - .col-sm-2 { - width: 16.66667%; + width: 16.6666666667%; float: left; } - .col-sm-3 { width: 25%; float: left; } - .col-sm-4 { - width: 33.33333%; + width: 33.3333333333%; float: left; } - .col-sm-5 { - width: 41.66667%; + width: 41.6666666667%; float: left; } - .col-sm-6 { width: 50%; float: left; } - .col-sm-7 { - width: 58.33333%; + width: 58.3333333333%; float: left; } - .col-sm-8 { - width: 66.66667%; + width: 66.6666666667%; float: left; } - .col-sm-9 { width: 75%; float: left; } - .col-sm-10 { - width: 83.33333%; + width: 83.3333333333%; float: left; } - .col-sm-11 { - width: 91.66667%; + width: 91.6666666667%; float: left; } - .col-sm-12 { width: 100%; float: left; @@ -546,12 +453,12 @@ body { a { text-decoration: none; - color: black; + color: rgb(0, 0, 0); transition: all 0.6s; } a:hover { - background: whitesmoke; - color: #3498db; + background: rgb(244.8, 244.8, 244.8); + color: rgb(52, 152, 219); } .float-left { @@ -623,15 +530,15 @@ input { font-size: 0.9em; transition: all 0.6s; } -input[type="submit"] { - background: #2980b9; +input[type=submit] { + background: rgb(41, 128, 185); padding: 1em 1.5em; - border: 1px solid white; - color: white; + border: 1px solid rgb(255, 255, 255); + color: rgb(255, 255, 255); } -input[type="submit"]:hover { +input[type=submit]:hover { cursor: pointer; - background: #20638f; + background: rgb(31.7477876106, 99.1150442478, 143.2522123894); } a.btn { @@ -639,8 +546,8 @@ a.btn { margin: 2em 0 1em; padding: 1em 2em; transition: all 0.7s; - background: #3498db; - color: white; + background: rgb(52, 152, 219); + color: rgb(255, 255, 255); font-size: 1.2rem; border-radius: 3px; text-align: center; @@ -651,11 +558,11 @@ a.btn { */ } a.btn.redBtn { - background: #e74c3c; + background: rgb(231, 76, 60); } a.btn.redBtn:hover { - background: #c0392b; - color: white; + background: rgb(192, 57, 43); + color: rgb(255, 255, 255); } @media screen and (max-width: 75em) { a.btn { @@ -769,15 +676,15 @@ blockquote { *** */ @font-face { - font-family: 'icomoon'; + font-family: "icomoon"; src: url("../fonts/icons/icomoon.eot?5sy53h"); src: url("../fonts/icons/icomoon.eot?5sy53h#iefix") format("embedded-opentype"), url("../fonts/icons/icomoon.ttf?5sy53h") format("truetype"), url("../fonts/icons/icomoon.woff?5sy53h") format("woff"), url("../fonts/icons/icomoon.svg?5sy53h#icomoon") format("svg"); font-weight: normal; font-style: normal; } -[class^="icon-"], [class*=" icon-"] { +[class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'icomoon' !important; + font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; @@ -1420,44 +1327,43 @@ body { padding: 0; } body header { - background-color: white; + background-color: rgb(255, 255, 255); width: 100vw; - height: 5em; - /* border-bottom: 1px solid #ecf0f1; */ - /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */ - /* position: fixed; */ + height: 5.5em; + border-bottom: 1px solid rgb(236, 240, 241); + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + position: fixed; z-index: 5000; } body header .logo { position: absolute; - left: 15%; - /* top: 5em; */ - padding-top: 0.5em; + left: 13%; + top: -0.5em; } -@media screen and (max-width: 64em) { +@media screen and (max-width: 75em) { body header .logo { - left: 7%; + left: 6%; } } body header .logo img { - max-width: 8em; + max-width: 9em; } body header > ul { display: flex; margin-left: auto; margin-right: auto; padding: 0em; - max-width: 50%; + max-width: 30em; height: 88%; - /* padding-top: 0.6em; */ + padding-top: 0.6em; } @media screen and (max-width: 64em) { body header > ul { display: none; - background-color: white; + background-color: rgb(255, 255, 255); max-width: 64em; position: absolute; - top: 5em; + top: 5.5em; } body header > ul .last-li-menu { box-shadow: 0px 3px 6px #ecf0f1; @@ -1474,7 +1380,7 @@ body header > ul li { body header > ul li { display: block; width: 100vw; - background-color: white; + background-color: rgb(255, 255, 255); } } body header > ul li .Circle { @@ -1489,17 +1395,17 @@ body header > ul li .icon-circle-down { body header > ul li .icon-circle-down, body header > ul li .icon-circle-up { position: absolute; top: 1.3em; - right: 2.5em; + right: 1.2em; font-size: 1.7em; margin-top: 0em; display: block; - color: #59468c; + color: rgb(89, 70, 140); z-index: 200; border-radius: 1em; } body header > ul li .icon-circle-up { - background-color: #ff5e57; - color: white; + background-color: rgb(255, 94, 87); + color: rgb(255, 255, 255); } } body header > ul li:hover ul { @@ -1512,7 +1418,7 @@ body header > ul li:hover ul { } } body header > ul li:hover .l-one { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } @@ -1522,21 +1428,21 @@ body header > ul li:hover .l-one .Circle { } body header > ul li a { text-decoration: none; - color: #59468c; + color: rgb(89, 70, 140); font-size: 1.1em; font-weight: 500; width: 100%; height: 100%; display: block; - line-height: 4.5em; - padding: 0em 3em; + line-height: 5.5em; + padding: 0em 1em 0em 0.5em; } body header > ul li ul { - background-color: white; + background-color: rgb(255, 255, 255); position: absolute; top: 5em; display: none; - width: 10em; + width: 13em; transition: 0.6s; margin-top: 0em; height: auto; @@ -1564,7 +1470,7 @@ body header > ul li ul li { } } body header > ul li ul li:hover .l-two { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } @@ -1575,7 +1481,7 @@ body header > ul li ul li:hover .l-two .Circle { body header > ul li ul li a { line-height: 2em; width: 100vw; - padding-left: 1.5em; + padding-left: 0.5em; } body header .search { position: absolute; @@ -1592,11 +1498,11 @@ body header .search { } } body header .search:hover .icon-search { - color: #ff5e57; + color: rgb(255, 94, 87); } body header .search .icon-search { font-size: 1.3em; - color: #59468c; + color: rgb(89, 70, 140); transition: all 0.2s; display: block; } @@ -1610,7 +1516,7 @@ body header .search-active { height: 100%; position: absolute; top: -9em; - background-color: white; + background-color: rgb(255, 255, 255); border-radius: 0em 0em 0.5em 0.5em; display: none; } @@ -1621,13 +1527,13 @@ body header .search-active .search-active-content { margin-right: auto; margin-top: 2.5em; display: flex; - color: #59468c; + color: rgb(89, 70, 140); } body header .search-active .search-active-content .text-search { width: 90%; margin-top: 0.2em; justify-content: center; - color: #59468c; + color: rgb(89, 70, 140); font-size: 1.2em; font-weight: 500; border: none; @@ -1643,7 +1549,7 @@ body header .search-active .search-active-content .icon-search { cursor: pointer; } body header .search-active .search-active-content .icon-search:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } body header .search-active .search-active-content .icon-searchh { justify-content: end; @@ -1655,21 +1561,20 @@ body header .search-active .search-active-content .icon-searchh { cursor: pointer; } body header .search-active .search-active-content .icon-searchh:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } body header .section-responsive { display: none; position: absolute; - /* top: 0.8em; */ - right: 2.5em; - padding-top: 0.6em; - color: #59468c; + top: 1.2em; + right: 2em; + color: rgb(89, 70, 140); font-size: 2em; transition: all 0.5s; opacity: 0; } body header .section-responsive:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } @media screen and (max-width: 64em) { body header .section-responsive { @@ -1680,12 +1585,9 @@ body header .section-responsive:hover { body .sticky { position: fixed; top: 0; - /* width: 100%; */ - /* transition: top 1s; */ + width: 100%; + transition: top 1s; } -/* .sticky + .gradient-bg{ - padding-top: 5em; -} */ body .content .our-services-section { width: 70%; height: 22em; @@ -1706,7 +1608,7 @@ body .content .our-services-section { } body .content .our-services-section .title-our-services { width: 100%; - color: #ff5e57; + color: rgb(255, 94, 87); font-size: 3.3em; font-weight: 500; text-align: center; @@ -1758,13 +1660,13 @@ body .content .our-services-section .card-for-services .our-services-card:hover box-shadow: 5px 6px 18px rgba(255, 94, 87, 0.3); } body .content .our-services-section .card-for-services .our-services-card:hover .title-card-our-services { - color: #ff5e57; + color: rgb(255, 94, 87); } body .content .our-services-section .card-for-services .our-services-card .title-card-our-services { margin: 1em; font-size: 1.1em; font-weight: 600; - color: #59468c; + color: rgb(89, 70, 140); margin-top: 1.5em; transition: all 0.4s; } @@ -1828,7 +1730,7 @@ body .content .our-portfolio-section .title-our-portfolio { text-align: center; } body .content .our-portfolio-section .title-our-portfolio h3 { - color: #ff5e57; + color: rgb(255, 94, 87); font-size: 3.3em; line-height: 2em; font-weight: 500; @@ -1855,12 +1757,12 @@ body .content .our-portfolio-section .tns-outer .tns-nav button { height: 1.5em; width: 1.5em; background-color: transparent; - border: 2px solid #ff5e57; + border: 2px solid rgb(255, 94, 87); border-radius: 1em; margin-right: 1em; } body .content .our-portfolio-section .tns-outer .tns-nav-active { - background-color: #ff5e57 !important; + background-color: rgb(255, 94, 87) !important; } body .content .our-portfolio-section .card-section-portfolio { height: auto; @@ -1894,7 +1796,7 @@ body .content .our-portfolio-section .card-section-portfolio .card-portfolio .ti body .content .our-portfolio-section .card-section-portfolio .card-portfolio .description { font-size: 1.1em; margin-top: -1em; - color: #7f8c8d; + color: rgb(127, 140, 141); } @media screen and (max-width: 25em) { body .content .our-portfolio-section .card-section-portfolio .card-portfolio .description { @@ -1922,7 +1824,7 @@ body .content .latest-posts-section .title-latest-posts h3 { font-size: 3.3em; line-height: 2em; font-weight: 500; - color: #ff5e57; + color: rgb(255, 94, 87); } @media screen and (max-width: 40em) { body .content .latest-posts-section .title-latest-posts h3 { @@ -1975,7 +1877,7 @@ body .content .latest-posts-section .card-for-latest .latest-posts-card:hover { body .content .latest-posts-section .card-for-latest .latest-posts-card .date { width: 3em; height: 4em; - background-color: white; + background-color: rgb(255, 255, 255); border-radius: 0.5em; box-shadow: 0px 0px 40px rgba(89, 70, 140, 0.4); position: absolute; @@ -1989,12 +1891,12 @@ body .content .latest-posts-section .card-for-latest .latest-posts-card .date .d display: block; font-size: 1.5em; margin-top: 0.2em; - color: #59468c; + color: rgb(89, 70, 140); } body .content .latest-posts-section .card-for-latest .latest-posts-card .date .month { display: block; font-size: 1em; - color: #59468c; + color: rgb(89, 70, 140); margin-top: -0.5em; } body .content .latest-posts-section .card-for-latest .latest-posts-card .img-card-latest { @@ -2016,13 +1918,13 @@ body .content .latest-posts-section .card-for-latest .latest-posts-card .text-ca } } body .content .latest-posts-section .card-for-latest .latest-posts-card .text-card-latest .photography { - color: #7f8c8d; + color: rgb(127, 140, 141); font-size: 0.9em; } body .content .latest-posts-section .card-for-latest .latest-posts-card .text-card-latest h3 { font-size: 1.3em; line-height: 1.5em; - color: #59468c; + color: rgb(89, 70, 140); margin-top: 0.4em; } @media screen and (max-width: 75em) { @@ -2033,7 +1935,7 @@ body .content .latest-posts-section .card-for-latest .latest-posts-card .text-ca } body .content .latest-posts-section .card-for-latest .latest-posts-card .text-card-latest p { font-size: 1.1em; - color: #7f8c8d; + color: rgb(127, 140, 141); line-height: 1.5em; margin-top: 0.5em; } @@ -2046,7 +1948,7 @@ body .content .latest-posts-section .card-for-latest .latest-posts-card .text-ca font-size: 1em; line-height: 2.5em; font-weight: 500; - color: #59468c; + color: rgb(89, 70, 140); position: relative; } body .content .latest-posts-section .card-for-latest .latest-posts-card .text-card-latest .read-more span { @@ -2157,14 +2059,14 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .picture-header .button { border: none; - color: white; + color: rgb(255, 255, 255); position: absolute; font-size: 1.3em; font-weight: bold; padding: 0.5em 1.7em; bottom: 3em; right: 3em; - background: #ff5e57; + background: rgb(255, 94, 87); border-radius: 6px; transition: all 0.2s; cursor: pointer; @@ -2187,7 +2089,6 @@ body .content .latest-posts-section .card-for-latest .m-l-r { */ .auth-form { width: 100%; - height: 100vh; position: relative; overflow: hidden; display: flex; @@ -2204,9 +2105,9 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .auth-form .section-login { - width: 70%; + width: 50%; margin: 0 auto; - background-color: white; + background-color: rgb(255, 255, 255); border-radius: 6%; align-items: center; justify-content: center; @@ -2224,15 +2125,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r { display: flex; justify-content: center; } -@media screen and (max-width: 64em) { - .auth-form .section-login spam { - - padding: 0.5em; - font-size: 2em; - } -} .auth-form .section-login .section-label-input { - width: 60%; + width: 50%; display: flex; flex-direction: column; justify-content: center; @@ -2240,9 +2134,9 @@ body .content .latest-posts-section .card-for-latest .m-l-r { /* Show the checkmark when checked */ } .auth-form .section-login .section-label-input input { - border: 1px solid black; + border: 1px solid rgb(0, 0, 0); border: 1px solid rgba(0, 0, 0, 0.38); - width: 90%; + width: 80%; border-radius: 30px; transition: all 0.7s; } @@ -2255,12 +2149,6 @@ body .content .latest-posts-section .card-for-latest .m-l-r { display: flex; margin: 1em 0em; } -@media screen and (max-width: 64em) { - .auth-form .section-login .section-label-input label { - font-size: 15px; - } -} - .auth-form .section-login .section-label-input .showpass { display: block; position: relative; @@ -2285,7 +2173,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { left: 10px; height: 20px; width: 20px; - background-color: white; + background-color: rgb(255, 255, 255); border: 0.5px solid grey; border-radius: 6px; /* Create the checkmark/indicator (hidden when not checked) */ @@ -2298,12 +2186,12 @@ body .content .latest-posts-section .card-for-latest .m-l-r { top: 3px; width: 5px; height: 10px; - border: solid white; + border: solid rgb(255, 255, 255); border-width: 0 3px 3px 0; transform: rotate(45deg); } .auth-form .section-login .section-label-input .showpass:hover input ~ .checkmark { - background-color: white; + background-color: rgb(255, 255, 255); } .auth-form .section-login .section-label-input .showpass input:checked ~ .checkmark { background-color: #2196F3; @@ -2316,17 +2204,17 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .auth-form .section-login .section-label-input .underborder { margin-top: 1em; margin-bottom: 1em; - border-bottom: 1px solid black; + border-bottom: 1px solid rgb(0, 0, 0); } .auth-form .section-login .section-label-input .button { background: #FF5B32; - margin-top: 1em; + margin-top: 2em; border: 1px solid transparent; transition: all 0.5s; } .auth-form .section-login .section-label-input .button:hover { border: 1px solid #FF5B32; - background: white; + background: rgb(255, 255, 255); color: #FF5B32; } @@ -2338,11 +2226,11 @@ body .content .latest-posts-section .card-for-latest .m-l-r { */ .blog { width: 100vw; - background: white; + background: rgb(255, 255, 255); } .blog a:hover { background-color: transparent; - color: black; + color: rgb(0, 0, 0); } .blog .section-header { width: 100vw; @@ -2372,7 +2260,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .blog .section-header .section-contant-header .select-lang .icon { font-size: 1.8em; - color: black; + color: rgb(0, 0, 0); display: inline-block; vertical-align: middle; } @@ -2384,7 +2272,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { @media screen and (max-width: 64em) { .blog .section-header .section-contant-header .select-lang > ul { display: inline; - background-color: white; + background-color: rgb(255, 255, 255); max-width: 64em; position: absolute; } @@ -2399,7 +2287,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { @media screen and (max-width: 64em) { .blog .section-header .section-contant-header .select-lang > ul li { display: inline; - background-color: white; + background-color: rgb(255, 255, 255); } } .blog .section-header .section-contant-header .select-lang > ul li .icon-chevron-down { @@ -2415,7 +2303,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { font-size: 1.7em; margin-top: 0em; display: block; - color: #59468c; + color: rgb(89, 70, 140); z-index: 200; border-radius: 1em; } @@ -2425,7 +2313,6 @@ body .content .latest-posts-section .card-for-latest .m-l-r { right: 0em; } } - .blog .section-header .section-contant-header .select-lang > ul li:hover ul { top: 2.1em; display: block; @@ -2434,18 +2321,18 @@ body .content .latest-posts-section .card-for-latest .m-l-r { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .blog .section-header .section-contant-header .select-lang > ul li:hover .l-one { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } .blog .section-header .section-contant-header .select-lang > ul li:hover .icon-chevron-down { display: flex; align-items: center; - color: #ff5e57; + color: rgb(255, 94, 87); } .blog .section-header .section-contant-header .select-lang > ul li a { text-decoration: none; - color: #59468c; + color: rgb(89, 70, 140); font-size: 1.1em; font-weight: 500; display: inline; @@ -2460,7 +2347,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .blog .section-header .section-contant-header .select-lang > ul li ul { - background-color: white; + background-color: rgb(255, 255, 255); position: absolute; top: 5em; left: 0em; @@ -2490,7 +2377,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .blog .section-header .section-contant-header .select-lang > ul li ul li:hover .l-two { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } @@ -2512,7 +2399,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .blog .section-header .section-contant-header .section-login .search-box { margin-right: 1em; - background: #ff5e57; + background: rgb(255, 94, 87); height: 40px; border-radius: 40px; padding: 4px; @@ -2530,12 +2417,12 @@ body .content .latest-posts-section .card-for-latest .m-l-r { width: 0px; } .blog .section-header .section-contant-header .section-login .search-btn { - color: white; + color: rgb(255, 255, 255); float: right; width: 40px; height: 40px; border-radius: 50%; - background: #ff5e57; + background: rgb(255, 94, 87); display: flex; justify-content: center; align-items: center; @@ -2562,13 +2449,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .blog .section-header .section-contant-header .section-login .click-search-btn { background: white; - color: black; + color: rgb(0, 0, 0); } .blog .section-header .section-contant-header .section-login .section-button button { - background-color: white; + background-color: rgb(255, 255, 255); padding: 0.9em 2em; - color: #ff5e57; - border-color: #ff5e57; + color: rgb(255, 94, 87); + border-color: rgb(255, 94, 87); border-radius: 4px; cursor: pointer; border-width: 1px; @@ -2587,13 +2474,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: rgba(255, 94, 87, 0.4); } .blog .section-header .section-contant-header .section-login .section-button button a { - color: #ff5e57; + color: rgb(255, 94, 87); } .blog .section-header .section-contant-header .section-login .section-button .button2 { - background-color: #ff5e57; - padding: 0.9em 1em; - color: white; - border-color: #ff5e57; + background-color: rgb(255, 94, 87); + padding: 0.9em 2em; + color: rgb(255, 255, 255); + border-color: rgb(255, 94, 87); border-radius: 4px; border-width: 1px; } @@ -2616,13 +2503,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: rgba(255, 94, 87, 0.5); } .blog .section-header .section-contant-header .section-login .section-button .button2 a { - color: white; + color: rgb(255, 255, 255); } .blog header { - background-color: white; + background-color: rgb(255, 255, 255); width: 100vw; height: 5.5em; - border-bottom: 1px solid #ecf0f1; + border-bottom: 1px solid rgb(236, 240, 241); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); position: relative; z-index: 5000; @@ -2653,7 +2540,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { @media screen and (max-width: 64em) { .blog header > ul { display: none; - background-color: white; + background-color: rgb(255, 255, 255); max-width: 64em; position: absolute; top: 5.5em; @@ -2673,7 +2560,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .blog header > ul li { display: block; width: 100vw; - background-color: white; + background-color: rgb(255, 255, 255); } } .blog header > ul li .Circle { @@ -2692,13 +2579,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { font-size: 1.7em; margin-top: 0em; display: block; - color: #59468c; + color: rgb(89, 70, 140); z-index: 200; border-radius: 1em; } .blog header > ul li .icon-circle-up { - background-color: #ff5e57; - color: white; + background-color: rgb(255, 94, 87); + color: rgb(255, 255, 255); } } .blog header > ul li:hover ul { @@ -2711,7 +2598,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .blog header > ul li:hover .l-one { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } @@ -2721,7 +2608,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .blog header > ul li a { text-decoration: none; - color: #59468c; + color: rgb(89, 70, 140); font-size: 1.1em; font-weight: 500; width: 100%; @@ -2731,7 +2618,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { padding: 0em 1em 0em 0.5em; } .blog header > ul li ul { - background-color: white; + background-color: rgb(255, 255, 255); position: absolute; top: 5em; display: none; @@ -2763,7 +2650,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .blog header > ul li ul li:hover .l-two { - color: #ff5e57; + color: rgb(255, 94, 87); background-color: transparent; cursor: pointer; } @@ -2791,11 +2678,11 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .blog header .search:hover .icon-search { - color: #ff5e57; + color: rgb(255, 94, 87); } .blog header .search .icon-search { font-size: 1.3em; - color: #59468c; + color: rgb(89, 70, 140); transition: all 0.2s; display: block; } @@ -2809,7 +2696,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { height: 100%; position: absolute; top: -9em; - background-color: white; + background-color: rgb(255, 255, 255); border-radius: 0em 0em 0.5em 0.5em; display: none; } @@ -2820,13 +2707,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { margin-right: auto; margin-top: 2.5em; display: flex; - color: #59468c; + color: rgb(89, 70, 140); } .blog header .search-active .search-active-content .text-search { width: 90%; margin-top: 0.2em; justify-content: center; - color: #59468c; + color: rgb(89, 70, 140); font-size: 1.2em; font-weight: 500; border: none; @@ -2842,7 +2729,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { cursor: pointer; } .blog header .search-active .search-active-content .icon-search:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } .blog header .search-active .search-active-content .icon-searchh { justify-content: end; @@ -2854,20 +2741,20 @@ body .content .latest-posts-section .card-for-latest .m-l-r { cursor: pointer; } .blog header .search-active .search-active-content .icon-searchh:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } .blog header .section-responsive { display: none; position: absolute; top: 1.2em; right: 5em; - color: #59468c; + color: rgb(89, 70, 140); font-size: 2em; transition: all 0.5s; opacity: 0; } .blog header .section-responsive:hover { - color: #ff5e57; + color: rgb(255, 94, 87); } @media screen and (max-width: 64em) { .blog header .section-responsive { @@ -2938,7 +2825,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { border-radius: 5px; } .blog .content .section-article article.sub { - background-color: #ff5e57; + background-color: rgb(255, 94, 87); } .blog .content .section-article article.sub:hover { box-shadow: unset; @@ -2946,7 +2833,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { transform: scale(1); } .blog .content .section-article article.sub2 { - background-color: #ff5e57; + background-color: rgb(255, 94, 87); } .blog .content .section-article article.sub2:hover { box-shadow: 0 10px 50px -5px rgba(51, 71, 91, 0.12); @@ -2963,7 +2850,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { display: flex; align-items: center; flex-direction: column; - color: white; + color: rgb(255, 255, 255); text-align: center; position: relative; padding: 2em; @@ -3015,8 +2902,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r { font-size: 0.8em; height: 3.5em; background: transparent; - border-color: white; - color: white; + border-color: rgb(255, 255, 255); + color: rgb(255, 255, 255); font-weight: bold; margin-bottom: 1em; } @@ -3115,23 +3002,22 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .blog .content .section-article .most-popular { width: 34%; margin-left: 0; - overflow: scroll; } @media screen and (max-width: 62em) { .blog .content .section-article .most-popular { width: 100%; - border-bottom: 1px solid black; + border-bottom: 1px solid rgb(0, 0, 0); margin-bottom: 1em; } } .blog .content .section-article .most-popular h3 { display: inline-block; padding: 0.2em 5em 0.2em 1em; - background: #ff5e57; + background: rgb(255, 94, 87); margin-bottom: 1em; font-size: 1.1em; white-space: pre; - color: white; + color: rgb(255, 255, 255); } @media screen and (max-width: 62em) { .blog .content .section-article .most-popular h3 { @@ -3294,9 +3180,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .basket { width: 100%; - height: 100vh; - overflow: hidden; - /* z-index: -1; */ + z-index: -1; } .basket .section-header { width: 100%; @@ -3326,13 +3210,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background: transparent; } .basket .content-basket { - background: white; + background: rgb(255, 255, 255); height: 100vh; } .basket .content-basket h2 { text-align: center; font-size: 2em; - margin-top: 1em; + margin: 1em 0em 1.5em; } @media screen and (max-width: 40em) { .basket .content-basket h2 { @@ -3376,7 +3260,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { margin: 1em auto; } .basket .content-basket .section-cards .cards button { - background-color: white; + background-color: rgb(255, 255, 255); border-radius: 22px; height: 3em; width: 13em; @@ -3396,7 +3280,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: rgba(29, 201, 115, 0.1); } .basket .content-basket .section-cards .cards button:hover a { - color: black; + color: rgb(0, 0, 0); } .basket .content-basket .section-cards .cards .section-text { margin: 1.5em 0em; @@ -3426,7 +3310,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .basket .sec-2 { width: 100%; height: max-content; - background-color: white; + background-color: rgb(255, 255, 255); position: absolute; top: 0; bottom: 0; @@ -3485,22 +3369,22 @@ body .content .latest-posts-section .card-for-latest .m-l-r { transform: translate(-50%, -50%); white-space: pre; } -.basket .sec-2 .section-select input[type="radio"] { +.basket .sec-2 .section-select input[type=radio] { display: none; } -.basket .sec-2 .section-select input[type="radio"]:not(:disabled) ~ label { +.basket .sec-2 .section-select input[type=radio]:not(:disabled) ~ label { cursor: pointer; } -.basket .sec-2 .section-select input[type="radio"]:disabled ~ label { - color: #bcc2bf; - border-color: #bcc2bf; +.basket .sec-2 .section-select input[type=radio]:disabled ~ label { + color: hsl(150, 5%, 75%); + border-color: hsl(150, 5%, 75%); box-shadow: none; cursor: not-allowed; } .basket .sec-2 .section-select label { height: 100%; display: block; - background: white; + background: rgb(255, 255, 255); border: 1px solid rgba(255, 94, 87, 0.2); border-radius: 20px; overflow: hidden; @@ -3509,15 +3393,15 @@ body .content .latest-posts-section .card-for-latest .m-l-r { box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5); position: relative; } -.basket .sec-2 .section-select input[type="radio"]:checked + label { +.basket .sec-2 .section-select input[type=radio]:checked + label { background: #1dc973; - color: white; + color: rgb(255, 255, 255); box-shadow: 0px 0px 20px #1dc973; } -.basket .sec-2 .section-select input[type="radio"]:checked + label::after { - color: black; +.basket .sec-2 .section-select input[type=radio]:checked + label::after { + color: rgb(0, 0, 0); border: 2px solid #1dc973; - content: '✓'; + content: "✓"; font-size: 30px; position: absolute; top: 28%; @@ -3546,7 +3430,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { align-items: center; flex-direction: column; margin: 0 auto; - width: 50%; + width: 47%; text-align: left; margin-bottom: 3em; /* When the checkbox is checked, add a blue background */ @@ -3606,7 +3490,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { left: 0; height: 25px; width: 25px; - background-color: white; + background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 6px; } @@ -3618,7 +3502,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { top: 5px; width: 5px; height: 10px; - border: solid white; + border: solid rgb(255, 255, 255); border-width: 0 3px 3px 0; transform: rotate(45deg); } @@ -3629,7 +3513,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: rgba(149, 165, 166, 0.2); } .basket .sec-2 .section-Response .container input:checked ~ .checkmark { - background-color: #ff5e57; + background-color: rgb(255, 94, 87); box-shadow: 0px 0px 5px 5px rgba(255, 94, 87, 0.5); border: unset; } @@ -3742,7 +3626,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { width: 7em; height: 2.5em; border: 1px solid rgba(0, 0, 0, 0.5); - background: white; + background: rgb(255, 255, 255); border-radius: 5px; float: left; margin-left: 1em; @@ -3753,8 +3637,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .basket .sec-2 .sec-textarea .textarea-btn .btn:hover { - background: #ff5e57; - color: white; + background: rgb(255, 94, 87); + color: rgb(255, 255, 255); border: none; } .basket .sub-sec-2 { @@ -3763,7 +3647,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .basket .sec-3 { width: 100%; height: 100%; - background-color: white; + background-color: rgb(255, 255, 255); position: absolute; top: 0%; bottom: 0%; @@ -3836,7 +3720,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { left: 0; height: 25px; width: 25px; - background-color: white; + background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 6px; } @@ -3848,7 +3732,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { top: 5px; width: 5px; height: 10px; - border: solid white; + border: solid rgb(255, 255, 255); border-width: 0 3px 3px 0; transform: rotate(45deg); } @@ -3859,7 +3743,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: rgba(149, 165, 166, 0.2); } .basket .sec-3 .section-Response .container input:checked ~ .checkmark { - background-color: #ff5e57; + background-color: rgb(255, 94, 87); box-shadow: 0px 0px 5px 5px rgba(255, 94, 87, 0.5); border: unset; } @@ -3972,7 +3856,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { width: 7em; height: 2.5em; border: 1px solid rgba(0, 0, 0, 0.5); - background: white; + background: rgb(255, 255, 255); border-radius: 5px; float: left; margin-left: 1em; @@ -3983,8 +3867,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .basket .sec-3 .sec-textarea .textarea-btn .btn:hover { - background: #ff5e57; - color: white; + background: rgb(255, 94, 87); + color: rgb(255, 255, 255); border: none; } .basket .sub-sec-3 { @@ -3999,13 +3883,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { transform: translate(-50%, -50%); top: 50%; left: 50%; - background: white; + background: rgb(255, 255, 255); border-radius: 5px; - color: black; + color: rgb(0, 0, 0); flex-direction: column; align-items: center; justify-content: center; - background-color: white; + background-color: rgb(255, 255, 255); box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.38); display: none; } @@ -4056,7 +3940,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .basket .section-page-close .section-but a:hover { background-color: rgba(0, 0, 0, 0.1); - color: white; + color: rgb(255, 255, 255); transform: scale(1.1); } .basket .show-display { @@ -4112,11 +3996,11 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .gradient-bg .started-section .title-started { - color: white; + color: rgb(255, 255, 255); } .gradient-bg .started-section .description-started { font-size: 1.3em; - color: white; + color: rgb(255, 255, 255); line-height: 1.5; font-weight: 100; margin-bottom: 9vh; @@ -4125,7 +4009,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: #2fdc81; padding: 0.7em 2.5em; font-size: 1.2em; - color: white; + color: rgb(255, 255, 255); font-weight: 600; border-radius: 1.5em; transition: all 0.4s; @@ -4156,7 +4040,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .gradient-bg .started-section .card-started .one { - color: white; + color: rgb(255, 255, 255); } @media screen and (max-width: 75em) { .gradient-bg .started-section .card-started .one { @@ -4291,7 +4175,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .create-web-section .text-web-section p { font-size: 1.2em; - color: #7f8c8d; + color: rgb(127, 140, 141); line-height: 1.6; margin-bottom: 4em; width: 70%; @@ -4353,7 +4237,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .rate-section .header-rate .star-icon { margin: 1.5em 0 0.5em; - color: #f39c12; + color: rgb(243, 156, 18); font-size: 2.2em; line-height: 2; } @@ -4365,7 +4249,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .rate-section .header-rate .description-rate { font-size: 1.3em; - color: #95a5a6; + color: rgb(149, 165, 166); } @media screen and (max-width: 40em) { .rate-section .header-rate .description-rate { @@ -4414,10 +4298,10 @@ body .content .latest-posts-section .card-for-latest .m-l-r { height: 0.7em; border-radius: 1.5em; border: none; - background-color: #ecf0f1; + background-color: rgb(236, 240, 241); } .slider-section .more-slider .tns-nav .tns-nav-active { - background-color: #ff5e57; + background-color: rgb(255, 94, 87); } .slider-section .more-slider .slider { height: 14.8em; @@ -4428,15 +4312,15 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .slider-section .more-slider .slider .sub-card-slider .card-slider { height: 15em; - background-color: white; - border: 1px solid #bdc3c7; + background-color: rgb(255, 255, 255); + border: 1px solid rgb(189, 195, 199); height: 100%; border-radius: 0.4em; box-sizing: border-box; } .slider-section .more-slider .slider .sub-card-slider .card-slider .person-card { height: 3em; - border-bottom: 1px solid #bdc3c7; + border-bottom: 1px solid rgb(189, 195, 199); padding: 0.5em; cursor: pointer; } @@ -4464,7 +4348,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .slider-section .more-slider .slider .sub-card-slider .card-slider .person-card .name-id .id { font-size: 0.8em; - color: #7f8c8d; + color: rgb(127, 140, 141); } .slider-section .more-slider .slider .sub-card-slider .card-slider .person-card .technology { float: right; @@ -4519,7 +4403,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { box-sizing: border-box; } .new-elementor-section .img-text .two-section .text-new-elementor { - color: white; + color: rgb(255, 255, 255); text-align: left; padding-top: 5%; padding-right: 10em; @@ -4561,7 +4445,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: #2fdc81; padding: 0.7em 2.5em; font-size: 1.2em; - color: white; + color: rgb(255, 255, 255); font-weight: 600; border-radius: 1.5em; transition: all 0.4s; @@ -4626,7 +4510,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { margin-left: auto; margin-right: auto; font-size: 1.2em; - color: #95a5a6; + color: rgb(149, 165, 166); line-height: 1.6; } @media screen and (min-width: 31.25em) and (max-width: 47.9375em) { @@ -4662,7 +4546,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .resources-section .title-card .title-resources { font-size: 2em; - color: black; + color: rgb(0, 0, 0); line-height: 2; } .resources-section .title-card .card-section { @@ -4715,7 +4599,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .resources-section .title-card .card-section .sub-card .card .description-card-resources { font-size: 1em; line-height: 1.5; - color: #95a5a6; + color: rgb(149, 165, 166); margin-bottom: 2em; } .resources-section .title-card .card-section .sub-card .card .learn-more { @@ -4739,7 +4623,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { width: 70%; text-align: center; box-sizing: border-box; - color: white; + color: rgb(255, 255, 255); } @media screen and (max-width: 62em) { .satrt-elementor-section .start-elementor { @@ -4776,7 +4660,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .satrt-elementor-section .start-elementor .btn-start-elementor { - width: 70%; + width: 50%; margin-left: auto; margin-right: auto; text-align: center; @@ -4795,9 +4679,9 @@ body .content .latest-posts-section .card-for-latest .m-l-r { background-color: transparent; padding: 0.7em 2.5em; font-size: 1.2em; - color: white; + color: rgb(255, 255, 255); font-weight: 600; - border: 2px solid white; + border: 2px solid rgb(255, 255, 255); border-radius: 1.5em; transition: all 0.4s; margin-right: 2em; @@ -4811,16 +4695,16 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .satrt-elementor-section .start-elementor .btn-start-elementor .buton-start-elementor:hover { - background-color: white; - color: #59468c; + background-color: rgb(255, 255, 255); + color: rgb(89, 70, 140); } .satrt-elementor-section .start-elementor .btn-start-elementor .button-go-pro-elementor { - background-color: white; + background-color: rgb(255, 255, 255); padding: 0.7em 4em; font-size: 1.2em; - color: #59468c; + color: rgb(89, 70, 140); font-weight: 600; - border: 2px solid white; + border: 2px solid rgb(255, 255, 255); border-radius: 1.5em; transition: all 0.4s; } @@ -4833,7 +4717,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .satrt-elementor-section .start-elementor .btn-start-elementor .button-go-pro-elementor:hover { background-color: transparent; - color: white; + color: rgb(255, 255, 255); } /*======================================================================================== @@ -4868,7 +4752,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { margin-top: 2em; font-size: 2em; text-align: center; - color: white; + color: rgb(255, 255, 255); font-weight: bold; } .gradient-bg-product-list .text-header p { @@ -4908,7 +4792,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .cards-item .cards .card { width: 30%; - background: white; + background: rgb(255, 255, 255); margin: 1em; border-radius: 1em; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); @@ -4983,13 +4867,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { line-height: 1.5em; } .cards-item .cards .card .content-card .option .list .div-in-li { - margin-left: calc((100% - 60%)/2); - margin-right: calc((100% - 60%)/2); + margin-left: 20%; + margin-right: 20%; } @media screen and (max-width: 64em) { .cards-item .cards .card .content-card .option .list .div-in-li { - margin-left: calc((100% - 70%)/2); - margin-right: calc((100% - 70%)/2); + margin-left: 15%; + margin-right: 15%; } } .cards-item .cards .card .content-card .option .list .div-in-li span { @@ -5007,7 +4891,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { padding: 1em 2em; background: #23d378; text-transform: uppercase; - color: white; + color: rgb(255, 255, 255); } .cards-item .cards .card .content-card .btn1 a:hover { background: #ef2e5e; @@ -5165,13 +5049,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .btn { text-align: center; - /* margin-top: 7em; */ - margin: 2.5em; + margin-top: 7em; + margin-bottom: 3em; } .btn a { border-radius: 3em; padding: 2em 3em; - color: white; + color: rgb(255, 255, 255); background: #65d49a; font-size: small; font-weight: bold; @@ -5244,7 +5128,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .questions .section-questions .sec-que p a:hover { text-decoration: underline dotted; - color: black; + color: rgb(0, 0, 0); } .questions .section-questions .sec-que p strong { font-weight: bolder; @@ -5254,6 +5138,46 @@ body .content .latest-posts-section .card-for-latest .m-l-r { *** ** LIBRARY CSS */ +/*-------------------------------- +*** +** Buttons (AI ALLY) +*/ +.signInBtn { + background-color: rgb(46, 204, 113); + overflow-x: visible; + cursor: pointer; + border: none; + width: 7rem; + height: 2rem; + border-radius: 5px; +} + +.row { + display: flex; + justify-content: space-between; + align-items: center; + width: 75rem; + top: 1rem; + position: relative; + left: 1rem; +} +.row .center-header ul { + display: flex; + gap: 20px; + padding: 0px; + margin: 0px; +} +.row .center-header ul li a:hover { + background: none; + color: #1dc973; +} +.row .left-haeder { + display: flex; +} +.row .left-haeder img { + position: relative !important; +} + /*-------------------------------- *** ** FOOTER @@ -5269,11 +5193,11 @@ body .content .latest-posts-section .card-for-latest .m-l-r { height: auto; display: flex; flex-direction: column; - /* background-image: url("../img/weprodev-2.jpg"); + background-image: url("../img/weprodev-2.jpg"); background-repeat: no-repeat; background-size: cover; - background-position: center; */ - color: white; + background-position: center; + color: rgb(255, 255, 255); align-items: center; justify-content: center; position: relative; @@ -5298,7 +5222,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } @media screen and (max-width: 75em) { .footer-section .text-section { - width: 80%; + width: 90%; } } @media screen and (max-width: 62em) { @@ -5315,14 +5239,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .footer-section .text-section .colm-txt { - width: 30%; - padding: 0em 1em; + width: inherit; } -/* .footer-section .text-section .colm-txt:nth-child(even) { +.footer-section .text-section .colm-txt:nth-child(even) { padding: 0em 5em; width: 30%; -} */ -/* @media screen and (min-width: 87.5em) { +} +@media screen and (min-width: 87.5em) { .footer-section .text-section .colm-txt:nth-child(even) { padding: 0em 3em; } @@ -5343,28 +5266,27 @@ body .content .latest-posts-section .card-for-latest .m-l-r { .footer-section .text-section .colm-txt:nth-child(even) span, .footer-section .text-section .colm-txt:nth-child(even) p { font-size: 23px; } -} */ +} @media screen and (max-width: 62em) { .footer-section .text-section .colm-txt { margin-bottom: 3em; - width: 90%; } } .footer-section .text-section .colm-txt h1 { font-size: 2.5em; - margin-bottom: 1em; + padding-bottom: 70px; font-weight: bolder; } .footer-section .text-section .colm-txt .span-text { - font-size: 1em; + font-size: 23px; line-height: 2.5em; padding-left: 3em; position: relative; - top: -2em; + top: -26px; } @media screen and (max-width: 75em) { .footer-section .text-section .colm-txt .span-text { - padding-left: 4em; + padding-left: 2em; } } @media screen and (max-width: 62em) { @@ -5375,7 +5297,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { @media screen and (max-width: 40em) { .footer-section .text-section .colm-txt .span-text { font-size: 21px; - padding-left: 3em; + padding-left: 2em; } } @media screen and (max-width: 25em) { @@ -5387,31 +5309,31 @@ body .content .latest-posts-section .card-for-latest .m-l-r { word-wrap: break-word; } .footer-section .text-section .colm-txt p { - font-size: 1.1em; + font-size: 20px; line-height: 2.1; } .footer-section .text-section .colm-txt .icon { - font-size: 2em; + font-size: 36px; position: relative; - top: 5px; + top: 10px; } @media screen and (max-width: 40em) { .footer-section .text-section .colm-txt .icon { font-size: 30px; - top: 12px; + top: 4px; } } .footer-section .text-section .colm-txt .input-e { - margin-top: 2em; + margin-top: 3em; border-radius: 5px 0px 0px 5px; - border: 1px solid white; - background: black; - color: white; + border: 1px solid rgb(255, 255, 255); + background: rgb(0, 0, 0); + color: rgb(255, 255, 255); width: 12em; - font-size: 1.1em; + font-size: 1em; } .footer-section .text-section .colm-txt .input-e:focus { - border-color: #ff5e57; + border-color: rgb(255, 94, 87); } @media screen and (min-width: 160em) { .footer-section .text-section .colm-txt .input-e { @@ -5425,13 +5347,13 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } @media screen and (min-width: 75.0625em) { .footer-section .text-section .colm-txt .input-e { - width: 88%; + width: 92%; border-radius: 5px 5px 5px 5px; } } @media screen and (max-width: 75em) { .footer-section .text-section .colm-txt .input-e { - width: 85%; + width: 88%; border-radius: 5px 5px 5px 5px; } } @@ -5454,19 +5376,19 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } } .footer-section .text-section .colm-txt .submit-b { - background: #ff5e57; - color: white; + background: rgb(255, 94, 87); + color: rgb(255, 255, 255); font-size: 1.1em; border-radius: 0px 5px 5px 0px; position: relative; left: -5px; - border: 1px solid #ff5e57; + border: 1px solid rgb(255, 94, 87); padding: 1em 1em; } .footer-section .text-section .colm-txt .submit-b:hover { background-color: rgba(255, 94, 87, 0.8); - color: white; - border-color: #ff5e57; + color: rgb(255, 255, 255); + border-color: rgb(255, 94, 87); } @media screen and (min-width: 75.0625em) { .footer-section .text-section .colm-txt .submit-b { @@ -5486,7 +5408,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } @media screen and (max-width: 62em) { .footer-section .text-section .colm-txt .submit-b { - width: 20%; + width: 15%; left: -0.3em; top: 0em; border-radius: 0px 5px 5px 0px; @@ -5519,14 +5441,9 @@ body .content .latest-posts-section .card-for-latest .m-l-r { flex-direction: row; width: 70%; } -@media screen and (max-width: 75em) { - .footer-section .down-footer .logo { - width: 80%; - } -} @media screen and (max-width: 62em) { .footer-section .down-footer .logo { - width: 75%; + width: 90%; } } .footer-section .down-footer .logo img { @@ -5540,6 +5457,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r { } .footer-section .down-footer .logo .text-d { display: flex; - color: #7f8c8d; + color: rgb(127, 140, 141); align-items: center; } + +/*# sourceMappingURL=style.css.map */ diff --git a/old/css/style.css.map b/old/css/style.css.map new file mode 100644 index 0000000..825c49d --- /dev/null +++ b/old/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/functions/_direction.scss","../scss/_variables.scss","../scss/typography/_muliFont.scss","../scss/_media-query.scss","../scss/_grid.scss","../scss/_placeholders.scss","../scss/_general.scss","../scss/typography/_default.scss","../scss/typography/_icomoon.scss","../scss/modules/_index-home.scss","../scss/modules/_picture-header.scss","../scss/modules/_auth.scss","../scss/modules/_blog.scss","../scss/modules/_basket.scss","../scss/modules/_product-details.scss","../scss/modules/_product-list.scss","../scss/AI-ALLY/Buttons/Buttons.scss","../scss/AI-ALLY/Header/Header.scss","../scss/footer/_footer.scss"],"names":[],"mappings":"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E;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EAC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;AACA;EACI;;APLV;EOTE;IAkBQ;IACA;;;;AClGZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,kBViOmB;;AEpIvB;EQhGA;IAMM;;;AAKN;EACI;EACA;EACA,kBVoCgB;EUnChB;EACA;EACA;EACA;EACA;;AR6EJ;EQrFA;IAWM;;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;AAyEE;AAQA;;AA9EF;EACI;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBVlCQ;EUmCR;EACA;AACE;;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAON;EACE,kBVxDU;;AU4DZ;EACE,kBVsHa;EUrHb;EACA;;AAKF;EACE;;AAMF;EACE;EACA;EACA;;AAEF;EACE,YViGa;EUhGb;EACA;EACA;;AACA;EACE;EACA,YVvFQ;EUwFR,OV0FW;;;AWlPzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA,YXwDkB;;AWtDd;EACI;EACA,OXmDU;;AW/CnB;EACC;EACA;EACA;EACA;;AAII;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AT6CV;ES3CU;IAEQ;;;AT0ElB;EStFM;IAiBQ;;;AAOA;EACI;EACA,OXaE;EWZF;EACA;;AAEH;EACG;EACA;EACA;;AToBlB;ESvBe;IAMO;IACA,kBXGF;IWFE;IACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;;ATItB;ESTkB;IAQQ;IAEA,kBXdN;;;AWgBE;EACI;EACA;EACA;;ATN1B;ESW0B;IACI;IACA;IACA;IACA;IACA;IACA;IACA,OXVF;IWWE;IACA;;;ATT9B;ESA0B;IAWQ;;;AAOR;EACI;EACA;EACA;EAEA;EACA;;AAIJ;EACI,OXjCF;EWkCE;EACA;;AAEJ;EACI;EACA;EACA,OXxCF;;AW4CN;EACI;EACA,OX7CE;EW8CF;EACA;EACA;EACA;EACA;EACA;EACA;;ATjD1B;ESoD0B;IAEQ;;;AAMZ;EACI,kBXrFN;EWsFM;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ATlF1B;ESuEsB;IA8BQ;IACA;IACA;;;AAEJ;EAEI;EACA;;AT5G9B;ESyG0B;IAMS;IACA;;;AAID;EACI,OX9GV;EW+GU;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;;AAUxB;EAEI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,YX7IU;EW8IV;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,OXpLE;EWqLF;EACA;EACA;EACA;EACA,YXrKU;EWsKV;EACA;EACA;EACA;;AAMA;EACQ;EACA;;ATlK1B;ESgKkB;IAIa;;;ATzJ/B;ESqJkB;IAOY;;;ATjJ9B;ES0IkB;IAUY;;;AAIZ;EACQ;EACA,OXpNN;;AWyNA;EACE,kBXzNF;EW0NE;EACA,OXvMM;EWwMN,cXxMM;EWyMN;EACA;EACA;;AT5LtB;ESqLoB;IASM;;;ATnL1B;ES0KoB;IAYM;;;AAGJ;EACI;;AAGJ;EACI,OXxNE;;AW2NR;EACE,kBX5NM;EW6NN;EACA,OXlPF;EWmPE,cX/NM;EWgON;EACA;;AT7NtB;ESuNoB;IASM;;;ATrN1B;ES4MoB;IAYM;;;AT7M1B;ESiMoB;IAeM;;;AAEJ;EACI;;AAGJ;EACI,OXrQN;;AW8QlB;EACI,kBX/Qc;EWgRd;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;ATxPV;ESqPM;IAKQ;;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AT9RV;ESuRM;IASQ;IACA,kBX9SM;IW+SN;IACA;IACA;;EACA;IACI;;;AAKR;EACI;EACA;EACA;EACA;EACA;;AThTd;ES2SU;IAOQ;IACA;IACA,kBXjUE;;;AWmUN;EACI;EACA;EACA;;AAEJ;EACI;;AT5TlB;ES+TkB;IACI;IACA;IACA;IACA;IACA;IACA;IACA,OX9TM;IW+TN;IACA;;EAEJ;IACI,kBXpUM;IWqUN,OXzVF;;;AW6VF;EACI;EACA;;ATlVtB;ESgVkB;IAIQ;;;AAIR;EACI,OXlVM;EWmVN;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA,OX5VU;EW6VV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,kBX3XE;EW4XF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ATxXlB;ES6Wc;IAaQ;IACA;IACA;IACA;IACA;;;AAEJ;EACI;EACA;EACA;;ATnYtB;ESgYkB;IAKS;;;AAID;EACI,OXnYF;EWoYE;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;;AAQpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AThbV;ESyaM;IASQ;;;AAGA;EACI,OXpaU;;AWwalB;EACI;EACA,OXzac;EW0ad;EACA;;ATnbd;ES8ZM;IAwBQ;;;AAGR;EACI;EACA;EACA;EACA;EACA,kBX3cU;EW4cV;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,OXjcc;;AWmcd;EACI;EACA;EACA;EACA,OXvcU;EWwcV;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OXvdM;;AW0dd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OXneM;;AWwetB;EACI;EACA;EACA;EACA;EACA,OX5ekB;EW6elB;EACA;EACA;;AACA;EACI,OXlfc;;AEP5B;ES+eM;IAaQ;IACA;;;ATved;ESydM;IAiBQ;;;AT/dd;ES8cM;IAoBQ;;;AAMZ;EACI;EACA;EACA;EACA;;AAGF;EACE;;AAIA;EACI;EACA;EACA;EACA;;AT/iBV;ES2iBM;IAOQ;;;AT7jBd;ESsjBM;IAUQ;;;AT9fd;ESofM;IAaQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AT/hBd;ES0hBU;IAQQ;IACA;IACA;;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBXpjBU;;AWqjBN;EACI;EACA;EACA;;AAIZ;EACI,kBX7jBU;;AW+jBV;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA,OXrmBM;EWsmBN;EACA;EACA;;ATtmBd;ES8lBU;IAWQ;;;AAIJ;EACI;;AACA;EACI;;AAGR;EACQ;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;;AT7nBlB;ESynBc;IAOQ;;;AAGR;EACQ;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,cXzpBE;EW0pBF,OX1pBE;EW2pBF;EACA;;AAGA;EACI;EACA;EACA;;AAOZ;EACI;EACA;EACA;;AThsBd;ES6rBU;IAMQ;;;AT7qBlB;ESuqBU;IASQ;;;AT1pBlB;ESipBU;IAYQ;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;;ATrsBd;ESksBU;IAMQ;;;ATlrBlB;ES4qBU;IASQ;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAOZ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;;ATzuBd;ESuuBU;IAMQ;IACA;IACA;;;AAGJ;EACI;EACA;EACA,YXzvBU;EW0vBV;EACA;EACA;EACA,OXjxBE;;AEwBpB;ESkvBc;IAUI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAOhB;EACI;EACA;EACA;EACA;EACA;EACA;;ATlyBd;ES4xBU;IASQ;IACA;;;AAIR;EACI;EACA;;AAGR;EACA;EACA;EACA;;ATn1BN;ESg1BM;IAKI;;;ATh2BV;ES21BM;IAQQ;;;ATvzBd;ES+yBM;IAWQ;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","file":"style.css"} \ No newline at end of file diff --git a/fonts/.DS_Store b/old/fonts/.DS_Store similarity index 100% rename from fonts/.DS_Store rename to old/fonts/.DS_Store diff --git a/fonts/icons/icomoon.eot b/old/fonts/icons/icomoon.eot similarity index 100% rename from fonts/icons/icomoon.eot rename to old/fonts/icons/icomoon.eot diff --git a/fonts/icons/icomoon.svg b/old/fonts/icons/icomoon.svg similarity index 100% rename from fonts/icons/icomoon.svg rename to old/fonts/icons/icomoon.svg diff --git a/fonts/icons/icomoon.ttf b/old/fonts/icons/icomoon.ttf similarity index 100% rename from fonts/icons/icomoon.ttf rename to old/fonts/icons/icomoon.ttf diff --git a/fonts/icons/icomoon.woff b/old/fonts/icons/icomoon.woff similarity index 100% rename from fonts/icons/icomoon.woff rename to old/fonts/icons/icomoon.woff diff --git a/footer.html b/old/footer.html similarity index 100% rename from footer.html rename to old/footer.html diff --git a/header.html b/old/header.html similarity index 100% rename from header.html rename to old/header.html diff --git a/img/B-G.jpg b/old/img/B-G.jpg similarity index 100% rename from img/B-G.jpg rename to old/img/B-G.jpg diff --git a/old/img/Ninja Turtles icon.svg b/old/img/Ninja Turtles icon.svg new file mode 100644 index 0000000..73b85fc --- /dev/null +++ b/old/img/Ninja Turtles icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/Server.png b/old/img/Server.png similarity index 100% rename from img/Server.png rename to old/img/Server.png diff --git a/img/back-g.jpg b/old/img/back-g.jpg similarity index 100% rename from img/back-g.jpg rename to old/img/back-g.jpg diff --git a/img/bg-truly-product-details-opti.jpg b/old/img/bg-truly-product-details-opti.jpg similarity index 100% rename from img/bg-truly-product-details-opti.jpg rename to old/img/bg-truly-product-details-opti.jpg diff --git a/img/blog1.png b/old/img/blog1.png similarity index 100% rename from img/blog1.png rename to old/img/blog1.png diff --git a/img/blog2.jpg b/old/img/blog2.jpg similarity index 100% rename from img/blog2.jpg rename to old/img/blog2.jpg diff --git a/img/blog3.jpg b/old/img/blog3.jpg similarity index 100% rename from img/blog3.jpg rename to old/img/blog3.jpg diff --git a/img/blog4.png b/old/img/blog4.png similarity index 100% rename from img/blog4.png rename to old/img/blog4.png diff --git a/img/blog5.jpg b/old/img/blog5.jpg similarity index 100% rename from img/blog5.jpg rename to old/img/blog5.jpg diff --git a/img/blogging.jpg b/old/img/blogging.jpg similarity index 100% rename from img/blogging.jpg rename to old/img/blogging.jpg diff --git a/img/credit-cards.png b/old/img/credit-cards.png similarity index 100% rename from img/credit-cards.png rename to old/img/credit-cards.png diff --git a/img/dedicate-website.png b/old/img/dedicate-website.png similarity index 100% rename from img/dedicate-website.png rename to old/img/dedicate-website.png diff --git a/img/excalm.png b/old/img/excalm.png similarity index 100% rename from img/excalm.png rename to old/img/excalm.png diff --git a/img/exclamation.png b/old/img/exclamation.png similarity index 100% rename from img/exclamation.png rename to old/img/exclamation.png diff --git a/img/facebook-3.svg b/old/img/facebook-3.svg similarity index 100% rename from img/facebook-3.svg rename to old/img/facebook-3.svg diff --git a/img/favicon.ico b/old/img/favicon.ico similarity index 100% rename from img/favicon.ico rename to old/img/favicon.ico diff --git a/img/favicon.png b/old/img/favicon.png similarity index 100% rename from img/favicon.png rename to old/img/favicon.png diff --git a/img/github-1.svg b/old/img/github-1.svg similarity index 100% rename from img/github-1.svg rename to old/img/github-1.svg diff --git a/img/img-1-card-resources.png b/old/img/img-1-card-resources.png similarity index 100% rename from img/img-1-card-resources.png rename to old/img/img-1-card-resources.png diff --git a/img/img-2-card-resources.png b/old/img/img-2-card-resources.png similarity index 100% rename from img/img-2-card-resources.png rename to old/img/img-2-card-resources.png diff --git a/img/img-3-card-resources.png b/old/img/img-3-card-resources.png similarity index 100% rename from img/img-3-card-resources.png rename to old/img/img-3-card-resources.png diff --git a/img/img-4-card-resources.png b/old/img/img-4-card-resources.png similarity index 100% rename from img/img-4-card-resources.png rename to old/img/img-4-card-resources.png diff --git a/img/img-built-1.png b/old/img/img-built-1.png similarity index 100% rename from img/img-built-1.png rename to old/img/img-built-1.png diff --git a/img/img-built-2.png b/old/img/img-built-2.png similarity index 100% rename from img/img-built-2.png rename to old/img/img-built-2.png diff --git a/img/img-built-3.png b/old/img/img-built-3.png similarity index 100% rename from img/img-built-3.png rename to old/img/img-built-3.png diff --git a/img/img-card.jpg b/old/img/img-card.jpg similarity index 100% rename from img/img-card.jpg rename to old/img/img-card.jpg diff --git a/img/img-started.jpg b/old/img/img-started.jpg similarity index 100% rename from img/img-started.jpg rename to old/img/img-started.jpg diff --git a/img/laravel.png b/old/img/laravel.png similarity index 100% rename from img/laravel.png rename to old/img/laravel.png diff --git a/img/logo.png b/old/img/logo.png similarity index 100% rename from img/logo.png rename to old/img/logo.png diff --git a/img/loptop-2.png b/old/img/loptop-2.png similarity index 100% rename from img/loptop-2.png rename to old/img/loptop-2.png diff --git a/img/loptop.jpg b/old/img/loptop.jpg similarity index 100% rename from img/loptop.jpg rename to old/img/loptop.jpg diff --git a/img/magento.png b/old/img/magento.png similarity index 100% rename from img/magento.png rename to old/img/magento.png diff --git a/img/product-details-new-element.png b/old/img/product-details-new-element.png similarity index 100% rename from img/product-details-new-element.png rename to old/img/product-details-new-element.png diff --git a/img/product-img-slider-1.jpg b/old/img/product-img-slider-1.jpg similarity index 100% rename from img/product-img-slider-1.jpg rename to old/img/product-img-slider-1.jpg diff --git a/img/product-img-slider-2.jpg b/old/img/product-img-slider-2.jpg similarity index 100% rename from img/product-img-slider-2.jpg rename to old/img/product-img-slider-2.jpg diff --git a/img/product-img-slider-3.jpg b/old/img/product-img-slider-3.jpg similarity index 100% rename from img/product-img-slider-3.jpg rename to old/img/product-img-slider-3.jpg diff --git a/img/twitter.svg b/old/img/twitter.svg similarity index 100% rename from img/twitter.svg rename to old/img/twitter.svg diff --git a/img/weprodev-1.jpeg b/old/img/weprodev-1.jpeg similarity index 100% rename from img/weprodev-1.jpeg rename to old/img/weprodev-1.jpeg diff --git a/img/weprodev-2.jpg b/old/img/weprodev-2.jpg similarity index 100% rename from img/weprodev-2.jpg rename to old/img/weprodev-2.jpg diff --git a/img/weprodev.jpeg b/old/img/weprodev.jpeg similarity index 100% rename from img/weprodev.jpeg rename to old/img/weprodev.jpeg diff --git a/img/wordpress-logo.png b/old/img/wordpress-logo.png similarity index 100% rename from img/wordpress-logo.png rename to old/img/wordpress-logo.png diff --git a/img/wp2.png b/old/img/wp2.png similarity index 100% rename from img/wp2.png rename to old/img/wp2.png diff --git a/initial.html b/old/initial.html similarity index 100% rename from initial.html rename to old/initial.html diff --git a/js/jquery.min.js b/old/js/jquery.min.js similarity index 100% rename from js/jquery.min.js rename to old/js/jquery.min.js diff --git a/js/main.js b/old/js/main.js similarity index 100% rename from js/main.js rename to old/js/main.js diff --git a/js/tiny-slider.js b/old/js/tiny-slider.js similarity index 100% rename from js/tiny-slider.js rename to old/js/tiny-slider.js diff --git a/login.html b/old/login.html similarity index 100% rename from login.html rename to old/login.html diff --git a/product-details.html b/old/product-details.html similarity index 100% rename from product-details.html rename to old/product-details.html diff --git a/register.html b/old/register.html similarity index 100% rename from register.html rename to old/register.html diff --git a/scss/.DS_Store b/old/scss/.DS_Store similarity index 100% rename from scss/.DS_Store rename to old/scss/.DS_Store diff --git a/old/scss/AI-ALLY/Buttons/Buttons.scss b/old/scss/AI-ALLY/Buttons/Buttons.scss new file mode 100644 index 0000000..7b269d2 --- /dev/null +++ b/old/scss/AI-ALLY/Buttons/Buttons.scss @@ -0,0 +1,9 @@ +.signInBtn { + background-color: $EMERALD; + overflow-x: visible; + cursor: pointer; + border: none; + width: 7rem; + height: 2rem; + border-radius: 5px; +} diff --git a/old/scss/AI-ALLY/Header/Header.scss b/old/scss/AI-ALLY/Header/Header.scss new file mode 100644 index 0000000..0a78e90 --- /dev/null +++ b/old/scss/AI-ALLY/Header/Header.scss @@ -0,0 +1,28 @@ +.row { + display: flex; + justify-content: space-between; + align-items: center; + width: 75rem; + top: 1rem; + position: relative; + left: 1rem; + + .center-header ul { + display: flex; + gap: 20px; + padding: 0px; + margin: 0px; + + li a:hover { + background: none; + color: $GREEN-BUTTON-BASKET; + } + } + + .left-haeder { + display: flex; + img { + position: relative !important; + } + } +} diff --git a/scss/_general.scss b/old/scss/_general.scss similarity index 100% rename from scss/_general.scss rename to old/scss/_general.scss diff --git a/scss/_grid.scss b/old/scss/_grid.scss similarity index 100% rename from scss/_grid.scss rename to old/scss/_grid.scss diff --git a/scss/_media-query.scss b/old/scss/_media-query.scss similarity index 94% rename from scss/_media-query.scss rename to old/scss/_media-query.scss index 4756ab0..5cff4fb 100644 --- a/scss/_media-query.scss +++ b/old/scss/_media-query.scss @@ -10,10 +10,10 @@ ** COMPASS , SUSY , CSS3 , CLEARFIX */ - @import "compass"; - @import "compass/reset"; - @import "compass/css3"; - @import "compass/utilities/general/clearfix"; + // @import "compass"; + // @import "compass/reset"; + // @import "compass/css3"; + // @import "compass/utilities/general/clearfix"; diff --git a/scss/_placeholders.scss b/old/scss/_placeholders.scss similarity index 100% rename from scss/_placeholders.scss rename to old/scss/_placeholders.scss diff --git a/scss/_variables.scss b/old/scss/_variables.scss similarity index 100% rename from scss/_variables.scss rename to old/scss/_variables.scss diff --git a/scss/footer/_footer.scss b/old/scss/footer/_footer.scss similarity index 100% rename from scss/footer/_footer.scss rename to old/scss/footer/_footer.scss diff --git a/scss/functions/_direction.scss b/old/scss/functions/_direction.scss similarity index 100% rename from scss/functions/_direction.scss rename to old/scss/functions/_direction.scss diff --git a/scss/lib/normalize.css b/old/scss/lib/normalize.css similarity index 100% rename from scss/lib/normalize.css rename to old/scss/lib/normalize.css diff --git a/scss/lib/tiny-slider.css b/old/scss/lib/tiny-slider.css similarity index 100% rename from scss/lib/tiny-slider.css rename to old/scss/lib/tiny-slider.css diff --git a/scss/modules/_auth.scss b/old/scss/modules/_auth.scss similarity index 100% rename from scss/modules/_auth.scss rename to old/scss/modules/_auth.scss diff --git a/scss/modules/_basket.scss b/old/scss/modules/_basket.scss similarity index 100% rename from scss/modules/_basket.scss rename to old/scss/modules/_basket.scss diff --git a/scss/modules/_blog.scss b/old/scss/modules/_blog.scss similarity index 100% rename from scss/modules/_blog.scss rename to old/scss/modules/_blog.scss diff --git a/scss/modules/_index-home.scss b/old/scss/modules/_index-home.scss similarity index 100% rename from scss/modules/_index-home.scss rename to old/scss/modules/_index-home.scss diff --git a/scss/modules/_picture-header.scss b/old/scss/modules/_picture-header.scss similarity index 100% rename from scss/modules/_picture-header.scss rename to old/scss/modules/_picture-header.scss diff --git a/scss/modules/_product-details.scss b/old/scss/modules/_product-details.scss similarity index 100% rename from scss/modules/_product-details.scss rename to old/scss/modules/_product-details.scss diff --git a/scss/modules/_product-list.scss b/old/scss/modules/_product-list.scss similarity index 100% rename from scss/modules/_product-list.scss rename to old/scss/modules/_product-list.scss diff --git a/scss/style.scss b/old/scss/style.scss similarity index 89% rename from scss/style.scss rename to old/scss/style.scss index 65ac1fc..8e777c0 100644 --- a/scss/style.scss +++ b/old/scss/style.scss @@ -49,6 +49,14 @@ */ @import "lib/normalize.css"; + + /*-------------------------------- + *** + ** Buttons (AI ALLY) + */ + + @import "AI-ALLY/Buttons/Buttons"; + @import "AI-ALLY/Header/Header"; /*-------------------------------- diff --git a/scss/typography/_default.scss b/old/scss/typography/_default.scss similarity index 100% rename from scss/typography/_default.scss rename to old/scss/typography/_default.scss diff --git a/scss/typography/_icomoon.scss b/old/scss/typography/_icomoon.scss similarity index 100% rename from scss/typography/_icomoon.scss rename to old/scss/typography/_icomoon.scss diff --git a/scss/typography/_muliFont.scss b/old/scss/typography/_muliFont.scss similarity index 100% rename from scss/typography/_muliFont.scss rename to old/scss/typography/_muliFont.scss diff --git a/scss/typography/_openSansFont.scss b/old/scss/typography/_openSansFont.scss similarity index 100% rename from scss/typography/_openSansFont.scss rename to old/scss/typography/_openSansFont.scss diff --git a/scss/typography/_poppinsFont.scss b/old/scss/typography/_poppinsFont.scss similarity index 100% rename from scss/typography/_poppinsFont.scss rename to old/scss/typography/_poppinsFont.scss diff --git a/product-details/css/productDetails.css b/product-details/css/productDetails.css new file mode 100644 index 0000000..b84a10c --- /dev/null +++ b/product-details/css/productDetails.css @@ -0,0 +1 @@ +/*# sourceMappingURL=productDetails.css.map */ \ No newline at end of file diff --git a/product-details/css/productDetails.css.map b/product-details/css/productDetails.css.map new file mode 100644 index 0000000..e88ea6c --- /dev/null +++ b/product-details/css/productDetails.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"productDetails.css"} \ No newline at end of file diff --git a/product-details/css/style.css b/product-details/css/style.css new file mode 100644 index 0000000..cd3d965 --- /dev/null +++ b/product-details/css/style.css @@ -0,0 +1,373 @@ +@charset "UTF-8"; +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +/* =================================== + 🌐 MAIN IMPORT FILE + Collects and imports all SASS modules +====================================== */ +/* ~~~~~~~~~~~~~~🔹 ABSTRACTS 🔹~~~~~~~~~~~~~~ */ +/* Variables, Mixins, Media Queries, and Functions */ +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ +/*-------------------------------- +*** GENERAL DIFINITIONS +** CSS3 , CLEARFIX +*/ +.container { + width: 90%; +} + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** 4K AND HIGH RESOULOTIONS +** MIN-WIDTH : 2560px OR 160em +*/ +/*-------------------------------- +*** LAPTOP OR DESKTOP +** MIN-WIDTH : 1400px OR 87.5em +*/ +/*-------------------------------- +*** FOR SOM OF THE DEVICES +** MIN-WIDTH : 1201px OR 75.0625em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1200px OR 75em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1024px OR 64em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 992px OR 62em +*/ +/*-------------------------------- +*** FOR RETINA MOBILE AND LANSCAPE +** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em +*/ +/*-------------------------------- +*** FOR MOBILE +** MAX : 640PX / 40em +*/ +/*-------------------------------- +*** FOR MINI MOBILE +** MAX : 400PX / 25em +*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/* ~~~~~~~~~~~~~~🔸 BASE 🔸~~~~~~~~~~~~~~ */ +/* Global styles, Resets, and Utilities */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; + width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +/* ~~~~~~~~~~~~~~🟢 COMPONENTS 🟢~~~~~~~~~~~~~~ */ +/* Reusable components and UI elements */ +/* ~~~~~~~~~~~~~~⚙️ LAYOUT ⚙️~~~~~~~~~~~~~~ */ +/* Grid systems, structure, and layout styles */ +/*======================= +********* GRIDS COL +******* MEDIA QUERY +***** +*** +*/ +.row { + width: 100%; + display: block; + clear: both; +} + +@media screen and (min-width: 75.0625em) { + .col-xl-1 { + width: 8.3333333333%; + float: left; + } + .col-xl-2 { + width: 16.6666666667%; + float: left; + } + .col-xl-3 { + width: 25%; + float: left; + } + .col-xl-4 { + width: 33.3333333333%; + float: left; + } + .col-xl-5 { + width: 41.6666666667%; + float: left; + } + .col-xl-6 { + width: 50%; + float: left; + } + .col-xl-7 { + width: 58.3333333333%; + float: left; + } + .col-xl-8 { + width: 66.6666666667%; + float: left; + } + .col-xl-9 { + width: 75%; + float: left; + } + .col-xl-10 { + width: 83.3333333333%; + float: left; + } + .col-xl-11 { + width: 91.6666666667%; + float: left; + } + .col-xl-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 75em) { + .col-lg-1 { + width: 8.3333333333%; + float: left; + } + .col-lg-2 { + width: 16.6666666667%; + float: left; + } + .col-lg-3 { + width: 25%; + float: left; + } + .col-lg-4 { + width: 33.3333333333%; + float: left; + } + .col-lg-5 { + width: 41.6666666667%; + float: left; + } + .col-lg-6 { + width: 50%; + float: left; + } + .col-lg-7 { + width: 58.3333333333%; + float: left; + } + .col-lg-8 { + width: 66.6666666667%; + float: left; + } + .col-lg-9 { + width: 75%; + float: left; + } + .col-lg-10 { + width: 83.3333333333%; + float: left; + } + .col-lg-11 { + width: 91.6666666667%; + float: left; + } + .col-lg-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 62em) { + .col-md-1 { + width: 8.3333333333%; + float: left; + } + .col-md-2 { + width: 16.6666666667%; + float: left; + } + .col-md-3 { + width: 25%; + float: left; + } + .col-md-4 { + width: 33.3333333333%; + float: left; + } + .col-md-5 { + width: 41.6666666667%; + float: left; + } + .col-md-6 { + width: 50%; + float: left; + } + .col-md-7 { + width: 58.3333333333%; + float: left; + } + .col-md-8 { + width: 66.6666666667%; + float: left; + } + .col-md-9 { + width: 75%; + float: left; + } + .col-md-10 { + width: 83.3333333333%; + float: left; + } + .col-md-11 { + width: 91.6666666667%; + float: left; + } + .col-md-12 { + width: 100%; + float: left; + } +} +@media screen and (max-width: 47.9375em) { + .col-sm-1 { + width: 8.3333333333%; + float: left; + } + .col-sm-2 { + width: 16.6666666667%; + float: left; + } + .col-sm-3 { + width: 25%; + float: left; + } + .col-sm-4 { + width: 33.3333333333%; + float: left; + } + .col-sm-5 { + width: 41.6666666667%; + float: left; + } + .col-sm-6 { + width: 50%; + float: left; + } + .col-sm-7 { + width: 58.3333333333%; + float: left; + } + .col-sm-8 { + width: 66.6666666667%; + float: left; + } + .col-sm-9 { + width: 75%; + float: left; + } + .col-sm-10 { + width: 83.3333333333%; + float: left; + } + .col-sm-11 { + width: 91.6666666667%; + float: left; + } + .col-sm-12 { + width: 100%; + float: left; + } +} +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; + width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +/*------------------------------------*\ + #PRODUCT-DETAILS +\*------------------------------------*//*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/product-details/css/style.css.map b/product-details/css/style.css.map new file mode 100644 index 0000000..5a43bdf --- /dev/null +++ b/product-details/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../../shared/scss/shared.scss","../../shared/scss/abstracts/_media-query.scss","../../shared/scss/abstracts/_variables.scss","../../shared/scss/base/_reset.scss","../../shared/scss/layout/_grid.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AACA;ACNA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOC;AAAA;AAAA;AAAA;AAKA;EACC;;;AAGF;AAAA;AAAA;AAIC;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AC5GD;AAAA;AAAA;AAmBA;AAAA;AAAA;AAeA;AAAA;AAAA;AASA;AAAA;AAAA;AAeA;AAAA;AAAA;AAMA;AAAA;AAAA;AFpDA;AACA;AGbA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;AHbF;AACA;AAGA;AACA;AIvBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA;EACA;;;AHuCF;EGpBM;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;;AH4BV;EGnBM;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;;AAMZ;EAGQ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;;AAMZ;EAGQ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;EAHJ;IAEI;IACA;;;AL3DZ;AAAA;AAAA;AIRA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;AJjBF;AAAA;AAAA","file":"style.css"} \ No newline at end of file diff --git a/product-details/img/favicon.png b/product-details/img/favicon.png new file mode 100644 index 0000000..a6b06fe Binary files /dev/null and b/product-details/img/favicon.png differ diff --git a/product-details/index.html b/product-details/index.html new file mode 100644 index 0000000..57d7979 --- /dev/null +++ b/product-details/index.html @@ -0,0 +1,35 @@ + + + + + + + Product Details + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/product-details/js/main.js b/product-details/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/product-details/scss/productDetails.scss b/product-details/scss/productDetails.scss new file mode 100644 index 0000000..e69de29 diff --git a/product-details/scss/style.scss b/product-details/scss/style.scss new file mode 100644 index 0000000..33f751c --- /dev/null +++ b/product-details/scss/style.scss @@ -0,0 +1,19 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ + +@import "../../shared/scss/shared.scss"; +// @import "variables"; + + +/*------------------------------------*\ + #BASE +\*------------------------------------*/ + +@import "../../shared/scss/base/reset"; + +/*------------------------------------*\ + #PRODUCT-DETAILS +\*------------------------------------*/ + +@import "../scss/productDetails.scss" \ No newline at end of file diff --git a/register/css/style.css b/register/css/style.css new file mode 100644 index 0000000..35e29de --- /dev/null +++ b/register/css/style.css @@ -0,0 +1,121 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ +/*-------------------------------- +*** GENERAL DIFINITIONS +** CSS3 , CLEARFIX +*/ +.container { + width: 90%; +} + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** 4K AND HIGH RESOULOTIONS +** MIN-WIDTH : 2560px OR 160em +*/ +/*-------------------------------- +*** LAPTOP OR DESKTOP +** MIN-WIDTH : 1400px OR 87.5em +*/ +/*-------------------------------- +*** FOR SOM OF THE DEVICES +** MIN-WIDTH : 1201px OR 75.0625em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1200px OR 75em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1024px OR 64em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 992px OR 62em +*/ +/*-------------------------------- +*** FOR RETINA MOBILE AND LANSCAPE +** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em +*/ +/*-------------------------------- +*** FOR MOBILE +** MAX : 640PX / 40em +*/ +/*-------------------------------- +*** FOR MINI MOBILE +** MAX : 400PX / 25em +*/ +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +/*------------------------------------*\ + #REGISTER PAGE +\*------------------------------------*/ + +/*# sourceMappingURL=style.css.map */ diff --git a/register/css/style.css.map b/register/css/style.css.map new file mode 100644 index 0000000..f9e1849 --- /dev/null +++ b/register/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../../shared/scss/abstracts/_variables.scss","../../shared/scss/abstracts/_media-query.scss","../scss/_variables.scss","../../shared/scss/base/_reset.scss","../scss/layout/register-page.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAuBA;AAAA;AAAA;AAeA;AAAA;AAAA;AASA;AAAA;AAAA;AAeA;AAAA;AAAA;AAMA;AAAA;AAAA;ACpEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOC;AAAA;AAAA;AAAA;AAKA;EACC;;;AAGF;AAAA;AAAA;AAIC;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AC5GD;AAAA;AAAA;AHOA;AAAA;AAAA;AINA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AJnBF;AAAA;AAAA;AKZA;AAAA;AAAA","file":"style.css"} \ No newline at end of file diff --git a/register/img/bg-registerpage.jpg b/register/img/bg-registerpage.jpg new file mode 100644 index 0000000..d820c32 Binary files /dev/null and b/register/img/bg-registerpage.jpg differ diff --git a/register/index.html b/register/index.html new file mode 100644 index 0000000..bade157 --- /dev/null +++ b/register/index.html @@ -0,0 +1,40 @@ + + + + + + Register + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/register/js/show-password.js b/register/js/show-password.js new file mode 100644 index 0000000..9e05f15 --- /dev/null +++ b/register/js/show-password.js @@ -0,0 +1,12 @@ +/*------------------------------------*\ + #SHOW PASSWORD +\*------------------------------------*/ + +function showPassword() { + var x = document.getElementById("myInput"); + if (x.type === "password") { + x.type = "text"; + } else { + x.type = "password"; + } + } \ No newline at end of file diff --git a/register/scss/_variables.scss b/register/scss/_variables.scss new file mode 100644 index 0000000..a18d027 --- /dev/null +++ b/register/scss/_variables.scss @@ -0,0 +1,3 @@ +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ \ No newline at end of file diff --git a/register/scss/layout/register-page.scss b/register/scss/layout/register-page.scss new file mode 100644 index 0000000..679a319 --- /dev/null +++ b/register/scss/layout/register-page.scss @@ -0,0 +1,3 @@ +/*------------------------------------*\ + #REGISTER PAGE +\*------------------------------------*/ diff --git a/register/scss/main.scss b/register/scss/main.scss new file mode 100644 index 0000000..6664494 --- /dev/null +++ b/register/scss/main.scss @@ -0,0 +1,16 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +@import "../../shared/scss/abstracts/variables"; +@import "../../shared/scss/abstracts/media-query"; +@import "variables"; + +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +@import "../../shared/scss/base/reset"; + +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +@import "./layout/register-page.scss" \ No newline at end of file diff --git a/shared/images/event-land-entire.png b/shared/images/event-land-entire.png new file mode 100644 index 0000000..1794e70 Binary files /dev/null and b/shared/images/event-land-entire.png differ diff --git a/shared/images/event-land-main.png b/shared/images/event-land-main.png new file mode 100644 index 0000000..8b74bd0 Binary files /dev/null and b/shared/images/event-land-main.png differ diff --git a/shared/scss/abstracts/_functions.scss b/shared/scss/abstracts/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/shared/scss/abstracts/_media-query.scss b/shared/scss/abstracts/_media-query.scss new file mode 100644 index 0000000..e69c522 --- /dev/null +++ b/shared/scss/abstracts/_media-query.scss @@ -0,0 +1,118 @@ +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ + + /*-------------------------------- + *** GENERAL DIFINITIONS + ** CSS3 , CLEARFIX + */ + + .container{ + width : 90%; + } + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ + + /*-------------------------------- + *** 4K AND HIGH RESOULOTIONS + ** MIN-WIDTH : 2560px OR 160em + */ + + @mixin led4k{ + @media screen and (min-width : $led4k){ + @content; + } + } + + /*-------------------------------- + *** LAPTOP OR DESKTOP + ** MIN-WIDTH : 1400px OR 87.5em + */ + + @mixin led{ + @media screen and (min-width : $alpha){ + @content; + } + } + + /*-------------------------------- + *** FOR SOM OF THE DEVICES + ** MIN-WIDTH : 1201px OR 75.0625em + */ + + @mixin lcd{ + @media screen and (min-width : $preAlpha){ + @content; + } + } + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1200px OR 75em + */ + + @mixin laptop{ + @media screen and (max-width : $beta){ + @content; + } + } + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 1024px OR 64em + */ + + @mixin mini_laptop{ + @media screen and (max-width : $preBeta){ + @content; + } + } + + /*-------------------------------- + *** FOR ANY DEVICE MAX SIZE UNTIL + ** MAX-WIDTH : 992px OR 62em + */ + + @mixin tablet{ + @media screen and (max-width : $gamma){ + @content; + } + } + + /*-------------------------------- + *** FOR RETINA MOBILE AND LANSCAPE + ** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em + */ + + @mixin retinaMobile{ + @media screen and ( min-width : $lota ) and ( max-width : $preZeta ){ + @content; + } + } + + /*-------------------------------- + *** FOR MOBILE + ** MAX : 640PX / 40em + */ + + @mixin mobile{ + @media screen and (max-width : $eta ){ + @content; + } + } + + /*-------------------------------- + *** FOR MINI MOBILE + ** MAX : 400PX / 25em + */ + + @mixin mini_mobile{ + @media screen and (max-width : $kappa ){ + @content; + } + } diff --git a/shared/scss/abstracts/_mixins.scss b/shared/scss/abstracts/_mixins.scss new file mode 100644 index 0000000..cb15156 --- /dev/null +++ b/shared/scss/abstracts/_mixins.scss @@ -0,0 +1,11 @@ +@mixin add-padding-left($padding) { + > * { + padding-left: $padding; + } +} + +@mixin add-padding-right($padding) { + > * { + padding-right: $padding; + } +} diff --git a/shared/scss/abstracts/_variables.scss b/shared/scss/abstracts/_variables.scss new file mode 100644 index 0000000..b681b0a --- /dev/null +++ b/shared/scss/abstracts/_variables.scss @@ -0,0 +1,81 @@ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ + +$fontWeightRegular: 400; +$fontWeightMedium: 500; +$fontWeightSemibold: 600; +$fontWeightBold: 700; + +$fontSizeXs: 0.75em; +$fontSizeSm: 0.875em; +$fontSizeBase: 1em; +$fontSizeLg: 1.125em; +$fontSizeXl: 1.25em; +$fontSize2Xl: 1.5em; +$fontSize3Xl: 1.875em; +$fontSize4Xl: 2.25em; +$fontSize5Xl: 3em; +$fontSize6Xl: 3.75em; +$fontSize7Xl: 4.5em; +$fontSize8Xl: 5em; +// To be continued... + +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ + +$led4k: 160em; +$alpha: 87.5em; +$preAlpha: 75.0625em; +$beta: 75em; +$preBeta: 64em; +$gamma: 62em; +$lota: 31.25em; +$preZeta: 47.9375em; +$eta: 40em; +$kappa: 25em; + +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ + +$spaces: []; +@for $i from 1 through 16 { + $spaces: append($spaces, #{0.25 * $i}em); +} + +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ + +$durations: ( + 75: 75ms, + 100: 100ms, + 150: 150ms, + 200: 200ms, + 300: 300ms, + 500: 500ms, + 700: 700ms, + 1000: 1000ms, +); + +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ + +$shadowSm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ + +$roundedSm: 0.125em; +$rounded: 0.25em; +$roundedMd: 0.375em; +$roundedLg: 0.5em; +$roundedXl: 0.75em; +$rounded2Xl: 1em; +$rounded3Xl: 1.5em; +$rounded4Xl: 2em; +$roundedFull: 9999px; diff --git a/shared/scss/base/_animation.scss b/shared/scss/base/_animation.scss new file mode 100644 index 0000000..00d66de --- /dev/null +++ b/shared/scss/base/_animation.scss @@ -0,0 +1,17 @@ +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/shared/scss/base/_reset.scss b/shared/scss/base/_reset.scss new file mode 100644 index 0000000..d960bc8 --- /dev/null +++ b/shared/scss/base/_reset.scss @@ -0,0 +1,34 @@ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + diff --git a/shared/scss/base/_utilities.scss b/shared/scss/base/_utilities.scss new file mode 100644 index 0000000..e69de29 diff --git a/shared/scss/components/_button.scss b/shared/scss/components/_button.scss new file mode 100644 index 0000000..0b9b323 --- /dev/null +++ b/shared/scss/components/_button.scss @@ -0,0 +1,34 @@ + +@use "sass:color"; + +/*========================================================= +********* Generic Button Component +******* +*/ +@mixin button( + $bg: transparent, + $color: #fff, + $radius: 0, + $border: none, + $padding: 1em 2em, + $fontSize: 1em, + $fontWeight: 400, + $transition: none, + $hoverBgColor: color.adjust($bg, $lightness: -10%) +) { + background: $bg; + color: $color; + border-radius: $radius; + border: $border; + padding: $padding; + font-size: $fontSize; + font-weight: $fontWeight; + transition: $transition; + text-align: center; + cursor: pointer; + + &:hover { + background-color: $hoverBgColor; + } +} + diff --git a/shared/scss/components/_dropdown.scss b/shared/scss/components/_dropdown.scss new file mode 100644 index 0000000..f14a396 --- /dev/null +++ b/shared/scss/components/_dropdown.scss @@ -0,0 +1,19 @@ +/*========================================================= +********* Generic DropDown Component +******* Whenever .dropdown is hovered .dropdown__content appears +*/ + +.dropdown { + position: relative; + &:hover { + .dropdown__content { + display: unset; + } + } + .dropdown__content{ + display: none ; + position: absolute; + z-index: 1; + top: 100%; + } +} diff --git a/shared/scss/layout/_grid.scss b/shared/scss/layout/_grid.scss new file mode 100644 index 0000000..1fff75b --- /dev/null +++ b/shared/scss/layout/_grid.scss @@ -0,0 +1,73 @@ +/*======================= +********* GRIDS COL +******* MEDIA QUERY +***** +*** +*/ +.row{ + width: 100%; + display: block; + clear: both; +} +$column : 12; +$calc_percent : 100% / 12; +$col_name : "col"; + +// @for $i from 1 through $column { + +// .#{$col_name}-#{$i}{ + +// width: $i * $calc_percent; +// float: left; + +// } +// } + +@include lcd{ + @for $i from 1 through $column { + + .#{$col_name}-xl-#{$i}{ + + width: $i * $calc_percent; + float: left; + + } + } +} + +@include laptop{ + @for $i from 1 through $column { + + .#{$col_name}-lg-#{$i}{ + + width: $i * $calc_percent; + float: left; + + } + } +} + +@media screen and (max-width : 62em){ + @for $i from 1 through $column { + + .#{$col_name}-md-#{$i}{ + + width: $i * $calc_percent; + float: left; + + } + } +} + +@media screen and (max-width : 47.9375em){ + @for $i from 1 through $column { + + .#{$col_name}-sm-#{$i}{ + + width: $i * $calc_percent; + float: left; + + } + } +} + diff --git a/shared/scss/shared.scss b/shared/scss/shared.scss new file mode 100644 index 0000000..bc4f96c --- /dev/null +++ b/shared/scss/shared.scss @@ -0,0 +1,25 @@ +/* =================================== + 🌐 MAIN IMPORT FILE + Collects and imports all SASS modules +====================================== */ + +/* ~~~~~~~~~~~~~~🔹 ABSTRACTS 🔹~~~~~~~~~~~~~~ */ +/* Variables, Mixins, Media Queries, and Functions */ +@import './abstracts/functions'; +@import './abstracts/media-query'; +@import './abstracts/mixins'; +@import './abstracts/variables'; + +/* ~~~~~~~~~~~~~~🔸 BASE 🔸~~~~~~~~~~~~~~ */ +/* Global styles, Resets, and Utilities */ +@import './base/animation'; +@import './base/reset'; +@import './base/utilities'; + +/* ~~~~~~~~~~~~~~🟢 COMPONENTS 🟢~~~~~~~~~~~~~~ */ +/* Reusable components and UI elements */ +@import './components/button'; + +/* ~~~~~~~~~~~~~~⚙️ LAYOUT ⚙️~~~~~~~~~~~~~~ */ +/* Grid systems, structure, and layout styles */ +@import './layout/grid'; diff --git a/show-land/css/style.css b/show-land/css/style.css new file mode 100644 index 0000000..3dbd2c7 --- /dev/null +++ b/show-land/css/style.css @@ -0,0 +1,775 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/*------------------------------------*\ + #COLOR +\*------------------------------------*/ +/*------------------------------------*\ + #FONTS +\*------------------------------------*/ +body { + font-family: "Lato", sans-serif; + font-weight: 400; + /* font-size: 16px; */ + line-height: 1.7; + color: #fff; + font-size: 95%; +} + +.background-color { + background-image: linear-gradient(to right, #364fc7, #37b24d); + height: 100vh; +} +.background-color__1 { + background-color: #0e1523; +} +.background-color__2 { + background-color: #0f1429; +} +.background-color__3 { + background-color: #00092e; +} + +.container { + width: 75rem; + margin: 0 auto; +} + +body.modal-open { + height: 100vh; + overflow-y: hidden; +} + +::-webkit-scrollbar { + width: 0.4rem; +} + +::-webkit-scrollbar-track { + background: transparent; + border-radius: 0.75em; +} + +::-webkit-scrollbar-thumb { + background: #999; + border-radius: 0.75em; +} +::-webkit-scrollbar-thumb:hover { + background: #777; +} + +/*======================================================================================== +********* GRIDS BASE SUSY +******* MEDIA QUERY +***** +*** +*/ +/*-------------------------------- +*** GENERAL DIFINITIONS +** CSS3 , CLEARFIX +*/ +.container { + width: 90%; +} + +/*========================================================================================*\ +*---------------------------- MEDIA QUERY ---------------------------- +\*========================================================================================*/ +/*-------------------------------- +*** 4K AND HIGH RESOULOTIONS +** MIN-WIDTH : 2560px OR 160em +*/ +/*-------------------------------- +*** LAPTOP OR DESKTOP +** MIN-WIDTH : 1400px OR 87.5em +*/ +/*-------------------------------- +*** FOR SOM OF THE DEVICES +** MIN-WIDTH : 1201px OR 75.0625em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1200px OR 75em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 1024px OR 64em +*/ +/*-------------------------------- +*** FOR ANY DEVICE MAX SIZE UNTIL +** MAX-WIDTH : 992px OR 62em +*/ +/*-------------------------------- +*** FOR RETINA MOBILE AND LANSCAPE +** MIN : 500px / 31.25em | MAX : 767PX / 47.9375em +*/ +/*-------------------------------- +*** FOR MOBILE +** MAX : 640PX / 40em +*/ +/*-------------------------------- +*** FOR MINI MOBILE +** MAX : 400PX / 25em +*/ +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +.container .header { + display: flex; + justify-content: space-between; +} +.container .logo { + padding-top: 0.8rem; + font-size: 2.25em; + font-weight: 700; +} +.container .main-nav__list { + display: flex; + padding-top: 1em; + gap: 1.5em; + list-style: none; + align-items: center; +} +.container .main-nav__link:link, .container .main-nav__link:visited { + text-decoration: none; + font-size: 1em; + color: #fff; + text-transform: uppercase; + font-weight: 700; +} + +.home-page { + padding-top: 5rem; + padding-bottom: 5rem; +} +.home-page__headline { + text-align: center; + font-size: 4.2rem; + font-weight: 900; + background-image: linear-gradient(to right, #364fc7, #087f5b); + -webkit-background-clip: text; + color: transparent; +} +.home-page__headline_1 { + text-align: center; + font-size: 2.8rem; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; +} +.home-page__description { + text-align: center; + font-size: 1.125em; + margin-bottom: 2.5em; +} +.home-page__description_1 { + text-align: center; + font-size: 1.125em; + padding-bottom: 4em; +} +.home-page__imgs { + display: grid; + grid-template-columns: repeat(3, 1fr); + row-gap: 3em; + column-gap: 3em; +} +.home-page__img_boxs { + outline: 0.1px solid rgba(255, 255, 255, 0.0431372549); + outline-offset: 0.8rem; + border-radius: 0.25em; +} +.home-page__img_boxs img { + width: 100%; +} +.home-page__number { + text-align: center; + font-size: 1.5em; + font-weight: 700; + padding: 1em 0 1em 0; +} + +.super-fast { + display: flex; + align-items: center; + gap: 5rem; + padding-top: 8rem; +} +.super-fast__info { + margin-top: -8em; +} +.super-fast__icone { + stroke: #fff; + width: 1rem; + height: 1rem; + margin-bottom: -2px; +} +.super-fast__button { + display: inline-flex; + align-items: baseline; + gap: 4px; + background-image: linear-gradient(to right, #364fc7, #37b24d); + padding: 0.25em 1em 0.25em 1em; + text-transform: uppercase; + font-weight: 700; + border-radius: 9999px; + cursor: pointer; +} +.super-fast__headline { + font-size: 2.8rem; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + margin-top: 0.25em; +} +.super-fast__paragraph { + font-size: 1.25em; +} +.super-fast__performance { + display: inline-flex; + gap: 0.5em; + font-size: 1.25em; + margin-top: 1em; +} +.super-fast__feature { + display: flex; + gap: 3em; +} +.super-fast__feature-1 { + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + font-weight: 900; + padding: 0 2.5rem 0 2.5rem; + outline: 1px solid #fff; + outline-offset: 0.5rem; + border-radius: 9999px; + font-size: 5rem; +} +.super-fast__feature-2 { + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + font-size: 3em; + padding: 1.8rem 1.5rem 1.8rem 1.5rem; + outline: 1px solid #fff; + outline-offset: 0.5rem; + border-radius: 9999px; +} +.super-fast__feature-3 { + display: flex; + justify-content: center; + margin-top: 1em; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + font-size: 1.25em; +} +.super-fast_performance { + text-align: center; + margin-top: 2em; + margin-bottom: -2rem; +} +.super-fast__icones { + display: flex; + gap: 2em; + justify-content: center; + align-items: center; + padding-bottom: 4em; +} +.super-fast__icone-google { + width: 10rem; +} +.super-fast__icone-gtmetrix { + width: 12rem; +} + +.icone-1 { + stroke: #37b24d; + width: 2rem; + height: 2rem; +} + +.page-builder { + display: flex; + gap: 3.5em; + padding-top: 5rem; +} +.page-builder__icone { + stroke: #fff; + background-color: #c92a2a; + padding: 0.2rem 0.2rem 0.2rem 0.2rem; + width: 1.7rem; + height: 1.7rem; + border-radius: 9999px; + margin-bottom: -0.4rem; +} +.page-builder__button { + display: inline-flex; + align-items: baseline; + border-radius: 9999px; + padding: 0 1em 0 1em; + gap: 0.5em; + font-size: 1.6rem; + font-weight: 900; + color: #c92a2a; + background-color: #fff; + cursor: pointer; +} +.page-builder__headline { + font-size: 2.8rem; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + padding-top: 0.5em; +} +.page-builder__paragraph { + font-size: 1.25em; + margin-bottom: 2.75em; +} +.page-builder__feature { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 2.5rem; + margin-bottom: 2em; +} +.page-builder__features { + display: inline-flex; + align-items: baseline; + gap: 0.5em; + outline: 0.1px solid rgba(255, 255, 255, 0.0431372549); + outline-offset: 0.4rem; + border-radius: 9999px; + padding: 0 2.8rem 0 0.4rem; +} +.page-builder__icone_1 { + stroke: #000; + background-image: linear-gradient(to right, #fff, #c92a2a); + width: 1rem; + height: 1rem; + border-radius: 9999px; + margin-bottom: -0.1rem; +} + +.benefits { + padding-top: 4em; + padding-bottom: 8rem; +} +.benefits__headline { + font-size: 2.8rem; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + padding-top: 1em; + text-align: center; +} +.benefits__paragraph { + font-size: 1.25em; + margin-bottom: 3em; + text-align: center; +} +.benefits__features { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 4em; + column-gap: 4em; + margin-bottom: 4em; +} +.benefits__img_boxs { + outline: 0.1rem solid rgba(255, 255, 255, 0.0431372549); + outline-offset: 0.8rem; + border-radius: 0.125em; +} +.benefits__title { + text-align: center; + font-size: 1.6rem; + font-weight: 700; + margin-bottom: 1em; +} +.benefits__description { + text-align: center; +} +.benefits__img_box { + padding-left: 2.25em; + border-radius: 0.5em; + margin-bottom: 1em; +} +.benefits__img_box_1 { + padding-left: 1em; + border-radius: 0.5em; + margin-bottom: 1em; +} +.benefits__features_1 { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 4em; + margin-bottom: 4em; +} + +.features { + padding-top: 5rem; + padding-bottom: 8rem; +} +.features-btn:link, .features-btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 0.25em 0.75em; + display: inline-block; + transition: all 0.2s; + border-radius: 9999px; +} +.features__headline { + text-align: center; + font-size: 3em; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; +} +.features__headline_1 { + text-align: center; + font-size: 3em; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + margin-top: -1.5rem; +} +.features__description { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 1em; + row-gap: 1em; + margin-top: 2em; +} +.features__icone_box { + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: center; +} +.features__icone { + stroke: #fff; + background-image: linear-gradient(to right, #554df0, #74d3af); + width: 4rem; + height: 4rem; + padding: 1em 1em; + border-radius: 9999px; +} +.features__title { + text-align: center; + font-size: 1.6rem; + font-weight: 700; + margin-bottom: 1em; + letter-spacing: -0.01rem; +} +.features__paragraph { + text-align: center; + margin-top: -1rem; +} + +.text-box { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.header-primary__sub { + display: block; + text-transform: uppercase; + font-size: 1em; +} +.header-primary__main { + display: block; + font-size: 5rem; + margin-bottom: -3rem; +} +.header-primary_main__1 { + display: block; + font-size: 5em; +} + +.text-img { + outline-offset: 2rem; + outline: 0.2rem solid #777; + border-radius: 1em; +} +.text-img__1 { + display: flex; + align-items: center; + justify-content: center; + margin-top: 30rem; + gap: 1em; +} +.text-img__2 { + display: flex; + align-items: center; + justify-content: center; + margin-top: 1em; + gap: 1em; +} + +.text-img__box { + border-radius: 1em; +} + +.border__1 { + border-bottom-left-radius: 0; +} +.border__2 { + border-bottom-right-radius: 0; +} + +.powerful-features { + padding-top: 5rem; + padding-bottom: 6rem; +} +.powerful-features__headline { + text-align: center; + font-size: 3em; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; +} +.powerful-features__paragraph { + text-align: center; + font-size: 1.25em; +} +.powerful-features__feature { + display: grid; + grid-template-columns: repeat(4, 1fr); + row-gap: 3em; + column-gap: 2.75em; + margin-top: 2.25em; +} +.powerful-features__paragrapha_1 { + display: flex; + align-items: baseline; + gap: 0.5em; + outline: 0.1px solid rgba(255, 255, 255, 0.0431372549); + outline-offset: 0.4rem; + border-radius: 9999px; + padding: 0 2.75em 0 0.5em; +} +.powerful-features__icone { + stroke: #000; + background-image: linear-gradient(to right, #554df0, #74d3af); + width: 1rem; + height: 1rem; + border-radius: 9999px; + margin-bottom: -0.1rem; +} + +.help-users { + padding-top: 5rem; + padding-bottom: 6rem; +} +.help-users__headline { + text-align: center; + font-size: 3em; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; +} +.help-users__paragraph { + text-align: center; + font-size: 1.25em; + margin-bottom: 2em; +} +.help-users__info { + display: flex; + gap: 4em; +} +.help-users__section { + display: flex; + gap: 1em; + align-items: center; +} +.help-users__icone { + stroke: #fff; + background-image: linear-gradient(to right, #554df0, #74d3af); + width: 4rem; + height: 4rem; + padding: 1em 1em; + border-radius: 9999px; +} +.help-users__headline_1 { + font-size: 1.5em; +} +.help-users__paragraph_1 { + color: rgba(255, 255, 255, 0.7176470588); + margin-bottom: 0.5em; +} +.help-users__link { + padding-bottom: 0.5em; + border-bottom: solid #fff 0.1rem; +} + +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +/*------------------------------------*\ + #COMPONENTS +\*------------------------------------*/ +.btn:link, .btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1em 2.5em; + display: inline-block; + border-radius: 1em; + transition: all 0.2s; +} +.btn:hover { + transform: translateY(-0.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); +} +.btn:active { + transform: translateY(-0.1rem); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); +} +.btn-button { + background-image: linear-gradient(to right, #364fc7, #37b24d); + color: #fff; + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); +} +.btn-cta { + display: flex; + justify-content: center; + align-items: center; +} + +.demo-modal { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + padding: 2em 4em; + justify-content: center; + background-color: rgba(14, 21, 35, 0.7); +} +.demo-modal.fade-in { + animation: fade-in 0.3s linear both; +} +.demo-modal.fade-out { + animation: fade-out 0.3s linear both; +} +.demo-modal__box { + display: flex; + flex-direction: column; + overflow: auto; + gap: 3em; + background-color: #fff; + max-width: 80rem; + height: 90vh; + border-radius: 1rem; + padding: 2em 4em; +} +.demo-modal__info { + display: flex; + align-items: center; + justify-content: space-between; +} +@media screen and (max-width: 40em) { + .demo-modal__info { + gap: 1em; + align-items: stretch; + text-align: center; + flex-direction: column; + } +} +.demo-modal__name { + font-size: 3em; + font-weight: 700; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; +} +.demo-modal__by { + font-size: 1.25em; + font-weight: 700; + color: #777; +} +.demo-modal__by-link:hover { + color: #0f1429; +} +.demo-modal__image { + width: 100%; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/show-land/css/style.css.map b/show-land/css/style.css.map new file mode 100644 index 0000000..3302d4d --- /dev/null +++ b/show-land/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/main.scss","../../shared/scss/abstracts/_variables.scss","../sass/_variables.scss","../sass/_typography.scss","../sass/_base.scss","../../shared/scss/abstracts/_media-query.scss","../sass/layout/_top-nav.scss","../sass/layout/_home-page.scss","../sass/layout/_super-fast.scss","../sass/layout/_page-builder.scss","../sass/layout/_benefits.scss","../sass/layout/_features.scss","../sass/layout/_hero.scss","../sass/layout/_powerful-features.scss","../sass/layout/_help-users.scss","../../shared/scss/base/_reset.scss","../../shared/scss/base/_animation.scss","../sass/components/_button.scss","../sass/components/_demo-modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAuBA;AAAA;AAAA;AAeA;AAAA;AAAA;AASA;AAAA;AAAA;AAeA;AAAA;AAAA;AAMA;AAAA;AAAA;ACpEA;AAAA;AAAA;AA2BA;AAAA;AAAA;AC3BA;EACE,aDgCkB;EC/BlB,aFEkB;AEDlB;EACA;EACA,ODeW;ECdX;;;AAGF;EACE;EACA;;AAEA;EACE,kBDLS;;ACQX;EACE,kBDLS;;ACOX;EACE,kBDNW;;;ACUf;EACE;EACA;;;AC3BF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA,eHiEU;;;AG9DZ;EACE,YFSe;EERf,eH4DU;;AG3DV;EACE,YFKY;;;AGvBhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOC;AAAA;AAAA;AAAA;AAKA;EACC;;;AAGF;AAAA;AAAA;AAIC;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;ALnGD;AAAA;AAAA;AMPE;EACE;EACA;;AAGF;EACE;EACA,WLOU;EKNV,aLHa;;AKOb;EACE;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA,WLbS;EKcT,OJLO;EIMP;EACA,aLpBW;;;AMLjB;EACE,aL4BqB;EK3BrB,gBL2BqB;;AK1BrB;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,aNVa;EMWb;EACA;EACA;;AAEF;EACE;EACA,WNZS;EMaT;;AAEF;EACE;EACA,WNjBS;EMkBT;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,eNgCM;;AM/BN;EACE;;AAGJ;EACE;EACA,WNlCU;EMmCV,aN1Ca;EM2Cb;;;AC/CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE,QNMS;EMLT;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,aPpBa;EOqBb,ePoDU;EOnDV;;AAGF;EACE;EACA,aP3Ba;EO4Bb;EACA;EACA;EACA;;AAGF;EACE,WP7BS;;AO+BX;EACE;EACA;EACA,WPlCS;EOmCT;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ePgBU;EOfV;;AAGF;EACE;EACA;EACA;EACA,WPvDU;EOwDV;EACA;EACA;EACA,ePIU;;AODZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,WPzES;;AO4EX;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIJ;EACE,QN5Ga;EM6Gb;EACA;;;AChHF;EACE;EACA;EACA,aP2BqB;;AO1BrB;EACE,QPcS;EObT,kBPGW;EOFX;EACA;EACA;EACA,eRqEU;EQpEV;;AAEF;EACE;EACA;EACA,eR+DU;EQ9DV;EACA;EACA,WPUc;EOTd;EACA,OPZW;EOaX,kBPHS;EOIT;;AAEF;EACE;EACA,aRrBa;EQsBb;EACA;EACA;EACA;;AAEF;EACE,WRtBS;EQuBT;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,eR4BU;EQ3BV;;AAGF;EACE,QPpCS;EOqCT;EACA;EACA;EACA,eRmBU;EQlBV;;;AC7DJ;EACE;EACA;;AACA;EACE;EACA,aTCa;ESAb;EACA;EACA;EACA;EACA;;AAEF;EACE,WTDS;ESET;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,eT0CQ;;ASvCV;EACE;EACA,WRLc;EQMd,aT7Ba;ES8Bb;;AAEF;EACE;;AAEF;EACE;EACA,eT+BQ;ES9BR;;AAEF;EACE;EACA,eT0BQ;ESzBR;;AAGF;EACE;EACA;EACA;EACA;;;ACxDJ;EACE,aT6BqB;ES5BrB;;AACA;EAEE;EACA;EACA;EACA;EAEA;EACA,eVoEU;;AUlEZ;EACE;EACA,WVCU;EUAV,aVVa;EUWb;EACA;EACA;;AACA;EACE;EACA,WVNQ;EUOR,aVjBW;EUkBX;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE,QTzBS;ES0BT;EAKA;EACA;EACA;EACA,eV0BU;;AUvBZ;EACE;EACA,WT7Bc;ES8Bd,aVrDa;EUsDb;EACA;;AAEF;EACE;EACA;;;AChEJ;EACE;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA,WXHW;;AWMb;EACE;EACA;EACA;;AAGF;EACE;EACA,WXLU;;;AWQd;EACE;EACA;EACA,eX8CW;;AW5CX;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE,eX2BW;;;AWxBX;EACE;;AAEF;EACE;;;ACxDJ;EACE,aX6BqB;EW5BrB;;AACA;EACE;EACA,WZWU;EYVV;EACA;EACA;EACA;;AAEF;EACE;EACA,WZDS;;AYGX;EACE;EACA;EACA;EACA;EACA,YZLU;;AYOZ;EACE;EACA;EACA;EACA;EACA;EACA,eZmDU;EYlDV;;AAEF;EACE,QXZS;EWaT;EAKA;EACA;EACA,eZuCU;EYtCV;;;ACzCJ;EACE,aZ6BqB;EY5BrB;;AACA;EACE;EACA,WbWU;EaVV;EACA;EACA;EACA;;AAEF;EACE;EACA,WbDS;EaET;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE,QZVS;EYWT;EAKA;EACA;EACA;EACA,ebyCU;;AatCZ;EACE,Wb7BU;;Aa+BZ;EACE,OZ5BY;EY6BZ;;AAEF;EACE;EACA;;;Ad9BJ;AAAA;AAAA;AepBA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AC/BF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AhBaJ;AAAA;AAAA;AiBxBE;EAEE;EACA;EACA;EACA;EACA,ehBoES;EgBnET;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA,OfJS;EeKT;;AAEF;EACE;EACA;EACA;;;AC9BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,kBhBJS;EgBKT;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AbsEF;EazEA;IAKI;IACA;IACA;IACA;;;AAGJ;EACE,WjBzBU;EiB0BV,ajBpCa;EiBqCb;EACA;EACA;;AAEF;EACE,WjBpCS;EiBqCT,ajB3Ca;EiB4Cb,OhB5BY;;AgB8Bd;EACE,OhBzCS;;AgB4CX;EACE","file":"style.css"} \ No newline at end of file diff --git a/show-land/img/google.png b/show-land/img/google.png new file mode 100644 index 0000000..19fabfc Binary files /dev/null and b/show-land/img/google.png differ diff --git a/show-land/img/gtmetrix_logo_icon_171030.png b/show-land/img/gtmetrix_logo_icon_171030.png new file mode 100644 index 0000000..c5ce666 Binary files /dev/null and b/show-land/img/gtmetrix_logo_icon_171030.png differ diff --git a/show-land/index.html b/show-land/index.html new file mode 100644 index 0000000..c7ca50d --- /dev/null +++ b/show-land/index.html @@ -0,0 +1,550 @@ + + + + + + Anvogue + + + + + + + + + + +
+ +
+
+

Anvogue

+ + +
+
+
+ +

+ ultimate wordpress solurton + Top-Notch + Premium Design +

+ start yours store +
+ +
+ + +
+ + + + +
+
+ + + +
+ +
+
+
+
+ + + +
+ +
+
+
+ + +

+ + + super fast

+ +

Super Fast Loading Speed

+ +

Anvogue is optimized for fast loading speed by having a good structure and well witten code for best user experience

+ +

+ + + 90%Performance-A Grade

+
+ +
+
+
+ +

A

+
+
+ +

90%

+

Performance

+
+
+

95%

+

structure

+
+
+ +

Performance Report By

+ +
+ + + google + + + GTmetrix + +
+
+ +
+
+
+ +
+
+
+

24+

+

Ready To Use Home Pages

+

All home pages, inner pages, and elements are included with the purchase. Easily import the demos and pages with the one-click demo import.

+ +
+
a store site with all kinds of goods

Home page 01

+
a store site with all kinds of goods

Home page 02

+
a store site with all kinds of goods

Home page 03

+
a store site with all kinds of goods

Home page 04

+
a store site with all kinds of goods

Home page 05

+
a store site with all kinds of goods

Home page 06

+
a store site with all kinds of goods

Home page 07

+
a store site with all kinds of goods

Home page 08

+
a store site with all kinds of goods

Home page 09

+
a store site with all kinds of goods

Home page 10

+
a store site with all kinds of goods

Home page 11

+
a store site with all kinds of goods

Home page 12

+
a store site with all kinds of goods

Home page 13

+
a store site with all kinds of goods

Home page 14

+
a store site with all kinds of goods

Home page 15

+
a store site with all kinds of goods

Home page 16

+
a store site with all kinds of goods

Home page 17

+
a store site with all kinds of goods

Home page 18

+
a store site with all kinds of goods

Home page 19

+
a store site with all kinds of goods

Home page 20

+
a store site with all kinds of goods

Home page 21

+
a store site with all kinds of goods

Home page 22

+
a store site with all kinds of goods

Home page 23

+
a store site with all kinds of goods

Home page 24

+
a store site with all kinds of goods

Home RTL

+
+
+
+
+
+
+
+
+

+ + + elementor

+

Elementor Page Builder

+

Enjoy intuitive interface and flexibility of one of the most user- friendly page builder for WordPress. Enhanced with a set of additional elements, it enables you to customize layouts with ease.

+ +
+
+

+ + + Drag And Drop Editor

+
+
+

+ + Powerful Options

+
+
+

+ + 50+Custom Elements

+
+
+

+ + No Coding Required

+
+
+ +view demo +
+
+
+ +
+

More Useful Ecommerce Features

+

Powerful features to create your next great online store.

+
+ +
a store site with all kinds of goods +

Smaert Product Filters

+

Filtering products is fast, convenient and smart by auto tags entry & multiple Product attributes.

+
a store site with all kinds of goods +

Product Variant Swatches

+

Swatch products with multiple attributes for displaying Colors, size and images swatches.

+
a store site with all kinds of goods +

Quick View Popup

+

Allows users to get a quick look of products without opening the product page.

+
a store site with all kinds of goods +

Ajax Cart Popup

+

Ajax cart allows users to add products in the cart without to reload the entire sit each time

+ +
+
+
a store site with all kinds of goods +

Sales Countdown Timer

+

Boost sales and engagement for special occasions.

+
a store site with all kinds of goods +

Frequently Bought Together

+

As recommendations are displayed as bundles on your product page.

+
a store site with all kinds of goods +

External Product

+

Increase the conversion by moving the customer right to checkout with one click.

+
+
+ view all +
+
+
+
+
+
+ +
+
+ awesome features +
+

Packed With Powerful Features

+

Building Made Easy!

+
+
+ + + +

24+ Home Demos

+

Choose from 24+ pre-made website demos to get tour business going in no time!

+
+
+ + + + +

140+ Sections

+

Use any of 140+ section included and enrich your website in content & design

+
+
+ + + +

Easily Demo Importer

+

Choose from 24+ pre-made website demos get your business going in no time!

+
+
+ +

Responsive & Retina Ready

+

Anvogue is 100% responsive to make your website look beautiful in all major devices.

+
+
+ + + +

Blazing Fast Performance

+

We optimized the themeś performance so that you get a blazing fast website.

+
+
+ + + + +

Extensive Documentation

+

The theme includes comprehensive documentation explaining major features.

+
+
+ + + +

Optimized For SEO

+

We optimized the theme to help your website rank well.

+
+
+ + + +

Friendly & Efficient Support

+

Our numerous 5-star ratings reflect the quality of our customer support.

+
+
+
+
+
+
+
+
+

Most Powerful Feature With Anvogue

+

You don't need to pay for any additional plugins. All features are inbuilt with Anvogue.

+

Also this will make your store load foster

+
+
+

+ + + Instant Ajax Search

+
+
+

+ + + Ajax Product Filter

+
+
+

+ + + Shop List/Grid

+
+
+

+ + +Quick View Popop

+
+
+

+ + +Off Canvas Cart

+
+
+

+ + +10+ Product Gallery Layouts

+
+
+

+ + +04+ Product Page Tab Styles

+
+
+

+ + +Frequently Bought Together

+
+
+

+ + +Product Variation Swatches

+
+
+

+ + +Quick Buy Button

+
+
+

+ + +Size Guide

+
+
+

+ + +Product Video

+
+
+

+ + +360 Degree Product

+
+
+

+ + +Product Custom Tab

+
+
+

+ + +Sticky Add To Cart

+
+
+

+ + +Free Shipping Bar

+
+
+

+ + +Product Wishlist

+
+
+

+ + +Product Countdown

+
+
+

+ + +Multi-Vendor Support

+
+
+

+ + +Megamenu

+
+
+

+ + +GDPR Compliance

+
+
+

+ + +Fake Sale Counts

+
+
+

+ + +Recently Viewed

+
+
+

+ + +Related Product

+
+
+

+ + +Sale Notification

+
+
+

+ + +Quantity Message

+
+
+

+ + +Visitor Count

+
+
+

+ + +Ajax Popup

+
+
+
+
+
+
+
+
+

How Can We Help You?

+

Find answers to all of your questions here.

+
+
+
+ + + +
+
+

Detailed Documentation

+

Rees the documentation and learn how to build your online store.

+ Online Documentation +
+
+ +
+
+ + + +
+
+

Detailed Documentation

+

Rees the documentation and learn how to build your online store.

+ Online Documentation +
+
+ +
+
+ + + +
+
+

Detailed Documentation

+

Rees the documentation and learn how to build your online store.

+ Online Documentation
+
+
+ +
+ +
+ +
trusted section
+
footer section
+ + + + + + + + + diff --git a/show-land/js/script.js b/show-land/js/script.js new file mode 100644 index 0000000..e85bc05 --- /dev/null +++ b/show-land/js/script.js @@ -0,0 +1,108 @@ +/*------------------------------------*\ + #DATA +\*------------------------------------*/ + +const demos = [ + { + id: 0, // an id that is unique in the array + name: "EventLand", // Name of your page + createdBy: { + name: "Ahmad Mohammadirad", // Your name + github: "https://github.com/ahmadmohammadirad2006", // link of your github profile + }, + url: "event-land/index.html", // URL of your page based on root dir + mainImage: "event-land-main.png", // Name of your main page image in shared/images/ + entirePageImage: "event-land-entire.png", // Name of your entire page image in shared/images/ + }, +]; + +/*------------------------------------*\ + #SELECTING ELEMENTS +\*------------------------------------*/ + +const homePagesContainerEl = document.querySelector(".home-pages-container-js"); + +/*------------------------------------*\ + #FUNCTIONS +\*------------------------------------*/ + +const displayDemoModal = function (demoId) { + const demo = demos.find((demo) => demo.id === demoId); + + document.body.classList.add("modal-open"); + document.body.insertAdjacentHTML( + "beforeend", + ` +
+
+
+
+

${demo.name}

+ By + ${demo.createdBy.name} +
+ Live Demo +
+ ${demo.name} Entire Page +
+
+ ` + ); +}; + +const removeDemoModal = function () { + const demoModalEl = document.querySelector(".demo-modal-js"); + if (!demoModalEl) return; + document.body.classList.remove("modal-open"); + demoModalEl.classList.remove("fade-in"); + demoModalEl.classList.add("fade-out"); + setTimeout(function () { + demoModalEl.remove(); + }, 300); +}; + +/*------------------------------------*\ + #EVENT HANDLERS +\*------------------------------------*/ + +homePagesContainerEl.addEventListener("click", (e) => { + const homePageEl = e.target.closest(".home-page-js"); + if (!homePageEl) return; + displayDemoModal(+homePageEl.dataset.id); + const demoModalEl = document.querySelector(".demo-modal-js"); + demoModalEl.addEventListener("click", (e) => { + if (e.target.closest(".demo-modal__box")) return; + removeDemoModal(); + }); +}); + +document.addEventListener("keydown", (e) => { + if (e.code === "Escape") { + removeDemoModal(); + } +}); + +/*------------------------------------*\ + #RENDER DMOES +\*------------------------------------*/ +for (const demo of demos) { + homePagesContainerEl.insertAdjacentHTML( + "beforeend", + ` +
+ ${demo.name} main page +

${demo.name}

+
+ ` + ); +} diff --git a/show-land/sass/_base.scss b/show-land/sass/_base.scss new file mode 100644 index 0000000..ef91b51 --- /dev/null +++ b/show-land/sass/_base.scss @@ -0,0 +1,21 @@ +body.modal-open { + height: 100vh; + overflow-y: hidden; +} + +::-webkit-scrollbar { + width: 0.4rem; +} + +::-webkit-scrollbar-track { + background: transparent; + border-radius: $roundedXl; +} + +::-webkit-scrollbar-thumb { + background: $colorGreyDark2; + border-radius: $roundedXl; + &:hover { + background: $colorGreyDark; + } +} diff --git a/show-land/sass/_typography.scss b/show-land/sass/_typography.scss new file mode 100644 index 0000000..0f6ffbe --- /dev/null +++ b/show-land/sass/_typography.scss @@ -0,0 +1,29 @@ +body { + font-family: $primaryFontFamily; + font-weight: $fontWeightRegular; + /* font-size: 16px; */ + line-height: 1.7; + color: $colorwihte; + font-size: 95%; +} + +.background-color { + background-image: linear-gradient(to right, $colorSecondary, $colorPrimary); + height: 100vh; + + &__1 { + background-color: $colorSixth; + } + + &__2 { + background-color: $colorTenth; + } + &__3 { + background-color: $colorTwelfth; + } +} + +.container { + width: 75rem; + margin: 0 auto; +} diff --git a/show-land/sass/_variables.scss b/show-land/sass/_variables.scss new file mode 100644 index 0000000..5a3fc0d --- /dev/null +++ b/show-land/sass/_variables.scss @@ -0,0 +1,34 @@ +/*------------------------------------*\ + #COLOR +\*------------------------------------*/ +$colorPrimary: #37b24d; +$colorSecondary: #364fc7; +$colorTertiary: #6741d9; +$colorFourth: #343a40; +$colorFifth: #1864ab; +$colorIfth: #1eff00; +$colorSixth: #0e1523; +$colorSeventh: #c92a2a; +$colorEighth: #087f5b; +$colorNinth: #364fc7; +$colorTenth: #0f1429; +$colorEleventh: #ffffff0b; +$colorTwelfth: #00092e; +$colorThirteenth: #554df0; +$colorFourteenth: #74d3af; +$colorFifteenth:#ffffffb7 ; + +$colorwihte: #fff; +$colorBlack: #000; + +$colorGreyDark: #777; +$colorGreyDark2: #999; +$colorGreyDark3: #333; + +/*------------------------------------*\ + #FONTS +\*------------------------------------*/ +$defaultFontSize: 1.6rem; +$spaceBetweenSections: 5rem; + +$primaryFontFamily: "Lato", sans-serif; diff --git a/show-land/sass/components/_button.scss b/show-land/sass/components/_button.scss new file mode 100644 index 0000000..7978017 --- /dev/null +++ b/show-land/sass/components/_button.scss @@ -0,0 +1,34 @@ + +@use "sass:list"; +.btn { + &:link, + &:visited { + text-transform: uppercase; + text-decoration: none; + padding: list.nth($spaces, 4) list.nth($spaces, 10); + display: inline-block; + border-radius: $rounded2Xl; + transition: all 0.2s; + } + + &:hover { + transform: translateY(-0.3rem); + box-shadow: 0 1rem 2rem rgba($colorBlack, 0.2); + } + &:active { + transform: translateY(-0.1rem); + box-shadow: 0 0.5rem 1rem rgba($colorBlack, 0.2); + } + + &-button { + background-image: linear-gradient(to right, $colorSecondary, $colorPrimary); + color: $colorwihte; + box-shadow: 0 1rem 2rem rgba($colorBlack, 0.1); + } + &-cta { + display: flex; + justify-content: center; + align-items: center; + } +} + diff --git a/show-land/sass/components/_demo-modal.scss b/show-land/sass/components/_demo-modal.scss new file mode 100644 index 0000000..837805e --- /dev/null +++ b/show-land/sass/components/_demo-modal.scss @@ -0,0 +1,61 @@ +.demo-modal { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + padding: nth($spaces, 8) nth($spaces, 16); + justify-content: center; + background-color: adjust-color($color: $colorSixth, $alpha: -0.3); + + &.fade-in { + animation: fade-in 0.3s linear both; + } + &.fade-out { + animation: fade-out 0.3s linear both; + } + + &__box { + display: flex; + flex-direction: column; + overflow: auto; + gap: nth($spaces, 12); + background-color: $colorwihte; + max-width: 80rem; + height: 90vh; + border-radius: 1rem; + padding: nth($spaces, 8) nth($spaces, 16); + } + &__info { + display: flex; + align-items: center; + justify-content: space-between; + @include mobile{ + gap: nth($spaces,4); + align-items: stretch; + text-align: center; + flex-direction: column; + } + } + &__name { + font-size: $fontSize5Xl; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, #087f5b, #c92a2a); + -webkit-background-clip: text; + color: transparent; + } + &__by { + font-size:$fontSizeXl; + font-weight: $fontWeightBold; + color: $colorGreyDark; + } + &__by-link:hover { + color: $colorTenth; + } + + &__image { + width: 100%; + } +} diff --git a/show-land/sass/layout/_benefits.scss b/show-land/sass/layout/_benefits.scss new file mode 100644 index 0000000..f23de50 --- /dev/null +++ b/show-land/sass/layout/_benefits.scss @@ -0,0 +1,61 @@ +@use "sass:list"; +.benefits { + padding-top: list.nth($spaces, 16); + padding-bottom: 8rem; + &__headline { + font-size: 2.8rem; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + padding-top: list.nth($spaces, 4); + text-align: center; + } + &__paragraph { + font-size: $fontSizeXl; + margin-bottom: list.nth($spaces, 12); + text-align: center; + } + + &__features { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: list.nth($spaces, 16); + column-gap: list.nth($spaces, 16); + margin-bottom: list.nth($spaces, 16); + } + + &__img_boxs { + outline: 0.1rem solid $colorEleventh; + outline-offset: 0.8rem; + border-radius: $roundedSm; + } + + &__title { + text-align: center; + font-size: $defaultFontSize; + font-weight: $fontWeightBold; + margin-bottom: list.nth($spaces, 4); + } + &__description { + text-align: center; + } + &__img_box { + padding-left: list.nth($spaces, 9); + border-radius: $roundedLg; + margin-bottom: list.nth($spaces, 4); + } + &__img_box_1 { + padding-left: list.nth($spaces, 4); + border-radius: $roundedLg; + margin-bottom: list.nth($spaces, 4); + } + + &__features_1 { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: list.nth($spaces, 16); + margin-bottom: list.nth($spaces, 16); + + } +} diff --git a/show-land/sass/layout/_features.scss b/show-land/sass/layout/_features.scss new file mode 100644 index 0000000..c1bd6c3 --- /dev/null +++ b/show-land/sass/layout/_features.scss @@ -0,0 +1,69 @@ +@use "sass:list"; +.features { + padding-top: $spaceBetweenSections; + padding-bottom: 8rem; + &-btn:link, + &-btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: list.nth($spaces, 1) list.nth($spaces, 3); + display: inline-block; + + transition: all 0.2s; + border-radius: $roundedFull; + } + &__headline { + text-align: center; + font-size: $fontSize5Xl; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + &_1 { + text-align: center; + font-size: $fontSize5Xl; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + margin-top: -1.5rem; + } + } + &__description { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: list.nth($spaces, 4); + row-gap: list.nth($spaces, 4); + margin-top: list.nth($spaces, 8); + } + &__icone_box { + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: center; + } + &__icone { + stroke: $colorwihte; + background-image: linear-gradient( + to right, + $colorThirteenth, + $colorFourteenth + ); + width: 4rem; + height: 4rem; + padding: list.nth($spaces, 4) list.nth($spaces, 4); + border-radius: $roundedFull; + } + + &__title { + text-align: center; + font-size: $defaultFontSize; + font-weight: $fontWeightBold; + margin-bottom: list.nth($spaces, 4); + letter-spacing: -0.01rem; + } + &__paragraph { + text-align: center; + margin-top: -1rem; + } +} diff --git a/show-land/sass/layout/_help-users.scss b/show-land/sass/layout/_help-users.scss new file mode 100644 index 0000000..91a3111 --- /dev/null +++ b/show-land/sass/layout/_help-users.scss @@ -0,0 +1,54 @@ +@use "sass:list"; +.help-users { + padding-top: $spaceBetweenSections; + padding-bottom: 6rem; + &__headline { + text-align: center; + font-size: $fontSize5Xl; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + } + &__paragraph { + text-align: center; + font-size: $fontSizeXl; + margin-bottom: list.nth($spaces, 8); + } + + &__info { + display: flex; + gap: list.nth($spaces, 16); + } + + &__section { + display: flex; + gap: list.nth($spaces, 4); + align-items: center; + } + + &__icone { + stroke: $colorwihte; + background-image: linear-gradient( + to right, + $colorThirteenth, + $colorFourteenth + ); + width: 4rem; + height: 4rem; + padding: list.nth($spaces, 4) list.nth($spaces, 4); + border-radius: $roundedFull; + } + + &__headline_1 { + font-size: $fontSize2Xl; + } + &__paragraph_1 { + color: $colorFifteenth; + margin-bottom: list.nth($spaces, 2); + } + &__link { + padding-bottom: list.nth($spaces, 2); + border-bottom: solid $colorwihte 0.1rem; + } +} diff --git a/show-land/sass/layout/_hero.scss b/show-land/sass/layout/_hero.scss new file mode 100644 index 0000000..ae509db --- /dev/null +++ b/show-land/sass/layout/_hero.scss @@ -0,0 +1,61 @@ +@use "sass:list"; + +.text-box { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.header-primary { + &__sub { + display: block; + text-transform: uppercase; + font-size: $fontSizeBase; + } + + &__main { + display: block; + font-size: 5rem; + margin-bottom: -3rem; + } + + &_main__1 { + display: block; + font-size: $fontSize8Xl; + } +} +.text-img { + outline-offset: 2rem; + outline: 0.2rem solid $colorGreyDark; + border-radius: $rounded2Xl; + + &__1 { + display: flex; + align-items: center; + justify-content: center; + margin-top: 30rem; + gap: list.nth($spaces, 4); + } + + &__2 { + display: flex; + align-items: center; + justify-content: center; + margin-top: list.nth($spaces, 4); + gap: list.nth($spaces, 4); + } +} +.text-img__box { + border-radius: $rounded2Xl; +} +.border { + &__1 { + border-bottom-left-radius: 0; + } + &__2 { + border-bottom-right-radius: 0; + } +} + diff --git a/show-land/sass/layout/_home-page.scss b/show-land/sass/layout/_home-page.scss new file mode 100644 index 0000000..6052029 --- /dev/null +++ b/show-land/sass/layout/_home-page.scss @@ -0,0 +1,53 @@ +@use "sass:list"; + +.home-page { + padding-top: $spaceBetweenSections; + padding-bottom: $spaceBetweenSections; + &__headline { + text-align: center; + font-size: 4.2rem; + font-weight: 900; + background-image: linear-gradient(to right, $colorNinth, $colorEighth); + -webkit-background-clip: text; + color: transparent; + } + + &__headline_1 { + text-align: center; + font-size: 2.8rem; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + } + &__description { + text-align: center; + font-size: $fontSizeLg; + margin-bottom: list.nth($spaces, 10); + } + &__description_1 { + text-align: center; + font-size: $fontSizeLg; + padding-bottom: list.nth($spaces, 16); + } + &__imgs { + display: grid; + grid-template-columns: repeat(3, 1fr); + row-gap: list.nth($spaces, 12); + column-gap: list.nth($spaces, 12); + } + &__img_boxs { + outline: 0.1px solid $colorEleventh; + outline-offset: 0.8rem; + border-radius: $rounded; + img{ + width: 100%; + } + } + &__number { + text-align: center; + font-size: $fontSize2Xl; + font-weight: $fontWeightBold; + padding: list.nth($spaces, 4) 0 list.nth($spaces, 4) 0; + } +} diff --git a/show-land/sass/layout/_page-builder.scss b/show-land/sass/layout/_page-builder.scss new file mode 100644 index 0000000..c4a9a09 --- /dev/null +++ b/show-land/sass/layout/_page-builder.scss @@ -0,0 +1,65 @@ +@use "sass:list"; +.page-builder { + display: flex; + gap: list.nth($spaces, 14); + padding-top: $spaceBetweenSections; + &__icone { + stroke: $colorwihte; + background-color: $colorSeventh; + padding: 0.2rem 0.2rem 0.2rem 0.2rem; + width: 1.7rem; + height: 1.7rem; + border-radius: $roundedFull; + margin-bottom: -0.4rem; + } + &__button { + display: inline-flex; + align-items: baseline; + border-radius: $roundedFull; + padding: 0 list.nth($spaces, 4) 0 list.nth($spaces, 4); + gap: list.nth($spaces, 2); + font-size: $defaultFontSize; + font-weight: 900; + color: $colorSeventh; + background-color: $colorwihte; + cursor: pointer; + } + &__headline { + font-size: 2.8rem; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + padding-top: list.nth($spaces, 2); + } + &__paragraph { + font-size: $fontSizeXl; + margin-bottom: list.nth($spaces, 11); + } + + &__feature { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 2.5rem; + margin-bottom: list.nth($spaces, 8); + } + + &__features { + display: inline-flex; + align-items: baseline; + gap: list.nth($spaces, 2); + outline: 0.1px solid $colorEleventh; + outline-offset: 0.4rem; + border-radius: $roundedFull; + padding: 0 2.8rem 0 0.4rem; + } + + &__icone_1 { + stroke: $colorBlack; + background-image: linear-gradient(to right, $colorwihte, $colorSeventh); + width: 1rem; + height: 1rem; + border-radius: $roundedFull; + margin-bottom: -0.1rem; + } +} diff --git a/show-land/sass/layout/_powerful-features.scss b/show-land/sass/layout/_powerful-features.scss new file mode 100644 index 0000000..d641745 --- /dev/null +++ b/show-land/sass/layout/_powerful-features.scss @@ -0,0 +1,45 @@ +@use "sass:list"; +.powerful-features { + padding-top: $spaceBetweenSections; + padding-bottom: 6rem; + &__headline { + text-align: center; + font-size: $fontSize5Xl; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + } + &__paragraph { + text-align: center; + font-size: $fontSizeXl; + } + &__feature { + display: grid; + grid-template-columns: repeat(4, 1fr); + row-gap: list.nth($spaces, 12); + column-gap: list.nth($spaces, 11); + margin-top: $fontSize4Xl; + } + &__paragrapha_1 { + display: flex; + align-items: baseline; + gap: list.nth($spaces, 2); + outline: 0.1px solid $colorEleventh; + outline-offset: 0.4rem; + border-radius: $roundedFull; + padding: 0 list.nth($spaces, 11) 0 list.nth($spaces, 2); + } + &__icone { + stroke: $colorBlack; + background-image: linear-gradient( + to right, + $colorThirteenth, + $colorFourteenth + ); + width: 1rem; + height: 1rem; + border-radius: $roundedFull; + margin-bottom: -0.1rem; + } +} diff --git a/show-land/sass/layout/_super-fast.scss b/show-land/sass/layout/_super-fast.scss new file mode 100644 index 0000000..c49bd8f --- /dev/null +++ b/show-land/sass/layout/_super-fast.scss @@ -0,0 +1,115 @@ +@use "sass:list"; + + +.super-fast { + display: flex; + align-items: center; + gap: 5rem; + padding-top: 8rem; + + &__info { + margin-top: -8em; + } + + &__icone { + stroke: $colorwihte; + width: 1rem; + height: 1rem; + margin-bottom: -2px; + } + + &__button { + display: inline-flex; + align-items: baseline; + gap: 4px; + background-image: linear-gradient(to right, $colorSecondary, $colorPrimary); + padding: nth($spaces, 1) nth($spaces, 4) nth($spaces, 1) nth($spaces, 4); + text-transform: uppercase; + font-weight: $fontWeightBold; + border-radius: $roundedFull; + cursor: pointer; + } + + &__headline { + font-size: 2.8rem; + font-weight: $fontWeightBold; + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + margin-top: list.nth($spaces, 1); + } + + &__paragraph { + font-size: $fontSizeXl; + } + &__performance { + display: inline-flex; + gap: list.nth($spaces, 2); + font-size: $fontSizeXl; + margin-top: list.nth($spaces, 4); + } + + &__feature { + display: flex; + gap: list.nth($spaces, 12); + } + + &__feature-1 { + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + font-weight: 900; + padding: 0 2.5rem 0 2.5rem; + outline: 1px solid $colorwihte; + outline-offset: 0.5rem; + border-radius: $roundedFull; + font-size: 5rem; + } + + &__feature-2 { + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + font-size: $fontSize5Xl; + padding: 1.8rem 1.5rem 1.8rem 1.5rem; + outline: 1px solid $colorwihte; + outline-offset: 0.5rem; + border-radius: $roundedFull; + } + + &__feature-3 { + display: flex; + justify-content: center; + margin-top: list.nth($spaces, 4); + background-image: linear-gradient(to right, $colorEighth, $colorSeventh); + -webkit-background-clip: text; + color: transparent; + font-size: $fontSizeXl; + } + + &_performance { + text-align: center; + margin-top: list.nth($spaces, 8); + margin-bottom: -2rem; + } + + &__icones { + display: flex; + gap: list.nth($spaces, 8); + justify-content: center; + align-items: center; + padding-bottom: list.nth($spaces, 16); + } + &__icone-google { + width: 10rem; + } + &__icone-gtmetrix { + width: 12rem; + } +} + +.icone-1 { + stroke: $colorPrimary; + width: 2rem; + height: 2rem; +} diff --git a/show-land/sass/layout/_top-nav.scss b/show-land/sass/layout/_top-nav.scss new file mode 100644 index 0000000..79d0a7c --- /dev/null +++ b/show-land/sass/layout/_top-nav.scss @@ -0,0 +1,31 @@ +@use "sass:list"; +.container { + .header { + display: flex; + justify-content: space-between; + } + + .logo { + padding-top: 0.8rem; + font-size: $fontSize4Xl; + font-weight: $fontWeightBold; + } + + .main-nav { + &__list { + display: flex; + padding-top: list.nth($spaces, 4); + gap: list.nth($spaces, 6); + list-style: none; + align-items: center; + } + &__link:link, + &__link:visited { + text-decoration: none; + font-size: $fontSizeBase; + color: $colorwihte; + text-transform: uppercase; + font-weight: $fontWeightBold; + } + } +} diff --git a/show-land/sass/main.scss b/show-land/sass/main.scss new file mode 100644 index 0000000..9c639b0 --- /dev/null +++ b/show-land/sass/main.scss @@ -0,0 +1,32 @@ +/*------------------------------------*\ + #ABSTRACTS +\*------------------------------------*/ +@import "../../shared/scss/abstracts/variables"; +@import "variables"; +@import "typography"; +@import "base"; +@import "../../shared/scss/abstracts/media-query"; + +/*------------------------------------*\ + #LAYOUTS +\*------------------------------------*/ +@import "layout/top-nav"; +@import "layout/home-page"; +@import "layout/super-fast"; +@import "layout/page-builder"; +@import "layout/benefits"; +@import "layout/features"; +@import "layout/hero"; +@import "layout/powerful-features"; +@import "layout/help-users"; +/*------------------------------------*\ + #BASE +\*------------------------------------*/ +@import "../../shared/scss/base/reset"; +@import "../../shared/scss/base/animation"; + +/*------------------------------------*\ + #COMPONENTS +\*------------------------------------*/ +@import "components/button"; +@import "components/demo-modal"; diff --git a/solar-land/README.md b/solar-land/README.md new file mode 100644 index 0000000..d7991a1 --- /dev/null +++ b/solar-land/README.md @@ -0,0 +1,5 @@ +### Main Hero Photo URL + +https://www.pexels.com/photo/field-of-a-solar-panels-15751120/ +https://www.pexels.com/photo/solar-technician-installing-solar-panel-8853507/ +https://unsplash.com/photos/two-men-carrying-a-metal-sheet-MagdWoazARo diff --git a/solar-land/css/style.css b/solar-land/css/style.css new file mode 100644 index 0000000..9867948 --- /dev/null +++ b/solar-land/css/style.css @@ -0,0 +1,719 @@ +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"); +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + font: inherit; +} + +body { + min-height: 100vh; +} + +ol, +ul { + list-style: none; +} + +img, +picture, +svg, +video { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +/*------------------------------------*\ + #FONT +\*------------------------------------*/ +/*------------------------------------*\ + #BREAKPOINTS +\*------------------------------------*/ +/*------------------------------------*\ + #SPACES (padding & margin & gap) +\*------------------------------------*/ +/*------------------------------------*\ + #TRANSITION DURATION +\*------------------------------------*/ +/*------------------------------------*\ + #BOX SHADOW +\*------------------------------------*/ +/*------------------------------------*\ + #BORDER RADIUS +\*------------------------------------*/ +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ +.quicksand-light { + font-family: "Quicksand", sans-serif; + font-weight: 300; + font-optical-sizing: auto; + font-style: normal; +} + +.quicksand-regular { + font-family: "Quicksand", sans-serif; + font-weight: 400; + font-optical-sizing: auto; + font-style: normal; +} + +.quicksand-medium { + font-family: "Quicksand", sans-serif; + font-weight: 500; + font-optical-sizing: auto; + font-style: normal; +} + +.quicksand-semibold { + font-family: "Quicksand", sans-serif; + font-weight: 600; + font-optical-sizing: auto; + font-style: normal; +} + +.quicksand-bold { + font-family: "Quicksand", sans-serif; + font-weight: 700; + font-optical-sizing: auto; + font-style: normal; +} + +.container { + width: 100%; +} +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +/*========================================================= +********* Generic Button Component +******* +*/ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1em 2em; + background-color: #fff; +} +.header .logo img { + height: 2.5rem; + width: auto; +} +.header .navigation ul { + display: flex; + list-style: none; + gap: 2em; +} +.header .navigation ul li a { + text-decoration: none; + color: #1e1e1e; + font-weight: 400; + transition: color 0.3s ease; +} +.header .navigation ul li a:hover { + color: #0dd47e; +} +.header .action-buttons { + display: flex; + gap: 1rem; +} +.header .action-buttons .login { + background: none; + color: #1e1e1e; + border-radius: 9999px; + border: 1px solid #f2f4f4; + padding: 0.5em 1em; + font-size: 1em; + font-weight: 400; + transition: none; + text-align: center; + cursor: pointer; +} +.header .action-buttons .login:hover { + background-color: #f2f4f4; +} +.header .action-buttons .get-in-touch { + background: #0dd47e; + color: #fff; + border-radius: 9999px; + border: none; + padding: 0.5em 1em; + font-size: 1em; + font-weight: 400; + transition: none; + text-align: center; + cursor: pointer; +} +.header .action-buttons .get-in-touch:hover { + background-color: #0dd47e; +} + +/*========================================================= +********* Generic Button Component +******* +*/ +.hero { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + height: 60vh; + background: url("../images/main-hero.jpg") center/cover no-repeat; + color: #f2f4f4; + text-align: left; + padding: 1em 2em; + margin: 0 auto; + border-radius: 1.5em; +} +.hero .hero-content { + z-index: 1; + max-width: 80%; +} +.hero .hero-content .tagline { + font-size: 1.125em; + font-weight: 500; + margin-bottom: 0.5em; + color: rgba(255, 255, 255, 0.7); +} +.hero .hero-content .title { + font-size: 3.75em; + font-weight: 700; + margin-bottom: 1em; +} +.hero .hero-content .actions { + display: flex; + gap: 1em; + justify-content: flex-start; + margin-top: 1em; +} +.hero .hero-content .actions .get-in-touch, +.hero .hero-content .actions .our-services { + background: none; + color: #f2f4f4; + border-radius: 0; + border: none; + padding: 0.5em 1em; + font-size: 1em; + font-weight: 400; + transition: none; + text-align: center; + cursor: pointer; + border-bottom: 1px solid #f2f4f4; +} +.hero .hero-content .actions .get-in-touch:hover, +.hero .hero-content .actions .our-services:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.hero .recent-project { + position: absolute; + top: 30%; + right: 2em; + transform: translateY(-50%); + display: flex; + flex-direction: column; + gap: 1em; + width: 15.625em; + height: 15.625em; +} +.hero .recent-project .recent-project-item { + background-color: rgba(255, 255, 255, 0.18); + backdrop-filter: blur(5px); + padding: 0.5em; + border-radius: 1em; + transition: transform 0.3s ease; + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 0.5em; +} +.hero .recent-project .recent-project-item:hover { + transform: scale(1.05); +} +.hero .recent-project .recent-project-item img { + width: 100%; + height: auto; + border-radius: 0.5em; + aspect-ratio: 1/1; + object-fit: cover; + grid-area: 1/1/5/5; +} +.hero .recent-project .recent-project-item .recent-project-options { + grid-area: 1/5/5/6; + grid-column-start: 5; +} +.hero .recent-project .recent-project-item .recent-project-options .recent-project-options-button { + background: none; + color: #f2f4f4; + border-radius: 9999px; + border: none; + padding: 0.5em; + font-size: 1em; + font-weight: 400; + transition: none; + text-align: center; + cursor: pointer; + width: 2.625em; + height: 2.625em; +} +.hero .recent-project .recent-project-item .recent-project-options .recent-project-options-button:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.hero .recent-project .recent-project-item .recent-project-button { + background: none; + color: #f2f4f4; + border-radius: 9999px; + border: 1px solid #f2f4f4; + padding: 0.5em; + font-size: 1em; + font-weight: 400; + transition: none; + text-align: center; + cursor: pointer; + width: 2.625em; + height: 2.625em; + grid-area: 5/1/6/3; +} +.hero .recent-project .recent-project-item .recent-project-button:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.hero .recent-project .recent-project-item .recent-project-button .arrow-icon { + padding: 0; +} +.hero .recent-project .recent-project-item .recent-project-caption { + color: #fff; + font-size: 0.875em; + text-align: center; + margin-top: 0.5em; + grid-area: 5/3/6/6; +} +.hero .arrow-icon { + width: 0.875em; + height: 0.875em; + padding-left: 0.5em; +} +.hero .statistics { + background-color: #fff; + color: #1e1e1e; + position: absolute; + display: flex; + gap: 1em; + bottom: 0; + right: 0; + padding: 1.25em; + border-radius: 1.5em 0 0 0; + max-width: 50%; +} +.hero .statistics .stat-item { + padding: 0.5em; +} +.hero .statistics .stat-item .stat-value { + font-size: 2.25em; + font-weight: 700; +} +.hero:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 0; + border-radius: 1.5em; +} + +.customers { + margin: 3em auto 1em; +} +.customers .customers-header { + display: flex; + gap: 1em; + margin: 1em auto 2em; +} +.customers .customers-header .customers-title { + font-size: 2.25em; + flex: 0 50%; +} +.customers .customers-header .customers-title span { + color: #8d959d; +} +.customers .customers-header .customers-text { + font-size: 1.125em; + flex: 0 50%; +} +.customers .customers-icons { + display: flex; + flex-direction: row; +} +.customers .customers-icons .customers-icon { + margin-right: 1em; + background-color: #f2f4f4; + padding: 0.5em; + border: 2px solid #f2f4f4; + border-radius: 9999px; + aspect-ratio: 1/1; + transition: all 0.3s ease-in; +} +.customers .customers-icons .customers-icon img { + width: 100%; + top: 25%; + position: relative; +} +.customers .customers-icons .customers-icon:hover { + background-color: #fff; + border: 2px solid #f2f4f4; +} + +.features { + background-color: rgb(223.2735849057, 225.5, 227.7264150943); + margin: 3em auto 1em; + padding: 3em 0; +} +.features .container { + margin: 0 auto; +} +.features .container .features-title { + font-size: 2.25em; + text-align: center; + margin-bottom: 1.5em; +} +.features .container .features-title span { + color: #8d959d; +} +.features .container .features-cards { + background-color: #f2f4f4; + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 0.5px solid rgb(223.2735849057, 225.5, 227.7264150943); + border-radius: 1.5em; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} +.features .container .features-cards .features-card { + padding: 1.5em; + border-right: 0.5px solid rgb(223.2735849057, 225.5, 227.7264150943); + border-bottom: 0.5px solid rgb(223.2735849057, 225.5, 227.7264150943); +} +.features .container .features-cards .features-card:nth-child(3), .features .container .features-cards .features-card:nth-child(6) { + border-right: none; +} +.features .container .features-cards .features-card:nth-child(n+4):nth-child(-n+6) { + border-bottom: none; +} +.features .container .features-cards .features-card .features-card-icon-svg { + width: 3em; + height: 3em; + fill: rgb(34.52, 241.48, 152.04); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + padding: 0.5em; +} +.features .container .features-cards .features-card .features-card-title { + font-size: 1.5em; + margin: 1em 0 0.5em; +} + +/*========================================================= +********* Generic Button Component +******* +*/ +.trusted { + margin: 0 auto; +} +.trusted .trusted-main { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(6, 1fr); + gap: 0.25em 2.5em; + padding: 3em 0; +} +.trusted .trusted-main .trusted-header { + grid-area: 1/1/4/3; +} +.trusted .trusted-main .trusted-header .trusted-title { + font-size: 3.75em; + font-weight: 700; + margin-bottom: 1em; +} +.trusted .trusted-main .trusted-header .trusted-title span { + color: #8d959d; +} +.trusted .trusted-main .trusted-header .trusted-button { + background: #0dd47e; + color: #fff; + border-radius: 9999px; + border: none; + padding: 1em; + font-size: 1em; + font-weight: 400; + transition: 150ms; + text-align: center; + cursor: pointer; +} +.trusted .trusted-main .trusted-header .trusted-button:hover { + background-color: rgb(34.52, 241.48, 152.04); +} +.trusted .trusted-main .trusted-header .trusted-button .arrow-icon { + width: 1.2em; + height: 1.2em; + padding-left: 0.25em; + padding-top: 0.25em; + display: inline-block; +} +.trusted .trusted-main .trusted-cards { + font-size: 1.5em; + grid-area: 4/1/7/3; + margin-top: 4em; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1em; +} +.trusted .trusted-main .trusted-cards .trusted-card { + padding: 1em; + border: 1px solid rgb(223.2735849057, 225.5, 227.7264150943); + border-radius: 1em; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.trusted .trusted-main .trusted-cards .trusted-card span { + color: #8d959d; +} +.trusted .trusted-main .trusted-cards .trusted-card a { + font-size: 0.875em; + text-decoration: underline; +} +.trusted .trusted-main .trusted-img { + grid-area: 1/3/7/5; +} +.trusted .trusted-main .trusted-img img { + border-radius: 1em; + object-fit: cover; + width: 100%; + height: 100%; +} + +.case-study { + margin: 0 auto; + padding: 3em 0; +} +.case-study .case-study-header .case-study-title { + font-size: 3em; + text-align: center; + width: 75%; +} +.case-study .case-study-header .case-study-title span { + color: #8d959d; +} +.case-study .case-study-card { + background: #f2f4f4; + padding: 0.5em; + margin: 2em auto; + border-radius: 0.5em; + display: flex; + gap: 2em; +} +.case-study .case-study-card .case-study-info { + padding: 1em; + flex: 5; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.case-study .case-study-card .case-study-info .case-study-title { + font-size: 1.5em; + font-weight: 700; + margin-bottom: 1em; +} +.case-study .case-study-card .case-study-info .case-study-text { + font-size: 1em; +} +.case-study .case-study-card .case-study-info .case-study-button { + background: #0dd47e; + color: #fff; + border-radius: 9999px; + border: none; + padding: 0.75em; + font-size: 1em; + font-weight: 400; + transition: 150ms; + text-align: center; + cursor: pointer; + margin-top: 1em; + width: max-content; +} +.case-study .case-study-card .case-study-info .case-study-button:hover { + background-color: rgb(34.52, 241.48, 152.04); +} +.case-study .case-study-card .case-study-info .case-study-author { + font-size: 1em; + font-weight: 700; + margin-top: 2em; +} +.case-study .case-study-card .case-study-info .case-study-author span { + color: #8d959d; + font-weight: 400; +} +.case-study .case-study-card .case-study-img { + flex: 4; +} +.case-study .case-study-card .case-study-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.5em; +} + +footer { + background-color: #1e1e1e; + color: #f2f4f4; + padding: 4em 2em; +} +footer .container { + margin: 0 auto; +} +footer .container .footer-top { + display: flex; + gap: 2em; +} +footer .container .footer-top .footer-top-title { + flex: 4; +} +footer .container .footer-top .footer-top-title h2 { + font-size: 2.25em; + font-weight: 700; +} +footer .container .footer-top .footer-top-title h2 span { + color: #8d959d; +} +footer .container .footer-top .footer-top-title p { + color: #f2f4f4; + display: inline-block; + margin: 1.25em; + margin-left: 0; +} +footer .container .footer-top .footer-top-title p .footer-top-title-check { + width: 1em; + height: 1em; + background-color: #0dd47e; + border-radius: 9999px; + color: #1e1e1e; + display: inline-block; +} +footer .container .footer-top .footer-top-description { + flex: 3; +} +footer .container .footer-top .footer-top-description p { + line-height: 1.5; + margin-bottom: 1.25em; +} +footer .container .footer-top .footer-top-description button { + background: #f2f4f4; + color: #1e1e1e; + border-radius: 9999px; + border: none; + padding: 1em; + font-size: 1em; + font-weight: 400; + transition: 150ms; + text-align: center; + cursor: pointer; +} +footer .container .footer-top .footer-top-description button:hover { + background-color: #8d959d; +} +footer .container .footer-top .footer-top-description button .arrow-icon { + width: 1.2em; + height: 1.2em; + padding-left: 0.25em; + padding-top: 0.25em; + display: inline-block; +} +footer .container .footer-nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4em 0 1.5em; + border-bottom: 1px solid #8d959d; +} +footer .container .footer-nav .logo img { + height: 2.5rem; + width: auto; +} +footer .container .footer-nav .navigation ul { + display: flex; + list-style: none; + gap: 2em; +} +footer .container .footer-nav .navigation ul li a { + text-decoration: none; + color: #f2f4f4; + font-weight: 400; + transition: color 0.3s ease; +} +footer .container .footer-nav .navigation ul li a:hover { + color: #0dd47e; +} +footer .container .footer-nav .action-buttons { + display: flex; + gap: 1em; +} +footer .container .footer-nav .action-buttons .social { + background: #8d959d; + color: #f2f4f4; + border-radius: 9999px; + border: none; + padding: 0.5em; + font-size: 0.875em; + font-weight: 700; + transition: none; + text-align: center; + cursor: pointer; + line-height: 1; + width: 2em; + height: 2em; +} +footer .container .footer-nav .action-buttons .social:hover { + background-color: rgb(114.179245283, 123.5, 132.820754717); +} +footer .container .footer-bottom { + display: flex; + justify-content: space-between; + margin: 2em 0 0; +} +footer .container .footer-bottom .footer-bottom-links a { + margin-left: 0.75em; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/solar-land/css/style.css.map b/solar-land/css/style.css.map new file mode 100644 index 0000000..5ac9d85 --- /dev/null +++ b/solar-land/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/_variables.scss","../../shared/scss/base/_reset.scss","../../shared/scss/abstracts/_variables.scss","../scss/_typography.scss","../scss/layout/_layout.scss","../../shared/scss/components/_button.scss","../scss/layout/_header.scss","../scss/layout/hero.scss","../scss/layout/_customers.scss","../scss/layout/_features.scss","../scss/layout/_trusted.scss","../scss/layout/_case-study.scss","../scss/layout/_footer.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/solar-land/images/case-study-1.jpg b/solar-land/images/case-study-1.jpg new file mode 100644 index 0000000..00a3e8c Binary files /dev/null and b/solar-land/images/case-study-1.jpg differ diff --git a/solar-land/images/main-hero.jpg b/solar-land/images/main-hero.jpg new file mode 100644 index 0000000..be8a764 Binary files /dev/null and b/solar-land/images/main-hero.jpg differ diff --git a/solar-land/images/solarland-logo.png b/solar-land/images/solarland-logo.png new file mode 100644 index 0000000..0af8b67 Binary files /dev/null and b/solar-land/images/solarland-logo.png differ diff --git a/solar-land/images/trusted.jpg b/solar-land/images/trusted.jpg new file mode 100644 index 0000000..bc4ba4f Binary files /dev/null and b/solar-land/images/trusted.jpg differ diff --git a/solar-land/images/weprodev-logo.png b/solar-land/images/weprodev-logo.png new file mode 100644 index 0000000..7fe3ab8 Binary files /dev/null and b/solar-land/images/weprodev-logo.png differ diff --git a/solar-land/index.html b/solar-land/index.html new file mode 100644 index 0000000..144bbe3 --- /dev/null +++ b/solar-land/index.html @@ -0,0 +1,551 @@ + + + + + + + SolarLand + + +
+ + +
+ + +
+
+ +
+
+
+
#1 Energy provider in the world
+

New Energy for the Future

+
+ + + +
+
+ +
+
+ Recent Project +
+ +
+ + +
+ Discover Our Recent Project +
+
+
+ +
+
+
6 mil
+
The company’s annual net income
+
+
+
315
+
Projects completed worldwide
+
+
+
120K
+
+ Employees work in all parts of the world +
+
+
+
+ +
+
+

+ Focusing on quality, we maintain customer trust +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae + optio esse totam, sed excepturi magni est voluptates dignissimos + modi beatae ipsa obcaecati molestias nihil numquam cum magnam + mollitia voluptatibus. Facere. +

+
+ +
+
+ Customer Icon +
+ +
+ Customer Icon +
+ +
+ Customer Icon +
+ +
+ Customer Icon +
+ +
+ Customer Icon +
+
+
+ +
+
+
+

+ We offer quality with the best materials and services +

+
+ +
+
+
+ + + +
+

+ Layered security +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+ +
+
+ + + +
+

+ Quality control of each part +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+ +
+
+ + + +
+

+ Realiable customer service +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+ +
+
+ + + +
+

+ Maintenance manual book +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+ +
+
+ + + +
+

+ Delivery safely +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+ +
+
+ + + +
+

+ Based on artifical intelligence +

+

+ We have been working on quality since 2014. Our team has been + working on quality since 2014. Our team has been working on +

+
+
+
+
+ +
+
+
+

+ Trusted services, for your various needs +

+ +
+ +
+
+ 01 +

solar panels for home

+ View Details +
+ +
+ 01 +

solar panels for home

+ View Details +
+ +
+ 01 +

solar panels for home

+ View Details +
+ +
+ 01 +

solar panels for home

+ View Details +
+
+ +
+ trusted +
+
+
+ +
+
+

+ See how we solve problems, right on target +

+
+ +
+
+

Medtronic

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non + autem alias ab officia maiores voluptates tempore eaque vel + veritatis, accusamus incidunt at perspiciatis pariatur neque! Illo + ullam ea illum unde? +

+ + +

+ jeniffer koloba - CEO EG Mecha +

+
+
+ case study 1 +
+
+
+
+ + + + diff --git a/solar-land/scss/_typography.scss b/solar-land/scss/_typography.scss new file mode 100644 index 0000000..cbe9ae5 --- /dev/null +++ b/solar-land/scss/_typography.scss @@ -0,0 +1,26 @@ +@mixin quicksand-font($weight) { + font-family: $primaryFontFamily, sans-serif; + font-weight: $weight; + font-optical-sizing: auto; + font-style: normal; +} + +.quicksand-light { + @include quicksand-font(300); +} + +.quicksand-regular { + @include quicksand-font(400); +} + +.quicksand-medium { + @include quicksand-font(500); +} + +.quicksand-semibold { + @include quicksand-font(600); +} + +.quicksand-bold { + @include quicksand-font(700); +} diff --git a/solar-land/scss/_variables.scss b/solar-land/scss/_variables.scss new file mode 100644 index 0000000..4161b21 --- /dev/null +++ b/solar-land/scss/_variables.scss @@ -0,0 +1,12 @@ +/*------------------------------------*\ + #COLORS +\*------------------------------------*/ +$primaryColor: #0dd47e; +$secondaryColor: #8d959d; +$darkColor: #1e1e1e; +$lightColor: #f2f4f4; + +// defining fonts +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"); + +$primaryFontFamily: "Quicksand"; diff --git a/solar-land/scss/layout/_case-study.scss b/solar-land/scss/layout/_case-study.scss new file mode 100644 index 0000000..f369f22 --- /dev/null +++ b/solar-land/scss/layout/_case-study.scss @@ -0,0 +1,80 @@ +@use "sass:list"; +@use "sass:color"; + +.case-study { + margin: 0 auto; + padding: list.nth($spaces, 12) 0; + + .case-study-header { + .case-study-title { + font-size: $fontSize5Xl; + text-align: center; + width: 75%; + + span { + color: $secondaryColor; + } + } + } + + .case-study-card { + background: $lightColor; + padding: list.nth($spaces, 2); + margin: list.nth($spaces, 8) auto; + border-radius: $roundedLg; + display: flex; + gap: list.nth($spaces, 8); + + .case-study-info { + padding: list.nth($spaces, 4); + flex: 5; + display: flex; + flex-direction: column; + justify-content: space-between; + + .case-study-title { + font-size: $fontSize2Xl; + font-weight: $fontWeightBold; + margin-bottom: list.nth($spaces, 4); + } + + .case-study-text { + font-size: $fontSizeBase; + } + + .case-study-button { + @include button( + $bg: $primaryColor, + $border: none, + $radius: $roundedFull, + $padding: list.nth($spaces, 3), + $hoverBgColor: color.adjust($primaryColor, $lightness: 10%), + $transition: map-get($durations, 150) + ); + margin-top: list.nth($spaces, 4); + width: max-content; + } + + .case-study-author { + font-size: $fontSizeBase; + font-weight: $fontWeightBold; + margin-top: list.nth($spaces, 8); + span { + color: $secondaryColor; + font-weight: $fontWeightRegular; + } + } + } + + .case-study-img { + flex: 4; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $roundedLg; + } + } + } +} diff --git a/solar-land/scss/layout/_customers.scss b/solar-land/scss/layout/_customers.scss new file mode 100644 index 0000000..1f427e1 --- /dev/null +++ b/solar-land/scss/layout/_customers.scss @@ -0,0 +1,51 @@ +@use "sass:list"; + +.customers { + margin: list.nth($spaces, 12) auto list.nth($spaces, 4); + + .customers-header { + display: flex; + gap: list.nth($spaces, 4); + margin: list.nth($spaces, 4) auto list.nth($spaces, 8); + + .customers-title { + font-size: $fontSize4Xl; + flex: 0 50%; + + span { + color: $secondaryColor; + } + } + + .customers-text { + font-size: $fontSizeLg; + flex: 0 50%; + } + } + + .customers-icons { + display: flex; + flex-direction: row; + + .customers-icon { + margin-right: list.nth($spaces, 4); + background-color: $lightColor; + padding: list.nth($spaces, 2); + border: 2px solid $lightColor; + border-radius: $roundedFull; + aspect-ratio: 1 / 1; + transition: all 0.3s ease-in; + + img { + width: 100%; + top: 25%; + position: relative; + } + + &:hover { + background-color: #fff; + border: 2px solid $lightColor; + } + } + } +} diff --git a/solar-land/scss/layout/_features.scss b/solar-land/scss/layout/_features.scss new file mode 100644 index 0000000..22cc5c1 --- /dev/null +++ b/solar-land/scss/layout/_features.scss @@ -0,0 +1,60 @@ +@use "sass:list"; +@use "sass:color"; + +.features { + background-color: color.adjust($secondaryColor, $lightness: 30%); + margin: list.nth($spaces, 12) auto list.nth($spaces, 4); + padding: list.nth($spaces, 12) 0; + + .container { + margin: 0 auto; + + + .features-title { + font-size: $fontSize4Xl; + text-align: center; + margin-bottom: list.nth($spaces, 6); + + span { + color: $secondaryColor; + } + } + + .features-cards { + background-color: $lightColor; + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 0.5px solid color.adjust($secondaryColor, $lightness : 30%); + border-radius: $rounded3Xl; + box-shadow: $shadowSm; + + .features-card { + padding: list.nth($spaces, 6); + border-right: 0.5px solid color.adjust($secondaryColor, $lightness : 30%); + border-bottom: 0.5px solid color.adjust($secondaryColor, $lightness : 30%); + + &:nth-child(3), + &:nth-child(6) { + border-right: none; + } + + &:nth-child(n + 4):nth-child(-n + 6) { + border-bottom: none; + } + + .features-card-icon-svg { + width: 3em; + height: 3em; + fill: color.adjust($primaryColor, $lightness: 10%); + box-shadow: $shadowSm; + padding: list.nth($spaces, 2); + } + + .features-card-title { + font-size: $fontSize2Xl; + margin: list.nth($spaces, 4) 0 list.nth($spaces, 2); + } + } + } +} +} diff --git a/solar-land/scss/layout/_footer.scss b/solar-land/scss/layout/_footer.scss new file mode 100644 index 0000000..34dfcbf --- /dev/null +++ b/solar-land/scss/layout/_footer.scss @@ -0,0 +1,140 @@ +@use "sass:list"; + +footer { + background-color: $darkColor; + color: $lightColor; + padding: list.nth($spaces, 16) list.nth($spaces, 8); + + .container { + margin: 0 auto; + + .footer-top { + display: flex; + gap: list.nth($spaces, 8); + + .footer-top-title { + flex: 4; + h2 { + font-size: $fontSize4Xl; + font-weight: $fontWeightBold; + + span { + color: $secondaryColor; + } + } + + p { + color: $lightColor; + display: inline-block; + margin: list.nth($spaces, 5); + margin-left: 0; + + .footer-top-title-check { + width: 1em; + height: 1em; + background-color: $primaryColor; + border-radius: $roundedFull; + color: $darkColor; + display: inline-block; + } + } + } + + .footer-top-description { + flex: 3; + + p { + line-height: 1.5; + margin-bottom: list.nth($spaces, 5); + } + + button { + @include button( + $bg: $lightColor, + $color: $darkColor, + $border: none, + $radius: $roundedFull, + $padding: list.nth($spaces, 4), + $hoverBgColor: $secondaryColor, + $transition: map-get($durations, 150) + ); + + .arrow-icon { + width: 1.2em; + height: 1.2em; + padding-left: list.nth($spaces, 1); + padding-top: list.nth($spaces, 1); + display: inline-block; + } + } + } + } + + .footer-nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: list.nth($spaces, 16) 0 list.nth($spaces, 6); + border-bottom: 1px solid $secondaryColor; + + .logo { + img { + height: 2.5rem; + width: auto; + } + } + + .navigation { + ul { + display: flex; + list-style: none; + gap: list.nth($spaces, 8); + + li { + a { + text-decoration: none; + color: $lightColor; + font-weight: $fontWeightRegular; + transition: color 0.3s ease; + + &:hover { + color: $primaryColor; + } + } + } + } + } + + .action-buttons { + display: flex; + gap: list.nth($spaces, 4); + + .social { + @include button( + $bg: $secondaryColor, + $color: $lightColor, + $fontSize: $fontSizeSm, + $fontWeight: $fontWeightBold, + $radius: $roundedFull, + $padding: list.nth($spaces, 2) + ); + line-height: 1; + width: 2em; + height: 2em; + } + } + } + + .footer-bottom { + display: flex; + justify-content: space-between; + margin: list.nth($spaces, 8) 0 0; + + .footer-bottom-links { + a { + margin-left: list.nth($spaces, 3); + } + } + } + } +} diff --git a/solar-land/scss/layout/_header.scss b/solar-land/scss/layout/_header.scss new file mode 100644 index 0000000..b27413b --- /dev/null +++ b/solar-land/scss/layout/_header.scss @@ -0,0 +1,65 @@ +@use "sass:list"; +@import "../../../shared/scss/components/button"; + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: list.nth($spaces, 4) list.nth($spaces, 8); + background-color: #fff; + + .logo { + img { + height: 2.5rem; + width: auto; + } + } + + .navigation { + ul { + display: flex; + list-style: none; + gap: list.nth($spaces, 8); + + li { + a { + text-decoration: none; + color: $darkColor; + font-weight: $fontWeightRegular; + transition: color 0.3s ease; + + &:hover { + color: $primaryColor; + } + } + } + } + } + + .action-buttons { + display: flex; + gap: 1rem; + + .login { + @include button( + $bg: none, + $color: $darkColor, + $border: 1px solid $lightColor, + $radius: $roundedFull, + $fontWeight: $fontWeightRegular, + $hoverBgColor: $lightColor, + $padding: list.nth($spaces, 2) list.nth($spaces, 4) + ); + } + + .get-in-touch { + @include button( + $bg: $primaryColor, + $color: #fff, + $radius: $roundedFull, + $hoverBgColor: $primaryColor, + $padding: list.nth($spaces, 2) list.nth($spaces, 4) + ); + } + } +} diff --git a/solar-land/scss/layout/_layout.scss b/solar-land/scss/layout/_layout.scss new file mode 100644 index 0000000..84f58d3 --- /dev/null +++ b/solar-land/scss/layout/_layout.scss @@ -0,0 +1,24 @@ +// TODO: temporary layout. we should to create a shared layout for containers, grid and some other general styles +.container { + width: 100%; + + @media (min-width: 640px) { + max-width: 640px; + } + + @media (min-width: 768px) { + max-width: 768px; + } + + @media (min-width: 1024px) { + max-width: 1024px; + } + + @media (min-width: 1280px) { + max-width: 1280px; + } + + @media (min-width: 1536px) { + max-width: 1536px; + } +} diff --git a/solar-land/scss/layout/_trusted.scss b/solar-land/scss/layout/_trusted.scss new file mode 100644 index 0000000..46d43de --- /dev/null +++ b/solar-land/scss/layout/_trusted.scss @@ -0,0 +1,86 @@ +@use "sass:list"; +@use "sass:color"; +@import "../../../shared/scss/components/button"; + +.trusted { + margin: 0 auto; + + .trusted-main { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(6, 1fr); + gap: list.nth($spaces, 1) list.nth($spaces, 10); + padding: list.nth($spaces, 12) 0; + + .trusted-header { + grid-area: 1 / 1 / 4 / 3; + + .trusted-title { + font-size: $fontSize6Xl; + font-weight: $fontWeightBold; + margin-bottom: list.nth($spaces, 4); + + span { + color: $secondaryColor; + } + } + + .trusted-button { + @include button( + $bg: $primaryColor, + $border: none, + $radius: $roundedFull, + $padding: list.nth($spaces, 4), + $hoverBgColor: color.adjust($primaryColor, $lightness: 10%), + $transition: map-get($durations, 150) + ); + + .arrow-icon { + width: 1.2em; + height: 1.2em; + padding-left: list.nth($spaces, 1); + padding-top: list.nth($spaces, 1); + display: inline-block; + } + } + } + + .trusted-cards { + font-size: $fontSize2Xl; + grid-area: 4 / 1 / 7 / 3; + margin-top: list.nth($spaces, 16); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: list.nth($spaces, 4); + + .trusted-card { + padding: list.nth($spaces, 4); + border: 1px solid color.adjust($secondaryColor, $lightness: 30%); + border-radius: $rounded2Xl; + display: flex; + flex-direction: column; + justify-content: space-between; + + span { + color: $secondaryColor; + } + + a { + font-size: $fontSizeSm; + text-decoration: underline; + } + } + } + + .trusted-img { + grid-area: 1 / 3 / 7 / 5; + + img { + border-radius: $rounded2Xl; + object-fit: cover; + width: 100%; + height: 100%; + } + } + } +} diff --git a/solar-land/scss/layout/hero.scss b/solar-land/scss/layout/hero.scss new file mode 100644 index 0000000..73d2fd3 --- /dev/null +++ b/solar-land/scss/layout/hero.scss @@ -0,0 +1,174 @@ +@use "sass:list"; +@use "sass:color"; +@import "../../../shared/scss/components/button"; + +.hero { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + height: 60vh; + background: url("../images/main-hero.jpg") center/cover no-repeat; + color: $lightColor; + text-align: left; + padding: list.nth($spaces, 4) list.nth($spaces, 8); + margin: 0 auto; + border-radius: $rounded3Xl; + + .hero-content { + z-index: 1; + max-width: 80%; + + .tagline { + font-size: $fontSizeLg; + font-weight: $fontWeightMedium; + margin-bottom: list.nth($spaces, 2); + color: rgba(255, 255, 255, 0.7); + } + + .title { + font-size: $fontSize6Xl; + font-weight: $fontWeightBold; + margin-bottom: list.nth($spaces, 4); + } + + .actions { + display: flex; + gap: list.nth($spaces, 4); + justify-content: flex-start; + margin-top: list.nth($spaces, 4); + + .get-in-touch, + .our-services { + @include button( + $bg: none, + $color: $lightColor, + $hoverBgColor: rgba(255, 255, 255, 0.1), + $padding: list.nth($spaces, 2) list.nth($spaces, 4) + ); + border-bottom: 1px solid $lightColor; + } + } + } + + .recent-project { + position: absolute; + top: 30%; + right: list.nth($spaces, 8); + transform: translateY(-50%); + display: flex; + flex-direction: column; + gap: list.nth($spaces, 4); + width: 15.625em; + height: 15.625em; + + .recent-project-item { + background-color: rgba(255, 255, 255, 0.18); + backdrop-filter: blur(5px); + padding: list.nth($spaces, 2); + border-radius: $rounded2Xl; + transition: transform 0.3s ease; + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: list.nth($spaces, 2); + + &:hover { + transform: scale(1.05); + } + + img { + width: 100%; + height: auto; + border-radius: $roundedLg; + aspect-ratio: 1 / 1; + object-fit: cover; + grid-area: 1 / 1 / 5 / 5; + } + + .recent-project-options { + grid-area: 1 / 5 / 5 / 6; + grid-column-start: 5; + + .recent-project-options-button { + @include button( + $bg: none, + $color: $lightColor, + $hoverBgColor: rgba(255, 255, 255, 0.1), + $padding: list.nth($spaces, 2), + $radius: $roundedFull, + $border: none + ); + width: 2.625em; + height: 2.625em; + } + } + + .recent-project-button { + @include button( + $bg: none, + $color: $lightColor, + $hoverBgColor: rgba(255, 255, 255, 0.1), + $padding: list.nth($spaces, 2), + $radius: $roundedFull, + $border: 1px solid $lightColor + ); + width: 2.625em; + height: 2.625em; + grid-area: 5 / 1 / 6 / 3; + + .arrow-icon { + padding: 0; + } + } + + .recent-project-caption { + color: #fff; + font-size: $fontSizeSm; + text-align: center; + margin-top: list.nth($spaces, 2); + grid-area: 5 / 3 / 6 / 6; + } + } + } + + .arrow-icon { + width: 0.875em; + height: 0.875em; + padding-left: list.nth($spaces, 2); + } + + .statistics { + background-color: #fff; + color: $darkColor; + position: absolute; + display: flex; + gap: list.nth($spaces, 4); + bottom: 0; + right: 0; + padding: list.nth($spaces, 5); + border-radius: $rounded3Xl 0 0 0; + max-width: 50%; + + .stat-item { + padding: list.nth($spaces, 2); + + .stat-value { + font-size: $fontSize4Xl; + font-weight: $fontWeightBold; + } + } + } + + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 0; + border-radius: $rounded3Xl; + } +} diff --git a/solar-land/scss/main.scss b/solar-land/scss/main.scss new file mode 100644 index 0000000..c0245f0 --- /dev/null +++ b/solar-land/scss/main.scss @@ -0,0 +1,12 @@ +@import "../../shared/scss/base/reset"; +@import "../../shared//scss/abstracts/variables"; +@import "variables"; +@import "typography"; +@import "layout/layout"; +@import "layout/header"; +@import "layout/hero"; +@import "layout/customers"; +@import "layout/features"; +@import "layout/trusted"; +@import "layout/case-study"; +@import "layout/footer";