diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..2ba986f6 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/css/basics/Assignment-1/apty_image.png b/css/basics/Assignment-1/apty_image.png new file mode 100644 index 00000000..58501056 Binary files /dev/null and b/css/basics/Assignment-1/apty_image.png differ diff --git a/css/basics/Assignment-1/basic_webpage.html b/css/basics/Assignment-1/basic_webpage.html new file mode 100644 index 00000000..ae505d04 --- /dev/null +++ b/css/basics/Assignment-1/basic_webpage.html @@ -0,0 +1,47 @@ + + + + + + Basic CSS + + + + + + +
+

Welcome to My Webpage

+ +

This is a simple webpage demonstrating inline, internal, and external CSS styling.

+ + + + Sample Image of Apty +
+ + diff --git a/css/basics/Assignment-1/style.css b/css/basics/Assignment-1/style.css new file mode 100644 index 00000000..b71fe978 --- /dev/null +++ b/css/basics/Assignment-1/style.css @@ -0,0 +1,13 @@ + +#main-heading { + font-size: 32px; + color: darkgreen; + text-align: center; + margin-bottom: 15px; +} + +ul li { + color: darkred; + margin: 5px 40px; + line-height: 1.5rem; +} diff --git a/css/basics/Assignment-2/cake_image.jpg b/css/basics/Assignment-2/cake_image.jpg new file mode 100644 index 00000000..f1a6c66d Binary files /dev/null and b/css/basics/Assignment-2/cake_image.jpg differ diff --git a/css/basics/Assignment-2/recipe.html b/css/basics/Assignment-2/recipe.html new file mode 100644 index 00000000..4a9ab755 --- /dev/null +++ b/css/basics/Assignment-2/recipe.html @@ -0,0 +1,143 @@ + + + + + + Delicious Chocolate Cake + + + + + +
+ Delicious Chocolate Cake +
+
+

Ingredients

+ +
+
+

Preparation Steps

+
    +
  1. Preheat oven to 350°F (175°C). Grease and flour two cake pans.
    2. +
  2. In a bowl, whisk together flour, sugar, cocoa powder, baking soda, and baking powder.
    3. +
  3. Add eggs, milk, oil, and vanilla. Mix until smooth.
    4. +
  4. Slowly stir in boiling water until batter is well mixed.
    5. +
  5. Pour batter into pans and bake for 30–35 minutes.
    6. +
  6. Let cakes cool before frosting and serving.
    7. +
+
+ +
+ Delicious Chocolate Cake +

A rich and moist chocolate cake, perfect for celebrations.

+
+ + diff --git a/css/basics/Assignment-3/mypicture.jpg b/css/basics/Assignment-3/mypicture.jpg new file mode 100644 index 00000000..7ef55b58 Binary files /dev/null and b/css/basics/Assignment-3/mypicture.jpg differ diff --git a/css/basics/Assignment-3/profilecard_1.jpg b/css/basics/Assignment-3/profilecard_1.jpg new file mode 100644 index 00000000..07f86efd Binary files /dev/null and b/css/basics/Assignment-3/profilecard_1.jpg differ diff --git a/css/basics/Assignment-3/profilecard_2.webp b/css/basics/Assignment-3/profilecard_2.webp new file mode 100644 index 00000000..c9545630 Binary files /dev/null and b/css/basics/Assignment-3/profilecard_2.webp differ diff --git a/css/basics/Assignment-3/style.css b/css/basics/Assignment-3/style.css new file mode 100644 index 00000000..0cb8bba6 --- /dev/null +++ b/css/basics/Assignment-3/style.css @@ -0,0 +1,79 @@ + +body { + font-family: Arial, sans-serif; + background-color: #f2f5f9; + margin: 0; + padding: 0; +} + +.team-container { + margin: 20px auto; + padding: 20px; + border: 3px solid #ccc; + background-color: #fff; + width: 90%; + max-width: 1200px; + text-align: center; +} + +.gallery-title { + margin-bottom: 20px; + font-size: 2rem; + color: #333; +} + +.profile-card { + display: inline-block; + width: 280px; + margin: 15px; + padding: 15px; + border: 2px solid #ddd; + border-radius: 10px; + background-color: #fafafa; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.187); + vertical-align: top; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.profile-card:hover { + transform: scale(1.05); + box-shadow: 4px 4px 15px rgba(0,0,0,0.2); +} + +.profile-pic { + width: 120px; + height: 120px; + border-radius: 50%; + border: 3px solid #333; + margin-bottom: 10px; +} + +.profile-card h2 { + margin: 10px 0 5px; + font-size: 1.4rem; + color: #222; +} + +.profile-card h3 { + margin: 5px 0 10px; + font-size: 1rem; + color: #666; +} + +.bio { + font-size: 0.9rem; + color: #444; + margin-bottom: 10px; +} + +.contact { + font-size: 0.85rem; + color: #333; + line-height: 1.4; +} + +@media (max-width: 768px) { + .profile-card { + width: 90%; + } +} diff --git a/css/basics/Assignment-3/team_gallery.html b/css/basics/Assignment-3/team_gallery.html new file mode 100644 index 00000000..6f72777a --- /dev/null +++ b/css/basics/Assignment-3/team_gallery.html @@ -0,0 +1,55 @@ + + + + + + Team Member Gallery + + + +
+

Our Team

+ + +
+ John Doe +

Sai

+

Front-End Developer

+

+ Sai builds dynamic web pages using JavaScript frameworks. +

+

+ 📧 sai.ali@example.com
+ 📞 +1234567890 +

+
+ +
+ Jane Smith +

Durga

+

Back-End Developer

+

+ Durga specializes in server-side logic and database management. +

+

+ 📧 Durga.satt@example.com
+ 📞 +0987654321 +

+
+ +
+ Mike Lee +

Sai Durga

+

UI/UX Designer

+

+ Sai Durga creates user-friendly interfaces with modern design principles. +

+

+ 📧 saidurga.satturi@example.com
+ 📞 +1122334455 +

+
+ +
+ +