From 7502e55624251caa9752fc8d8fb16c2e827b0ba6 Mon Sep 17 00:00:00 2001 From: viperadnan-git Date: Wed, 23 Sep 2020 13:18:48 +0530 Subject: [PATCH] Added 'Ask me anything' page Added ask me anything page and re-formatted html and css file and minor fixes. --- index.html | 43 ++++------ style.css | 239 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 164 insertions(+), 118 deletions(-) diff --git a/index.html b/index.html index 307b12b..e395101 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
@@ -92,34 +92,14 @@

My Skills

Must Watch

- +
-
© 2020 Adnan Ahmad's Bio. All rights reserved.
+ - + \ No newline at end of file diff --git a/style.css b/style.css index 6b75c08..363d0b7 100644 --- a/style.css +++ b/style.css @@ -1,129 +1,190 @@ html { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } + body { - font-family: 'Bellota', cursive; - font-size: 26pt; - background-color: f2f2f2; - padding: 20px; - margin: 0; + font-family: 'Bellota', cursive; + font-size: 26pt; + background-color: #f2f2f2; + padding: 20px; + margin: 0; } + h1 { - font-size: 15pt; - color: #ffffff; - text-align: center; - padding: 18px 0 18px 0; - margin: 0 0 10px 0; + font-size: 15pt; + color: #ffffff; + text-align: center; + padding: 18px 0 18px 0; + margin: 0 0 10px 0; } + h1 span { - border: 8px solid #666666; - border-radius: 8px; - background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif"); - padding: 12px; + border: 8px solid #666666; + border-radius: 8px; + background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif"); + padding: 12px; } + p { - padding: 0; - margin: 0; - color: #000000; + padding: 0; + margin: 0; + color: #000000; } + .img-circle { - border: 8px solid white; - border-radius: 50%; + border: 8px solid white; + border-radius: 50%; } + .section { - background-color: #fff; - padding: 20px; - margin-bottom: 10px; - border-radius: 30px; + background-color: #fff; + padding: 20px; + margin-bottom: 10px; + border-radius: 30px; } + #header { - background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif"); - background-size: cover; + background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif"); + background-size: cover; } + #header img { - display: block; - width: 500px; - height: 500px; - margin: auto; + display: block; + width: 500px; + height: 500px; + margin: auto; } + #header p { - font-size: 60pt; - color: #ffffff; - padding-top: 8px; - margin: 0; - font-weight: bold; - text-align: center; -} + font-size: 60pt; + color: #ffffff; + padding-top: 8px; + margin: 0; + font-weight: bold; + text-align: center; +} + .quote { - font-size: 12pt; - text-align: right; - margin-top: 10px; - color: grey; -} -#res{ - text-align: center; - margin: 50px auto; -} -#res a{ - margin: 20px 20px; - display: inline-block; - text-decoration: none; - color: black; - } + font-size: 12pt; + text-align: right; + margin-top: 10px; + color: grey; +} + +#res { + text-align: center; + margin: 50px auto; +} + +#res a { + margin: 20px 20px; + display: inline-block; + text-decoration: none; + color: black; +} + .selected { - background-color: #f36f48; - font-weight: bold; - color: white; + background-color: #f36f48; + font-weight: bold; + color: white; } + li { - margin-bottom: 15px; - font-weight: bold; + margin-bottom: 15px; + font-weight: bold; } + progress { - width: 70%; - height: 20px; - color: #3fb6b2; - background: #efefef; + width: 70%; + height: 20px; + color: #3fb6b2; + background: #efefef; } + progress::-webkit-progress-bar { - background: #efefef; + background: #efefef; } + progress::-webkit-progress-value { - background: #3fb6b2; -} -progress::-moz-progress-bar { - color: #3fb6b2; - background: #efefef; -} -iframe, audio { - display: block; - margin: 0 auto; - border: 3px solid #3fb6b2; + background: #3fb6b2; } + +progress::-moz-progress-bar { + color: #3fb6b2; + background: #efefef; +} + +iframe, +audio { + display: block; + margin: 0 auto; + border: 3px solid #3fb6b2; + border-radius: 10px; +} + hr { - border: 0; - height: 1px; - background: #f36f48; -} + border: 0; + height: 1px; + background: #f36f48; +} + +input { + text-align: center; + font-size: 25pt; + border: none; + border-radius: 12px; + padding: 30px 8%; + margin: 20px 5px 10px 5px; + background-color: #d7d7d7; +} + +input:focus { + background-color: #2f2f2f; + color: white; +} + +form { + text-align: center; + font-size: 30pt; + font-family: Helvetica; + font-weight: 500; + margin: 10% 15% 8% 15%; + border-radius: 12px; +} + +#insta-image { + display: block; + width: 100px; + height: 100px; + border: 5px solid #d7d7d7; + border-radius: 50%; + margin: auto; + margin-top: -75px; +} + #contacts img { - height: 150px; - width: 150px; - margin-left: 7px; - margin-right: 7px; + height: 150px; + width: 150px; + margin-left: 7px; + margin-right: 7px; } + #contacts a { - text-decoration: none; + text-decoration: none; } + #contacts img:hover { - opacity: 0.8; + opacity: 0.8; } + #contacts { - text-align: center; + text-align: center; } + .copyright { - font-size: 8pt; - text-align: right; - padding-bottom: 10px; - color: grey; -} + font-size: 8pt; + text-align: right; + padding-bottom: 10px; + color: grey; +} \ No newline at end of file