From fa0eb3c294fb78d8d7c77855057c28b49d16f060 Mon Sep 17 00:00:00 2001 From: homerli Date: Mon, 28 Oct 2019 12:18:14 -0700 Subject: [PATCH] footer and css added --- css/main.css | 134 +++++++++++++++++++++++++++------------------------ index.html | 85 +++++++++++++++++++++++--------- 2 files changed, 133 insertions(+), 86 deletions(-) diff --git a/css/main.css b/css/main.css index c3fca87..731b1d1 100644 --- a/css/main.css +++ b/css/main.css @@ -1,101 +1,111 @@ * { - margin: none; - padding: none; + margin: none; + padding: none; } body { - text-align: center; - min-width: 360px; - margin: 0; + text-align: center; + min-width: 360px; + margin: 0; } #header, #showcase, #footer, #social { - background: #f44274; - ; - animation-name: bgColor; - animation-duration: 24s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-delay: 2s; - color: white; - font-family: "Comfortaa", cursive; - margin: auto; + background: #f44274; + animation-name: bgColor; + animation-duration: 24s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-delay: 2s; + color: white; + font-family: "Comfortaa", cursive; + margin: auto; } @keyframes bgColor { - 0% { - background-color: #f44274; - } - 25% { - background-color: #f4f142; - } - 50% { - background-color: #23516D; - } - 100% { - background-color: #42f49e; - } + 0% { + background-color: #f44274; + } + 25% { + background-color: #f4f142; + } + 50% { + background-color: #23516d; + } + 100% { + background-color: #42f49e; + } } img { - margin: 50px 0 30px 0; - border: 5px solid white; - border-radius: 100px; - box-shadow: 2px 2px 10px #888; - vertical-align: middle; - width: 230px; - height: auto; + margin: 50px 0 30px 0; + border: 5px solid white; + border-radius: 100px; + box-shadow: 2px 2px 10px #888; + vertical-align: middle; + width: 230px; + height: auto; } .name { - font-size: 30px; - text-shadow: 2px 2px 10px #888; + font-size: 30px; + text-shadow: 2px 2px 10px #888; } #tags { - font-size: 20px; + font-size: 20px; } .icons i { - margin: 15px; - border-radius: 100%; - font-size: 50px; + margin: 15px; + border-radius: 100%; + font-size: 50px; } .icons a:hover i { - box-shadow: 2px 2px 10px #888; + box-shadow: 2px 2px 10px #888; } .fa-facebook { - width: 45px; + width: 45px; } - /* For reaponsiveness across all the devices using @media queries. */ @media screen and (max-width: 500px) { - .icons i { - font-size: 30px; - } - .name { - font-size: 20px; - } - #tags { - font-size: 15px; - } - .fa-facebook { - width: 26px; - } - img { - width: 180px; - height: 200px; - } - body { - margin: 0; - } + .icons i { + font-size: 30px; + } + .name { + font-size: 20px; + } + #tags { + font-size: 15px; + } + .fa-facebook { + width: 26px; + } + img { + width: 180px; + height: 200px; + } + body { + margin: 0; + } +} + +footer { + position: relative; + line-height: 80px; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + background-color: #272727; + text-align: center; + color: #ffffff; } diff --git a/index.html b/index.html index 03a9836..c0618cb 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,66 @@ - - - - - - - - -