Personal Portfolio - Mais Hatem (FCC Challenge)

In this example below you will see how to do a Personal Portfolio - Mais Hatem (FCC Challenge) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by maishatem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright maishatem ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio - Mais Hatem (FCC Challenge)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <link href="/normalize.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
    <img src="https://pbs.twimg.com/profile_images/701871680713412609/c2X6krjY.jpg">
    
    <h1>Mais Hatem</h1>
    <h3>Personal Portfolio</h3>
    
    <ul class="menuUL">
      <li class="menu">
  <a href="#sec1" class="whiteLink">About Me</a></li>
     
      <li class="menu"><a href="#sec2" class="whiteLink">Professional Experience</a></li>
      <li class="menu"><a href="#sec3" class="whiteLink">Future Goals</a></li>
      <li class="menu"><a href="#sec4" class="whiteLink">Contact Me</a></li>

    </ul>
  </header>

  <article id="sec1">
  <h2>About Me</h2>
  <p>I am a software engineering student interested in Web Development, Open Source Software
     and photography. In addition to my university studies,
    I am a teacher at the Syrian computer society and a freelance translator at wikiHow.</p>
  </article>

  <article id="sec2">
<h2>Professional Experience in Details</h2>
    <div>
<ul>
<li><b>2015 October - Now:</b> Software Engineering student at Tishreen University </li>
<li><b>2013 June - Now:</b> <a href="http://wikihow.com/user:maismoxie"> Volunteer Contributer</a> at wikiHow: Made 1000+ contributions </li>
<li><b>2015 October - Now:</b> Software Engineering student at Tishreen University </li>
<li><b>2016 January - Now:</b> Freelance Translator at wikiHow</li>
<li> <b> 2013 May - Now:</b> <a href="https://facebook.com/MaisHatemPhotography"> Amateur photographer </a> </li>
</ul>
    </div>
  </article>


  <article id="sec3">
  <h2>Future Goals</h2>
  <p>At night, I am a self-paced student who seeks being a certified web developer.
  I also dream of contributing something valuable to the world of open source</p>
  </article>


  <article id="sec4">
    <form method="post" action="mailto:mais.moxie@gmail.com" >
  <h2>Contact Me</h2>
    <p>Feel free to leave me a message, I'll reply soon :D</p>
      <input type="email" placeholder="your email">
  <input type="text" placeholder="your message">
      <input type="submit" value="Send to Mais">
    </form>
  </article>


<p>Coded with ♥️ by <a href="https://www.linkedin.com/in/maishatem" target="_blank">Mais Hatem &copy;</a></p>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/maishatem/personal-portfolio-mais-hatem-fcc-challenge-NAZQJp */
body{
  background: #D5C5C8 ;
  
}
h2{
    font-family: 'Ubuntu', sans-serif;
}
.menu {
  display: inline;
}
div{
  margin : 0 -40px 0;
}
header {
      text-align: center;
      background: url('http://tofu.space/background.jpg');
      background-size: cover;
    }
    a {
       color:black;
    }

h3{
  color:white;
}
    h1 {
  font-size: 70px;
  text-align: center;
  margin: 20px 0 -20px 0 ;
  font-family: 'Ubuntu', sans-serif;
  color:white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
    img {
      margin: 40px 0px -20px 0px;
      border: 3px solid #D5C5C8;
      border-radius: 20px;
      height:150px;
     
    }
    .menuUL {
      padding: 10px;
      background: rgba(0,0,0,0.5);
    }
.whiteLink{
        color:white;
}
    li {
      display: block;
      padding: 0px 10px 0px 10px;
    }
    article {
      max-width:500px;
      padding:20px;
      margin: 0 auto;
    }

    @media (max-width: 500px)  {
      body{
        background: pink;
      }
      h1{
        font-size: 36px;

    }
    li {
      display:block;
      padding:5px;
    }

    }


/*Downloaded from https://www.codeseek.co/maishatem/personal-portfolio-mais-hatem-fcc-challenge-NAZQJp */
 /* <script>
  alert("Javascript works!");
    $("button").on("click", function() {
      alert("clicked!")
      });

  </script>
  */

Comments