From f1c9c4c4ff65cd45326c196e834d7cad62509796 Mon Sep 17 00:00:00 2001
From: Maitra Khatri <maitrakhatri@gmail.com>
Date: Sun, 30 Jan 2022 20:57:40 +0530
Subject: [PATCH] feat: images and input DONE

---
 image/image.css  | 32 ++++++++++++++++++++
 image/image.html | 45 +++++++++++++++++++++++++++
 input/input.css  | 35 +++++++++++++++++++++
 input/input.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 191 insertions(+)
 create mode 100644 image/image.css
 create mode 100644 image/image.html
 create mode 100644 input/input.css
 create mode 100644 input/input.html
diff --git a/image/image.css b/image/image.css
new file mode 100644
index 0000000..126acc6
--- /dev/null
+++ b/image/image.css
@@ -0,0 +1,32 @@
+@import url(../style.css);
+
+.img-res {
+    width: 100%;
+    height: auto;
+}
+
+.img-round-250px {
+    border-radius: 50%;
+    width: 250px;
+    height: 250px;
+    object-fit: cover;
+}
+
+.img-round-150px {
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
+
+.img-square-250px {
+    width: 250px;
+    height: 250px;
+    object-fit: cover;
+}
+
+.img-square-150px {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
\ No newline at end of file
diff --git a/image/image.html b/image/image.html
new file mode 100644
index 0000000..71395ab
--- /dev/null
+++ b/image/image.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>image</title>
+    <link rel="stylesheet" href="image.css">
+    <style>
+        /* JUST FOR DISPLAY PURPOSES. NOT A PART OF COMPONENT */
+
+        .container {
+            background-color: var(--bg-cus);
+            width: fit-content;
+            padding: 1rem;
+            margin: 1rem;
+            border-radius: .25rem;
+            display: flex;
+            gap: 1rem;
+        }
+
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="container">
+        <img src="https://picsum.photos/800/400" alt="image" class="img-res">
+    </div>
+
+    <div class="container">
+        <img src="https://picsum.photos/300" alt="image" class="img-round-250px">
+        <img src="https://picsum.photos/500/600" alt="image" class="img-round-250px">
+    </div>
+
+    <div class="container">
+        <img src="https://picsum.photos/500" alt="image" class="img-round-150px">
+        <img src="https://picsum.photos/400/600" alt="image" class="img-round-150px">
+    </div>
+
+    <div class="container">
+        <img src="https://picsum.photos/500" alt="image" class="img-square-150px">
+        <img src="https://picsum.photos/400/600" alt="image" class="img-square-150px">
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/input/input.css b/input/input.css
new file mode 100644
index 0000000..b66dfc4
--- /dev/null
+++ b/input/input.css
@@ -0,0 +1,35 @@
+@import url(../style.css);
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.input-group input {
+    padding: .5rem;
+}
+
+.input-group input:focus {
+    outline: none;
+}
+
+.error {
+    color: var(--danger);
+}
+
+.warning {
+    color: var(--warning);
+}
+
+.success {
+    color: var(--success);
+}
+
+.error input {
+    border: 1px solid var(--danger);
+}
+
+.msg {
+    font-size: small;
+}
\ No newline at end of file
diff --git a/input/input.html b/input/input.html
new file mode 100644
index 0000000..2574624
--- /dev/null
+++ b/input/input.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>input</title>
+    <link rel="stylesheet" href="input.css">
+    <style>
+        /* JUST FOR DISPLAY PURPOSES. NOT A PART OF COMPONENT */
+
+        .container {
+            background-color: var(--bg-cus);
+            padding: 2rem 6rem;
+            margin: 1rem;
+            border-radius: .25rem;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    
+    <div class="container">
+        
+        <div class="input-group">
+            <label>Username *</label>
+            <input type="text" />
+        </div>
+
+        <div class="input-group">
+            <label>Password *</label>
+            <input type="password" />
+        </div>
+
+    </div>
+
+    <div class="container">
+        
+        <div class="input-group error">
+            <label>Username *</label>
+            <input type="text" />
+            <div class="error-msg">Invalid Username</div>
+        </div>
+
+        <div class="input-group error">
+            <label>Password *</label>
+            <input type="password" />
+            <div class="error-msg">Invalid Password</div>
+        </div>
+
+    </div>
+
+    <div class="container">
+
+        <div class="input-group">
+            <label>Password *</label>
+            <input type="password" />
+            <div class="error msg">Too short. Must be more than 6 characters</div>
+        </div>
+
+        <div class="input-group">
+            <label>Password *</label>
+            <input type="password" />
+            <div class="warning msg">Weak Password</div>
+        </div>
+
+        <div class="input-group">
+            <label>Password *</label>
+            <input type="password" />
+            <div class="success msg">Good to go !!</div>
+        </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
