diff --git a/index.html b/index.html index d00ac13..2e7a71a 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,69 @@ - My Website + + Your Name - Art Portfolio + +
-

Welcome to My Website!

+

Welcome to My Art Portfolio

+
-
-

This is a simple website hosted on GitHub Pages.

-
+ + +
+

Welcome!

+

This is a place where I showcase my artwork and creative projects. Dive in and explore!

+
+ + +
+

About Me

+

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.

+
+ + +
+

My Artwork

+
+ +
+ Artwork 1 +

Artwork 1: [Short description of your artwork]

+
+
+ Artwork 2 +

Artwork 2: [Short description of your artwork]

+
+ +
+
+ + +
+

Contact Me

+

If you'd like to collaborate or inquire about my work, feel free to reach out!

+ +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6d8c7b3 --- /dev/null +++ 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 index a9c60e8..114efdc 100644 --- a/style.css +++ b/style.css @@ -1,21 +1,100 @@ - - - - - - My Website - - - -
-

Welcome to My Website!

-
-
-

This is a simple website hosted on GitHub Pages.

-
- - - - +/* 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; +}