diff --git a/.vscode/settings.json b/.vscode/settings.json
index 89d1965..ee56926 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
{
- "editor.formatOnSave": true,
- "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
\ No newline at end of file
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "liveServer.settings.port": 5501
+}
diff --git a/assets/css/responsive.css b/assets/css/responsive.css
index 18dc759..077d1a7 100644
--- a/assets/css/responsive.css
+++ b/assets/css/responsive.css
@@ -1,97 +1,175 @@
/* PC */
@media screen and (min-width: 992px) {
- .mobile-header {
- display: none;
- }
+ .mobile-header {
+ display: none;
+ }
- .show-on-mobile {
- display: none;
- }
+ .show-on-mobile {
+ display: none;
+ }
}
/* Avoid overlapping code */
/* Tablet and mobile */
@media screen and (max-width: 991px) {
- .navbar {
- position: relative;
- }
+ .navbar {
+ position: relative;
+ }
- .navbar .logo {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
+ .navbar .logo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
- .navbar ul {
- display: none;
- }
+ .navbar ul {
+ display: none;
+ }
- .toggle-menu svg {
- width: 24px;
- color: #666;
- }
+ .toggle-menu svg {
+ width: 24px;
+ color: #666;
+ }
- .menu-overlay {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.3);
- z-index: 1;
- opacity: 0;
- visibility: hidden;
- transition: 0.25s ease;
- }
+ .menu-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.3);
+ z-index: 1;
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.25s ease;
+ }
- .menu-drawer {
- padding: 60px;
- position: fixed;
- inset: 0 40% 0 0;
- background: #fff;
- z-index: 2;
- transform: translateX(-100%);
- transition: 0.25s ease;
- font-weight: 500;
- }
+ .menu-drawer {
+ padding: 60px;
+ position: fixed;
+ inset: 0 40% 0 0;
+ background: #fff;
+ z-index: 2;
+ transform: translateX(-100%);
+ transition: 0.25s ease;
+ font-weight: 500;
+ }
+
+ .menu-drawer ul {
+ margin-top: 32px;
+ }
+
+ .menu-drawer ul a {
+ display: block;
+ color: #333;
+ padding: 14px 0;
+ }
+
+ .menu-checkbox:checked ~ .menu-overlay {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .menu-checkbox:checked ~ .menu-drawer {
+ transform: translateX(0);
+ }
+
+ .separate {
+ border-top: 1px solid #ebebeb;
+ }
+
+ .hero-img {
+ display: none;
+ }
+
+ .hero-wrap .info {
+ width: 90%;
+ margin: 0 auto;
+ text-align: center;
+ }
- .menu-drawer ul {
- margin-top: 32px;
+ .hero .desc {
+ width: 65%;
+ margin: 30px auto auto;
+ }
+
+ .client .images {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .guide-item {
+ margin: 0;
+ flex: 1;
+ }
+
+ .featured .list {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .stats .row {
+ flex-direction: column;
+ }
+
+ .stats .info,
+ .stats .img-block {
+ width: 100%;
+ }
+
+ .stats .img-block {
+ order: 2;
}
- .menu-drawer ul a {
- display: block;
- color: #333;
- padding: 14px 0;
+ .stats .info {
+ order: 1;
+ padding: 0;
}
- .menu-checkbox:checked ~ .menu-overlay {
- opacity: 1;
- visibility: visible;
+ .stats .sub-title {
+ width: 70%;
}
- .menu-checkbox:checked ~ .menu-drawer {
- transform: translateX(0);
+ .stats .info .desc {
+ width: 100%;
+ margin-bottom: 80px;
}
- .separate {
- border-top: 1px solid #ebebeb;
+ .stats .row-qty {
+ flex-direction: row;
}
+
+ .stats .qty {
+ font-size: 5rem;
+ }
+
+ .stats .qty-desc {
+ font-size: 1.5rem;
+ }
+
+ .subscription .image {
+ display: none;
+ }
+
+ .footer .row-top {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ row-gap: 80px;
+ }
}
/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
- .show-on-mobile {
- display: none;
- }
+ .show-on-mobile {
+ display: none;
+ }
}
/* Mobile */
@media screen and (max-width: 767px) {
- .menu-drawer {
- inset: 0 25% 0 0;
- padding: 40px;
- }
+ .menu-drawer {
+ inset: 0 25% 0 0;
+ padding: 40px;
+ }
- .navbar .actions {
- display: none;
- }
-}
\ No newline at end of file
+ .navbar .actions {
+ display: none;
+ }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 8e8ac71..801a26b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -187,7 +187,7 @@ a {
border-radius: 12px;
}
-.client a:not(.client .images a:nth-child(3)):hover {
+.client a:hover {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}
@@ -317,7 +317,8 @@ a {
}
.featured .list {
- display: flex;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
margin-top: 70px;
gap: 30px;
}
@@ -516,7 +517,7 @@ a {
.stats .qty {
color: #000;
- font-size: 64px;
+ font-size: 6.4rem;
font-weight: 600;
line-height: 100%;
}
@@ -587,7 +588,7 @@ a {
}
.footer .row-top {
- gap: 185px;
+ column-gap: 185px;
}
.footer .heading {
diff --git a/assets/img/client-3.svg b/assets/img/client-3.svg
index e7eba15..cef0038 100644
--- a/assets/img/client-3.svg
+++ b/assets/img/client-3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 2f7064d..c2c3924 100644
--- a/index.html
+++ b/index.html
@@ -166,12 +166,12 @@
-
+ mobileNav.innerHTML = pcNav.innerHTML;
+