10-About Style

Key Objectives

  • To start to stylize the about section.

Video

Overview

In this module we start to refactor our stubbed out code in the about section. In our example project, we add a simple background image based on the EFA color palette. We also continue on with our animation and use wow.js to make our about section text come in from the left. It is not required that you add animations to your portfolio, but it's good to know how to do. In modern front end development, it's a skill that you will need to have.

Notes/Tips

  • This is an open-ended task, and it gets hard to identify when you are done. We recommend timeboxing your work.

  • Having good ideas is great, but it's also ok to just explore. Sometimes ideas come after the first try.

  • Don't be afraid to throw out entire ideas. If it's not working, sometimes you just chuck it.

  • It can take many attempts to get animations and stylistic things looking nice and how you want them. Don't be discouraged if you don't get it the first time.

Steps

  1. Go to the module-9-about-styling-starter branch.

  2. Open your terminal window and do git pull. Again, this will make sure that you have the most up-to-date version of our code. If you started this project early on, we might have made updates to this module.

  3. Watch the short video about this section.

  4. Start to stylize the about section. As you do it, you will probably want to start writing some content about yourself.

  5. Look at past student examples for ideas on phrasing and what to say. What sounds good? You might want to add some information about why you decided to become a coder.

  6. Once you get the about section laid out, go ahead and move on. We'll be doing something a little different in the next module.

  7. Heres the final code.

    • index.html

      • <header>

        <!--==========================
Header Section
============================-->
<header class="jumbotron text-center" id="main-header">
      <div class="container">
          <h1 class="jumbotron-heading">JSON SASS</h1>
          <div class="section-description wow fadeInUp" data-wow-duration="5s">

      • About Section

        <!--==========================
About Section
============================-->
<section id="about">
      <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <h3 class="section-title">About</h3>
                  <div class="section-title-divider"></div>
              </div>
          </div>
          <section class="about-panel wow fadeInLeft" data-wow-delay="0.1s">
              <div class="col-lg-4">
                  <p class="lead">Use this to get started with talking about your abilities. Here you will showcase your work, share contact information, attract employers, and get practice with front end development! let's have some fun!</p>
              </div>
              <div class="col-lg-4">
                  <p class="lead">Use this to get started with talking about your abilities. Here you will showcase your work, share contact information, attract employers, and get practice with front end development! let's have some fun!</p>
              </div>
              <div class="col-lg-4">
                  <p class="lead">Use this to get started with talking about your abilities. Here you will showcase your work, share contact information, attract employers, and get practice with front end development! let's have some fun!</p>
              </div>
          </section>
      </div>
</section>

      • Contact Section

        <!--==========================
Contact Section
============================-->
<section id="contact">
  <div class="container">
      <h2 class="text-center text-uppercase">Contact Me</h2>
      <div class="row">
          <form>
              <div class="control-group">
                  <div class="form-group">
                      <label>Name</label>
                      <input class="form-control" id="name" type="text" placeholder="Name">
                  </div>
              </div>
              <div class="control-group">
                  <div class="form-group">
                      <label>Email Address</label>
                      <input class="form-control" id="email" type="email" placeholder="Email Address">
                  </div>
              </div>
              <div class="control-group">
                  <div class="form-group">
                      <label>Phone Number</label>
                      <input class="form-control" id="phone" type="tel" placeholder="Phone Number">
                  </div>
              </div>
              <div class="control-group">
                  <div class="form-group">
                      <label>Message</label>
                      <textarea class="form-control" id="message" rows="5" placeholder="Message"></textarea>
                  </div>
              </div>
              <div class="form-group">
                  <button type="submit" class="btn btn-primary">Send</button>
              </div>
          </form>
      </div>
  </div>
</section>

      • Footer Section

        <!--==========================
Footer Section
============================-->
<footer class="bg-primary">
  <p class="float-right">
      <a href="#">Back to top</a>
  </p>
  <p>&copy; 2018 Developer Company, Inc. &middot;
      <a href="#">Privacy</a> &middot;
      <a href="#">Terms</a>
  </p>
</footer>

    • _about.scss

      /****************************
About Section
****************************/
#about {
  // background: $blue-green;
  background: url('../assets/logo/blue-green-bg.jpg') no-repeat center center;
}

.about-panel {
  visibility: visible; 
  -webkit-animation-delay: 0.1s; 
  -moz-animation-delay: 0.1s; 
  animation-delay: 0.1s;
}

    • _body.scss

      /* Body section. */
body {
  padding: 15px;
  background: url('http://eleven50.wpengine.com/wp-content/uploads/2017/03/Learning-to-Code5.png?id=21797') no-repeat center center;
}
Previous9-Projects StyleNext11-Contact Setup

Last updated