add overview responsive

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"liveServer.settings.port": 5501
+}

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;
-    }
-}
+	.navbar .actions {
+		display: none;
+	}
+}

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 {

index.html

@@ -166,12 +166,12 @@
 
 				<!-- Navigation -->
 				<ul id="mobile-nav"></ul>
-                <script>
-                    const pcNav = document.querySelector('#pc-nav');
-                    const mobileNav = document.querySelector('#mobile-nav');
+				<script>
+					const pcNav = document.querySelector("#pc-nav");
+					const mobileNav = document.querySelector("#mobile-nav");
 
-                    mobileNav.innerHTML = pcNav.innerHTML;
-                </script>
+					mobileNav.innerHTML = pcNav.innerHTML;
+				</script>
 			</div>
 		</header>