diff --git a/LL.png b/LL.png new file mode 100644 index 0000000..b1bb4a8 Binary files /dev/null and b/LL.png differ diff --git a/RB.png b/RB.png new file mode 100644 index 0000000..d81ca22 Binary files /dev/null and b/RB.png differ diff --git a/When_Marnie_Was_There_Screenshot_0150.jpg b/When_Marnie_Was_There_Screenshot_0150.jpg new file mode 100644 index 0000000..28db483 Binary files /dev/null and b/When_Marnie_Was_There_Screenshot_0150.jpg differ diff --git a/about.html b/about.html new file mode 100644 index 0000000..eec3430 --- /dev/null +++ b/about.html @@ -0,0 +1,72 @@ + + + + + + Razan | About Me + + + + + + +
+ +
+ +
+
+ Hi + +
+

about me

+
Computer Information Systems Student
+

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!

+ +

my skills

+
+

html 95%

+
+
+ +
+

css 85%

+
+
+ +
+

javascript 65%

+
+
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/about.jpg b/about.jpg new file mode 100644 index 0000000..6fb9efa Binary files /dev/null and b/about.jpg differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..ac2fd1f --- /dev/null +++ b/contact.html @@ -0,0 +1,93 @@ + + + + + + Razan | Contact Me + + + + + + +
+ +
+ +
+ +
+
+
+
+
+

Address

+

5423 road jeddah

+
+
+
+
+
+

Phone

+

05786223324

+
+
+
+
+
+

Email

+

shvjds@jnfvbsj.kdh

+
+
+
+
+
+

Send

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/contactscript.js b/contactscript.js new file mode 100644 index 0000000..2d01662 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/gallery.html b/gallery.html new file mode 100644 index 0000000..00fe76b --- /dev/null +++ b/gallery.html @@ -0,0 +1,82 @@ + + + + + + Razan | Gallery + + + + + + +
+ +
+ +
+
+

My Interests

+
+ +
+ +
+ +
Sketching
+
+

+ 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. +

+
+
+
+ +
web development
+
+

+ 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! +

+
+
+
+ +
Learning Languages
+
+

+ 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. +

+
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/game.html b/game.html new file mode 100644 index 0000000..41d29b7 --- /dev/null +++ b/game.html @@ -0,0 +1,74 @@ + + + + + + + Razan | Rock Paper Scissors + + + + + + +
+ +
+ +
+
+
+
+ + + + + + +
+
Let's Play!!
+
+ +
+ + +

Rock

+ + + +

Paper

+ + + +

Scissors

+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/gamescript.js b/gamescript.js new file mode 100644 index 0000000..18f2632 --- /dev/null +++ b/gamescript.js @@ -0,0 +1,48 @@ +const gameContainer = document.querySelector(".game_box"); +const resultField = document.querySelector('.result'); +const userResult = document.querySelector('.user_result'); +const cpuResult = document.querySelector('.cpu_result'); +const optionImages = document.querySelectorAll('.option_image'); + +const choices = ['rock', 'paper', 'scissors']; + +function getComputerChoice() { + const randomIndex = Math.floor(Math.random() * choices.length); + return choices[randomIndex]; +} + +function determineWinner(userChoice, computerChoice) { + if (userChoice === computerChoice) { + return 'Tie!'; + } else if ( + (userChoice === 'rock' && computerChoice === 'scissors') || + (userChoice === 'paper' && computerChoice === 'rock') || + (userChoice === 'scissors' && computerChoice === 'paper') + ) { + return 'You Win!'; + } else { + return 'You Lose!'; + } +} + +function handleOptionClick(event) { + const userChoice = event.target.nextElementSibling.textContent.toLowerCase(); + const computerChoice = getComputerChoice(); + + userResult.innerHTML = ``; + cpuResult.innerHTML = ``; + + userResult.innerHTML = userChoice === 'scissors' + ? `` + : ``; + + cpuResult.innerHTML = computerChoice === 'scissors' + ? `` + : ``; + + + const winner = determineWinner(userChoice, computerChoice); + resultField.textContent = winner; +} + +optionImages.forEach(optionImage => optionImage.addEventListener('click', handleOptionClick)); diff --git a/index.html b/index.html new file mode 100644 index 0000000..819e477 --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + Razan | Personal Website + + + + + + +
+ +
+ +
+
+
+
+ + +
+

Hello! I'm

+

Razan

+

Let's share stories! Subscribe
for my latest creations and
connect with me.

+ +
+
+ + + + + \ No newline at end of file diff --git a/quiz.html b/quiz.html new file mode 100644 index 0000000..d8bf692 --- /dev/null +++ b/quiz.html @@ -0,0 +1,54 @@ + + + + + + Razan | Math Quiz! + + + + + + +
+ +
+ +
+
+

Math Quiz!

+ +
+ + + +

+ + +
+
+ + + + + \ No newline at end of file diff --git a/quizscript.js b/quizscript.js new file mode 100644 index 0000000..8681c7d --- /dev/null +++ b/quizscript.js @@ -0,0 +1,58 @@ +const questions = [ + { question: "What is 2 + 3?", answer: 5 }, + { question: "What is 7 x 4?", answer: 28 }, + { question: "What is 12 / 3?", answer: 4 }, + { question: "What is the square root of 9?", answer: 3 }, + { question: "What is 10 - 5?", answer: 5 }, + { question: "What is 8 x 8?", answer: 64 }, + { question: "What is 15 / 5?", answer: 3 }, + { question: "What is the cube root of 27?", answer: 3 }, + { question: "What is 20 + 10?", answer: 30 }, + { question: "What is 99 - 1?", answer: 98 }, +]; + +let currentQuestion = 0; +let score = 0; + +function generateQuestion() { + const questionElement = document.getElementById("questions"); + questionElement.innerHTML = ""; + + const question = questions[currentQuestion]; + questionElement.innerHTML = `

${question.question}

`; + + const userInput = document.createElement("input"); + userInput.type = "number"; + questionElement.appendChild(userInput); +} + +function submitAnswers() { + const userInput = document.querySelector("#questions input"); + const userAnswer = parseInt(userInput.value); + + const currentQuestionAnswer = questions[currentQuestion].answer; + + if (userAnswer === currentQuestionAnswer) { + score++; + } + + currentQuestion++; + + if (currentQuestion === questions.length) { + displayScore(); + } else { + generateQuestion(); + userInput.value = ""; + } +} + +function displayScore() { + const scoreElement = document.getElementById("score"); + scoreElement.textContent = `Your score is: ${score} out of ${questions.length}`; + document.getElementById("submit-btn").disabled = true; +} + +generateQuestion(); + +const submitButton = document.getElementById("submit-btn"); +submitButton.addEventListener("click", submitAnswers); \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..46f8875 --- /dev/null +++ b/script.js @@ -0,0 +1,44 @@ +window.onload = function () { + const container = document.querySelector(".greet"); + + function updateTime() { + const timeNow = new Date(); + const hours = timeNow.getHours(); + const minutes = timeNow.getMinutes(); + const seconds = timeNow.getSeconds(); + const ampm = hours >= 12 ? "PM" : "AM"; + const hours12 = hours % 12 || 12; + + let greeting, additionalMessage; + + if (hours >= 5 && hours < 12) { + greeting = "Good morning!"; + additionalMessage = "Have a great start to your day!"; + } else if (hours >= 12 && hours < 18) { + greeting = "Good afternoon!"; + additionalMessage = "Enjoy your afternoon!"; + } else if (hours >= 18 && hours < 22) { + greeting = "Good evening!"; + additionalMessage = "Wishing you a pleasant evening!"; + } else { + greeting = "Good night!"; + additionalMessage = "Sweet dreams and rest well!"; + } + + container.innerHTML = ` +

${hours12}:${minutes.toString().padStart(2, '0')} ${ampm}

+

${greeting}

+

${additionalMessage}

+ `; + } + + updateTime(); + setInterval(updateTime, 1000); +} +const socialLinks = document.querySelectorAll('.social a'); +socialLinks.forEach(link => { + link.onclick = function () { + window.open(this.href, '_blank'); + return false; + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5f65801 --- /dev/null +++ b/style.css @@ -0,0 +1,667 @@ +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + margin: 0; + padding: 0; +} + +.hero { + height: 100vh; + width: 100%; + background-image: url(When_Marnie_Was_There_Screenshot_0150.jpg); + background-size: cover; + background-position: center; +} + +header { + width: 100%; + z-index: 100; + background: #202125; + box-shadow: 0 .1rem .5rem rgba(51, 51, 51, .5); + + nav { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 30px; + padding-left: 8%; + padding-right: 8%; + } + + nav ul li { + list-style: none; + display: inline-block; + padding: 10px 25px; + font-size: 20px; + } + + nav ul li a { + color: white; + text-decoration: none; + font-weight: bold; + text-transform: capitalize; + } + + nav ul li a:hover { + color: red; + transition: .4s; + } + + .logo { + color: white; + font-size: 35px; + letter-spacing: 1px; + cursor: pointer; + } + + span { + color: #ff1c2f; + } +} + +.content { + position: absolute; + top: 50%; + right: 30%; + transform: translateY(-50%); + +} + +h1 { + color: white; + margin: 20px 0px 20px; + font-size: 75px; +} + +h3 { + color: white; + font-size: 25px; + margin-bottom: 50px; +} + +h4 { + color: red; + letter-spacing: 2px; + font-size: 25px; +} + +.newsletter form { + width: 380px; + max-width: 100%; + position: relative; +} + +.newsletter form input:first-child { + display: inline-block; + padding: 14px 130px 14px 15px; + border: 2px solid #ff1c2f; + outline: none; + border-radius: 30px; + width: 100%; +} + +.newsletter form input:last-child { + position: absolute; + padding: 10px 30px; + display: inline-block; + border: none; + border-radius: 30px; + outline: none; + background: #ff1c2f; + top: 6px; + right: 6px; + box-shadow: 0px 0px 50px #000, 0px 0px 50px #858585; + cursor: pointer; +} + +.about { + width: 100%; + padding: 100px 0px; + background: + /* Gradient in Hex */ + linear-gradient(to right, #205887 0%, 33.876222372055054%, #1A4474 67.75244474411011%, 83.87622237205505%, #12477D 100%); + background-size: cover; + background-position: center; +} + +.about img { + height: auto; + width: 500px; +} + +.main { + width: 1130px; + max-width: 95%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-around; +} + +.about-text h2 { + color: #fff; + font-size: 3rem; + text-transform: capitalize; + margin-bottom: 20px; +} + +.about-text h5 { + color: white; + margin-bottom: 25px; + font-size: 22px; + letter-spacing: 2px; + text-transform: capitalize; +} + +.about-text p { + color: white; + letter-spacing: 1px; + line-height: 28px; + width: 430px; + margin-bottom: 45px; + font-size: 18px; +} + +.about .skill-bar h3 { + margin-top: 2rem; +} + +.about .skill-bar h3 span { + display: block; + text-align: end; +} + +.about .skill-bar .bar { + width: 100%; + height: .5rem; + background: #225687; + position: relative; +} + +.about .skill-bar .bar span { + position: absolute; + display: block; + height: 100%; + width: 100%; + background: #ccc; +} + +.about .skill-bar .bar1 span { + width: 95%; +} + +.about .skill-bar .bar2 span { + width: 85%; +} + +.about .skill-bar .bar3 span { + width: 65%; +} + +.about .skill-bar .bar4 span { + width: 75%; +} + + +.gallery { + width: 100%; + padding: 100px 0px; + background: linear-gradient(to right, #205887 0%, 33.876222372055054%, #1A4474 67.75244474411011%, 83.87622237205505%, #12477D 100%); + ; + background-size: cover; + background-position: center; +} + +.Interests h2 { + color: white; + text-align: center; + font-size: 75px; + margin: 30px auto; +} + +.gallery .box { + display: flex; + justify-content: center; + align-items: center; + min-height: 400px; + background: linear-gradient(to right, #205887 0%, 33.876222372055054%, #1A4474 67.75244474411011%, 83.87622237205505%, #12477D 100%); + ; +} + +.card { + display: flex; + flex-direction: column; + height: 475px; + width: 332px; + background: #0f1c35; + margin: 20px; + border-radius: 20px; + position: relative; + overflow: hidden; + justify-content: center; +} + +.card img { + width: 100%; + height: 65%; + object-fit: cover; + position: absolute; + top: 0; + margin: 0 auto; +} + +.card h5 { + padding-top: 85%; + font-size: 22px; + text-align: center; + color: #ddd; +} + +.card .para p { + padding-right: 18px; + padding-left: 18px; + text-align: center; + color: #ddd; +} + +.html { + width: 90%; + background-color: #12477B; +} + +.css { + width: 80%; + background-color: #12477B; +} + +.javascript { + width: 65%; + background-color: #12477B; +} + +footer { + position: relative; + width: 100%; + height: 300px; + background: #202125; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +footer p:first-child { + font-size: 30px; + color: white; + margin-bottom: 20px; + font-weight: bold; +} + +footer p:nth-child(2) { + font-size: 17px; + color: white; + text-align: center; + width: 500px; + line-height: 26px; +} + +.social { + display: flex; +} + +.social a { + width: 42px; + height: 42px; + border-radius: 50%; + background-color: #ff1c2f; + justify-content: center; + align-items: center; + color: white; + margin: 22px; + text-decoration: none; + font-size: 18px; + display: flex; +} + +.social a:hover { + transform: scale(1.2); + transition: .3s; +} + +.end { + position: absolute; + color: #ff1c2f; + bottom: 25px; + font-size: 14px; +} + +.contact { + height: 100vh; + width: 100%; + background-image: url(When_Marnie_Was_There_Screenshot_0150.jpg); + background-size: cover; + background-position: center; +} + +.contact .container { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.contact .container .contact-info { + width: 50%; + display: flex; + flex-direction: column; +} + +.contact .container .contact-info .box { + position: relative; + padding: 70px 0; + display: flex; +} + +.contact .container .contact-info .box .icon { + min-width: 60px; + height: 60px; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + font-size: 22px; +} + +.contact .container .contact-info .box .text { + display: flex; + margin-left: 20px; + font-size: 16px; + color: #fff; + flex-direction: column; + font-weight: 300; +} + +.contact .container .contact-info .box .text h3 { + font-weight: 500; + color: #fff; +} + +.contact .container .contact-form { + width: 40%; + padding: 40px; + background: #fff; +} + +.contact .container .contact-form h2 { + font-size: 30px; + color: #333; + font-weight: 500; +} + +.contact .container .contact-form .input-box { + position: relative; + width: 100%; + margin-top: 10px; +} + +.contact .container .contact-form .input-box input, +.contact .container .contact-form .input-box textarea { + width: 100%; + padding: 5px 0; + font-size: 16px; + margin: 10px 0; + border: none; + border-bottom: 2px solid #333; + outline: none; + resize: none; +} + +.contact .container .contact-form button { + background: #ff1c2f; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 25px; + border-radius: 30px; + transition: transform .4s; +} + +.contact .container .contact-form button:hover { + transform: scale(1.2); +} + +/* javascript section style*/ + + +.greet { + position: relative; + display: inline-block; + font-size: 2rem; + box-shadow: 0px 0px 50px #000, 0px 0px 50px #858585; + overflow: hidden; + font-weight: bold; + border: 2px solid #ccc; + padding: 10px 20px; + border-radius: 5px; + transition: ease-in-out 0.1s; + transition-property: background, box-shadow, color; + width: 200px; +} + +.greet p { + margin: 0; + font-size: 14px; +} + +.saying { + padding-top: 9px; + color: #ccc; +} + +p.time { + font-weight: bold; + font-size: 24px !important; + color: #fff; + display: inline-block; + padding-bottom: 9px; + border-bottom: 1px solid #ccc; +} + +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); + +.game_container { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(to right, #205887 0%, 33.876222372055054%, #1A4474 67.75244474411011%, 83.87622237205505%, #12477D 100%); + ; + + ::selection { + color: #fff; + background-color: #e82a2a; + } + + .game_box { + padding: 2rem 7rem; + border-radius: 14px; + background: #fff; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + } + + .result_images { + display: flex; + column-gap: 7rem; + } + + .game_box.start .user_result { + transform-origin: left; + animation: userShake 0.7s ease infinite; + } + + @keyframes userShake { + 50% { + transform: rotate(10deg); + } + } + + .game_box.start .cpu_result { + transform-origin: right; + animation: cpuShake 0.7s ease infinite; + } + + @keyframes cpuShake { + 50% { + transform: rotate(-10deg); + } + } + + .result_images img { + width: 100px; + } + + .user_result img { + transform: rotate(90deg); + } + + .cpu_result img { + transform: rotate(-90deg) rotateY(180deg); + } + + .result { + text-align: center; + font-size: 2rem; + color: #0f1c35; + margin-top: 1.5rem; + } + + .option_image img { + width: 100px; + } + + .option_images { + display: flex; + align-items: center; + margin-top: 2.5rem; + justify-content: space-between; + } + + .game_box.start .option_images { + pointer-events: none; + } + + .option_image { + display: flex; + flex-direction: column; + align-items: center; + opacity: 0.5; + cursor: pointer; + transition: opacity 0.3s ease; + } + + .option_image:hover { + opacity: 1; + } + + .option_image.active { + opacity: 1; + } + + .option_image img { + pointer-events: none; + } + + .option_image p { + color: #0f1c35; + font-size: 1.235rem; + margin-top: 1rem; + pointer-events: none; + } +} + +.quiz { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(to right, #205887 0%, 33.876222372055054%, #1A4474 67.75244474411011%, 83.87622237205505%, #12477D 100%); + ; + + .container { + width: 40%; + padding: 40px; + background: #fff; + margin: 50px auto; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + text-align: center; + } + + h1 { + font-size: 30px; + color: #333; + font-weight: 500; + text-align: center; + } + + .question { + margin-bottom: 20px; + } + + .question p { + font-size: 16px; + color: #333; + margin-bottom: 10px; + } + + .question input { + width: 100%; + padding: 5px 0; + font-size: 16px; + margin: 0; + border: none; + border-bottom: 2px solid #333; + outline: none; + } + + + #score { + font-weight: bold; + font-size: 16px; + color: #333; + margin-top: 20px; + text-align: center; + } + + #submit-btn { + background: #ff1c2f; + color: white; + text-decoration: none; + border: 2px solid transparent; + font-weight: bold; + padding: 10px 25px; + border-radius: 30px; + transition: transform .4s; + margin-top: 20px; + display: block; + margin-left: auto; + margin-right: auto; + } + + #submit-btn:hover { + transform: scale(1.2); + } +} \ No newline at end of file diff --git a/wd.png b/wd.png new file mode 100644 index 0000000..921157f Binary files /dev/null and b/wd.png differ