edit css

Author: LiyemaMfengwana

Wireframe/style.css

@@ -16,154 +16,196 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
-:root{
-  --ink:#111;
-  --line:#222;
-  --muted:#6a6a6a;
-  --bg:#fafafa;
-  --card:#ffffff;
-  --accent:#111;
+:root {
+  --ink: #111;
+  --line: #222;
+  --muted: #6a6a6a;
+  --bg: #fafafa;
+  --card: #ffffff;
+  --accent: #111;
 }
 
-*{box-sizing:border-box}
-html,body{margin:0;padding:0}
-body{
-  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-  color:var(--ink);
-  background:var(--bg);
-  line-height:1.55;
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Arial,
+    sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.55;
+  padding-bottom: 70px;
 }
 
-.container{
+.container {
   max-width: 920px;
   margin: 0 auto;
   padding: 0 16px 48px;
 }
 
 /* Header matches the sketchy title style */
-.page-hero{
-  text-align:center;
+.page-hero {
+  text-align: center;
   padding: 28px 16px 8px;
 }
-.page-title{
+.page-title {
   font-family: "Kalam", cursive;
   font-size: 42px;
   margin: 12px 0 4px;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
-.page-subtitle{
+.page-subtitle {
   font-family: "Kalam", cursive;
-  color:var(--muted);
+  color: var(--muted);
   font-size: 14px;
-  margin:0;
-  letter-spacing: .5px;
+  margin: 0;
+  letter-spacing: 0.5px;
 }
 
 /* Cards */
-.card{
-  background:var(--card);
-  border:2px solid var(--line);
-  border-radius:2px;
+.card {
+  background: var(--card);
+  border: 2px solid var(--line);
+  border-radius: 2px;
   margin: 18px 0;
-  overflow:hidden;
+  overflow: hidden;
 }
-.card--featured{
+.card--featured {
   /* visually wider like the top box in the wireframe */
 }
-.card__media{
-  position:relative;
+.card__media {
+  position: relative;
   height: 240px;
-  border-bottom:2px solid var(--line);
+  border-bottom: 2px solid var(--line);
 }
-.card--featured .card__media{ height: 280px; }
-
-.fake-img{
-  background:#fff;
-}
-.fake-img .diag{
-  position:absolute;
-  top:0;left:0;right:0;bottom:0;
-  pointer-events:none;
-}
-.fake-img .diag.left{
-  background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% );
-  opacity:.7;
+.card--featured .card__media {
+  height: 280px;
 }
-.fake-img .diag.right{
-  background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% );
-  opacity:.7;
+
+.fake-img {
+  background: #fff;
+}
+.fake-img .diag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.fake-img .diag.left {
+  background: linear-gradient(
+    to bottom right,
+    transparent 49%,
+    var(--line) 50%,
+    transparent 51%
+  );
+  opacity: 0.7;
+}
+.fake-img .diag.right {
+  background: linear-gradient(
+    to top right,
+    transparent 49%,
+    var(--line) 50%,
+    transparent 51%
+  );
+  opacity: 0.7;
 }
 
-.card__body{
+.card__body {
   padding: 16px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.card__title{
-  font-family:"Kalam", cursive;
+.card__title {
+  font-family: "Kalam", cursive;
   font-size: 20px;
   margin: 0 0 6px;
 }
-.card__summary{
+.card__summary {
   margin: 0 0 12px;
-  color:#333;
+  color: #333;
   font-size: 14px;
 }
 
-.btn{
-  display:inline-block;
-  border:2px solid var(--line);
-  padding:6px 12px;
-  font-size:13px;
-  color:var(--accent);
-  text-decoration:none;
-  border-radius:3px;
-  background:#f7f7f7;
+.btn {
+  display: block;
+  border: 2px solid var(--line);
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--accent);
+  text-decoration: none;
+  border-radius: 3px;
+  background: #f7f7f7;
+  text-align: center;
 }
 
 /* Two-column grid for the lower row */
-.grid{
-  display:grid;
+.grid {
+  display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
   margin-top: 22px;
 }
 
-.details{
+.details {
   max-width: 920px;
   margin: 10px auto 0;
   padding: 0 2px;
 }
-.details h3{
+.details h3 {
   font-size: 16px;
   margin: 22px 0 8px;
-  font-weight:600;
+  font-weight: 600;
 }
-.details ul{
+.details ul {
   margin: 0 0 8px 18px;
 }
 
 /* Footer */
-.site-footer{
-  border-top:2px solid var(--line);
-  margin-top: 36px;
+.site-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-top: 2px solid var(--line);
   padding: 18px 12px;
-  text-align:center;
-  font-family:"Kalam", cursive;
-  font-size:12px;
-  color:#222;
+  text-align: center;
+  font-family: "Kalam", cursive;
+  font-size: 12px;
+  color: #222;
+  background: var(--bg);
 }
 
 /* Responsiveness */
-@media (max-width: 780px){
-  .grid{ grid-template-columns: 1fr; }
-  .card__media{ height: 200px; }
-  .card--featured .card__media{ height: 220px; }
+@media (max-width: 780px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+  .card__media {
+    height: 200px;
+  }
+  .card--featured .card__media {
+    height: 220px;
+  }
 }
 
-
 .card__media img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   display: block;
-}
+}