A Pen by Noah Harness

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Noah Harness</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
   <ol>
     <li><a href="#Home">Home</a></li>
     <li style="float:right"><a href="#About">About</a></li>
     <li><a href="#Projects">Projects</a></li>
     <li><a href="#Contact">Contact</a></li>
     
     </ol>
<body>
     <h1 style="font-family: Arial;"><center> Personal Portfolio: Noah Harness</h1>
       <p class="column"> Hey Hey my name is Noah and this is the first web application I have developed. I used basic programming languages like HTML AND CSS. This project isn't easy for me. Anywhoo, I'm 22 years old, a graduate of UT Austin with a degree from the Moody College of Communication and another from the McCombs School of Business. I love tennis, cooking, yoga, weight-training, kava. </p>
        
        <p class="column"> have a very strict diet and follow a strict workout regiment. I believe that success in life stems from physical and nutritional health. I love business and have an entrepernurial mindset. I love following companies and the financial markets; trends in the currency, bond, equity, and commodity markets. I love engaging in fundamental analysis when applying cost-benefit and risk analysis to companies/industries/sectors.
        
         <p class="column">I workout three times a week, mostly to decrease body fat % and gain muscle. I only do five compound workouts: squats, deadlifts, benchpress, overheadpress, and barbell row. I also do several abdominal workouts and pullups (wide and narrow). My diet really consists of only a few foods: bananas and blueberries, coconut milk and water, eggs, sausage, rice, chicken, some fish, and lots of veggies. </p>
     <div class="container">
       <img class="bar" src="https://www.google.com/search?q=noah+harness&rlz=1C9BKJA_enUS705US705&hl=en-US&prmd=sivn&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi408i-8vXQAhWoqlQKHTzdCvAQ_AUICCgC&biw=1024&bih=653#hl=en-US&tbm=isch&q=noah+harness&imgrc=9NFsm9yK_TW49M%3A">
     </div>
    
       
</body>  
  <footer>
   <div class="footer-social-icons">
       <ul class="social-icons">
         <li><a href="https://www.facebook.com/profile.php?id=1248145354" class="social-icon"><i class="fa fa-facebook"></i></a></li>
         <li><a href="https://mobile.twitter.com/HarnessNoah" class="social-icons"><i class="fa fa-twitter"></i></a></li>
         <li><a href="https://www.linkedin.com/in/noah-e-harness-8b629b113trk=nav_responsive_tab_profile&_mSplash=1" class="social-icons"><i class="fa fa-linkedin"></i></a></li>
       </ul>
   </div>
  </footer>

     
   </html>
         
         
     
     
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Harnessn/a-pen-by-noah-harness-aBarKv */

.container {
  position: relative;
}

p {
  font-size: 30px;
  font-family: Arial;
}
.column {
  float: right;
  width: 65%;
}
.bar {
  float: left;
  width: 35%
}
body {
  background-color: white;
}
ol{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  background-color: #333;
}
a{
  text-decoration: none;
  color: #fff;
}
p > a:hover{
  color: #d9d9d9;
  text-decoration: underline;
}
li{
  float: left;
}
li a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover{
  background-color: white;
  color: black;
}
.footer-social-icons{
  width: 350px;
  display: block;
  margin: 0 auto;
  position: bottom;
}
ul.social-icons{
  margin-top: 10px;
}
.social-icons{
  color: #fff;
}
.social-icons li{
  vertical-align: top;
  display: inline;
  height: 100px;
}
.social-icons a{
  color: #fff;
  text-decoration: none;
}
.fa-facebook{
  padding: 10px 14px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  background-color: #322f30; 
}
.fa-facebook:hover{
  backgrounnd-color: red;
}
.fa-twitter{
  padding: 10px 14px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  background-color: #322f30;
}
.fa-twitter:hover{
  background-color: blue;
}
.fa-linkedin{
  padding: 10px 14px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  background-color: #322f30;
}
.fa-linkedin:hover{
  background-color: #0073a4;
}
img{
 width: 100%;
 height: auto;
 opacity: 0.3;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
}








Comments