Getting started with your first portfolio - Part 4: Applying advanced styling

Applying placeholders with your own images

  1. To better organize our images, let's make a file called images in the root level of our application
  2. Download the images:
  3. Replace the profile picture <img src="" /> with

    <img src="images/profile-picture.jpg" />
  4. Add some styling to the image

    .profile-picture {
      border-radius: 50%;
      width: 150px;
      height: 150px;
      /* offset-x | offset-y | blur-radius | spread-radius | color */
      box-shadow: 0 4px 6px 0 rgba(34, 60, 80, 0.16);
      transition: all ease-in-out 0.2s;
    .profile-picture:hover {
      /* offset-x | offset-y | blur-radius | spread-radius | color */
      box-shadow: 0 8px 12px 0 rgba(34, 60, 80, 0.16);
    • border-radius sets the border radius of the image
    • box-shadow adds shadows to the image. Check Mozilla web docs for more details on the syntax
    • transition
      • all means we want to animate all aspects of the image
      • ease-in-out is a timing function that describes the speed of the animation. In this case we want the animation to run for .2 seconds
    • hover sets properties for when we hover over the image, giving users a more visual feedback

    Example of intro text

  5. Replace the project placeholders with the given images (or your own)

    <h3 class="heading">Projects</h3>
    <div class="projects-grid">
      <img class="project-image" src="images/project-1.jpg" />
      <img class="project-image" src="images/project-2.jpg" />
      <img class="project-image" src="images/project-3.jpg" />
      <img class="project-image" src="images/project-4.jpg" />

    Example of intro text

    Setting custom fonts

  6. We will be using Roboto Mono for headings and Noto Sans for body text, free for download at

  7. To use the fonts, add this snippet into the head section

  8. Then we want to add these to the styles.css for the default body and heading fonts

    body {
     font-family: 'Noto Sans', sans-serif;
    h4 {
     font-family: 'Roboto Mono', monospace;

    Now let's refresh the page! Wow ✨

    Example of intro text

  9. Let's add some footer fixes

     <h3 class="heading">Contacc</h3>
     <div class="contact">
       <div class="links">
         <h4 **class="form-heading" **>Links</h4>
         <ul class="links-list">
           <!-- List content -->
         <form action="#">
           <label for="email">
             <h4 class="form-heading">Email</h4>
             <input type="email" id="email" placeholder="Enter your email" />
           <label for="message">
             <h4 class="form-heading">Messages</h4>
             <textarea id="message">Your Message</textarea>
           <div class="submit-button-wrapper">
             <input type="submit" valid="Send Message" />
    form input,
    textarea {
     padding: 5px;
     border-radius: 5px;
     width: 240px;
    form {
     width: 250px;
     margin: 0 auto;
    form input[type='submit'] {
     width: 250px;
    .submit-button-wrapper {
     margin: 8px 0;
    .form-heading {
     margin-bottom: 8px !important;

    Example of intro text

    Change Background Colour

    Let's add a background color and some separation of content

    body {
    background-color: #e2f8ec;
    .container > div {
    margin: 20px auto;
    hr {
    border: 0;
    height: 1px;
    background-color: #f2fff8;

    Then add this before and after the about-grid

    <hr />
    <div class="about-grid">
    <!-- About content -->
    <hr />

    Example of intro text

    Change text color

    body {
    color: #333333;

    #333333 is a slightly lighter and more gentle shade of black that is easier on the eyes. You won't see a drastic change when you refresh the screen, but from a UX point-of-view, this does make the text easier to read.

results matching ""

    No results matching ""