init

assets/style.css

@@ -1,10 +1,10 @@
 body {
 	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	color: rgb(31, 41, 55);
 }
 
 h1 {
-	font-size: 16px;
+	font-size: 22px;
 	margin-top: 0;
 }
 
@@ -16,11 +16,8 @@ p {
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
+	margin: 0 10px;
 	padding: 10px;
-	border: 1px solid lightgray;
-	border-radius: 10px;
 }
 
 .card p:last-child {
@@ -203,4 +200,61 @@ a:hover, a:focus {
 	color: #fff;
 	background: linear-gradient(135deg, #184fee 0%, #144acc 40%, #144acc 100%);
 	box-shadow: 0 3px 15px -1px rgba(39, 94, 254, 0.5);
-}
+}
+
+footer {
+	margin-top: 1rem;
+	color: #9ca3af;
+	text-align: center;
+}
+
+footer:hover {
+	color:#184fee;
+}
+
+/* Largest devices such as desktops (1280px) */
+@media only screen and (max-width: 80em) {
+	.card_4 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	
+	.g2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* Large devices such as laptops (1024px) */
+@media only screen and (max-width: 64em) {
+	.card_4 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	
+	.g2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* Medium devices such as tablets (768px) */
+@media only screen and (max-width: 48em) {
+	.card_4 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	
+	.g2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media only screen and (max-width: 40em) {
+	.card_4 {
+		grid-template-columns: repeat(1, 1fr);
+	}
+	
+	.g2 {
+		grid-template-columns: repeat(1, 1fr);
+	}
+}
+
+
+
+

index.html

@@ -126,6 +126,7 @@
 			</div>
 		</article>
 	</div>
+	<footer>&copy;2024 WebNN API</footer>
 </body>
 
 </html>