responsive design and favicon added

erickdc7 · Jan 22, 2023 · 06845a6 · 06845a6
1 parent 74c092e
commit 06845a6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -6,7 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>Merry Christmas</title>
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <title>Merry Christmas Card</title>
 </head>
 
 <body>

diff --git a/style.css b/style.css
@@ -92,3 +92,60 @@ body {
   width: 400px;
   transition: all 0.3s ease-out;
 }
+
+@media screen and (max-width: 500px) {
+  body {
+    overflow: hidden;
+  }
+
+  .card {
+    width: 100%;
+    height: auto;
+  }
+
+  .card .images .santa {
+    width: calc(400px - 50px);
+  }
+
+  .card .title {
+    top: 20px;
+  }
+
+  .card .images .tree {
+    width: calc(400px - 50px);
+  }
+
+  .card .title h2 {
+    font-size: 25px;
+  }
+
+  .card .title h1 {
+    font-size: 50px;
+  }
+
+  .card .title h3 {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 300px) {
+  .card .images .santa {
+    width: calc(400px - 150px);
+  }
+
+  .card .images .tree {
+    width: calc(400px - 150px);
+  }
+
+  .card .title h2 {
+    font-size: 25px;
+  }
+
+  .card .title h1 {
+    font-size: 40px;
+  }
+
+  .card .title h3 {
+    font-size: 20px;
+  }
+}