My Web Page Portfolio - Master

index.html

<!--This is the begging of page one. -->
<div class="PageOne">
  <ul class="nav nav-tabs">
    <ul id="AW-SW" class="pull-left">AZ2 (AW/SW) COMEAU</ul>
    <li class="pull-right">
      <a href="#PageFour">Contact Me</a>
    </li>
    <li class="pull-right">
      <a href="#PageThree">My Work</a>
    </li>
    <li class="pull-right">
      <a href="#PageTwo">My Future</a>
    </li>
    <li class="pull-right">
      <a href="#PageTwo">About Me</a>
    </li>
  </ul>
  <div class="block">
    <h1>Petty Officer Second Class Comeau</h1>
    <p>“I can imagine no more rewarding a career. And any man who may be asked in this century what he did to make his life worthwhile, I think can respond with a good deal of pride and satisfaction: 'I served in the United States Navy.” ― John F. Kennedy</p>
  </div>
  <div class="btnList text-center">
    <a class="btn btn-default" href="https://twitter.com/RichardComeau3" target='_blank'><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true"></i> Twitter</a>
    <a class="btn btn-default" href="https://github.com/RDComeau"target='_blank'><i class="fa fa-github fa-lg" id="githubIcon" aria-hidden="true"></i> GitHub</a>
    <a class="btn btn-default" href="https://www.linkedin.com/in/richard-daniel-comeau/"target='_blank'><i class="fa fa-linkedin-square fa-lg" id="linkedinIcon" aria-hidden="true"></i>  Linkedin</a>
    <a class="btn btn-default" href="https://www.youtube.com/channel/UCHsNkp2pAz6n7JsQMNJK36A?view_as=subscriber"target='_blank'><i class="fa fa-youtube-play fa-lg" id="youTubeIcon" aria-hidden="true"></i>  YouTube</a>
    <a class="btn btn-default" href="https://www.facebook.com/richard.d.comeau"target='_blank'> <i class="fa fa-facebook-official fa-lg" id="facebookIcon" aria-hidden="true"></i> FaceBook</a>
  </div>
</div>
<!--This is the end of page one -->
<div id="PageTwo" class="PageTwo">
  <div class="contianer-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h2>About Me
    </h2>
        <p>I joined the U.S. Navy when I was twenty-one years old. I had a bad initial experience at college and I felt void of purpose. I knew I wanted to do something meaningful, so I decided to enlist in the Navy. I went to boot camp in September 2013
          and was a part of division 008. It was my initial preparation of what life on a ship would be. I graduate boot camp at the end of November and at the end of December I would find myself at my very first squadron. I was assigned to VAQ-142 who
          were in Oak Harbor, WA. VAQ-142’s mission was electronic attack which is a vital part of the Navy’s forward presence. I worked hard there at the rank of E-3 which is called an Airman. I earned my Plane Captain qualification while working on
          the EA-18G Growler. A Plane Captain is crucial to the safe operations that happen around the aircraft during engine startup, aircraft taxiing, emergency procedures, and engine shutdown. In 2015, I was promoted to the rank of E-4, Petty Officer
          Third Class. I was shortly transferred to the USS Nimitz (CVN 68). As ship’s company, I not only had my administrative duties but also had Damage Control duties during general quarters. I was a part of the stretcher bearer team. It was our responsibility
          to perform life preserving treatment till officers of greater medical skill could take over care of the patient. As a team, ship’s company renovated the carrier during a shipyard maintenance period. This maintenance ensured that the USS Nimitz
          could deploy in 2017. On the Nimitz, I was promoted to E-5, Petty Officer Second Class. I was transferred over to Conus West Det Lemoore. There I kept records of all Aviation Weapons Support Equipment assigned to us.</p>
        <h3>My Future</h3>
        <p>I am still at Conus West Det Lemoore and continually seeking to improve myself. I am acquiring my Bachelors of Science in Management Information Systems and striving for the Frontend Development Certificate from freecodecamp.org. I am hoping to
          have a job in the Software and IT service industry. I strive for excellence in all things.</p>
      </div>
    </div>
  </div>
</div>
<div id="PageThree" class="PageThree">
  <div class="contianer-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h4>My Work
    </h4>
        <p>These are my current certifications and completed projects.
        </p>
        <div class="col-md-6">
          <p data-height="265" data-theme-id="0" data-slug-hash="MOyeXZ" data-default-tab="html,result" data-user="RDComeau" data-embed-version="2" data-pen-title="Eugene Ely" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/RDComeau/pen/MOyeXZ/">Eugene Ely</a> by Richard Comeau (<a href="https://codepen.io/RDComeau">@RDComeau</a>) on <a href="https://codepen.io">CodePen</a>.</p>
          <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
        </div>
      </div>
    </div>
  </div>
</div>


<div id="PageFour" class="PageFour">
  <div class="contianer-fluid">
    <div class="row">
      <div class="col-md-12">
        <h5 id="Contact Me">Contact Me
    </h5>
        <a>
          <img src="https://camo.githubusercontent.com/e0488197a3d6479af63f73d8034ff6ac3c4e152f/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f766976515654715f66335f497a797738327a59445968786f735270524b64555a68634c414c656e5834755173732d385768686a4f69776a6a4c4e6f773963376a6a5a72396d5045684b64364633704d6a6a5a494b4f6f366f6a7a613757644a3032646358783038694f68693677563566562d4961493864756a32514f373144784662313761325f566c4a54616d625135796c465074625f4e394d393139727a7a656e6751697a786d4c50576d385a43317271696a544f666e3849656f57423535336b693636304a587543794c496942776751345a394f533536466d4a7a53337a53424d646134473965526f74565a6352444270364a474e50714c2d6d5541584734444c4861454535435959376f315075634a456a68504554534f4f4f72644d59786b3357426e305274324b4e6e35335566746b585534507a4b714d61437148412d306f6331654d754f45456a49484e6f317650572d6a2d444f2d3339745142745a46463741315f336e316c37525f343369775279736f6131654d736430586d75476d464338725477674134334f6a3735396963355a376e5439697636497434476c43514f506c66626a7937437735426c55446b4f676c454863335143536a6746596c4a6d3377686c716d4470414e4866594e6f4a3664645379445352435775344d3439365679336e4c6532586f4d3171343846614e38704d31584b4e7267755477644933575f5a7065624561324b4c584e596d356f4e554f6363715a502d396e366236686c3663455939303273525955694f5f6943613144486344784748676f685a4a7a444b6d3250476d4c5a4d524f55624844647673723855323455767245524f34395a5438724f773d773639382d683933302d6e6f" id="danielleandi" class="danielleandi" alt="Danielle and I">
        </a>
        <div id="ThreeLinks" class="col-md-2">
           <a class="btn btn-default btn-one" href="https://twitter.com/RichardComeau3"target='_blank'><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true"></i> Twitter</a>
          <a class="btn btn-default btn-two" href="https://github.com/RDComeau"target='_blank'><i class="fa fa-github fa-lg" id="githubIcon" aria-hidden="true"></i> GitHub</a>
          <a class="btn btn-default btn-three" href="https://www.linkedin.com/in/richard-daniel-comeau/"target='_blank'><i class="fa fa-linkedin-square fa-lg" id="linkedinIcon" aria-hidden="true"></i>  Linkedin</a>
        </div>
        <div id="TwoLinks" class="col-md-1">
          <a class="btn btn-default btn-four" href="https://www.youtube.com/channel/UCHsNkp2pAz6n7JsQMNJK36A?view_as=subscriber"target='_blank'><i class="fa fa-youtube-play fa-lg" id="youTubeIcon" aria-hidden="true"></i>  YouTube</a>
          <a class="btn btn-default btn-five" href="https://www.facebook.com/richard.d.comeau"target='_blank'> <i class="fa fa-facebook-official fa-lg" id="facebookIcon" aria-hidden="true"></i> FaceBook</a>

          <p id="email">Thank you for looking through my web page. Feel free to contact me.<br>[email protected] </p>
        
        </div>
      </div>
    </div>
  </div>
</div>

my-web-page-portfolio-master.markdown

My Web Page Portfolio - Master

A Pen by Richard Comeau on CodePen.

License.

style.css

body{
  font-family: san-serif;
   color: white;
  background-color: #337ab7;
}

h5{
    position: absolute;
  right: 320px;
  top:16px;
  font-size: 30px;
}

p{
  font-size: 17px;
}

button{
  background-color: black;
}

.PageOne
{
  background: url(https://scontent.fsnc1-1.fna.fbcdn.net/v/t1.0-9/14956482_10211364354049298_4456173257521436268_n.jpg?oh=71418d0a7801c03598ab0e246dcdf687&oe=5A9A8BD3)no-repeat top center fixed;
   background-size: cover;
   height: 900px;
   width: 100%;
   margin: 0px;
   padding: 0px;
   text-align: center;
} 

.btnList{
  position: absolute;
  bottom: 50px;
  left: 150px;
  border-color: black;
}

.btn-default{
  background-color: black;
  color:white;
  opacity: .9;
  border-color:black;
}

.btn-group{
  border-color: black;
  font-size: 50px;
}

.btn-one{
  margin-bottom: 10px;
  padding: 30px 20px;
}

.btn-two{
    margin-bottom: 10px;
  padding: 30px 20px;
}

.btn-three{
  margin-bottom: 10px;
  padding: 30px 16px;
}

.btn-four{
  margin-bottom: 10px;
  padding: 30px 16px;
}

.btn-five{
  margin-bottom: 10px;
  padding: 30px 16px;
}

.PageTwo{
  
 background: url(https://camo.githubusercontent.com/f02fb484236a84e2a0f0f81d73cb101bd263bcfd/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f373234415a747735725a4b427a4a354877377364434c696a32634a73487772627a484d67736f56664f6a702d344f657636584e5a63506c495177756b3736345f534c434d692d417338675630714a356558357874594432474f485765475f595041424f78756f6b58776667584b717379504678724c6c383535567235727463514a78493130766f7142326f52617a4e372d514975553055646f4c337933546957696678493872537369675a456c4e38773675765f63726167346468765375594e30365047726c7258635a4d52386f49614332393551754832664461457330566535626d6b6b754e644e726a4c73663737385a5873374d64327450637a48326c6367796272516c4c335733476b366a6d6b6a71764235775279366855425757766541676f7936703559443231356b4234555230657865375f7a6576714b6a4872304b624a6e7674527a36783270446f3941514f567a3248723267646a6c62744d7256515342766c7a396d32766f316471376866777248413658556e4e6d6577636963474e456a704f6d376858324137566752414765464948614272616a72744970575579766a4f66547033474266586b68584a526c3949714f377848674a4431735f55437858616c5533435556437250636d7368446a7661496b44354b346e676a36753362344c2d4b6b685f6c78626f30635a6750644e6d434f5477683361367077523765594c7a6f6a3758386e587a313274354a6a51584155544266576c62432d677668612d524d4a714c436c48696e4c3979586b636a4946794c45574c54786f392d6d46344663476e46782d53574a5676745a5478696b736d626937313855573963797844725879673d773935342d683633362d6e6f) ;
  background-size: cover;
   height: 900px;
   width: 100%;
   margin: 0px;
   padding: 0px;
   text-align: center;
  color: black;
}


.PageThree{
  background: url(https://camo.githubusercontent.com/f365b29ea87f89361e12fcc46e300f9ca6886511/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f685976487475586f76564c54584b523351433958356d30377231385a59685437326f45504d36316d6b6a3762624a496e304971337333546c7a4834503741756435516d72723378532d6d6542706d514e77372d776d776a495f68484b68705857486a4f6352455051753049345631456c334d4b51324c4b44754a64314d6a634f67713253515459754851366766616f48445a37366362573971434a7a41646f5a54765662736f34675a6746744c735230783270492d4834447a4c397772547a6c4c356a477932314153555132614f573759734434346b626b7a48677a7752363072454635554b653657344d7a3975575259597778574d31484e554e5f5931315553494d4f655f496c376e5a41423272693942446d6b305f317666417372675933494766375a4441592d3948457572624636797542796b4f446f5f4b365f4859514e51742d6a58733547336a5859734e5a31554f7436356a4130536732624b57573135756b576f5f4f424a45426a69435f326c706c76476745593062546371626f4f555561736e425630693248435862545a494b49382d427a4f7355615879433474485752422d784838555163455a53347a4b55326b76756745634b574d5a696f46646e76357345574538734f526c555a514c68656e67637477374c314d72377645516457586d6c4f424b6735764c42652d452d47367267687077434c5162543953767962614b2d4f315235415838535036567873416f4133675f4f43446237414c3143446f3557536a4d6b7064654e70627879764c7a734135666a6769645a786964445166614831417779335f4c45664872395532314b444a56384a6743544d7758556f5871456b32513d773935342d683533372d6e6f);
   background-size: cover;
   height: 900px;
   width: 100%;
   margin: 0px;
   padding: 0px;
   text-align: center;
  color:black;
}

.nav-tabs{
  background-color: black;
  position:sticky;
  top: 0;
}

.block{
  position:absolute;
  left: 30px;
  bottom: 100px;
 background-color:black;
  opacity:.8;
  padding:10px;
  width:50%;
  margin-right:auto;
  margin-left:auto;
  border-radius:10px 80px;
}

#danielleandi{
  position:absolute;
  left: 0px;
  top: 0px;
  padding:0px;
  width:auto;
  margin-right:auto;
  margin-left:auto;
  z-index: -1;
}

#AW-SW{
  color: #337ab7;
  margin: 10px;
}

#youTubeIcon{
 color:rgb(187, 0, 0);
}

#twitterIcon{
  color: rgb(0, 172, 237);
}

#facebookIcon{
  color:rgb(59,89,163);
}

#githubIcon{
  color:rgb(102,43,129);
}

#linkedinIcon{
  color:rgb(0,127,178);
}

#ThreeLinks{
  position:absolute;
  right: 400px;
  top: 100px;
  padding: 15px 50px;
}

#TwoLinks{
  position:absolute;
  right: 200px;
  top: 100px;
  padding: 15px 30px;
}

#email{
  position:absolute;
  top: 600px;
  right: 50px;
  color: black;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

This is my second project from freecodecamp.org

Picture was brought to the background by using z-index: -1; . Contact Me is now visible.