test style one

checking whether I like the look of temple OS
Incattus · Dec 6, 2024 · 533b37c · 533b37c
1 parent ad421dd
commit 533b37c
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -3,19 +3,69 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Website</title>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Your Name - Art Portfolio</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+
+<!-- Header Section -->
 <header>
-    <h1>Welcome to My Website!</h1>
+    <h1>Welcome to My Art Portfolio</h1>
+    <nav>
+        <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#portfolio">Portfolio</a></li>
+            <li><a href="#contact">Contact</a></li>
+        </ul>
+    </nav>
 </header>
-<main>
-    <p>This is a simple website hosted on GitHub Pages.</p>
-</main>
+
+<!-- Home Section -->
+<section id="home">
+    <h2>Welcome!</h2>
+    <p>This is a place where I showcase my artwork and creative projects. Dive in and explore!</p>
+</section>
+
+<!-- About Section -->
+<section id="about">
+    <h2>About Me</h2>
+    <p>Hello! I'm [Your Name], a passionate artist with a love for creating visually striking works. I specialize in [art style or medium], and my art is a reflection of my experiences and imagination.</p>
+</section>
+
+<!-- Portfolio Section -->
+<section id="portfolio">
+    <h2>My Artwork</h2>
+    <div class="gallery">
+        <!-- Example Artwork -->
+        <div class="artwork">
+            <img src="artwork1.jpg" alt="Artwork 1">
+            <p>Artwork 1: [Short description of your artwork]</p>
+        </div>
+        <div class="artwork">
+            <img src="artwork2.jpg" alt="Artwork 2">
+            <p>Artwork 2: [Short description of your artwork]</p>
+        </div>
+        <!-- Add more artwork as needed -->
+    </div>
+</section>
+
+<!-- Contact Section -->
+<section id="contact">
+    <h2>Contact Me</h2>
+    <p>If you'd like to collaborate or inquire about my work, feel free to reach out!</p>
+    <ul>
+        <li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
+        <li>Instagram: <a href="https://instagram.com/yourhandle" target="_blank">yourhandle</a></li>
+    </ul>
+</section>
+
+<!-- Footer -->
 <footer>
-    <p>Created with love by Me</p>
+    <p>&copy; 2024 [Your Name]. All rights reserved.</p>
 </footer>
+
 <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,11 @@
+// Smooth Scroll functionality for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();  // Prevent default anchor behavior
+
+        // Scroll to the section smoothly
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
diff --git a/style.css b/style.css
@@ -1,21 +1,100 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Website</title>
-    <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
-    <header>
-      <h1>Welcome to My Website!</h1>
-    </header>
-    <main>
-      <p>This is a simple website hosted on GitHub Pages.</p>
-    </main>
-    <footer>
-      <p>Created with love by Me</p>
-    </footer>
-    <script src="script.js"></script>
-  </body>
-</html>
+/* Global Styles */
+body {
+    font-family: 'Courier New', monospace;  /* Monospaced, retro font */
+    background-color: #000000;  /* Dark background to resemble TempleOS */
+    color: #00FF00;  /* Neon green text */
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: #000000;  /* Dark background for header */
+    color: #00FF00;  /* Neon green for text */
+    text-align: center;
+    padding: 20px 0;
+    border-bottom: 2px solid #00FF00;  /* Green border for header */
+}
+
+header h1 {
+    font-size: 48px;  /* Large header text */
+    margin: 0;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #00FF00;
+    font-size: 20px;
+    text-decoration: none;
+}
+
+nav ul li a:hover {
+    background-color: #0000FF;  /* Blue background on hover */
+    color: #FF00FF;  /* Pink hover text */
+}
+
+/* Section Styling */
+section {
+    padding: 20px;
+    margin: 20px 0;
+}
+
+h2 {
+    color: #00FF00;
+    font-size: 36px;
+}
+
+p {
+    font-size: 20px;
+}
+
+/* Portfolio Gallery */
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.artwork {
+    width: 30%;  /* Each artwork takes 30% of the row */
+    margin-bottom: 20px;
+    text-align: center;
+    border: 2px solid #00FF00;  /* Green border around each artwork */
+    padding: 10px;
+}
+
+.artwork img {
+    width: 100%;  /* Image takes up full container width */
+    height: auto;  /* Maintain aspect ratio */
+    border: 2px solid #00FF00;  /* Green border around the image */
+    margin-bottom: 10px;
+}
+
+.artwork p {
+    color: #00FF00;  /* Green text for image descriptions */
+    font-size: 18px;
+}
+
+/* Footer */
+footer {
+    background-color: #000000;
+    color: #00FF00;
+    text-align: center;
+    padding: 10px;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+footer p {
+    margin: 0;
+}