Jamal's Portfolio

In this example below you will see how to do a Jamal's Portfolio with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Jamal's Portfolio</title>
  <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Bungee+Inline|Fredoka+One|Lilita+One|Mogra|Ultra" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--============================== Things to do ============================= 
Brand name on navi bar needs to be boxed
Brand name on nav needs to be styled 
Nav bar needs to be connected to Banner
Footer/contact needs to be dropped
Header sections need to be styled
Buttons on nav bar needs to b connected to each secton
social media buttons and links need to be added
Nav bar needs to scroll with page.
create a blog page
Instead of scrolling down, create a side scrolling
Home page needs a bit more attractiveness. Maybe my picture.

I want to add this qoute some where in my portfolio. 

In Jeet Kune Do, it’s not how much you have learned, but how much you have absorbed from what you have learned. It is not how much fixed knowledge you can accumulate, but what you can apply livingly that counts. ‘Being’ is more valued than "doing".


ideas

create an interactive sphere

FONTS
font-family: 'Mogra', cursive;
font-family: 'Baloo Bhaina', cursive;
font-family: 'Fredoka One', cursive;
font-family: 'Ultra', serif;
font-family: 'Lilita One', cursive;
font-family: 'Bungee Inline', cursive;

-->

<body>
  <section id="home"><a name="home"></a>
  <div class="container">
    <!--- =======================NAV BAR=====================--->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"> JMS </a> <!--- replace with brand image -->
      <ul style="list-style-type:none" class="navbar navbar-nav navbar-right text-center nav nav-pills">
        
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#bio">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      </div>
    </nav> 
      
    <!---======================= HEADER =========================--->
    
    <div class="jumbotron-fluid ">
    <div class = "container">
      <div class="plate">
        <h1 class="Jamal text-center"><b><u>JAMAL<br class ="break"> MARTIN<br class ="break">STUDIO</u></b></h1>
        </div>
      </div>
    </div>
</section>
    <!---======================= BIO =========================--->

    <div class="container main">  <!---==== CONTAINER FOR MAIN BODY ==== --->
<div id='bio'><a name="bio"></a>
      <h1 Class="text-center">Bio</h1>
    </div>
      <div class="jumbotron">
        
        <p id = "myBio"><img src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/15726276_1566165140077302_35535857227150349_n.jpg?oh=ed3aa9601fe4bf25f23b926c4e3e1e43&oe=59E46000" alt="By Robert McCovins" style="width:300px; height:300px; border-radius:50%;" class="img-responsive" id = "myPic" align ="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia tempus nisl, at scelerisque tortor accumsan nec. Pellentesque luctus sodales nisl eget egestas. Proin eu auctor felis, nec imperdiet sem. Nam purus neque, bibendum id euismod eu, tincidunt sed nisl. Suspendisse ut velit id dui tempus sagittis. Vivamus volutpat elit in massa ultricies tincidunt. In quis tincidunt ligula, id sodales nunc. Cras tincidunt malesuada dolor, rutrum molestie mauris. Proin blandit quis ex ac posuere.

Sed rhoncus suscipit diam eget auctor. Integer porta, nunc eget interdum ornare, elit nulla dapibus arcu, eget lacinia dolor sapien sed justo. Phasellus ullamcorper arcu nec nisl commodo, imperdiet facilisis ante aliquam. Pellentesque consectetur sem nec velit luctus scelerisque. Nulla lectus eros, semper ut lectus id, maximus pulvinar diam. Sed sed leo libero. Nam dapibus, diam ac commodo ultrices, enim velit placerat dui, nec vulputate nibh dolor molestie quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum laoreet metus et fermentum rhoncus. Mauris efficitur imperdiet lectus a blandit. Vivamus id ullamcorper nunc, ut commodo elit. Donec gravida lectus ligula, eget pretium velit luctus in.</p> 
        
      </div>


      <!--========portfolio Gallery========-->
      <div id="portfolio"><a name="portfolio"></a>
      <h1 Class="text-center">Portfolio</h1>
      </div>
      <div class="jumbotron">
        <div class="row">
          <div class="col-xs-3 col-md-4 offset-2">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>

          <div class="col-xs-3 col-md-4">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>

          <div class="col-xs-3 col-md-4">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>

          <div class="col-xs-3 col-md-4">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>

          <div class="col-xs-3 col-md-4">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>

          <div class="col-xs-3 col-md-4">
            <div class="thumbnail">
              <a href="https://codepen.io/KiuShin/full/dNbwOQ/" target="blank"><img src="http://www.vmps.us/sites/default/files/charles_drew_cartoon.jpg" alt="charles drew" style="width:100%/9;" class="img-responsive"></a>
              <div class="caption">
                <h3>Charles Richard Drew Tribute</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Contact form -->
    <div id="contact"><a name="contact"></a>
    <h1 class="text-center">Contact Page</h1>
    </div>
    <div class="jumbotron-fluid">
      
     <div id="social">
      <ul>
        <li><a href="https://www.freecodecamp.com/kiushin">FreeCodeCamp</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">GitHub</a></li>
        </ul>
      </div>
      
     <form action="..." class="form">
        <fieldset>
          <legend>Contact Me</legend>
          First name:<br>
          <input type="text" name="firstname" value="Enter First Name"><br> Last name:<br>
          <input type="text" name="lastname" value="Enter Last name"><br> Email Address:<br>
          <input type="text" name="emailaddress" value="Enter Enter Email Address"><br><br>
          <textarea name="message" rows="10" cols="30">

    </textarea>
          <input type="submit" value="Submit">
        </fieldset>
      </form>
    </div>
     
    <p></p>
    </div>
  <footer></footer>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KiuShin/jamalandaposs-portfolio-zNYXwd */
body {
  background-color:grey;
}

.main{
  padding-right:30px;
  padding-left:30px;
}
.container{
  padding:0;
  margin:auto;
  width:100%;
}


h1 {
  color: White;
}
/* Nav Starts*/

li {
  border-left: 5px solid #bbb;
  text-align: center;
 
}

li a{
  display: block;
  width:70px;
  /*color: white;*/
  /*text-align: center;*/
}
.nav-pills :hover:not(.active){
  background-color:#111;
}

.active{
  background-color:#111;
}
/* Nav ends */




.jumbotron {
  background-color:white;
}

.jumbotron-fluid {
  padding-top:100px;
  padding-bottom:100px;
  background-color:white;
}

.Jamal {
  padding-top:20px;
  padding-bottom:20px;
  line-height: 50px;
 color:#000000;
}

.break {
  padding-bottom:5px;
}

.plate{
  margin:0 auto;
  width: 400px;
  box-shadow: 10px 10px 5px #888888;
  background: #1a1a1a ;
  text-shadow: 10px 7px 12px black;
  opacity: 0.8;
}

#myPic{
  display:inline;
}

p#bio{
  text-aligh:right;
}


#social{
  float:right;
  width:25%;
  padding-left:50px;
  margin-top:100px;
  margin-right:250px;
  text-align: center;
}

#social ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
}

#social ul li{
  padding: 8px;
  margin-bottom: 8px;
  background-color: #111;
  color: white;
  text-align: center;
}

.form {
  margin-left: 10px;
  width:25%;
}

Comments