diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..05007e6 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 49f4729..cb303d9 100644 --- a/README.md +++ b/README.md @@ -1,138 +1,2 @@ -# LAB_HTML_CSS - - -# Learn the about HTML/CSS and apply your learning on 4 mini projects! -- Eatch mini project is in a seperate folder. -- Your final result should have at least 4 web mini projects (you can create more while learning!) - -## Learning plan for HTML/CSS with resources. You'll find more resources submitted to discord. - -### 1: Introduction to HTML -**Goals:** Understand the basic structure of a web page and essential HTML elements. - -1. **Basic Structure** - - Learn about HTML tags and the structure of an HTML document. - - Create your first HTML file with ``, ``, ``, and `` tags. - - Resources: MDN Web Docs - [HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) - -2. **Text and Formatting** - - Learn about headings (`

` to `

`), paragraphs (`

`), bold (``), and italic (``). - - Practice creating and formatting text. - - Resources: W3Schools - [HTML Elements](https://www.w3schools.com/html/html_elements.asp) - -3. **Links and Images** - - Learn how to create links (``) and add images (``). - - Understand attributes like `href` and `src`. - - Resources: W3Schools - [HTML Links](https://www.w3schools.com/html/html_links.asp), [HTML Images](https://www.w3schools.com/html/html_images.asp) - -4. **Lists and Tables** - - Learn about ordered (`

    `) and unordered (`
      `) lists, and list items (`
    • `). - - Introduction to tables (``, ``, `
      `, ``). - - Resources: MDN Web Docs - [HTML Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [HTML Tables](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - -5. **Forms and Input** - - Learn about forms (`
      `) and input elements (``, ` + + +
      + + + +
      + Β© 2025 MyProject. All rights reserved. +
      + + + diff --git a/careers/.DS_Store b/careers/.DS_Store new file mode 100644 index 0000000..9363896 Binary files /dev/null and b/careers/.DS_Store differ diff --git a/careers/cv/.DS_Store b/careers/cv/.DS_Store new file mode 100644 index 0000000..b3eabef Binary files /dev/null and b/careers/cv/.DS_Store differ diff --git a/careers/cv/images/.DS_Store b/careers/cv/images/.DS_Store new file mode 100644 index 0000000..82ace57 Binary files /dev/null and b/careers/cv/images/.DS_Store differ diff --git a/careers/cv/images/Figma-logo.svg b/careers/cv/images/Figma-logo.svg new file mode 100644 index 0000000..d6042ef --- /dev/null +++ b/careers/cv/images/Figma-logo.svg @@ -0,0 +1 @@ +Figma.logoCreated using Figma \ No newline at end of file diff --git a/careers/cv/images/Git-Icon.png b/careers/cv/images/Git-Icon.png new file mode 100644 index 0000000..51f4ae5 Binary files /dev/null and b/careers/cv/images/Git-Icon.png differ diff --git a/careers/cv/images/JU-Logo.jpg b/careers/cv/images/JU-Logo.jpg new file mode 100644 index 0000000..e6be5ed Binary files /dev/null and b/careers/cv/images/JU-Logo.jpg differ diff --git a/careers/cv/images/Java_logo.svg.png b/careers/cv/images/Java_logo.svg.png new file mode 100644 index 0000000..9a2898c Binary files /dev/null and b/careers/cv/images/Java_logo.svg.png differ diff --git a/careers/cv/images/PHP-logo.svg.png b/careers/cv/images/PHP-logo.svg.png new file mode 100644 index 0000000..e989b9b Binary files /dev/null and b/careers/cv/images/PHP-logo.svg.png differ diff --git a/careers/cv/images/Purple and White.jpg b/careers/cv/images/Purple and White.jpg new file mode 100644 index 0000000..225c7ff Binary files /dev/null and b/careers/cv/images/Purple and White.jpg differ diff --git a/careers/cv/images/Sql-logo.png b/careers/cv/images/Sql-logo.png new file mode 100644 index 0000000..6b2501a Binary files /dev/null and b/careers/cv/images/Sql-logo.png differ diff --git a/careers/cv/images/canva_logo.png b/careers/cv/images/canva_logo.png new file mode 100644 index 0000000..be23793 Binary files /dev/null and b/careers/cv/images/canva_logo.png differ diff --git a/careers/cv/images/django-logo.png b/careers/cv/images/django-logo.png new file mode 100644 index 0000000..7196dce Binary files /dev/null and b/careers/cv/images/django-logo.png differ diff --git a/careers/cv/images/frontend-skills.jpg b/careers/cv/images/frontend-skills.jpg new file mode 100644 index 0000000..3e343cc Binary files /dev/null and b/careers/cv/images/frontend-skills.jpg differ diff --git a/careers/cv/images/github-tool.png b/careers/cv/images/github-tool.png new file mode 100644 index 0000000..3a464d4 Binary files /dev/null and b/careers/cv/images/github-tool.png differ diff --git a/careers/cv/images/logo-hakth.png b/careers/cv/images/logo-hakth.png new file mode 100644 index 0000000..ab2963e Binary files /dev/null and b/careers/cv/images/logo-hakth.png differ diff --git a/careers/cv/images/logo-jouf.svg b/careers/cv/images/logo-jouf.svg new file mode 100644 index 0000000..4546d1c --- /dev/null +++ b/careers/cv/images/logo-jouf.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/careers/cv/images/logo-sce.svg b/careers/cv/images/logo-sce.svg new file mode 100644 index 0000000..b69507b --- /dev/null +++ b/careers/cv/images/logo-sce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/careers/cv/images/logo_ar.svg b/careers/cv/images/logo_ar.svg new file mode 100644 index 0000000..02e7b55 --- /dev/null +++ b/careers/cv/images/logo_ar.svg @@ -0,0 +1,6 @@ + + + diff --git a/careers/cv/images/long-logo.webp b/careers/cv/images/long-logo.webp new file mode 100644 index 0000000..50adc0d Binary files /dev/null and b/careers/cv/images/long-logo.webp differ diff --git a/careers/cv/images/pcep.png b/careers/cv/images/pcep.png new file mode 100644 index 0000000..5db83d2 Binary files /dev/null and b/careers/cv/images/pcep.png differ diff --git a/careers/cv/images/python-logo.png b/careers/cv/images/python-logo.png new file mode 100644 index 0000000..05f9d63 Binary files /dev/null and b/careers/cv/images/python-logo.png differ diff --git a/careers/cv/index.html b/careers/cv/index.html new file mode 100644 index 0000000..6b8512d --- /dev/null +++ b/careers/cv/index.html @@ -0,0 +1,250 @@ + + + + + + Ghala Alnmasi | CV Landing Page + + + + + + + + + + + + + + + + + + + + +
      +

      Ghala Alnmasi

      +

      Computer Science Graduate | Full Stack Developer | UX/UI Lover

      + + Contact Me + +
      + +
      + + +
      +

      Profile

      +

      + Driven computer science graduate with a strong foundation in software development, UXUI design and a passion + for innovative technology solutions. I have hands-on experience in diverse projects, excelling at identifying and + resolving complex technical challenges. Eager to expand my expertise and contribute to pioneering technological + advancements. +

      +
      + + +
      +

      Experience

      +
      +
      + Aljouf Chamber Logo +

      Aljouf Chamber

      + Jul 2023 – Sep 2023 +
        +
      • UI/UX & infographic design
        • +
      • Ad design on Canva
        • +
      +
      + +
      + Tuwaiq Academy Logo +

      Tuwaiq Academy

      + Oct 2025 – Dec 2025 +
        +
      • Full Stack Developer using Python
        • +
      • Django, HTML, CSS, Git & GitHub
        • +
      +
      +
      +
      + + +
      +

      Education

      +
      + Jouf University +
      +

      Bachelor in Computer Science | Jouf University

      +

      2020-2024 | GPA: 4.44 of 5 | Second Honored

      +
        +
      • Graduation Project: ResourcesSync – Learning Hub
        • +
      • Frontend: HTML, CSS, JS | Backend: PHP, SQL
        • +
      +
      +
      +
      + + +
      +
      +

      Projects

      + +
      + +
      + Women's Digital Health Hackathon +

      Women's Digital Health Hackathon

      + Oct 2024 – Nov 2024 +
        +
      • Project: Ana Wa Janyny
        • +
      +
      + + +
      +

      Hackathon of Programmers for Sustainable Agricultural Development

      + Mar 2022 – Apr 2022 +
        +
      • Project: SEED
        • +
      +
      + +
      + Jouf University Graduation Project +

      Graduation Project

      + Oct 2025 – Dec 2025 +
        +
      • Project: ResourcesSync: Collaborative Learning Hub.
        • +
      • Methodology used "waterfall methodology".
        • +
      • Frontend Development: HTML, CSS, JavaScript.
        • +
      • Backend Development: PHP, SQL.
        • +
      • Tools & Technologies:MySQL, Overleaf, Canva, and more.
        • +
      +
      +
      +
      + + + +
      +

      Skills

      +
      + +
      + Frontend Tools +

      HTML-JavaScript-CSS

      +
      + +
      +
      + Python Logo + Java Logo + PHP Logo +
      +

      Python-JAVA-PHP

      +
      + +
      +
      + Git Logo + GitHub Logo + Django Logo + SQL Logo + Figma Logo + Canva Logo +
      +

      Git&Github-Django-SQL-Figma-Canva

      +
      +
      + +
      +
      +

      Frontend

      +
      +
      +
      +
      +
      +

      Backend

      +
      +
      +
      +
      +
      +

      Tools & Tech

      +
      +
      +
      +
      +
      +
      + + +
      +

      Certifications

      + +
      +
      + PCEP Certificate +

      PCEP – Python Institute – 2025

      +
      + +
      + SCE Logo +

      Saudi Council of Engineers – ID: 1171819

      +
      +
      +
      + + + +
      +

      Contact Me

      +
      + + + + + +
      +

      Your message will be sent directly via EmailJS.

      +
      +
      + + +
      + © 2025 Ghala Alnmasi | All Rights Reserved +
      + + + diff --git a/careers/cv/script.js b/careers/cv/script.js new file mode 100644 index 0000000..ca581fb --- /dev/null +++ b/careers/cv/script.js @@ -0,0 +1,12 @@ +document.getElementById("cv-form").addEventListener("submit", function(e){ + e.preventDefault(); + + emailjs.sendForm("service_5n2h5gs", "template_f9cg8ja", this) + .then(function(response){ + alert("CV sent successfully!"); + console.log(response); + }, function(error){ + alert("Failed to send CV."); + console.error(error); + }); +}); diff --git a/careers/cv/style.css b/careers/cv/style.css new file mode 100644 index 0000000..0d0c2e5 --- /dev/null +++ b/careers/cv/style.css @@ -0,0 +1,37 @@ +/* ANIMATIONS */ +@keyframes fadeInDown { + 0% { opacity: 0; transform: translateY(-50px); } + 100% { opacity: 1; transform: translateY(0); } + } + + @keyframes fadeInUp { + 0% { opacity: 0; transform: translateY(50px); } + 100% { opacity: 1; transform: translateY(0); } + } + + @keyframes fadeInLeft { + 0% { opacity: 0; transform: translateX(-50px); } + 100% { opacity: 1; transform: translateX(0); } + } + + @keyframes fadeInRight { + 0% { opacity: 0; transform: translateX(50px); } + 100% { opacity: 1; transform: translateX(0); } + } + + @keyframes bounceArrow { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(15px); } + } + + /* APPLY ANIMATIONS */ + .animate-fadeInDown { animation: fadeInDown 1s ease forwards; } + .animate-fadeInUp { animation: fadeInUp 1s ease forwards; } + .animate-fadeInLeft { animation: fadeInLeft 1s ease forwards; } + .animate-fadeInRight { animation: fadeInRight 1s ease forwards; } + .animate-bounceArrow { animation: bounceArrow 2s infinite; } + + /* DELAY CLASSES */ + .delay-200 { animation-delay: 0.2s; } + .delay-400 { animation-delay: 0.4s; } + \ No newline at end of file diff --git a/css/introdution/index.html b/css/introdution/index.html new file mode 100644 index 0000000..745967b --- /dev/null +++ b/css/introdution/index.html @@ -0,0 +1,151 @@ + + + + + + My Little LibraryπŸ“š + + + + + +
      +

      My Little Library πŸ“š

      + +
      + + +
      +

      Books in My Library

      + + +
      +
      +

      Book:
      The Prophet's Influence

      + The Prophet's Influence +

      Author: Omar Taher | Year: 2017

      + +
      + Book Description +

      Short stories inspired by the Prophet's biography, where Omar Taher narrates in his enjoyable and touching style about 12 men and women around the Prophet.

      +
      +

      To purchase the book click here

      + +

      Rate this book:

      +
      +
      +
      +
      +
      +
      +
      + +
      +
      + + +
      +

      Book:
      The Subconscious Mind

      + The Subconscious Mind +

      Author: Joseph Murphy | Year: 1963

      + +
      + Book Description +

      This book explores the power of the subconscious mind and how to use it to achieve success and happiness in life.

      +
      +

      To purchase the book click here

      + +

      Rate this book:

      +
      +
      +
      +
      +
      +
      +
      + +
      +
      + + +
      +

      Book:
      Why We Sleep

      + Why We Sleep +

      Author: Matthew Walker PhD | Year: 2018

      + +
      + Book Description +

      Why We Sleep Is An Important And Fascinating Book...Walker Taught Me A Lot About This Basic Activity That Every Person On Earth Needs.

      +
      +

      To purchase the book click here

      + +

      Rate this book:

      +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      + +
      + + +
      +

      Suggest a New Book ✏️

      +
      + +
      + + +
      + + +
      + + +
      + +
      +
      + +
      +
      +
      + + +
      +

      Visitor Comments πŸ“

      +
      + +
      + +
      +
      + + +
      +
      + + + + + + diff --git a/css/introdution/style.css b/css/introdution/style.css new file mode 100644 index 0000000..306e233 --- /dev/null +++ b/css/introdution/style.css @@ -0,0 +1,147 @@ +/* Global styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; +} + +body { + background: #f0f4f8; + color: #333; + line-height: 1.6; + padding: 20px; +} + +/* Header */ +header { + background: linear-gradient(to right, #a60744, #b5557a); + color: white; + padding: 25px; + border-radius: 10px; + text-align: center; +} + +header h1 { + font-size: 2.5em; + margin-bottom: 10px; +} + +/* Navigation */ +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 25px; + margin-top: 10px; +} + +nav ul li a { + text-decoration: none; + color: white; + font-weight: bold; + padding: 8px 15px; + border-radius: 5px; +} + +nav ul li a:hover { + background: rgba(255, 255, 255, 0.2); +} + +/* Sections */ +section { + background: white; + padding: 25px; + margin-bottom: 25px; + border-radius: 10px; +} + +/* Section Titles */ +section h2 { + font-size: 2em; + margin-bottom: 15px; + color: #b5557a; +} + + + + +/* Articles (Books) */ +article { + border: 1px solid #ddd; + padding: 15px; + margin-bottom: 20px; + border-radius: 10px; +} + +/* div Books */ +div { + display: flex; + gap: 20px; +} + +article img { + display: block; + margin-bottom: 10px; + border-radius: 5px; +} + +/* Forms */ +form input[type="text"], +form select, +form textarea { + width: 100%; + padding: 10px; + margin: 5px 0 15px 0; + border: 1px solid #ccc; + border-radius: 5px; +} + +form input[type="text"]:focus, +form select:focus, +form textarea:focus { + border-color: #b5557a; +} + +form input[type="submit"] { + padding: 12px 20px; + background: #b5557a; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; +} + +form input[type="submit"]:hover { + background: #b76c89; +} + +/* Ratings and checkboxes */ +form label { + display: block; + margin-bottom: 8px; +} + +/* Details summary */ +details summary { + font-weight: bold; + cursor: pointer; + margin-bottom: 5px; +} + +/* Footer */ +footer { + text-align: center; + padding: 20px; + border-radius: 10px; + background: linear-gradient(to left, #a60744, #b5557a); + color: white; + margin-top: 25px; +} + +footer a { + text-decoration: none; + color: white; + font-weight: bold; +} \ No newline at end of file diff --git a/html/.DS_Store b/html/.DS_Store new file mode 100644 index 0000000..1d3dc4d Binary files /dev/null and b/html/.DS_Store differ diff --git a/html/introduction/.DS_Store b/html/introduction/.DS_Store new file mode 100644 index 0000000..a308495 Binary files /dev/null and b/html/introduction/.DS_Store differ diff --git a/html/introduction/index.html b/html/introduction/index.html new file mode 100644 index 0000000..45c9302 --- /dev/null +++ b/html/introduction/index.html @@ -0,0 +1,127 @@ + + + + + + My Little LibraryπŸ“š + + + + +
      +

      My Little Library πŸ“š

      + +
      + + +
      +
      +

      Books in My Library

      + + +
      +

      Book: The Prophet's Influence

      + The Prophet's Influence +

      Author: Omar Taher | Year: 2017

      + +
      + Book Description +

      Short stories inspired by the Prophet's biography, where Omar Taher narrates in his enjoyable and touching style about 12 men and women around the Prophet.

      +
      +

      To purchase the book click here

      + +

      Rate this book:

      +
      +
      +
      +
      +
      +
      +
      + +
      +
      + + +
      +

      Book: The Subconscious Mind

      + The Subconscious Mind +

      Author: Joseph Murphy | Year: 1963

      + +
      + Book Description +

      This book explores the power of the subconscious mind and how to use it to achieve success and happiness in life.

      +
      +

      To purchase the book click here

      + +

      Rate this book:

      +
      +
      +
      +
      +
      +
      +
      + +
      +
      + +
      + + +
      +
      +

      Suggest a New Book ✏️

      +
      + +
      + + +
      + + +
      + + +
      + +
      +
      + +
      +
      +
      + + +
      +
      +

      Visitor Comments πŸ“

      +
      + +
      + +
      +
      + + +
      +
      + + + + + +