Jerry Garcia

In this example below you will see how to do a Jerry Garcia with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Jerry Garcia</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>
<head>
  <title>Jerry Garcia</title>
  <import href=style.css type=text/css rel=stylesheet>
    <!-- Codeacedemy's old tutorial showed how to link google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet">
</head>
<body>
  <!-- this is the title -->
  <div class=title>
    <h1>Jerry Garica</h1>
    <p>Singer, guitarist, painter, legend.</p>
  </div>
  <!-- this div contains the majority of the content. It hold all information about jerry-->
  <div class=summary>
    <h1>Jerry's Story</1>
      <!-- this nested div contains Jerry's early life and how he became famous-->
      <div class="young">
        <h1>Childhood</h1>
    <ul>
      <li>Born in San Fransisco, CA</li>
      <li>At age 5, Jerry lost his right middle finger in a wood chopping accident</li>
      <li>In Winter 1947, Jerry's father drowns to death</li>
    </ul>
    <h1>Early Career</h1>
    <ul>
      <li>Jerry gets his first electric guitar at age 15</li>
      <li>In 1961 Jerry meets Bob Hunter and they begin doing gigs together</li>
      <li>1962 Jerry and his gang play live for a radio station which lead to a 90 minute special on them</li>
      <li>The Greateful Dead is formed</li>
      <li>1969 Jerry appears on Rolling Stones Magazine for the first of 12 times</li>
    </ul>
  </div>
  <!-- this nested div is about his most famous band-->
  <div class=greatfuldead>
    <img src="https://pbs.twimg.com/profile_images/692441136472784896/KowiUPSf.jpg">
    <h1>The Greatful Dead</h1>
    <p>Formed in 1965, the Greatful Dead is one of the most popular bands in music history. The band's roster was fluid, but the main members included Bob Weir, Phil Lesh, Bill Kreutzmann, Robert Hunter, John Barlow, Mickey Hart, and of course Jerry himself.
      With an extremely devoted fan base, they were able to perform more than 2,300 concerts! They had over 500 songs in their repitoire and never had the same show twice. </p>
  </div>
  <!--this div contains embeded videos of songs from the dead-->
  <div class=songs>
    <h1>Popular Songs</h1>
    <!-- http://www.simplehtmlguide.com/youtube.php <-- where I learned to embed youtube videos-->
    <div class=right>
      <iframe src="https://www.youtube.com/embed/2S7ZvaWLsmA" width="660" height="415" frameborder="0" allowfullscreen>                   </iframe>
      <iframe src="https://www.youtube.com/embed/7AtVtx6H738" width="660" height="415" frameborder="0" allowfullscreen>                   </iframe>
    </div>
    <div class=left>
      <iframe src="http://www.youtube.com/embed/-Xic-CHInek" width="660" height="415" frameborder="0" allowfullscreen>                   </iframe>
      <iframe src="http://www.youtube.com/embed/8n9OqLiUzpc" width="660" height="415" frameborder="0" allowfullscreen>                   </iframe>
    </div>
  </div>
  <!-- this div contains links for further reading -->
  <div class=more>
    <h1>Furthur Reading</h1>
    <a href="https://en.wikipedia.org/wiki/Jerry_Garcia" target=blank>Jerry Garcia Wikepidia</a>
    <a href="http://jerrygarcia.com/" target=blank>Jerry Garcia's Informational Website</a>
    <a href="https://en.wikipedia.org/wiki/Grateful_Dead" target=blank>Greatful Dead Wikepidia</a>
    <a href="http://www.dead.net/" target=blank>Greatful Dead Informational Website</a>
  </div>
  </div>
</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Peachs/jerry-garcia-VMMomo */
/*resets padding and margin for easier customization later */
* {
  padding: 0;
  margin: 0;
}
.title {
  text-align: center;
  font-size: 75px;
  /* This gives the title the background image and sets up font style */
  background: url(http://img.wennermedia.com/social/long-strange-trip-1b2ffa3e-d825-4570-bd47-504d00edf6c2.jpg);
  color: #e60000;
  border: 1px solid grey;
  font-family: Raleway;
}
.title p {
  font-size: 35px;
  margin-bottom: 20px;
  padding-top: 10px;
  font-style: italic;
}

.summary {
  text-align: center;
  padding-top: 10px;
  font-size: 50px;
  /* I learned to do left --> right gradients from w3 schools.com */
  background: linear-gradient(to right, red, blue);
  color: White;
  height: 2500px;
}
.young {
  font-size: 25px;
  padding-top: 30px;
  padding-bottom: 30px;
}
/* I leared to stylize list elements from w3 schools */
li {
  list-style-type: square;
  display: list-item;
  text-align: left;
  margin-left: 20em;
  padding-top: 10px;
  padding-bottom: 10px;
}
.greatfuldead {
  font-size: 60px;
}
.greatfuldead p {
  font-size: 25px;
  margin-right: 250px;
  margin-left: 250px;
  padding-top: 30px;
}
.greatfuldead img {
  width: 250px;
  height: 250px;
}
.songs h1 {
  font-size: 60px;
  padding-top: 20px;
  padding-bottom: 35px;
}
.more h1 {
  font-size: 50px;
  padding-top: 20px;
}
.more a {
  font-size: 30px;
  color: #000099;
}
/* I learned to style hyperlinks with a youtube video (https://www.youtube.com/watch?v=XT2PFpOyDzY)*/
a:hover {
  color: #6666ff;
}
a:active {
  color: #f00;
}
a:visited {
  color: #7300e6;
}

Comments