CSS Basics

2026-02-23 23:24:45 +05:30
parent 5ba7670cf7
commit aa588af3fe
3 changed files with 120 additions and 0 deletions
--- a/Week-01/Day_04/index.html
+++ b/Week-01/Day_04/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Basics Combined Task</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <main class="container">
+        
+        <div class="profile-card">
+            
+            <img src="profile.jpg" alt="Profile Picture" class="profile-img">
+
+            <h1 class="user-name">Rupesh Bangar</h1>
+            <p class="tagline">Junior Web Developer</p>
+
+            <div class="bio-box">
+                <p><strong>Bio:</strong> 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.</p>
+            </div>
+
+            <form class="contact-form">
+                <input type="email" placeholder="Enter your email" required>
+                <button type="submit" id="submit-btn">Contact Me</button>
+            </form>
+        </div>
+    </main>
+
+</body>
+</html>
--- a/Week-01/Day_04/profile.jpg
+++ b/Week-01/Day_04/profile.jpg
--- a/Week-01/Day_04/style.css
+++ 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;
+}