Today I want to help my brother write a personal profile, and then I went to the Internet and found a beautiful and simple html profile, and then I want to record it.
Source code
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
body
{
background-image: url(background.jpg);
background-size: cover;
}
div.transbox
{
width: 1050px;
height: 420px;
margin: 90px 90px;
background-color: #ffffff;
border: 1px solid #FFFFFF;
opacity:0.8;
}
h1 {text-align: center;}
h2.ex1 {margin-left:5cm;}
h3.ex1 {margin-left:5cm;}
img.ex1{margin-left:5cm;}
p{text-align: right;}
p.ex1{margin-right: 2cm;}
p{color:mediumpurple}
/*cc:change color*/
a.cc:visited {color:#0000ff;}
a.cc:hover {color:#ffcc00;}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<h1>Personal profile</h1>
<img src="avatar.jpg" height="50px" width="50px" class="ex1" />
<h2 class="ex1">Name</h2>
<h3 class="ex1">What you want to introduce or say</h3>
<h3 class="ex1">What you want to introduce or say</h3>
<h3 class="ex1">What you want to introduce or say</h3>
<h3 class="ex1">What you want to introduce or say</h3>
<p class="ex1">What you want to say</p>
</div>
</div>
</body>
</html>Use
First, create a folder, name it whatever. Then go to this folder, create a new html file (like personal-profile.html), and copy the above code into this file. Then in this folder to create a folder called img, inside need to put two pictures, one named avatar.jpg'this is your avatar, one named background.jpg, and then use the edge browser to open the html file you have just written, you can see a personal profile.
Put it in hexo
When you create this profile and show it to a friend, he may say, “Well, you can only view this locally, which is not useful, and I don’t have it on my computer, so why not get another one?”
At this point, assuming you have a domain name and a hexo GitHub Pages, you can open the hexo root _config.yml'file and find the line skip_render: and edit it in the following format to tell hexo not to render the page. In this way, your profile can be displayed normally.
skip_render:
- "Profile.html"Then you can open your GitHub Pages/ Profile.html to see your profile.
demo preview
Use the above code and method to produce the effect (the avatar is my blog’s avatar, the background is Windows10 wallpaper, and then the html file is called profile-demo.html)
demo code
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
body
{
background-image: url(demo-img/demo-background.jpg);
background-size: cover;
}
div.transbox
{
width: 1050px;
height: 420px;
margin: 90px 90px;
background-color: #ffffff;
border: 1px solid #FFFFFF;
opacity:0.8;
}
h1 {text-align: center;}
h2.ex1 {margin-left:5cm;}
h3.ex1 {margin-left:5cm;}
img.ex1{margin-left:5cm;}
p{text-align: right;}
p.ex1{margin-right: 2cm;}
p{color:mediumpurple}
/*cc:change color*/
a.cc:visited {color:#0000ff;}
a.cc:hover {color:#ffcc00;}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<h1>Personal profile</h1>
<img src="demo-img/demo-avatar.jpg" height="50px" width="50px" class="ex1" />
<h2 class="ex1">Xu Zijin</h2>
<h3 class="ex1">Hobby: Programming</h3>
<h3 class="ex1">Programming language: python, C, C ++, html</h3>
<h3 class="ex1">School:</h3>
<h3 class="ex1">Location: Guangdong China</h3>
<p class="ex1">What you want to say</p>
</div>
</div>
</body>
</html>demo shows：https://xuzijin.com/en/Personal-profile-demo.html
Source :Make a beautiful profile page with HTML/CSS - Learning Week 1
Note: This is an article in Chinese
Please indicate the source for reprinting, welcome to research the sources quoted in the article, welcome to point out any errors or not clear expression. Leave a comment in the comment section below or email us at [email protected]