From aa588af3fe76bdea53a49c371703007030f4a253 Mon Sep 17 00:00:00 2001 From: rupeshbangar Date: Mon, 23 Feb 2026 23:24:45 +0530 Subject: [PATCH] CSS Basics --- Week-01/Day_04/index.html | 32 ++++++++++++++ Week-01/Day_04/profile.jpg | Bin 0 -> 6694 bytes Week-01/Day_04/style.css | 88 +++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 Week-01/Day_04/index.html create mode 100644 Week-01/Day_04/profile.jpg create mode 100644 Week-01/Day_04/style.css diff --git a/Week-01/Day_04/index.html b/Week-01/Day_04/index.html new file mode 100644 index 0000000..1121161 --- /dev/null +++ b/Week-01/Day_04/index.html @@ -0,0 +1,32 @@ + + + + + + CSS Basics Combined Task + + + + +
+ +
+ + Profile Picture + +

Rupesh Bangar

+

Junior Web Developer

+ +
+

Bio: This is a long biography to demonstrate the overflow property. CSS allows us to handle content that is larger than its container. By setting the height and the overflow property, we can ensure the layout stays intact while the user can still read all the text by scrolling inside this specific box.

+
+ +
+ + +
+
+
+ + + \ No newline at end of file diff --git a/Week-01/Day_04/profile.jpg b/Week-01/Day_04/profile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ffb7932c2f9bed39222cdde7aba18247ed073bdb GIT binary patch literal 6694 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 literal 0 HcmV?d00001 diff --git a/Week-01/Day_04/style.css b/Week-01/Day_04/style.css new file mode 100644 index 0000000..a56557d --- /dev/null +++ b/Week-01/Day_04/style.css @@ -0,0 +1,88 @@ +:root { + --primary-color: #4a90e2; +} + +body { + font-family: 'Segoe UI', sans-serif; + background-color: #f0f2f5; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.profile-card { + background-color: white; + width: 350px; + max-width: 90%; + padding: 2rem; + border: 2px solid #ddd; + border-radius: 15px; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + text-align: center; +} + +.profile-img { + width: 120px; + height: 120px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--primary-color); + margin-bottom: 1rem; +} + +.user-name { + color: #333; + margin: 0; + font-size: 1.5rem; +} + +.tagline { + color: #777; + font-style: italic; + margin-bottom: 1.5rem; +} + +.bio-box { + height: 80px; + overflow-y: auto; + background: #f9f9f9; + padding: 10px; + border: 1px solid #eee; + font-size: 0.9rem; + margin-bottom: 1.5rem; + text-align: left; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 10px; +} + +input[type="email"] { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; +} + +input[type="email"]:focus { + border-color: var(--primary-color); +} + +#submit-btn { + background-color: var(--primary-color); + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + transition: background 0.3s; +} + +#submit-btn:hover { + background-color: #357abd; +} \ No newline at end of file