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](https://steemit.com/programming/@gotgame/a-quick-introduction-to-flat-design) 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](https://github.com/olatundeee/resume-template/raw/master/resume_template.zip) - 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](https://image.ibb.co/jRRuQ7/Capture.png) 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 Resume Page Template 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 `` and ``, 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 ``, in between both tags i.e `` and `` paste the following lines of code. ---------- ---------- 3. 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; } ---------- 4. 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](https://preview.ibb.co/mBPTJS/Picture_1.png) And like that we are done with the header section. 5. 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 ----------

Lorem Ipsum
Lorem ipsum dolor sit amet.

---------- 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 `` at the very end of the code for the header section. 2. Immediately after that line paste the following block of code ----------

MEET ME

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.

SERVICES VISIT BLOG CONTACT

---------- 3. 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; } ---------- 4. 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](https://image.ibb.co/c7mVXn/Capture.png) 5. To edit the file and add your bio and image look for the following block of code in the `index.html` file. ----------

---------- 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

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

FRONT END DESIGN

I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies

WORDPRESS BLOG/BUSINESS WEBSITE

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

WORDPRESS/WOOCOMMERCE WEBSITE

I'll set up your e-commerce store on WordPress and customize it to your taste

WORDPRESS THEME/PLUGIN CUSTOMIZATION

Cusutomization of any WordPress theme/plugin in a way that will meet business goals

---------- 2. 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%; } ---------- 3. 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](https://preview.ibb.co/hJCt2n/Capture.png) 4. To edit the content of each box look for the following block of code and insert your content. ----------

FRONT END DESIGN

I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies

---------- For each service you can change the following - The featured image by changing the contents of the `

` to the path of the image you plan to use. - The service header can be changed by editing the content of `

FRONT END DESIGN

`. Replace `FRONT END DESIGN` with your desired header. - To edit the service description replace the content of this block of code with yours. ----------

I'll design a fast and responsive website using the latest HTML/CSS/JavaScript Technologies

---------- 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 ` ` in your `index.html` file. ----------

Would you like to read detailed and informative tutorials on Web Design, Development and Programming?

VISIT MY BLOG

---------- 2. 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; } ---------- 3. Save both files and check for result. The output should look something like this ![enter image description here](https://image.ibb.co/fVtQhn/Capture.png) 4. In order to edit the link and add the link to your blog, look for the following line of code ---------- VISIT MY BLOG ---------- 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 ---------- ---------- 2. 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; } ---------- 3. Save both files and check the result. You should see an output like the one in the picture below. ![enter image description here](https://image.ibb.co/hnr6oS/Capture.png) 4. 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 ----------

example@gmail.com

---------- 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 ----------

---------- 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.

Lorem Ipsum Lorem ipsum dolor sit amet.

Lorem Ipsum Lorem ipsum dolor sit amet.

MEET ME

SERVICES

FRONT END DESIGN

WORDPRESS BLOG/BUSINESS WEBSITE

WORDPRESS/WOOCOMMERCE WEBSITE

WORDPRESS THEME/PLUGIN CUSTOMIZATION

FRONT END DESIGN

FRONT END DESIGN

Would you like to read detailed and informative tutorials on Web Design, Development and Programming?

Lorem Ipsum
Lorem ipsum dolor sit amet.

Lorem Ipsum
Lorem ipsum dolor sit amet.

xerohour