free code camp project

free-code-camp-project.markdown

free code camp project

Doing a project for Free Code Camp and made a website about John Mayer

A Pen by Barron M Brock on CodePen.

License.

index.html

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

<div class="container-fluid">
  <h1 id="h1-hdr">John Mayer</h1>
  <p id="p-1">A brief look at some of his biggest moments</p>
  
    <img class="picture-of-mayer" src="https://www.billboard.com/files/media/john-mayer-aug-2017-billboard-1548.jpg" alt="picture of john mayer">

  <!--
John mayer majoir achivemeants
  -->
        <ul id="li-lmts">
          <li>Born October 16, 1977</li>
          <li>Moves to Atlanta in 1997 with Clay Cook. Forms a band called "Lo-Fi Masters" (disolves soon there after).</li>
          <li>Plays at the 2001 "South by Southwest Festival" (getting him a record label known as Aware records and then Columbia Records).             </li>
          <li>2001 releases "<a href="https://en.wikipedia.org/wiki/Room_for_Squares">Room For Sqaures</a> ".</li>
          <li>2003 releases "<a href="https://en.wikipedia.org/wiki/Heavier_Things">Heavier Things</a>".</li>
          <li>Both albums reach multi-platnuim status.</li>
          <li>2005 releases his live album "Try!" with the 
          <a href="https://en.wikipedia.org/wiki/John_Mayer_Trio">John Mayer Trio.</a></li> 
          <li>2006 releases "<a href="https://en.wikipedia.org/wiki/Continuum_(John_Mayer_album)">Continuum</a>".</li>
          <li>Continuum earns Mayer a 2007 Grammy Award for Best Pop Vocal Album.</li>
          <li>He also wins Best Male Pop Vocal Performance for "Waiting on the World to Change".</li>
          <li>2009 releases "<a href="https://en.wikipedia.org/wiki/Battle_Studies_(album)">Battle Studies</a>".</li>
          <li>2010 After having several controversial incidents with the media, Mayer withdrew from public life.</li>
          <li>2012 releases "<a href="https://en.wikipedia.org/wiki/Born_and_Raised_(John_Mayer_album)">Born And Raised</a>" even while dealing with granuloma (a vocal chord problem).</li>
          <li>2013 releases "<a href="https://en.wikipedia.org/wiki/Paradise_Valley_(album)">Paradise Valley</a>".</li>
          <li>2015-2017 plays in "<a href="https://en.wikipedia.org/wiki/Dead_%26_Company">Dead & Company</a>" with the surviving members of the Gratefull Dead</li>
          <li>2017 releases "<a href="https://en.wikipedia.org/wiki/The_Search_for_Everything">Serch For Everything</a>".</li>
        </ul>
  
  <!--
paraghraph about him
  -->
 
    <p id="p-2">
      John Mayer. Whether or not you like him or his music has had a huge impact on the music scene. He showed alot of people that
      having guiater centered songs or writing something meaningful could be done in the pop scene. He also showed that someone with a
      dream and some rad guitar skills could take over the mainstream market. Even after his break from the lime light
      and throat problems, he still is making great music and inspiring others to do the same.
    </p>
  
  <!--
  famous quote
  -->
  <h4 id="h2-q">
    "Hopefully people can see my music is tethered to my brain"--John mayer
  </h4>
  <!--
  wiki link
  -->
  <div id="wiki-link">
    <a href="https://en.wikipedia.org/wiki/John_Mayer">More info on John Mayer</a>
  </div>  
</div>

script.js

$(document).ready(function() {
      $("#li-lmts").addClass("text-center li-lmts-cls");
      $("#h1-hdr").addClass("lob-font text-center");
      $("#p-1").addClass("text-center lob-font");
      $("#li-lmts").addClass("text-center");
      $("#wiki-link").addClass("text-center");
      $("#p-2").addClass("text-center p-2-cls")
      $("#h2-q").addClass("text-center h2-q-cls");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.picture-of-mayer{
    border-color: gray;
    border-width: 2.5px;
    border-style: solid;
    border-radius: 25%;
    width: 400px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.lob-font{
  font-family:Lobster,Mono-space;
}

.p-2-cls{
  margin-top:30px;
  margin-bottom:30px;
  margin-left:100px;
  margin-right:100px;
}

.h2-q-cls{
  margin-top:40px;
  margin-bottom:40px;
}

.li-lmts-cls{
  margin-left:100px;
  margin-right:100px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />