How to Create a One-Page Resume Website using HTML/CSS/Flat Design

64
7 years ago
in
#steemstem

Have you ever wondered what it takes to design a single page on your website where you can put up your resume for clients to see?

This tutorial shows you exactly how to do that.

At the end of this tutorial you will have a complete design with a simple minimalist layout developed using HTML/CSS.

Throughout this guide we will be implementing the flat design approach.

If you have no idea about what flat design means, this tutorial is a good place to start.

Requirements

  1. You'll be needing a text editor, Visual Studio Code or Sublime Text is enough to handle the job, however you can try it out with any editor that works for you.

  2. Any latest browser like Google Chrome or Firefox will also be needed.

  3. Prior knowledge of HTML/CSS is a plus but not compulsory.

If you would like to see a preview of what the complete work will look like download and unzip the source code from the link provided below.

Download Here

  • Once you have downloaded the file you should see a file named resume_template.zip in your download folder.

  • Unzip the file, in the displayed folder you'll see a list of files with the following file structure

You should use this file structure while creating your own version of the resume template.

images
    |-- (contains all image files used on the page)
|- index.html (the text file containing all html code)
|- style.css (the text file containing all css code)

For noobs who have no idea on how to create a file structure.

To create a file structure such as this first of all create a folder. This folder will serve as the main folder for holding all site contents.

Inside the main folder create a new sub-folder save it with the name images , create two additional text files, save them as index.html and style.css respectively.

Both files will contain all website code.

enter image description here

Even if you don't have any coding experience, the steps I am about to describe will help have your page set-up in no time.

Here we go.

Our page will be separated into 5 different sections I will be sharing the source code for developing each area plus screenshot of how each section will look after it has been completed.

Additionally for each section we'll also be talking about how you can edit the codes and input your own content and images.

You are free to add and remove to and from each section as you see fit in order to meet your needs.

To start with in your index.html file, copy and paste the following lines of code

    <!DOCTYPE html>
<html>
<head>
    <title>Resume Page Template</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>

If you are already familiar with HTML, then you understand what this block of code means already, if otherwise is the case then the next section will explaing what this code does.

This block of code serves as the introductory part to the html file powering our resume template page.

The <body></body element contains the main set of instructions in a html file.

For the rest of the tutorial we'll be placing every other block of code between these two tags <body> and </body>, so locate the line where they are right now.

1. Website Header

To create the header section

  1. Open your index.html file using Sublime Text or any text editor of your choice.

    Note that this is after you must have added the block of code above.

  2. Locate the line that says <body></body>, in between both tags i.e <body> and </body> paste the following lines of code.

<!--Header Section Starts-->
<div id="header">
    <div id="main-menu">
        <div id="name-tagline">
            <ul id="_list">
                <li id="menu-list">
                    <a data-id="menu-link" href="#main-about">ABOUT</a>
                </li>
                <li id="menu-list">
                    <a data-id="menu-link" href="#services">SERVICES</a>
                </li>
                <li id="menu-list">
                    <a data-id="menu-link" href="#button_cover">BLOG</a>
                </li>
                <li id="menu-list">
                    <a data-id="menu-link" href="#more">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="name-and-tagline">
        <h1 id="_name">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;" id="full_name">Lorem Ipsum</font>
            </font>
            <br>
            <span id="_tagline">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Lorem ipsum dolor sit amet.</font>
                </font>
            </span>
        </h1>
    </div>
</div>
<!--Header Section Ends-->
  1. Next up, open your style.css file using Sublime Text and paste the following lines of code into it
body {
    width: 1348px;
    /*overflow: hidden;*/
    background-size: contain;
}

#header {
    background: #167bc1;
    margin: 0;
    margin-top: -20px;
    border: 0;
    padding: 0;
    width: 1335px;
    height: 372.2px;
    display: block;
    font-family: "Segoe UI", Arial, sans-serif;
    font-feature-settings: normal;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;padding: 10px 0;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    position: relative;
}


#main-menu {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 155;
    margin: 0px;
    background: #167bc1;
    display: block;
    border: 0px;
    width: 1335px;
    height: 94px;
    background-attachment: scroll;
    /*background-clip: border-box;
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: auto auto;*/
    font-family: "Segoe UI", Arial, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    left: 0px;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
}

#name-tagline {
    padding: auto;
    margin: 0 auto;
    max-width: 1148px;
    height: 74x;
    position: relative;
    display: block;
    font-family: "Segoe UI", Arial, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
    float: none;
    z-index: auto;
}


#_list {
    font-family: 'Segoe UI',monospace;
    letter-spacing: -.63em;
    word-spacing: -.63em;
    font-size: 0;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    list-style: none;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    width: 1148px;
    height: 74px;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: auto auto;
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    border-image-width: 1;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 0px;
    line-height: 36px;
    list-style-position: outside;
    text-align: center;
    box-sizing: content-box;
    z-index: auto;
    position: static;
}

#menu-list {
    width: 25%;
    margin: 0px;
    line-height: 74px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    word-spacing: 0;
    padding: 0;
    list-style: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: auto auto;
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    border-image-width: 1;
    float: none;
    font-family: "Segoe UI", Arial, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 17px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    list-style-position: outside;
    position: static;
    box-sizing: content-box;
}

#menu-link:hover {
  color: orange;
}

#menu-link {
    position: relative;
    display: block;
    color: #aec9dc;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .15em;
    transition: color .3s;
    cursor: pointer;
    line-height: 74px;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
    font-family: 'Segoe UI',Arial,sans-serif;
    width: 287px;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 17px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    list-style-position: outside;
    text-transform: uppercase;
    box-sizing: content-box;
    z-index: auto;
}

#name-and-tagline {
    margin: 0 auto;
    max-width: 1335px;
    position: relative;
    display: block;
    height: 167.2;
    color: #fff;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
    z-index: auto;
}

#_name {
    margin: 100px;
    padding: 100px, 0;
    text-align: center;
    font-size: 76px;
    line-height: 83.6px;
    letter-spacing: .05em;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-weight: 900;
    display: block;
    margin-block-start: .67em;
    margin-block-end: .67em;
    color: #fff;
    height: 167.2px;
    width: 1148px;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    box-sizing: content-box;
    position: relative;
    z-index: auto;
}

#_tagline {
    font-size: 43px;
    font-weight: 300;
    letter-spacing: .075em;
    text-align: center;
    font-family: 'Segoe UI',Arial,sans-serif;
    color: #fff;
    width: 770.4px;
    height: 49px;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    line-height: 47.3px;
    box-sizing: content-box;
    display: inline;
    z-index: auto;
    position: relative;
}

#full_name {
    text-align: center;
    font-size: 76px;
    letter-spacing: .05em;
    font-weight: 900;
    color: #fff;
    width: 550px;
    height: 86px;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    letter-spacing: 3.8px;
    line-height: 83.6px;
    vertical-align: baseline;
    margin-top: 0px;
    box-sizing: content-box;
    display: inline;
    z-index: auto;
    position: static;
}
  1. Save both files and open your index.html in a browser, you should get a result that looks like the one in the image

After completion the header section will look this way

enter image description here

And like that we are done with the header section.

  1. You can edit the header section to add your name and additional information.

    In order to add your name and additional information, look for the following block of code in the header section

<div id="name-and-tagline">
            <h1 id="_name">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;" id="full_name">Lorem Ipsum</font>
                </font>
                <br>
                <span id="_tagline">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">Lorem ipsum dolor sit amet.</font>
                    </font>
                </span>
            </h1>
        </div>

Replace the line that contains "Lorem Ipsum" with your name.

To add additional information like your work description, replace the line that contains "Lorem ipsum dolor sit amet" with your desired content.

Save the file and check for the result in a web browser.

2. About

Immediately after the Header section we have the about section where you can add a little bio about yourself and your picture.

To create the About section.

  1. In your index.html file look for this line of code <!--Header Section Ends--> at the very end of the code for the header section.

  2. Immediately after that line paste the following block of code

<!--About Section Starts-->
<div id="main-about">
    <div id="about_internal_first">
        <h2 id="about_sec_left_heading">
            <span id="thin-text">MEET ME</span>
        </h2>
        <div id="about_sec_left_row">
            <div id="about_sec_left_row_one">
                <p id="short_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis cursus cursus. Aliquam tortor nibh, ultrices a nunc at, mollis semper ligula. Donec aliquet fermentum ipsum. Pellentesque velit leo, semper nec tristique non, accumsan eget quam. Duis commodo sapien in aliquam faucibus. Donec pharetra odio id fermentum egestas. Sed ultricies quam nec orci ultrices, eu hendrerit lacus porttitor. Integer quis eros tincidunt, dictum turpis at, sagittis leo.
                </p>
                <p id="other_sec_buttons">
                    <a href="#services" id="actual_button_one">
                        <span>
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                SERVICES
                                </font>
                            </font>
                        </span>
                    </a>
                    <a href="#" id="actual_button_two"><span>
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                VISIT BLOG
                                </font>
                            </font>
                        </span>
                    </a>
                    <a href="#more" id="actual_button_three"><span>
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                CONTACT
                                </font>
                            </font>
                        </span>
                    </a>
                </p>
            </div>
            <div id="about_sec_left_row_two">
                <div id="about_sec_left_row_two_one">
                    <img src="images/img_two.png" width="240px" id="pers_image">
                </div>
            </div>
        </div>
    </div>
</div>
<!--About Section Stops-->
  1. In your style.css file go to the last line of code and paste the following block of code into the file
  #main-about {
    padding-top:100px;
    height:505px;
    width:1335px;
    background-color: #fff;
    color:#000;
    box-sizing: border-box;
    display: block;
    font-family: futura-pt, sans-serif;
    font-size: 16px;
    line-height: 20px;
    margin-top: 100px;
    margin-bottom:100px;
}

#about_internal_first {
    max-width: 730px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: block;
    color: rgb(97, 97, 97);
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    content: " ";
    display: table;
    clear: both;
    height: 505px;
    margin-left: 33px;
    margin-right: 33px;
    padding-left: 100px;
}

#about_sec_left_heading {
    margin-right: 29px;
    padding-bottom: 31px;
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
    color: rgb(38, 38, 38);
    font-size: 31px;
    line-height: 35px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin: 0px;
    box-sizing: border-box;
    display: block;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    width: 734px;
    height: 35px;
}

#about_sec_left_row {
    margin-left: -10px;
    margin-right: -10px;
    box-sizing: border-box;
    display: block;
    color: rgb(97, 97, 97);
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    content: " ";
    display: table;
    clear: both;
    width: 570px;
    height: 493px;
}

#thin-text {
    width: auto;
    height: auto;
}

#about_sec_left_row_one {
    width: 745px;
    height: 340px;
    padding-top: 40px;
    padding-right: 40px;
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 10px;
    box-sizing: border-box;
    display: block;
    color: rgb(97, 97, 97);
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
}

#about_sec_left_row_two {
    padding-top: 40px;
    padding-left: 80px;
    text-align: left;
    position: relative;
    float: left;
    min-height: 1px;
    padding-right: 10px;
    box-sizing: border-box;
    display: inline;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 350px;
    height: 455px;
    clear: both;
    margin-left:740px;
    margin-top: -410px;
}

#pers_image {
    border-radius: 50%;
}

#short_bio {
    margin-top: 0px;
    margin-bottom: 15px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 21px;
    box-sizing: border-box;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    color: rgb(97, 97, 97);
    width: 745px;
    height: 70px;
    padding: 10px; 
}

#other_sec_buttons {
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    margin-top: 30px;
    padding-top: 70px;
    width: 730px;
    height:70px;
    margin: 0 0 1.2em;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    color: #fff;
    letter-spacing: .15em;
    font-family: 'Segoe UI', sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 36px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal
}

#actual_button_one {
    /*--margin-top: 0;*/
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
    padding: 5px;
    border: none;
    background: none;
    text-decoration: none;
    color: #fff;
    transition: color .3s;
    cursor: pointer;
    font-size: 18px;
    line-height: 38px;
    text-align: center;
    letter-spacing: .15em;
    font-family: 'Segoe UI', sans-serif;
    background-color: lightgreen;
    width: 150px;
    height: 40px;
    box-sizing: content-box;
    display: inline-block;
    position: static;
    z-index: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    border-radius: 10px;
}

#actual_button_two {
    /*margin-top: 0;*/
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
    padding: 5px;
    border: none;
    background: none;
    text-decoration: none;
    color: #fff;
    transition: color .3s;
    cursor: pointer;
    font-size: 18px;
    line-height: 38px;
    text-align: center;
    letter-spacing: .15em;
    font-family: 'Segoe UI', sans-serif;
    background-color: lightblue;
    width: 150px;
    height: 40px;
    box-sizing: content-box;
    display: inline-block;
    position: static;
    z-index: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    border-radius: 10px;
}

#actual_button_three {
    /*margin-top: 0;*/
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
    padding: 5px;
    border: none;
    background: none;
    text-decoration: none;
    color: #fff;
    transition: color .3s;
    cursor: pointer;
    font-size: 18px;
    line-height: 38px;
    text-align: center;
    letter-spacing: .15em;
    font-family: 'Segoe UI', sans-serif;
    background-color: red;
    width: 150px;
    height: 40px;
    box-sizing: content-box;
    display: inline-block;
    position: static;
    z-index: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    border-radius: 10px;
}
  1. Save both files and view your results. You will have a new layout on your page that looks like the one below.

enter image description here

  1. To edit the file and add your bio and image look for the following block of code in the index.html file.
<p id="short_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis cursus cursus. Aliquam tortor nibh, ultrices a nunc at, mollis semper ligula. Donec aliquet fermentum ipsum. Pellentesque velit leo, semper nec tristique non, accumsan eget quam. Duis commodo sapien in aliquam faucibus. Donec pharetra odio id fermentum egestas. Sed ultricies quam nec orci ultrices, eu hendrerit lacus porttitor. Integer quis eros tincidunt, dictum turpis at, sagittis.</p>

Replace the content with whatever you desire to add.

To replace the image look for the following line of code in your index.html file

<div id="about_sec_left_row_two">
     <div id="about_sec_left_row_two_one">
         <img src="images/img_two.png" width="240px" id="pers_image">
    </div>
</div>

Replace the line of code that says images/img_two.png with images/xoxoxo.png where xoxoxo.png is the name you have used to store your image with its extension.

Please note that the location for storing your image must be the images folder created earlier while creating the file structure.

3. Services

In this section you can display different services that you offer and short descriptions about them.

In order to add this section

  1. In your index.html file, directly after the block of code for the About section paste the following line of code
<!--Services Section Starts-->
<section id="services">
    <h2 id="about_sec_left_heading">
        <span id="thin-text" style="text-align: center; padding-left: 550px; color: #fff;">SERVICES</span>
    </h2>
    <section id="serviceitems">
        <article id="servicelist">
            <figure id="illustration">
                <img src="images/front-end-design.png" id="actual_image">
            </figure>
            <h5 id="serviceheader">FRONT END DESIGN</h5>
            <p id="servicedesc">I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies</p>
        </article>
        <article id="servicelist">
            <figure id="illustration">
                <img src="images/wordpress-blog.png" id="actual_image">
            </figure>
            <h5 id="serviceheader">WORDPRESS BLOG/BUSINESS WEBSITE</h5>
            <p id="servicedesc">I'll set up a responsive blog/business website on WordPress with installation and customization of all necessary plugins including those for SEO and security</p>
        </article>
        <article id="servicelist">
            <figure id="illustration">
                <img src="images/ecommerce.png" id="actual_image">
            </figure>
            <h5 id="serviceheader">WORDPRESS/WOOCOMMERCE WEBSITE</h5>
            <p id="servicedesc">I'll set up your e-commerce store on WordPress and customize it to your taste</p>
        </article>
        <article id="servicelist">
            <figure id="illustration">
                <img src="images/plugin.png" id="actual_image">
            </figure>
            <h5 id="serviceheader">WORDPRESS THEME/PLUGIN CUSTOMIZATION</h5>
            <p id="servicedesc">Cusutomization of any WordPress theme/plugin in a way that will meet business goals</p>
        </article>
    </section>
</section>
<!--Services Section Stops-->
  1. In the style.css file append the following line of code
    #services {
    background-color: #4a3f60;
    padding: 120px 0;
    display: block;
    width: 1335px;
    height: 490px;
    box-sizing: content-box;
    float: none;
    line-height: 20px;
    position: static;
    z-index: auto;
}

#serviceitems {
    width: 960px;
    height: 480px;
    margin: 5px auto;
    transition: width .2s ease;
    display: block;
    box-sizing: content-box;
    float: none;
    line-height: 20px;
    position: static;
    z-index: auto;
}

#servicelist {
    width: 460px;
    height: 220px;
    margin: 10px;
    float: left;
    display: block;
    box-sizing: content-box;
    position: static;
    z-index: auto;
    line-height: 20px;
}

#illustration {
    width: 120px;
    height: 113px;
    float: left;
    margin: 30px 60px 30px 0;
    border-radius: 50%;
    background-color: #fff;
    padding: 47px 0px 0px 40px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    box-sizing: content-box;
    position: static;
    z-index: auto;
    line-height: 20px;
}

#serviceheader {
    margin-top: 65px;
    margin-bottom: 20px;
    display: block;
    float: left;
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    font-size: 16px;
    text-decoration: none;
    line-height: 28px;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    width: 183px;
    height: 28px;
    text-decoration-style: solid;
    box-sizing: content-box;
    position: static;
    z-index: auto;
}

#servicedesc {
    width: 200px;
    font-size: 12px;
    font-weight: 400;
    color: #ddd;
    line-height: 20px;
    display: block;
    float: left;
    font-family: 'Segoe UI', sans-serif;
    margin-block-start: 1em;
    margin-block-end: 1em;
    box-sizing: content-box;
    position: static;
    z-index: auto;
    margin-top: 30px;
}

#actual_image {
    width: 80px;
    height: 80px;
    box-sizing: content-box;
    display: inline;
    float: none;
    line-height: 20px;
    position: static;
    z-index: auto;
    background-color: #fff;
    border-radius: 50%;
}
  1. Save both files and check for the result in a browser. You'll get something that looks like the image below

enter image description here

  1. To edit the content of each box look for the following block of code and insert your content.
<article id="servicelist">
                <figure id="illustration">
                    <img src="images/front-end-design.png" id="actual_image">
                </figure>
                <h5 id="serviceheader">FRONT END DESIGN</h5>
                <p id="servicedesc">I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies</p>
            </article>

For each service you can change the following

  • The featured image by changing the contents of the <img src="images/front-end-design.png" id="actual_image"> to the path of the image you plan to use.

  • The service header can be changed by editing the content of <h5 id="serviceheader">FRONT END DESIGN</h5>. Replace FRONT END DESIGN with your desired header.

  • To edit the service description replace the content of this block of code with yours.

<p id="servicedesc">I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies</p>

Note that you can use this format for editing the three additional areas.

4. Blog Button

In this section we'll be adding a button that will take the visitors on the site to our blog.

In order to do this

  1. Paste the following block of code directly below <!--Services Section Stops--> in your index.html file.
<!--Blog Button Section Starts-->
<div id="button_cover">
    <h4 id="thin-text" style="text-align: center; padding-left: 100px; padding-right: 100px; color: #C0C0C0;">
    Would you like to read detailed and informative tutorials on Web Design, Development and Programming?
    </h4>
    <p id="innerbuttoncover">
        <a data-id="button-link-cover" href="#">
            <span id="button-link-cover-two">
                <font id="button-link-cover-three" style="vertical-align: inherit;">
                    <font id="button-link-text" style="vertical-align: inherit;">VISIT MY BLOG</font>
                </font>
            </span>
        </a>
    </p>
</div>
<!--Blog Button Section Stops-->
  1. Paste this block in your style.css file
#button_cover {
    padding: 105px 0 100px;
    margin: 0 auto;
    max-width: 1340px;
    height: 90px;
    position: relative;
    display: block;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
    float: none;
    /*background-image: url("images/steemit_blog_img.png");*/
}

#innerbuttoncover {
    font-size: 18px;
    line-height: 36px;
    height: 68px;
    text-align: center;
    margin: 0 0 1.2em;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    color: #fff;
    letter-spacing: .15em;
    font-family: 'Segoe UI', sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    letter-spacing: 2.7px;
    line-height: 36px;
    box-sizing: content-box;
    position: static;
    z-index: auto;
}

#button-link-cover {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: .15em;
    width: 325px;
    height: 70px;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease;
    box-sizing: content-box;
    position: static;
    z-index: auto;
}

#button-link-cover:hover {
    color: yellow;
}

#button-link-cover-two {
    position: relative;
    display: block;
    border: none;
    width: 235px;
    height: 68px;
    padding: 0 45px;
    font-size: 19px;
    font-weight: 900;
    line-height: 68px;
    background: #006bb2;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: #006bb2;
    letter-spacing: .15em;
    transition: background-color .3s;
    cursor: pointer;
    text-align: center;
    font: 900 18px/36px 'Segoe UI', sans-serif;
    margin: 0;
    text-transform: uppercase;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: background-color;
    transition-timing-function: ease;
    box-sizing: content-box;
    z-index: auto;
}

#button-link-cover-three {
    vertical-align: inherit;
    font-size: 19px;
    font-weight: 900;
    line-height: 68px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .15em;
    cursor: pointer;
    text-align: center;
    width: 235px;
    height: 25px;
    margin: 0;
    border: none;
    padding: 0;
    color: rgb(255, 255, 255);
    font-family: 'Segoe UI', sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 19px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    box-sizing: content-box;
    display: inline;
    float: none;
    position: static;
    z-index: auto;
}

#button-text {
    vertical-align: inherit;
    line-height: 68px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .15em;
    cursor: pointer;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 19px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: 900;
    margin: 0;
    padding: 0;
    border: none;
    width: 235px;
    height: 25px;
    box-sizing: content-box;
    display: inline;
    z-index: auto;
    position: static;
}
  1. Save both files and check for result. The output should look something like this

enter image description here

  1. In order to edit the link and add the link to your blog, look for the following line of code
<a data-id="button-link-cover" href="#">
                <span id="button-link-cover-two">
                    <font id="button-link-cover-three" style="vertical-align: inherit;">
                        <font id="button-link-text" style="vertical-align: inherit;">VISIT MY BLOG</font>
                    </font>
                </span>
            </a>

In the part that says href="#", replace "#" with your link (don't forget to put your link in double braces) and save the file.

5. Contact

This is the last addition to our resume page. In this section you can add your contact details and link to your social media profiles.

To add this part

  1. Append the following code in your index.html file

You can reach me through any of the following channels

example@gmail.com

  1. Append the following code in your style.css file.
#more {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 200px;
    background: #006bb2;
    color: #616161;
    box-sizing: border-box;
    display: block;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 1335px;
    height: 600px;
    margin-top: 100px;
    border: none;
    box-sizing: border-box;
    float: none;
    position: static;
    z-index: auto;
}

#w-container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: block;
    color: #616161;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    box-sizing: border-box;
    float: none;
    position: static;
    z-index: auto;
    height: 205px;
}

#w-row {
    margin-left: -10px;
    margin-right: -10px;
    box-sizing: border-box;
    display: block;
    color: #616161;
    font-size: 16px;
    line-height: 20px;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    height: 200px;
    position: static;
    z-index: auto;
    padding-top: 100px;
}

#row-one {
    opacity: 1;
    transform: scaleX(1) scaleY(1) scaleZ(1);
    transition: opacity 500ms ease 0s, transform 500ms ease 0s;
    padding-right: 31px;
    padding-left: 31px;
    text-align: center;
    position: relative;
    float: left;
    min-height: 1px;
    box-sizing: border-box;
    display: block;
    color: #616161;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 236px;
    height: 160px;
    margin: 0;
    border: none;
    opacity: 1;
    position: relative;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: opacity, transform;
    transition-timing-function: ease, ease;
}

/*#social_icons:hover {
    opacity: 1;
    transform: scaleX(1) scaleY(1) scaleZ(1);
    transition: opacity 500ms ease 0s, transform 500ms ease 0s;
    padding-right: 31px;
    padding-left: 31px;
    text-align: center;
    position: relative;
    float: left;
    min-height: 1px;
    box-sizing: border-box;
    display: block;
    color: #616161;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 286px;
    margin: -200;
    border: none;
    opacity: 1;
    position: relative;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: opacity, transform;
    transition-timing-function: ease, ease;
} */

#feature-icon {
    margin-bottom: 25px;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    border: 0;
    box-sizing: border-box;
    text-align: center;
    color: #616161;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 144px;
    height: 145px;
    float: none;
    position: static;
    z-index: auto;
}

footer {
    position: relative;
    margin-top: 250px;
}

#status {
    font-size: 18px;
    margin: 0 0 50px;
    color: #aec9dc;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    text-align: center;
    font:'Segoe UI',Arial,sans-serif;
    letter-spacing: .15em;
    width: 1148px;
    margin-bottom: 50px;
    margin-left: -100px;
    line-height: 36px;
    box-sizing: content-box;
    position: static;
    z-index: auto;
    font-weight: 900;
    padding-left: ;
}

#email {
    margin: 0 0 65px;
    font-size: 40px;
    line-height: 1.2;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    text-align: center;
    color: #fff;
    font: 900 18px/36px 'Segoe UI',Arial,sans-serif;
    letter-spacing: .15em;
    box-sizing: content-box;
    float: none;
    position: static;
    z-index: auto;
}
  1. Save both files and check the result. You should see an output like the one in the picture below.

enter image description here

  1. In this section you can edit the links leading to all contact channels.

To edit the email link

  • Look for the following block of code
<p id="email">
                        <a href="mailto:example@gmail.com">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit; color: #fff; font-size: 36px; margin-left: -200px;">example@gmail.com</font>
                            </font>
                        </a>
                    </p>

Change the value of the href attribute to your email address using the following format mailto:example@gmail.com where example@gmail.com should be replaced with your email address.

To replace the links to your social media accounts, look for the following block of code

<div id="row-one" data-ix="scale-on-scroll" style="opacity: 1; transform: scaleX(1) scaleY(1) scaleZ(1); transition: opacity 500ms ease 0s, transform 500ms ease 0s;">
                    <a href="" id="social_icons">
                    <img src="images/fb_icon.png" id="feature-icon" width="144px">
                    </a>
                </div>

Add your link in between the "" after the href attribute. Use this format for all other social icons on the page.

That brings us to the end of this tutorial on building a resume page with HTML/CSS using the flat design approach.

Thanks for reading.

steemstem
programming
nerdgarage
technology
busy
7 years ago
gotgame64
via busy
$ 6.675
67
7
H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center