<div class="container">
<div class="top">
<div class="imgBx">
<div class="box">
<img src="https://mankeung.github.io/docs/mk-data/assets/logo.png">
</div>
</div>
<div class="profileText">
<h3>杨某某<br>设计&开发<br><span>前端网页设计师&平面设计师</span></h3>
</div>
</div>
<div class="contentBox">
<div class="leftSide">
<h3>我的联系方式</h3>
<ul>
<li>
<span class="icon"><ion-icon name="call-outline"></ion-icon></span>
<span class="text">13127757553</span>
</li>
<li>
<span class="icon"><ion-icon name="mail-outline"></ion-icon></span>
<span class="text">13127757553@163.com</span>
</li>
<li>
<span class="icon"><ion-icon name="earth-outline"></ion-icon></span>
<span class="text">www.mkimq.com</span>
</li>
<li>
<span class="icon"><ion-icon name="location-outline"></ion-icon></span>
<span class="text">上海市闵行区</span>
</li>
</ul>
<h3>教育经历</h3>
<ul class="education">
<li>
<h5>2010 - 2013</h5>
<h4>学习专业学位</h4>
<h6>学校名称</h6>
</li>
<li>
<h5>2007 - 2010</h5>
<h4>学习专业学位</h4>
<h6>学校名称</h6>
</li>
<li>
<h5>1997 - 2007</h5>
<h4>学习专业学位</h4>
<h6>学校名称</h6>
</li>
</ul>
<h3>我使用的编程技术</h3>
<ul class="language">
<li>
<span class="text">Html</span>
<span class="percent">
<div style="width: 95%"></div>
</span>
</li>
<li>
<span class="text">CSS</span>
<span class="percent">
<div style="width: 90%"></div>
</span>
</li>
<li>
<span class="text">Javascript</span>
<span class="percent">
<div style="width: 85%"></div>
</span>
</li>
</ul>
<h3>我的兴趣爱好</h3>
<ul class="interest">
<li><span class="icon"><ion-icon name="game-controller-outline"></ion-icon></span>游戏</li>
<li><span class="icon"><ion-icon name="mic-outline"></ion-icon></span>旅行游玩</li>
<li><span class="icon"><ion-icon name="book-outline"></ion-icon></span>看书阅读</li>
<li><span class="icon"><ion-icon name="cafe-outline"></ion-icon></span>研究美食</li>
</ul>
</div>
<div class="rightSide">
<div class="about">
<h3>自我介绍</h3>
<p>你好，我是杨小爱，湖南人，【web前端开发】公众号的创始人兼主理人。<br>
计算机网络专业毕业，毕业后，入坑互联网行业，目前长居上海工作生活，4年+自由职业者，专为创业企业和中小企业提供一站式的企业宣传服务，
从线下的平面宣传广告设计到企业VI形象，以及线上的网站开发制作，UI设计，均可以为您提供专业设计开发服务。<br>
欢迎前来合作咨询，我的微信号:【web-qdkf】,非诚不扰，非常感谢。<br>
<br></p>
</div>
<div class="about">
<h3>工作经验</h3>
<div class="box">
<div class="year_company">
<h5>2014 - 2016</h5>
<h5>公司名称</h5>
</div>
<div class="text">
<h4>前端网页设计师</h4>
<p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
</div>
</div><div class="box">
<div class="year_company">
<h5>2016 - 2019</h5>
<h5>公司名称</h5>
</div>
<div class="text">
<h4>前端网页设计师</h4>
<p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
</div>
</div><div class="box">
<div class="year_company">
<h5>2019 - 现在</h5>
<h5>公司名称</h5>
</div>
<div class="text">
<h4>前端网页设计师</h4>
<p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
</div>
</div>
</div>
<div class="about skills">
<h3>专业技能</h3>
<div class="box">
<h4>Html</h4>
<span class="percent">
<div style="width: 90%"></div>
</span>
</div>
<div class="box">
<h4>CSS</h4>
<span class="percent">
<div style="width: 95%"></div>
</span>
</div>
<div class="box">
<h4>Javascript</h4>
<span class="percent">
<div style="width: 80%"></div>
</span>
</div>
<div class="box">
<h4>Photoshop</h4>
<span class="percent">
<div style="width: 90%"></div>
</span>
</div>
<div class="box">
<h4>Illustrator</h4>
<span class="percent">
<div style="width: 95%"></div>
</span>
</div>
<div class="box">
<h4>Adobe XD</h4>
<span class="percent">
<div style="width: 78%"></div>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #181818;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 50px;
background: #fff;
border-left: 50px solid #fff;
border-right: 50px solid #fff;
box-shadow: 0 50px 75px rgba(0,0,0,0.1);
}
.container .top {
position: relative;
display: grid;
padding: 40px;
padding-bottom: 0;
grid-template-columns: 1fr 2fr;
}
.container .top .imgBx {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.container .top .imgBx .box {
position: relative;
width: 70%;
min-width: 200px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
}
.container .top .imgBx .box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .top .profileText {
position: relative;
padding: 40px;
display: flex;
align-items: center;
}
.container .top .profileText h3 {
font-size: 3em;
letter-spacing: 0.1em;
line-height: 1.2em;
font-weight: 600;
color: #333;
}
.container .top .profileText h3 span {
position: relative;
top: -10px;
font-weight: 300;
font-size: 0.5em;
}
.container .contentBox {
position: relative;
min-height: 500px;
display: grid;
padding: 0 40px 40px;
grid-template-columns: 1fr 2fr;
}
.container .contentBox h3 {
border-left: 4px solid #5CB8E4;
padding-left: 10px;
line-height: 1em;
font-weight: 600;
color: #333;
letter-spacing: 0.1em;
margin-bottom: 20px;
margin-top: 50px;
}
.container .contentBox ul {
position: relative;
margin: 10px 0;
}
.container .contentBox ul li {
list-style: none;
margin: 25px 0;
line-height: 1em;
color: #333;
cursor: pointer;
display: flex;
}
.container .contentBox ul li ion-icon {
font-size: 1.2em;
margin-right: 10px;
color: #8758FF;
}
.container .contentBox ul.education li {
flex-direction: column;
margin: 25px 0;
}
h5 {
color: #8758FF;
}
h4 {
color: #333;
font-weight: 500;
margin: 5px 0;
}
h6 {
color: #666;
font-weight: 300;
font-size: 1em;
}
.language li {
flex-direction: column;
}
.language li span {
color: #333;
font-size: 16px;
font-weight: 500;
}
.language .percent {
position: relative;
width: 100%;
margin-top: 15px;
margin-bottom: 10px;
height: 6px;
background: #e3e3e3;
display: block;
overflow: hidden;
}
.language .percent div {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #8758FF;
}
.container .contentBox ul.interest {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
}
.container .contentBox ul.interest li {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0px;
}
.container .contentBox ul.interest li .icon {
position: relative;
width: 40px;
height: 40px;
border-radius: 5px;
background: #8758FF;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.container .contentBox ul.interest li ion-icon {
color: #fff !important;
margin-right: 0px;
}
p {
font-weight: 300;
}
.rightSide {
padding-left: 40px;
}
.about .box {
display: flex;
flex-direction: row;
margin: 20px 0;
}
.about .box .year_company {
min-width: 150px;
margin-bottom: 10px;
}
.about .box .year_company h5 {
color: #333;
font-weight: 600;
}
.about .box .year_company h5:nth-child(1) {
color: #8758FF;
}
.about .box .text h4 {
color: #8758FF;
font-size: 16px;
margin: 0;
}
.about.skills .box {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 150px 1fr;
justify-content: center;
align-items: center;
}
.about.skills .box h4 {
color: #333;
font-weight: 500;
margin-bottom: 5px;
}
.about.skills .box .percent {
position: relative;
width: 100%;
height: 10px;
background: #e3e3e3;
}
.about.skills .box .percent div {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #8758FF;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.