inde.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styies.css" />
    <title>Yazan website</title>
</head>
<body>
    
    <header> 

         <img src="assets/svg/logo.svg" alt="yazan K99 logo">
        <nav class="navigation"> 
            <ul>
                 <li><a href="#aboutMe">About Me </a></li>
                 <li><a href="#MeWorks">MeWorks</a></li>
                 <li><a href="#contactMe">contactMe </a></li>
             </ul>
        </nav>

    </header>
    <hr/>

    <section class="hero">
     <img class="arrow" src="assets/svg/arrow.svg" alt="arrow">   
     <div class="heroSub">
        <h1 class="name">I’m yazan</h1>
        <h1 class="title">Student and programmer</h1>
        <div class="heroBtns"></div>
        <a class="hireMe"href="#contactMe">hireMe</a>
        

    </div>
    <img src="assets/svg/Hero.svg" alt="hero image" class="heroimg"/>
    
</section>




    <section class="aboutMe" id="aboutMe">
        <img
         src="assets/svg/AboutMe.svg"
          alt="aboutMe image"
          class="aboutMeing"
          />
          <div class="textContainer">
            <div class="textTitle">
              <h1 class="aboutName">About</h1>
              <h1 class="aboutTitle">me</h1>
              <img src="assets/svg/lightbulb.svg" alt="ligh" class="light" />
            </div>
            <p class="aboutMePar">
                Welcome to my website. I am Yazan, a third-year middle school student. I love programming very much, and it is my favorite hobby. This website was created, and it is the first website I have designed.
            </p>
          </div>
        </section>
    


        <search class="works" id="MeWorks">
            <div class="worksContainer">
            <div class="projectTitle">
                <h1 class="aboutName">My recent</h1>
                <h1 class="aboutTitle">works</h1>
                </div>
                <ul>
                    <li>
                      <a href="file:///C:/Users/ASUS/OneDrive%20-%20RiyadhBoys/%D8%B3%D8%B7%D8%AD%20%D8%A7%D9%84%D9%85%D9%83%D8%AA%D8%A8/%D8%A7%D9%86%D8%B4%D8%A7%D8%A1%20%D8%AE%D8%B3%D8%A7%D8%A8/index.html" target="_blank"
                        ><img src="assets/imgs/landingPage.png" alt="landing Page"
                      /></a>
                    </li>
                    <li>
                      <a href="soon"target="_blank"><img src="assets/imgs/webApp.png" alt="Wep App" /></a> 
                    </li>
                    <li>
                      <a href="soon"target="_blank"><img src="assets/imgs/app.png" alt="App" /></a>
                    </li>
                  </ul>
            </div>
        </search>
        


        <section class="contactContainer" id="contactMe">
            <div class="contactTitle">
              <h1 class="aboutName">Contact</h1>
              <h1 class="aboutTitle">me</h1>
            </div>
            <div class="contact">
              <div class="emailAndPhone">
                <img src="assets/svg/Email.svg" alt="email logo" />
                <a href="mailtoyaznaan794@gmail.com"
                  ><h3>yaznaan794@gmail.com</h3></a
                >
              </div>
              <div class="emailAndPhone">
                <img src="assets/svg/phone.svg" alt="phone logo" />
                <h3>soon</h3>
              </div>
            </div>
            <div class="socialMedia">
              <a
               href="https://github.com/yazanprogrammer" target="_blank"
                ><img src="assets/svg/github.svg" alt=" my github account"
              /></a>
              <a href="https://www.youtube.com/@qw0_1" target="_blank"
                ><img src="assets/svg/youtube.svg" alt="my youtube channel"
              /></a>
            </div>
          </section>
          
          <hr />
          <footer>
            <p>Built by yazan.</p>
          </footer>
        </body>
      </html>
          