feat: images and input DONE

maitrakhatri · Jan 30, 2022 · f1c9c4c · f1c9c4c
1 parent 8c18245
commit f1c9c4c
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 0 deletions.
diff --git a/image/image.css 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;
+}
diff --git a/image/image.html 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>
+</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>
diff --git a/input/input.css 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;
+}
diff --git a/input/input.html 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>
+</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>