CS First - A Page About Me

In this example below you will see how to do a CS First - A Page About Me with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by amyfu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright amyfu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CS First - A Page About Me</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <div id="container">
      <h1>A Page About Me</h1>
      <p>Hello, world! This is a page about me. I am a member of the CS First program at Berkeley High School. I hope you have a <em>really great time</em> visiting my first webpage!</p>
      <p><strong>Favorite subject in school:</strong> Computer Science!</p>
      <br />
      <strong>A list of my favorite things:</strong>
      <ul>
        <li>Artichoke hearts</li>
        <li>Pokemon</li>
        <li>Ping Pong</li>
        <li><a href="https://www.google.com">Google</a></li>
      </ul>
      <p>I also really like corgis!</p>
      <p><img src="https://25.media.tumblr.com/tumblr_mdgjpg6AMF1qde1zfo1_1280.jpg" /></p>
      <strong>A list of things I'm really good at:</strong>
      <ol>
        <li>Sleeping past my alarm every morning</li>
        <li>Making puns</li>
        <li>Halo 2</li>
        <li>Blowing bubble gum bubbles</li>
      </ol>
      <h2>What I want to be when I grow up</h2>
      <p>I want to be an astronaut, because I want to go to space. Space is really exciting to me, because it is so large and hasn't been explored all that much. <span>I would really like to meet an alien.</span></p>
      
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/amyfu/cs-first-a-page-about-me-ndqtl */
body {
  font-family: sans-serif;
  background: url('http://www.harrymedia.com/img/data/media/813/Hp7part1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-color: #000000;
  background-size: cover;
  color: #ffffff;
}

h1, h2 {
  font-family: serif;
}

a {
  color: #00ffff;
}

#container {
  width: 600px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: rgba(0,0,0,.7);
}

#container img {
  max-width: 600px;
}

Comments