Add files via upload

Krishna-ii · Nov 5, 2024 · 1b023a0 · 1b023a0
1 parent ea905ad
commit 1b023a0
Showing 1 changed file with 230 additions and 0 deletions.
diff --git a/h.html b/h.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Student Portfolio | Krishna Gupta</title>
+    <style>
+        body {
+            background-color: #1e1e1e;
+            color: #f4f4f4;
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        h1, h2 {
+            font-family: 'Creepster', cursive;
+            color: #ff5733;
+            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        h1 {
+            font-size: 4em;
+            margin-top: 50px;
+            animation: fadeIn 1s ease-out;
+        }
+
+        h2 {
+            font-size: 2.5em;
+            margin-bottom: 40px;
+            animation: fadeIn 2s ease-out;
+        }
+
+        .portfolio-container {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 30px;
+            padding: 30px;
+            animation: fadeInUp 1.5s ease-out;
+            flex-grow: 1;
+        }
+
+        .portfolio-card {
+            background-color: #333;
+            border-radius: 12px;
+            width: 250px;
+            padding: 20px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .portfolio-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
+        }
+
+        .portfolio-card img {
+            width: 100%;
+            height: 350px;
+            object-fit: cover;
+            border-radius: 10px;
+            transition: transform 0.3s ease-in-out;
+        }
+
+        .portfolio-card img:hover {
+            transform: scale(1.1);
+        }
+
+        .portfolio-title {
+            font-size: 1.5em;
+            color: #ff5733;
+            margin-top: 15px;
+            font-family: 'Creepster', cursive;
+        }
+
+        .portfolio-description {
+            font-size: 1em;
+            color: #bbb;
+            margin-top: 10px;
+            font-style: italic;
+        }
+
+        .portfolio-links {
+            margin-top: 15px;
+        }
+
+        .portfolio-links a {
+            color: #ff5733;
+            text-decoration: none;
+            font-weight: bold;
+            margin: 5px;
+        }
+
+        .portfolio-links a:hover {
+            color: #fff;
+            text-decoration: underline;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2.5em;
+            }
+
+            h2 {
+                font-size: 2em;
+            }
+
+            .portfolio-container {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .portfolio-card {
+                width: 90%;
+            }
+        }
+
+        /* Animation */
+        @keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Footer Styles */
+        footer {
+            background-color: #333;
+            color: #f4f4f4;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
+        }
+
+        footer a {
+            color: #ff5733;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        footer a:hover {
+            color: #fff;
+            text-decoration: underline;
+        }
+
+        footer p {
+            font-size: 1.2em;
+            margin: 10px 0;
+        }
+
+        footer .social-icons a {
+            margin: 0 10px;
+            font-size: 1.5em;
+            color: #ff5733;
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
+
+
+    <!-- Header Section -->
+    <header>
+        <h1>Krishna Gupta's Portfolio</h1>
+        <h2>Student | Developer | Creator</h2>
+    </header>
+
+    <!-- Portfolio Section -->
+    <div class="portfolio-container">
+        <!-- Example Portfolio Item -->
+        <div class="portfolio-card">
+            <img src="https://th.bing.com/th/id/OIP.ExUMGcgLhnkYGwDJXWDd1QHaF8?w=214&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Project 1">
+            <div class="portfolio-title">Project 1: Web Design</div>
+            <div class="portfolio-description">A responsive and interactive web design project built using HTML, CSS, and JavaScript.</div>
+            <div class="portfolio-links">
+                <a href="#">View Project</a>
+                <a href="#">GitHub</a>
+            </div>
+        </div>
+
+        <div class="portfolio-card">
+            <img src="https://th.bing.com/th/id/OIP.1hdxmqKuBv-wQ-QJEwOQ4QHaFP?w=2052&h=1452&rs=1&pid=ImgDetMain" alt="Project 2">
+            <div class="portfolio-title">Project 2: E-Commerce App</div>
+            <div class="portfolio-description">An e-commerce web application using React and Node.js for full-stack functionality.</div>
+            <div class="portfolio-links">
+                <a href="#">View Project</a>
+                <a href="#">GitHub</a>
+            </div>
+        </div>
+
+        <div class="portfolio-card">
+            <img src="https://th.bing.com/th/id/OIP.f0XtwKqk-uEXpl7esFSc-wHaDt?w=331&h=175&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Project 3">
+            <div class="portfolio-title">Project 3: Mobile App</div>
+            <div class="portfolio-description">A cross-platform mobile app built with Flutter, featuring dynamic content and real-time notifications.</div>
+            <div class="portfolio-links">
+                <a href="#">View Project</a>
+                <a href="#">GitHub</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer Section -->
+    <footer>
+        <p>&copy; Krishna Gupta. All Rights Reserved.</p>
+        <p>Follow me on <a href="#">Instagram</a>, <a href="#">Twitter</a>, <a href="#">LinkedIn</a>.</p>
+    </footer>
+
+</body>
+</html>