From b361b0308c0cb7f79b1c12cf0e8c5e2e11b2de13 Mon Sep 17 00:00:00 2001 From: Avipsha mishra Date: Sun, 9 Oct 2022 19:14:34 +0530 Subject: [PATCH] #13 issue solved --- Avipsha Mishra/index3.html | 61 +++++++++++++ Avipsha Mishra/style.css | 175 +++++++++++++++++++++++++++++++++++++ 2 files changed, 236 insertions(+) create mode 100644 Avipsha Mishra/index3.html create mode 100644 Avipsha Mishra/style.css diff --git a/Avipsha Mishra/index3.html b/Avipsha Mishra/index3.html new file mode 100644 index 00000000..41e3a11b --- /dev/null +++ b/Avipsha Mishra/index3.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + +
+
+
+
+ +
Address
+
odisha
+
somewhere in odisha
+
+
+ +
Phone
+
9893 5647
+
3434 5678
+
+ +
+
+
Send me a message
+

If you have any work from me, you can send me message + from here. It's my pleasure to help you.

+
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/Avipsha Mishra/style.css b/Avipsha Mishra/style.css new file mode 100644 index 00000000..d86ce8ec --- /dev/null +++ b/Avipsha Mishra/style.css @@ -0,0 +1,175 @@ +/* Google Font CDN Link */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + min-height: 100vh; + width: 100%; + background: #c8e8e9; + display: flex; + align-items: center; + justify-content: center; +} + +.container { + width: 85%; + background: #fff; + border-radius: 6px; + padding: 20px 60px 30px 40px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.container .content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.container .content .left-side { + width: 25%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 15px; + position: relative; +} + +.content .left-side::before { + content: ''; + position: absolute; + height: 70%; + width: 2px; + right: -15px; + top: 50%; + transform: translateY(-50%); + background: #afafb6; +} + +.content .left-side .details { + margin: 14px; + text-align: center; +} + +.content .left-side .details i { + font-size: 30px; + color: #3e2093; + margin-bottom: 10px; +} + +.content .left-side .details .topic { + font-size: 18px; + font-weight: 500; +} + +.content .left-side .details .text-one, +.content .left-side .details .text-two { + font-size: 14px; + color: #afafb6; +} + +.container .content .right-side { + width: 75%; + margin-left: 75px; +} + +.content .right-side .topic-text { + font-size: 23px; + font-weight: 600; + color: #3e2093; +} + +.right-side .input-box { + height: 50px; + width: 100%; + margin: 12px 0; +} + +.right-side .input-box input, +.right-side .input-box textarea { + height: 100%; + width: 100%; + border: none; + outline: none; + font-size: 16px; + background: #F0F1F8; + border-radius: 6px; + padding: 0 15px; + resize: none; +} + +.right-side .message-box { + min-height: 110px; +} + +.right-side .input-box textarea { + padding-top: 6px; +} + +.right-side .button { + display: inline-block; + margin-top: 12px; +} + +.right-side .button input[type="button"] { + color: #fff; + font-size: 18px; + outline: none; + border: none; + padding: 8px 16px; + border-radius: 6px; + background: #3e2093; + cursor: pointer; + transition: all 0.3s ease; +} + +.button input[type="button"]:hover { + background: #5029bc; +} + +@media (max-width: 950px) { + .container { + width: 90%; + padding: 30px 40px 40px 35px; + } + + .container .content .right-side { + width: 75%; + margin-left: 55px; + } +} + +@media (max-width: 820px) { + .container { + margin: 40px 0; + height: 100%; + } + + .container .content { + flex-direction: column-reverse; + } + + .container .content .left-side { + width: 100%; + flex-direction: row; + margin-top: 40px; + justify-content: center; + flex-wrap: wrap; + } + + .container .content .left-side::before { + display: none; + } + + .container .content .right-side { + width: 100%; + margin-left: 0; + } +} \ No newline at end of file