Главная » Языки программирования

Примеры резюме html css

Содержание
  1. 14 HTML Resume Templates
  2. Author
  3. Links
  4. Made with
  5. About the code
  6. HTML Resume
  7. Author
  8. Links
  9. Made with
  10. About the code
  11. Resume
  12. Author
  13. Links
  14. Made with
  15. About the code
  16. Resume in HTML and CSS
  17. Author
  18. Links
  19. Made with
  20. About the code
  21. Draco
  22. Author
  23. Links
  24. Made with
  25. About the code
  26. Resume Stuff
  27. Author
  28. Links
  29. Made with
  30. About the code
  31. HTML Resume Template
  32. Author
  33. Links
  34. Made with
  35. About the code
  36. Codepen Resume Header Background
  37. Author
  38. Links
  39. Made with
  40. About the code
  41. Sample Resume
  42. Author
  43. Links
  44. Made with
  45. About the code
  46. Interactive Resume
  47. Author
  48. Links
  49. Made with
  50. About the code
  51. Responsive Resume
  52. Author
  53. Links
  54. Made with
  55. About the code
  56. Responsive Resume Template
  57. Author
  58. Links
  59. Made with
  60. About the code
  61. Resume Concept
  62. Author
  63. Links
  64. Made with
  65. About the code
  66. Resume Concept
  67. Author
  68. Create a Resume/CV Website Using HTML and CSS (Source Code)
  69. Step2: Adding CSS Code
  70. Live Preview Of our resume website using Html & Css

14 HTML Resume Templates

Collection of free HTML and CSS resume templates.

Demo image: HTML Resume

Author

Made with

About the code

HTML Resume

Simple resume in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Resume

Author

Made with

About the code

Resume

HTML resume with pretty design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Resume in HTML and CSS

Author

Made with

About the code

Resume in HTML and CSS

Strict resume template in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Draco

Author

Made with

About the code

Draco

A free PSD & HTML resume template.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Resume Stuff

Author

Made with

About the code

Resume Stuff

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: HTML Resume Template

Author

Made with

About the code

HTML Resume Template

Free simple HTML resume template.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Codepen Resume Header Background

Author

Made with

About the code

Codepen Resume Header Background

I made this header in a resume format that lists my development & design skills. The thought process was that potential clients and employers would be visiting my CodePen account so make it pop. I thought it would be nice to have a creative, organized way to display my relevant skill sets other than strictly digging through my pens. I then customized my CodePen Pro profile around this pen.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, bootstrap.css, jquery.js

Demo image: Sample Resume

Author

Made with

About the code

Sample Resume

Inspired from represent.io

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Interactive Resume

Author

Made with

About the code

Interactive Resume

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Responsive Resume

Author

Made with

About the code

Responsive Resume

Responsive Resume built in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Responsive Resume Template

Author

Made with

About the code

Responsive Resume Template

Responsive resume template, you just need to fill out the content with your own.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Resume Concept

Author

Made with

About the code

Resume Concept

Elegant and simplistic resume concept.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Resume Concept

Author

Made with

About the code

Resume Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS3 Creative Resume

Author

Источник

Create a Resume/CV Website Using HTML and CSS (Source Code)

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.

Responsive Resume/CV Website Using HTML & CSS

Adding the Structure for our Resume Website:First, we’ll use the div element to create a container with the id “resume,” and then we’ll use the img> tag to add an image to our résumé. Use the h1> tag because our name is the most significant item on our CV. We will now include the person’s phone number, website, and email utilising the p> tag. We will add the person’s goal using the paragraph.10+ Javascript Projects For Beginners With Source CodeNow, utilising the description list, we will develop a section on education. We will use the h2> tag to insert the heading for our college inside of our list. The major and minor subjects will then be added using the strong tag.Similar to how we constructed our schooling part, we will create the abilities, experience, interests, and references sections utilising a description list.Let’s have a look at the structure.Output: Restaurant Website Using HTML and CSS

Step2: Adding CSS Code 

* < box-sizing: border-box; >body < margin: 2.2rem; >div#resume < min-width: 310px; font: 16px Helvetica, Avernir, sans-serif; line-height: 24px; color: #000; >div#resume h1 < margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; line-height: 50px; >div#resume h2 < font-size: 20px; margin: 0 0 6px 0; position: relative; >div#resume h2 span < position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, serif; font-size: 16px; color: #999; font-weight: normal; >div#resume p < margin: 0 0 16px 0; >div#resume a < color: #999; text-decoration: none; border-bottom: 1px dotted #999; >div#resume a:hover < border-bottom-style: solid; color: #000; >div#resume p.objective < font-family: Georgia, serif; font-style: italic; color: #666; >div#resume dt < font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; border-right: 1px solid #999; >div#resume dl < display: table-row; >div#resume dl dt, div#resume dl dd < display: table-cell; padding-bottom: 20px; >div#resume dl dd < width: 500px; padding-left: 26px; >div#resume img < float: right; padding: 10px; background: #fff; margin: 0 30px; transform: rotate(-4deg); box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); width: 30%; max-width: 220px; >@media screen and (max-width: 1100px) < div#resume h2 span < position: static; display: block; margin-top: 2px; >> @media screen and (max-width: 550px) < body < margin: 1rem; >div#resume img < transform: rotate(0deg); >> @media screen and (max-width: 400px) < div#resume dl dt < border-right: none; border-bottom: 1px solid #999; >div#resume dl, div#resume dl dd, div#resume dl dt < display: block; padding-left: 0; margin-left: 0; padding-bottom: 0; text-align: left; width: 100%; >div#resume dl dd < margin-top: 6px; >div#resume h2 < font-style: normal; font-weight: 400; font-size: 18px; >div#resume dt < font-size: 20px; >h1 < font-size: 36px; margin-right: 0; line-height: 0; >div#resume img < margin: 0; >> @media screen and (max-width: 320px) < body < margin: 0; >img < margin: 0; margin-bottom: -40px; >div#resume < width: 320px; padding: 12px; overflow: hidden; >p, li < margin-right: 20px; >>

Step1:We will set the box size to “border box of website” using the universal selector, and the margin to 2.2 rem using the body tag selector.We’ll style our container using the id selector (#resume). The minimum width will be 300 px, and the font size will be 16 pixels with the “Helvetica” font family. In addition, we’ll have a line height of 24 pixels.Calculator Using HTML,CSS & JavaScript With Source Code

Step2:We will now use the tag selector h1 to individually style each component of our resume. Our heading will have a margin of 16 pixels from the bottom, and our h1 tag’s font size and line height are both set to 42 pixels.Weather App Using Html,Css And JavaScript The h2 heading will also get some style. The font size will be set to 20 px, the bottom margin to 6, and the position to “relative.”The remaining html elements will receive styling in the same way that we added styling to our h1 and h2 tags. You merely need to execute the code as written to get the desired result.

div#resume h1 < margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; line-height: 50px; >div#resume h2 < font-size: 20px; margin: 0 0 6px 0; position: relative; >div#resume h2 span < position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, serif; font-size: 16px; color: #999; font-weight: normal; >div#resume p < margin: 0 0 16px 0; >div#resume a < color: #999; text-decoration: none; border-bottom: 1px dotted #999; >div#resume a:hover < border-bottom-style: solid; color: #000; >div#resume p.objective < font-family: Georgia, serif; font-style: italic; color: #666; >div#resume dt < font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; border-right: 1px solid #999; >div#resume dl < display: table-row; >div#resume dl dt, div#resume dl dd < display: table-cell; padding-bottom: 20px; >div#resume dl dd < width: 500px; padding-left: 26px; >div#resume img

Create Portfolio Website Using HTML and CSS (Source Code)Step3: We have almost finished adding the aesthetic to our resume; the final step is to include responsiveness. The heading of our resume will be set to “static” if the screen size is equal to or less than the stated screen size.For this, we will be using the media query and screen width and defining a maximum width of “1100px.” Similar to this, we will specify the width for various screen sizes so that our resume website may adjust the size of our resume to the screen size automatically.

@media screen and (max-width: 1100px) < div#resume h2 span < position: static; display: block; margin-top: 2px; >> @media screen and (max-width: 550px) < body < margin: 1rem; >div#resume img < transform: rotate(0deg); >> @media screen and (max-width: 400px) < div#resume dl dt < border-right: none; border-bottom: 1px solid #999; >div#resume dl, div#resume dl dd, div#resume dl dt < display: block; padding-left: 0; margin-left: 0; padding-bottom: 0; text-align: left; width: 100%; >div#resume dl dd < margin-top: 6px; >div#resume h2 < font-style: normal; font-weight: 400; font-size: 18px; >div#resume dt < font-size: 20px; >h1 < font-size: 36px; margin-right: 0; line-height: 0; >div#resume img < margin: 0; >> @media screen and (max-width: 320px) < body < margin: 0; >img < margin: 0; margin-bottom: -40px; >div#resume < width: 320px; padding: 12px; overflow: hidden; >p, li < margin-right: 20px; >>

Now we’ve completed our resume website using html & css. I hope you understood the whole project. Let’s take a look at our Live Preview.Final Output Of Resume/CV Website Using HTML and CSS:

Live Preview Of our resume website using Html & Css

See the Pen A Responsive Web Resume by Dudley Storey (@dudleystorey) on CodePen. Now We have Successfully created our resume website using html & css. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Источник

Читайте также:  Mozilla firefox with java plugins
Оцените статью
© 2024 Программирование