index.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="style.css">
  <title>My Website</title>
</head>

<body>
  <!-- Header -->

  <section id="header">z
    <div class="header container">
      <div class="nav-bar">
        <div class="brand">
          <a href="#hero">
            <h1><span>D</span>ev <span></span> <span>B</span>ray</h1>
          </a>
        </div>
        <div class="nav-list">
          <div class="hamburger">
            <div class="bar"></div>
          </div>
          <ul>
            
            <li><a href="#hero" data-after="Home">Home</a></li>
            <li><a href="#courses" data-after="Courses">Courses</a></li>
            <li><a href="#projects" data-after="Projects">Projects</a></li>
            <li><a href="#about" data-after="About">About</a></li>
            <li><a href="#contact" data-after="Contact">Contact</a></li>
            
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- End Header -->


  <!-- Hero Section  -->
  <section id="hero">
    <div class="hero container">
      <div>
        <h1>Hello, <span></span></h1>
        <h1>My Name is <span></span></h1>
        <h1>Brandon  <span></span></h1>
        <a href="#projects" type="button" class="cta">Portfolio</a>
      </div>
    </div>
  </section>
  <!-- End Hero Section  -->

  <!-- Courses Section -->
  <section id="courses">
    <div class="courses container">
      <div class="course-top">
        <h1 class="section-title">Cour<span>s</span>es</h1>
        <p>Certifications I am currently pursuing inorder to further my knowledge and sharpen my skills.
           The platform I am using is Udemy and the descriptions and overviews of each of the respective course can be 
          found by following the links below </p>
      </div>

      <div class="course-bottom">
        
        <div class="course-item">
          <div class="icon"> <img src="img\udemy.png" ></div>
          <h2>Web Developer Bootcamp</h2>
          <a href="https://www.udemy.com/course/the-web-developer-bootcamp/"
          p>Click To Find Out More</p></a>
        </div>

        <div class="course-item">
          <div class="icon"> <img src="img\udemy.png" ></div>
          <h2>Complete Android Oreo Developer Course</h2>
          <a href="https://www.udemy.com/course/the-complete-android-oreo-developer-course/"
          p>Click To Find Out More</p></a>
        </div>

        <div class="course-item">
          <div class="icon"> <img src="img\udemy.png" ></div>
          <h2>Java Programming Masterclass</h2>
          <a href="https://www.udemy.com/course/java-the-complete-java-developer-course/"
          p>Click To Find Out More</p></a>
        </div>
      </div>
    </div>
  </section>
  <!-- End course Section -->

  <!-- Projects Section -->
  <section id="projects">
    <div class="projects container">
      <div class="projects-header">
        <h1 class="section-title">Recent <span>Projects</span></h1>
      </div>
      <div class="all-projects">
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Space Invaders Game</h2>
            <p>Space invaders game made using Pygame library within Pycharm for practice of Python Programming Concepts</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 2</h1>
            <h2>Producto Website</h2>
            <p>This platform is simply an online advertisement store where we take products you never knew were trending to your home screen. It only serves as an extended marketer for these products. Although the website is not as big as it should be, as time goes on we can build this page to be one where you can find Ads on anything, from simple cables, to the best cars to buy on a budget.</p>
          </div>
          <div class="project-img">
            <img src="img\producto.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 3</h1>
            <h2>Thousand Miles</h2>
            <p>Application that rewards people fuel coupons based off their step counter in a bid to encourage the population to exercise more and lower greenhouse emissions</p>
          </div>
          <div class="project-img">
            <img src="./img/1kMiles.png" alt="img">
          </div>
       
      </div>
    </div>
  </section>
  <!-- End Projects Section -->

<!-- Languages Section -->
<section id="languages">
  <div class="container">
    <div class="row">
        <h1 class="section-title"><span>Languages</span> </h1>
        <div class="language__list">
          <div class="language">
            <figure class="language__img--wrapper">
              <img
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/240px-HTML5_Badge.svg.png"
                alt="Html Logo" class="language__img" />
            </figure>
            <span class="language__name">HTML</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="https://cdn.iconscout.com/icon/free/png-256/css-131-722685.png" alt="CSS Logo"
                class="language__img" />
            </figure>
            <span class="language__name">CSS</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="https://cdn.iconscout.com/icon/free/png-256/javascript-1-225993.png" alt="JavaScript Logo"
                class="language__img" />
            </figure>
            <span class="language__name">JavaScript</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="img\Java-Logo.png"
                alt="Java Logo" class="language__img" />
            </figure>
            <span class="language__name">Java</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="img\SQL-Logo.png" alt="SQL Logo"
                class="language__img" />
            </figure>
            <span class="language__name">SQL</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="img\R-Logo.png" alt="R Logo"
                class="language__img" />
            </figure>
            <span class="language__name">R</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="img\C-Logo.png" alt="C Logo"
                class="language__img" />
            </figure>
            <span class="language__name">C</span>
          </div>
          <div class="language">
            <figure class="language__img--wrapper">
              <img src="img\Python-Logo.png" alt="Python Logo" class="language__img" />
            </figure>
            <span class="language__name">Python</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about">
    <div class="about container">
      <div class="col-left">
        <div class="about-img">
          <img src="./img/img-2.png" alt="img">
        </div>
      </div>
      <div class="col-right">
        <h1 class="section-title">About <span>me</span></h1>
        <h2></h2>Developer</h2>
        <p>I am a highly motivated and versatile  individual that enjoys learning and application of different concepts to solve problems.
          My interests range from Data Science to Software, Web and Application development. I am yet to specialise 
          but i see no harm in being able to understand how different tools and languages function in order to bring 
          value to many different aspects of our lives in the morden day. When I am not infront of my laptop screen tinkering , you can find 
          me volunteering at different locations such as Queen Elizabeth Childrens Home or you could find me in the gym.
          I hope to be able to leverage my skills someday inorder to deal with the many ineffiencies that our country has 
           so as to help achieve vision 2050 and improve the standard of living through application of technology and its different subsets.
          
        
        </p>
        <a href="img\CV - Brandon B Ngwenya.pdf" class="cta">Download Resume</a>
      </div>
    </div>
  </section>
  <!-- End About Section -->

  <!-- Contact Section -->
  <section id="contact">
    <div class="contact container">
      <div>
        <h1 class="section-title">Contact <span>info</span></h1>
      </div>
      <div class="contact-items">
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
          <div class="contact-info">
            <h1>Phone</h1>
            <h2>+263 776 270 317</h2>
            <h2>+263 779 599 627</h2>
          </div>
        </div>
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" /></div>
          <div class="contact-info">
            <h1>Email</h1>
            <h2>brandonngwenya94@gmail.com</h2>
            
          </div>
        </div>
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" /></div>
          <div class="contact-info">
            <h1>Address</h1>
            <h2>63 Ullswaterdrive, Morningside, Bulawayo</h2>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->

  <!-- Footer -->
  <section id="footer">
    <div class="footer container">
      <div class="brand">
        <h1><span>B</span>randon <span>B</span>ongani <span>N</span>gwenya</h1>
      </div>
      
      <div class="social-icon">
        <div class="social-item">
          <a href="https://www.linkedin.com/in/brandon-ngwenya-633a1113a/"><img src="https://img.icons8.com/bubbles/100/000000/linkedin.png" /></a>
        </div>
        <div class="social-item">
          <a href="https://www.instagram.com/bongxni_ngwenya/"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
        </div>
        <div class="social-item">
          <a href="https://github.com/Dev-Bray"><img src="https://img.icons8.com/bubbles/100/000000/github.png" /></a>
        </div>
        <div class="social-item">
          <a href="https://twitter.com/bongani_bray"><img src="https://img.icons8.com/bubbles/50/000000/twitter-circled.png"/></a>
        </div>
      </div>
      <p>Copyright © 2022 Dev-Bray. All rights reserved</p>
    </div>
    </div>
  </section>
  <!-- End Footer -->
  <script src="./app.js"></script>
</body>

</html>