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

in #steemstem • 7 years ago

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.

(html comment removed: Header Section Starts)
<div id="header">
    <div id="main-menu">
        <div id="name-tagline">
            <ul id="_list">
                <li id="menu-list">
                    <a id="menu-link" href="#main-about">ABOUT</a>
                </li>
                <li id="menu-list">
                    <a id="menu-link" href="#services">SERVICES</a>
                </li>
                <li id="menu-list">
                    <a id="menu-link" href="#button_cover">BLOG</a>
                </li>
                <li id="menu-list">
                    <a 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>
(html comment removed: 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 (html comment removed: 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

(html comment removed: 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>
(html comment removed: 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
(html comment removed: 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>
(html comment removed: 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 (html comment removed: Services Section Stops) in your index.html file.
(html comment removed: 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 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>
(html comment removed: 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 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

(html comment removed: Footer Section Starts)







You can reach me through any of the following channels





example@gmail.com








(html comment removed: Footer Section Stops)

  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.

#programming #nerdgarage #technology #busy
7 years ago in #steemstem by
$6.67
  • Past Payouts $6.67
  • - Author $5.20
  • - Curators $1.47
67 votes
Reply 16
Sort:  
  • Trending
    • [-]
     7 years ago  

    Very useful post :)

    $0.04
    • Past Payouts $0.04
    • - Author $0.04
    • - Curators $0.00
    1 vote
    Reply
    [-]
     7 years ago  

    Quite expository...

    $0.03
    • Past Payouts $0.03
    • - Author $0.03
    • - Curators $0.00
    2 votes
    Reply
    [-]
     7 years ago  

    I already bookmarked this page so I can recreate it following your step and maybe add little tweaks on the colour. I will let you know what I came up with

    $0.03
    • Past Payouts $0.03
    • - Author $0.02
    • - Curators $0.01
    1 vote
    Reply
    [-]
     7 years ago  

    I'd definitely love to know what you come up with..

    $0.00
      Reply
      [-]
       7 years ago  

      Hello, as a member of @steemdunk you have received a free courtesy boost! Steemdunk is an automated curation platform that is easy to use and built for the community. Join us at https://steemdunk.xyz

      Upvote this comment to support the bot and increase your future rewards!

      $0.02
      • Past Payouts $0.02
      • - Author $0.02
      • - Curators $0.01
      1 vote
      Reply
      [-]
       7 years ago  

      Nice and Detailed

      [-]
       7 years ago  

      This is a stellar post!
      I will be featuring it in my weekly #technology curation post for the @minnowsupport project and the @CreatorsGuild! The is a new group of Steem tech bloggers and content creators looking to improve the overall quality of the niche.

      If you wish not to be featured in the curation post this Saturday, please let me know. Keep up the hard work, and I hope to see you at the Tech Bloggers' Guild!

      $0.00
        Reply
        [-]
         7 years ago (edited) 

        Thank you... It'd be an honor to be featured...

        $0.00
          Reply
          [-]
           7 years ago  

          I love your tutorial here because it is so detailed and will help more of us find Steem!

          Resteemed!

          $0.00
            Reply
            [-]
             7 years ago  

            Hello, gotgame, what good step by step I will put into practice, greetings

            $0.00
              Reply
              [-]
               7 years ago  

              That was awesome and very detail @gotgame
              Thanks for the post
              Regards @run.vince.run

              $0.00
                Reply
                [-]
                 7 years ago  

                Nice tutorial, i like the one page and flat design, very modern and simple. You can also edit free templates on https://html5up.net/
                Thanks for sharing

                $0.00
                  Reply