index.html

<!DOCTYPE html>
<html class="no-js">

<head>
  <!-- Add Your Title -->
  <title> Your Title Here </title>

  <!-- All Meta Tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <!-- All Link tags -->
  <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">
  <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- All script tags -->
  <script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
  <script src="js/vendor/jquery.hashchange.min.js"></script>
  <script src="js/vendor/jquery.easytabs.min.js"></script>
  <script src="js/main.js"></script>

</head>

<!-- Start of Body Tag -->

<body class="bg-fixed bg-1">
  <div class="main-container">
    <div class="main wrapper clearfix">

      <!-- Header Start -->
      <header id="header">
        <div id="logo">
          <h6>
            Your Name
          </h6>
          <h4>
            Tag1 / Tag2
          </h4>
        </div>
      </header>

      <!-- Text "hello world" -->
      <header id="header">
        <div id="helloworld">
          <h1>
            Hello, World !
          </h1>
        </div>
      </header>

      <!-- Main Tab Container -->
      <div id="tab-container" class="tab-container">

        <!-- Tab List -->
        <ul class='etabs'>

          <li class='tab' id="tab-about">
            <a href="#about">
              <i class="icon-user"></i>
              <span>
                About Me
              </span>
            </a>
          </li>

          <li class='tab'>
            <a href="#resume">
              <i class="icon-file-text"></i>
              <span>
                Skills
              </span>
            </a>
          </li>

          <li class='tab'>
            <a href="#portfolio">
              <i class="icon-heart"></i>
              <span>
                Projects
              </span>
            </a>
          </li>

          <li class='tab'>
            <a href="#contact">
              <i class="icon-envelope"></i>
              <span>
                Contact
              </span>
            </a>
          </li>

        </ul>
        <!-- End Tab List -->

        <!-- ----------------------------------------------------------------------------------- -->
        <!-- Code for differents Tabs strat from here. -->
        <div id="tab-data-wrap">

          <!-- About Tab Data -->
          <div id="about">
            <section class="clearfix">
              <div class="g2">
                <div class="photo">
                  <img src="./images/my.jpg" alt="Your alt text">
                </div>
                <div class="info">
                  <h2>
                    <p></p>
                    Your Name
                  </h2>
                  <h4>
                    Your work tag
                  </h4>
                  <p>
                    Type your description here.
                  </p>
                  </p>
                </div>
              </div>

              <div class="g1">
                <div class="main-links sidebar">
                  <ul>
                    <li>
                      <a href="#resume">
                        View My Skills
                      </a>
                    </li>
                    <li>
                      <a href="#portfolio">
                        View My Projects
                      </a>
                    </li>
                    <li>
                      <a href="#contact">
                        Hire me for your next project
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="break">
              </div>
              <div class="contact-info">
                <div class="g1">
                  <div class="item-box clearfix">
                    <i class="icon-envelope"></i>
                    <div class="item-data">
                      <h3>
                        <a href="mailto:write@your_mail.here">
                          Add Your mail
                        </a>
                      </h3>
                      <p>
                        Email Address
                      </p>
                    </div>
                  </div>
                </div>
                <div class="g1">
                  <div class="item-box clearfix">
                    <i class="icon-facebook"></i>
                    <div class="item-data">
                      <h3>
                        <a href="http://fb.me/your-Username">
                          Add Facebook Link
                        </a>
                      </h3>
                      <p>
                        Facebook Profile
                      </p>
                    </div>
                  </div>
                </div>
                <div class="g1">
                  <div class="item-box clearfix">
                    <i class="icon-twitter"></i>
                    <div class="item-data">
                      <h3>
                        <a href="http://twitter.com/your-Username">
                          Add Twiter username
                        </a>
                      </h3>
                      <p>
                        Twitter Handle
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
          <!-- End About Tab Data -->
          <!-- ----------------------------------------------------------------------------------- -->
          <!-- skills Tab Data -->
          <div id="resume">
            <section class="clearfix">
              <div class="g2">
                <h3>
                  Programming
                </h3>
                <div class="meter emerald">
                  <span style="width: 90%">
                    <span>
                      Language 1
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 90%">
                    <span>
                      Language 2
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 70%">
                    <span>
                      Language 3
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 65%">
                    <span>
                      Language 4
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 85%">
                    <span>
                      Language 5
                    </span>
                  </span>
                </div>
                <div class="break"></div>
              </div>

              <div class="g1">
                <h3>
                  Skills
                </h3>
                <div class="meter emerald">
                  <span style="width: 70%">
                    <span>
                      skill 1
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 85%">
                    <span>
                      skill 2
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 80%">
                    <span>
                      skill 3
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 90%">
                    <span>
                      skill 4
                    </span>
                  </span>
                </div>
                <div class="meter emerald">
                  <span style="width: 65%">
                    <span>
                      skill 5
                    </span>
                  </span>
                </div>
              </div>

              <div class="g2">
                <h3>
                  Hobbies
                </h3>
                <span class="label label-info">Hobby 1</span>
                <span class="label label-info">Hobby 2</span>
                <span class="label label-info">Hobby 3</span>
                <span class="label label-info">Hobby 4</span>
              </div>
            </section>
          </div>

          <!-- End skills Tab Data -->
          <!-- ----------------------------------------------------------------------------------- -->
          <!-- Projects Tab Data -->
          <div id="portfolio">
            <section class="clearfix">
              <div class="project-section">
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container"onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
                <div class="project-container">
                  <div class="project-img-container" onclick="document.getElementById('modal-wrapper').style.display='block'">
                    <img src="./images/floor.jpg" alt="project image">
                  </div>
                  <p class="project-title">Project Title</p>
                </div>
              </div>
              <div id="modal-wrapper" class="modal">

                <form class="modal-content animate">

                  <div class="imgcontainer">
                    <span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">&times;</span>
                    <img src="images/floor.jpg" alt="project" class="avatar">
                    <h1 class="project_details" style="text-align:center">Project Details</h1>
                  </div>

                  <div class="container">
                    <input type="text" placeholder="Project Name" name="uname" readonly>
                    <textarea class="project_description" rows="3" placeholder="Project Description" readonly></textarea>
                    <input type="url" placeholder="Project Link"readonly>
                    <input type="text" placeholder="Languages used" readonly>
                    <button class="project_submit" type="submit">Submit</button>
                  </div>

                </form>

              </div>
            </section>
          </div>
          <!-- End Projects tab -->
          <!-- ----------------------------------------------------------------------------------- -->
          <!-- Contact Tab Data -->
          <div id="contact">
            <section class="clearfix">
              <div class="g1">
                <div class="sny-icon-box">
                  <div class="sny-icon">
                    <i class="icon-globe"></i>
                  </div>
                  <div class="sny-icon-content">
                    <h4>
                      Address
                    </h4>
                    <p>
                      Type here
                    </p>
                  </div>
                </div>
              </div>
              <div class="g1">
                <div class="sny-icon-box">
                  <div class="sny-icon">
                    <i class="icon-phone"></i>
                  </div>
                  <div class="sny-icon-content">
                    <h4>
                      E-mail
                    </h4>
                    <p>
                      Add your mail 1<br />Add your mail 2
                    </p>
                  </div>
                </div>
              </div>
              <div class="g1">
                <div class="sny-icon-box">
                  <div class="sny-icon">
                    <i class="icon-user"></i>
                  </div>
                  <div class="sny-icon-content">
                    <h4>
                      About Me
                    </h4>
                    <p>
                      Write something about you
                    </p>
                  </div>
                </div>
              </div>
              <div class="break"></div>
            </section>
          </div>
          <!-- End Contact Data -->
          <!-- ----------------------------------------------------------------------------------- -->
        </div>
      </div>
</body>

</html>