Add files via upload

razan9121 · May 15, 2024 · 35d608a · 35d608a
1 parent 4101d26
commit 35d608a
Show file tree

Hide file tree

Showing 16 changed files with 1,296 additions and 0 deletions.
diff --git a/LL.png b/LL.png
diff --git a/RB.png b/RB.png
diff --git a/When_Marnie_Was_There_Screenshot_0150.jpg b/When_Marnie_Was_There_Screenshot_0150.jpg
diff --git a/about.html b/about.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Razan | About Me</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="fonts/font-awesome.css">
+    <script src="https://kit.fontawesome.com/242ab0b392.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <h2 class="logo">myWeb<span>site!</span></h2>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="gallery.html">Gallery</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="game.html">Game</a></li>
+                <li><a href="quiz.html">Quiz</a></li>
+                <i class="fa-solid fa-cat fa-lg" style="color: #ffffff;"></i>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="about">
+        <div class="main">
+            <img src="about.jpg" alt="Hi">
+
+            <div class="about-text">
+                <h2>about me</h2>
+                <h5>Computer Information Systems Student</h5>
+                <p>Inspired by anime (especially "When Marnie Was There"), I started coding to build my own worlds. It's
+                    challenging, but lets me create websites. This site shares my coding adventures, love of art, and
+                    hopefully, web development knowledge!</p>
+
+                <h2>my skills</h2>
+                <div class="skill-bar">
+                    <h3>html <span>95%</span></h3>
+                    <div class="bar bar1"><span class="fill"></span></div>
+                </div>
+
+                <div class="skill-bar">
+                    <h3>css <span>85%</span></h3>
+                    <div class="bar bar2"><span class="fill"></span></div>
+                </div>
+
+                <div class="skill-bar">
+                    <h3>javascript <span>65%</span></h3>
+                    <div class="bar bar3"><span class="fill"></span></div>
+                </div>
+
+            </div>
+
+        </div>
+    </section>
+
+    <footer>
+        <p>Razan</p>
+
+        <div class="social">
+            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+            <a href="#"><i class="fa-brands fa-square-github"></i></a>
+            <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
+        </div>
+        <p class="end"><i class="fa-solid fa-copyright"></i> &copy; by Razan 2024</p>
+    </footer>
+</body>
+
+</html>
diff --git a/about.jpg b/about.jpg
diff --git a/contact.html b/contact.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Razan | Contact Me</title>
+    <link rel="stylesheet" href="fonts/font-awesome.css">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/242ab0b392.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <h2 class="logo">myWeb<span>site!</span></h2>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="gallery.html">Gallery</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="game.html">Game</a></li>
+                <li><a href="quiz.html">Quiz</a></li>
+                <i class="fa-solid fa-cat fa-lg" style="color: #ffffff;"></i>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="contact">
+
+        <div class="container">
+            <div class="contact-info">
+                <div class="box">
+                    <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
+                    <div class="text">
+                        <h3>Address</h3>
+                        <p>5423 road jeddah</p>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="icon"><i class="fa-solid fa-phone"></i></div>
+                    <div class="text">
+                        <h3>Phone</h3>
+                        <p>05786223324</p>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="icon"><i class="fa-solid fa-square-envelope"></i></div>
+                    <div class="text">
+                        <h3>Email</h3>
+                        <p>shvjds@jnfvbsj.kdh</p>
+                    </div>
+                </div>
+            </div>
+            <div class="contact-form">
+                <form>
+                    <h2>Send</h2>
+                    <div class="input-box">
+                        <label for="name">Name:</label>
+                        <input type="text" id="name" name="name" required>
+                    </div>
+                    <div class="input-box">
+                        <label for="email">Email:</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+                    <div class="input-box">
+                        <label for="subject">Subject:</label>
+                        <input type="text" id="subject" name="subject" required>
+                    </div>
+                    <div class="input-box">
+                        <label for="message">Message:</label>
+                        <textarea id="message" name="message" required></textarea>
+                    </div>
+                    <button type="submit">Send Message</button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <script src="contactscript.js"></script>
+
+    <footer>
+        <p>Razan</p>
+
+        <div class="social">
+            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+            <a href="#"><i class="fa-brands fa-square-github"></i></a>
+            <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
+        </div>
+        <p class="end"> &copy; by Razan 2024</p>
+    </footer>
+</body>
+
+</html>
diff --git a/contactscript.js b/contactscript.js
@@ -0,0 +1,45 @@
+const form = document.getElementById('contact-form');
+const nameInput = document.getElementById('name');
+const emailInput = document.getElementById('email');
+const subjectInput = document.getElementById('subject');
+const messageInput = document.getElementById('message');
+const captchaAnswerInput = document.getElementById('captcha-answer');
+const num1Span = document.getElementById('num1');
+const num2Span = document.getElementById('num2');
+
+function generateCaptcha() {
+    const num1 = Math.floor(Math.random() * 10) + 1;
+    const num2 = Math.floor(Math.random() * 10) + 1;
+    num1Span.textContent = num1;
+    num2Span.textContent = num2;
+    return num1 + num2;
+}
+
+form.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    let isValid = true;
+
+    if (nameInput.value === '' || emailInput.value === '' || subjectInput.value === '' || messageInput.value === '') {
+        alert('Please fill out all required fields.');
+        isValid = false;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
+        alert('Please enter a valid email address.');
+        isValid = false;
+    }
+
+    const correctAnswer = generateCaptcha();
+    if (captchaAnswerInput.value !== correctAnswer.toString()) {
+        alert('Incorrect captcha answer. Please try again.');
+        isValid = false;
+    }
+
+    if (isValid) {
+        alert('Form submitted successfully!');
+        form.reset();
+    }
+});
+
+generateCaptcha();
diff --git a/gallery.html b/gallery.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Razan | Gallery</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="fonts/font-awesome.css">
+    <script src="https://kit.fontawesome.com/242ab0b392.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <h2 class="logo">myWeb<span>site!</span></h2>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="gallery.html">Gallery</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="game.html">Game</a></li>
+                <li><a href="quiz.html">Quiz</a></li>
+                <i class="fa-solid fa-cat fa-lg" style="color: #ffffff;"></i>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="gallery">
+        <div class="Interests">
+            <h2>My Interests</h2>
+        </div>
+
+        <div class="box">
+
+            <div class="card">
+                <img src="LL.png" alt="">
+                <h5>Sketching</h5>
+                <div class="para">
+                    <p>
+                        There's something calming about putting pen to paper. I love sketching characters, scenes from
+                        my favorite anime, or just random ideas that pop into my head.
+                    </p>
+                </div>
+            </div>
+            <div class="card">
+                <img src="wd.png" alt="">
+                <h5>web development</h5>
+                <div class="para">
+                    <p>
+                        Coding feels like solving puzzles, piecing together lines of code to bring websites to life.
+                        It's challenging, but seeing my creations come online is super rewarding!
+                    </p>
+                </div>
+            </div>
+            <div class="card">
+                <img src="RB.png" alt="">
+                <h5>Learning Languages</h5>
+                <div class="para">
+                    <p>
+                        I'm also interested in learning real human languages!
+                        It opens doors to new cultures and lets me connect with people from all over the world.
+                    </p>
+                </div>
+            </div>
+
+        </div>
+
+    </section>
+
+    <footer>
+        <p>Razan</p>
+
+        <div class="social">
+            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+            <a href="#"><i class="fa-brands fa-square-github"></i></a>
+            <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
+        </div>
+        <p class="end"> &copy; by Razan 2024</p>
+    </footer>
+</body>
+
+</html>
diff --git a/game.html b/game.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Razan | Rock Paper Scissors</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="fonts/font-awesome.css">
+    <script src="https://kit.fontawesome.com/242ab0b392.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header>
+        <nav>
+            <h2 class="logo">myWeb<span>site!</span></h2>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="gallery.html">Gallery</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="game.html">Game</a></li>
+                <li><a href="quiz.html">Quiz</a></li>
+                <i class="fa-solid fa-cat fa-lg" style="color: #ffffff;"></i>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="game_container">
+        <section class="game_box">
+            <div class="result_field">
+                <div class="result_images">
+                    <span class="user_result">
+                        <i class="fa-regular fa-hand-back-fist fa-rotate-90 fa-2xl" style="color: #ff1c2f;"></i>
+                    </span>
+                    <span class="cpu_result">
+                        <i class="fa-regular fa-hand-back-fist fa-rotate-270 fa-2xl" style="color: #ff1c2f;"></i>
+                    </span>
+                </div>
+                <div class="result">Let's Play!!</div>
+            </div>
+
+            <div class="option_images">
+                <span class="option_image">
+                    <i class="fa-regular fa-hand-back-fist fa-xl" style="color: #ff1c2f;"></i>
+                    <p>Rock</p>
+                </span>
+                <span class="option_image">
+                    <i class="fa-regular fa-hand fa-xl" style="color: #ff1c2f;"></i>
+                    <p>Paper</p>
+                </span>
+                <span class="option_image">
+                    <i class="fa-regular fa-hand-scissors fa-rotate-90 fa-xl" style="color: #ff2c1f;"></i>
+                    <p>Scissors</p>
+                </span>
+            </div>
+        </section>
+    </section>
+
+    <script src="gamescript.js"></script>
+
+    <footer>
+        <p>Razan</p>
+
+        <div class="social">
+            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+            <a href="#"><i class="fa-brands fa-square-github"></i></a>
+            <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
+        </div>
+        <p class="end"> &copy; by Razan 2024</p>
+    </footer>
+</body>
+
+</html>