diff --git a/submissions/MG07-stack/README.md b/submissions/MG07-stack/README.md new file mode 100644 index 0000000..6a311aa --- /dev/null +++ b/submissions/MG07-stack/README.md @@ -0,0 +1,26 @@ +Hi! 👋 I'm **Manaswi Goyal**, and this is my first ever web project. +It's a simple interactive portfolio page I built while learning HTML, CSS, and JavaScript — with help from ChatGPT (for generating, understanding, and improving code). + +--- + +## 🌐 Overview + +This project is a **personal portfolio webpage** that includes: +- My name and a short tagline. +- A **link to my LinkedIn profile**. +- A **dynamic background color system** that changes when you click different buttons. +- An **"About Me"** section that appears when you click the hexagon-shaped "About Me" button, with a back arrow to return. + +Even though it looks simple, I’ve been experimenting with concepts like: +- `clip-path` shapes (for the hexagonal button), +- gradients and transitions in CSS, +- DOM manipulation in JavaScript, +- and a general understanding of how all three files (HTML, CSS, JS) work together. + +--- + +## 🧭 How to Use + +### 🔗 Access my LinkedIn +On the home page, click my **name** (“Manaswi Goyal”). +It’s a hyperlink that opens my LinkedIn profile in a new tab diff --git a/submissions/MG07-stack/index.html b/submissions/MG07-stack/index.html new file mode 100644 index 0000000..5f3c6fe --- /dev/null +++ b/submissions/MG07-stack/index.html @@ -0,0 +1,34 @@ + + + + + + My Portfolio + + + + +
My Portfolio
+
+
+

Manaswi Goyal

+ +

Expert at pressing buttons I shouldn't.

+
+ + + +
+
+ +
+ + + \ No newline at end of file diff --git a/submissions/MG07-stack/script.js b/submissions/MG07-stack/script.js new file mode 100644 index 0000000..3e1480b --- /dev/null +++ b/submissions/MG07-stack/script.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", () => { + const aboutBtn = document.querySelector(".about-btn"); + aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)"; +}); +function changeBackground(color) { + document.body.style.backgroundColor = color; + + const aboutBtn = document.querySelector(".about-btn"); + + switch (color) { + case "#f5f984ff": + aboutBtn.style.background = "linear-gradient(90deg, #f9d423, #ff4e50)"; + break; + case "#00b894": + aboutBtn.style.background = "linear-gradient(90deg, #2ed867ff, #13dfbaff)"; + break; + case "#7777ff": + aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)"; + break; + default: + aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)"; + } + +} +function showAbout() { + document.getElementById('home-view').style.display = 'none'; + document.getElementById('about-view').style.display = 'block'; +} + +function goBack() { + document.getElementById('about-view').style.display = 'none'; + document.getElementById('home-view').style.display = 'block'; +} \ No newline at end of file diff --git a/submissions/MG07-stack/style.css b/submissions/MG07-stack/style.css new file mode 100644 index 0000000..0d17607 --- /dev/null +++ b/submissions/MG07-stack/style.css @@ -0,0 +1,136 @@ +body { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #7777ff; + color: #333; + text-align: center; + transition: background-color 0.5s; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} +.top-box { + background: linear-gradient(90deg, #ffaefc, #f953ff); + color: rgb(0, 0, 0); + padding: 1.2rem 3rem; + font-size: 40px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + height: 200px; + font-family: Montserrat; + text-align: center; + border-radius: 50px; + width: 15rem; + height: 4rem; + margin: 2rem auto; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); + letter-spacing: 1px; +} + +.container { + max-width: 600px; + padding: 2.1rem; + background: linear-gradient(0deg, #ffffff, #727374); + border-radius: 15px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + margin-top: 6rem; +} +h1 { + font-size: 2.5rem; + margin-bottom: 0.3rem;} + + .link { + color: inherit; + text-decoration: none; +} + +.link:hover { + text-decoration: underline; +} + +.link:visited { + color: #333; +} + .tagline { + font-size: 1.2rem; + color: #666; + margin-bottom: 2rem;} + + button { + background: #333; + color: white; + border: none; + padding: 0.7rem 1.2rem; + margin: 0.5rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.3s ease; +} + + button:hover { + background: #555; +} +.about-btn { + display: inline-block; + background: linear-gradient(135deg, #6a11cb, #2575fc); + color: white; + font-size: 1.2rem; + font-weight: 600; + border: none; + font-family: Montserrat; + padding: 1rem 3rem; + margin: 1.5rem auto; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 0.5px; + transition: all 0.3s ease, transform 0.2s ease; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); + clip-path: polygon( + 10% 0%, + 90% 0%, + 100% 25%, + 100% 75%, + 90% 100%, + 10% 100%, + 0% 75%, + 0% 25% + ); +} + +.about-btn:hover { + font-size: 1.4rem; + filter: brightness(1.1); +} + + +.back-arrow { + font-size: 2.5rem; + color: #333; + cursor: pointer; + text-align: left; + margin-bottom: 0rem; + transition: transform 0.2s ease; +} + +.back-arrow:hover { + transform: translateX(-4px) +} + +#about-view h2 { + margin-bottom: 1.4rem; + margin-top: -1rem; + font-family:Montserrat ; +} + +#about-view p { + font-size: 1.1rem; + line-height: 1.6; + color: #444; +} + +h2 { + font-size: 2.5rem; + margin-bottom: 0.3rem;} \ No newline at end of file diff --git a/submissions/README.md b/submissions/README.md deleted file mode 100644 index 8ef48a8..0000000 --- a/submissions/README.md +++ /dev/null @@ -1 +0,0 @@ -Folder for Submission