Create a front-end resume with HTML+CSS

I watched a lot of hungryValley mock interviews, watched the details of good resumes and took their highlights to make my own

Wu Sili’s online resume

Online resume of Senior Min Cong

The Demo made by Teacher Fang Yinghang

The details of the point

Code block effect

Modify the strong default style to have a code block effect

strong {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC'.'Microsoft YaHei'.Microsoft Yahei, Arial, sans-serif;
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  color: # 494949;
  margin: 0 3px;
  padding: 3px 8px;
  background-color: #F6F6F6;
  border-radius: 5px;
  border: 1px solid rgb(235.235.235);
}
Copy the code

Use the code block with the tag

Be familiar with<strong>HTML</strong>,<strong>JS(TS)</strong>,<strong>AJAX</strong>,<strong>ES6</strong>
Copy the code

Modify scroll bar

::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0.0.0.0.2);
  border-radius: 50px;
}

Copy the code

print

A4 size is 21cm*29.7cm

So just have the same size ratio on each page

.page{
    width: 1024px;
    min-height: 1440px;
}
Copy the code

What if your resume is more than one page long and you end up in the paginated area?

PDF resume

Right click printing can save pages as PDF

You start off with a silly Word resume,

Then write your resume in HTML

To tell the truth, the front-end operation of HHTML+CSS is much better than the operation of Office

Attached is a PDF resume download link

Add the Download attribute to the A TAB and click Download

<a class="pdf" href="resume.pdf" download>
Copy the code

Resume editable

How to let others take your resume to change can be used?

Modify the designMode attribute

document.designMode='on'
Copy the code

responsive

Suitable for different widths

@media screen and (max-width:1024px) {}
@media screen and (max-width: 720px) {}
Copy the code

Create a front-end resume with HTML+CSS