About Me Page

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>About Me Page</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Josefin+Slab:700|Josefin+Sans'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="masthead">
  <p class="masthead_intro">Hi I'm</p>
  <h1 class="masthead_heading">Sierra!</h1>
</header>
<main>
  <section class="intro">
    <h2>Introduction</h2>
    <p class="intro_moto">I might be quiet but over look me at your own risk. Coding and listening to audiobooks are my passions.</p>
    <p>I was born visually impaired, but I have never let this stop me from pursuing my dreams. It might sound cliche, but I view my vision as a blessing. I sit on the border between the fully-sighted and the blind world. My life experiences have shown me the power of accessibility to information. Everyone has a right to pursue information; however, their access may be blocked by a physical, cultural, mental, or language barrier.</p>
    <p>When I was very young, I discided to become a librarian, believing this would help me increase the accessibility of books to the blind and visually impaired community. Although I still admire the work of librarians around the world, my passion has drawn me toward web development. The Internet is an ever-growing repository of information. Although the last few years have seen a considerable effort to make the Internet accessible to people with disabilities, there are still sites and services that remain inaccessible to the blind and visually impaired. I hope to improve my coding and design skills, so I can aid in making the entire Internet open to all. </p>
  </section>
  <section class="location">
    <h2>Where I am From</h2>
    <p>I was born in Ogden, Utah. My Father moved the family to St. Louis, Missouri when I was 11 when he accepted a job at Boeing.</p>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199412.48571346482!2d-90.38354712369397!3d38.653016917602905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8b4a9faed8ef9%3A0xbe39eaca22bbe05b!2sSt+Louis%2C+MO!5e0!3m2!1sen!2sus!4v1463707885409" frameborder="0" style="border:0;width:400px;height: 200px;" allowfullscreen></iframe>
  </section>
  <section class="aboutMe">
    <h2>More About Me</h2>
    <h3>Hobbies</h3>
    <p>Although I dabble in a lot of different hobbies, from weaving to gaming to watching Anime. My one constant past-time is listening to audiobooks. I probably listen to one to two audiobooks per week. </p>
    <h3>Dream Job?</h3>
    <p>As I mentioned in the introduction area, I want to hone my skills as a web developer. My dream job would involve making the web a more accessible place for people with disabilities.</p>
    <h3>Recently I read</h3>
    <img class="aboutMe_read_cover" src="https://d.gr-assets.com/books/1379437095l/17562900.jpg" alt="book cover" alt="book cover" />
    <div class="aboutMe_read_details">
      <p>Night Broken: <span>Mercy Thompson, Book 8</span></p>
      <p class="aboutMe_read_author">by <a href="http://www.patriciabriggs.com/" target=_Blank>Patricia Briggs</a></p>
    </div>
  </section>
</main>
<footer class="content_footer">
  <p>Say hi to me on these social networks:</p>
  <ul class="social_footer">
    <li>
      <a href="https://github.com" target=_Blank>Github</a>
    </li>
    <li>
      <a href="https://twitter.com" target=_Blank>Twitter</a
    </li>
    <li>
      <a href="https://plus.google.com" target=_Blank>Google+</a>
    </li>
  </ul>
  <p>Cover Image via <a href="https://unsplash.com/photos/TLJImI78VRg" target=_Blank>Unsplash</a></p>
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/13thDayCoder/about-me-page-dMEdYO */
html, body {
  margin: 0%;
  padding: 0%;
  font-size: 100%;
  font-family: 'Josefinsans';
}

section {
  padding: 0.5em 1em;
}

a:link {
  text-decoration: none;
  color: #8CAFBE;
}

a:active, a:visited, a:hover {
  text-decoration: underline;
  color: #41758E;
}

.masthead, .content_footer {
  text-align: center;
}

.masthead {
  background: url("https://images.unsplash.com/photo-1432117068802-b224427256a5?format=auto&auto=compress&dpr=2&crop=entropy&fit=crop&w=1199&h=799&q=80") 20% 45%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  border-top: 1em solid #3F2A20;
  padding: 0.5em 0;
  width: 100%;
  overflow: hidden;
}

.masthead_intro {
  margin-bottom: 0.1em; /* 0.1em * 16px = 1.6px */
  font-size: 2em;
}

.masthead_heading {
  margin-top: -0.1em; /* -0.2em * 16px = 3.2px */
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
  font-size: 6em; /* 6em * 16px = 96px */
}

main {
  margin: 2em auto; /* 2em * 16px = 64px */
  max-width: 80%;
}

main h2 {
  font-family: 'Josefin Slab', cursive;
  margin-top: 2em;
}

main p {
  font-weight: 300;
  letter-spacing: 0.05em;
  text-align: justify;
}

.intro > .intro_moto {
  text-align: center;
  font-style: italic;
  color: #41758E;
}

.location p {
  display: inline-block;
  width: 40%;
  margin: 0 2%;
  vertical-align: top;
}

.location iframe {
  display: inline-block;
  margin: 0 2%;
  margin-left: 10%;
  vertical-align: middle;
}

.aboutMe h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.aboutMe h3, .aboutMe p {
  margin-left: 2%;
}

.aboutMe_read_cover {
  display: inline-block;
  width: 10%;
  vertical-align: middle;
  margin-left: 4%;
}

.aboutMe_read_details {
  display: inline-block;
  width: 40%;
  padding: 0 2em;
}

.aboutMe_read_details p {
  margin: 0.5em;
}

.aboutMe_read_details span {
  font-style: italic;
}

.content_footer {
  background-color: #3F2A20;
  overflow: hidden;
  color: #FFFFFF;
  padding: 1.5em;
}

.social_footer {
  list-style-type: none;
  padding: 0%;
}

.social_footer > li {
  display: inline-block;
  padding: 0 1em;
}


Comments