视觉艺术家的个人主页设计模板

h5, css3, profile, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2909
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* 
light orange: #EEBE6C
dark orange: #CA7C4E
beige: #F5E8DF
brown: #786450

font: Open Sans 600, 300
*/

.box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to top right, #EEBE6C 0%, #CA7C4E 100%);
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, .3);
    color: #786450;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    border-radius: 2px;
}
.container {
    border-radius: 4px;
    background: #fff;
    box-shadow: 7px 7px 16px 0 rgba(0, 0, 0, .4);
    width: 80%;
    height: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}
.left {
    max-width: 63%;
    flex: 0 0 63%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}
.right {
    flex: 1;
}
.image {
    width: 74px;
    height: 74px;
    position: relative;
    border-radius: 50%;
    margin-bottom: 22px;
}
.image:hover:before {
    content: '';
    transform: translate(-50%, -50%) rotate(360deg);
}
.image:hover:after {
    content: '';
    transform: translate(-50%, -50%) rotate(-360deg);
}
.image:before,
.image:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 50%;
    transition: all 1.5s ease-in-out;
}
.image:before {
    width: 78px;
    height: 78px;
    border: 1px solid #786450;
    border-left-color: transparent;
}
.image:after {
    width: 84px;
    height: 84px;
    border: 1px solid #786450;
    border-right-color: transparent;
}
.image img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
}
.profile {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.profile p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.profile span {
    font-weight: 300;
    font-size: 11px;
    display: inline-block;
}
.actions {
    text-align: center;
}
.btn {
    text-align: center;
    border: 1px solid;
    width: 125px;
    border-radius: 20px;
    line-height: 28px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #786450;
    display: inline-block;
    transition: all .5s;
}
.btn:hover {
    background: #786450;
    color: #fff;
}
.btn + .btn {
    margin-top: 10px;
}
.right {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}
.right-box {
    background: #f5e8df;
    flex: 1;
    text-decoration: none;
    color: #786450;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: background .5s;
}
.right-box:hover {
    background: #E1CFC2;
}
.right-box p {
    margin: 0;
}
.right-box span {
    font-size: 11px;
    font-weight: 300;
}
.right-box + .right-box {
    border-top: 1px solid #fff;
}

HTML

<span>Visual Artist</span>
            </div>

<div class="actions">
                <a href="#" class="btn">Follow</a>

<a href="#" class="btn">Message</a>
            </div>
        </div>

<span>Posts</span>
            </a>

<span>Likes</span>
            </a>

<span>Followers</span>
            </a>
        </div>
    </div>
</div>

h5, css3, profile, template

编辑器支持Emmet

快捷键

h5, css3, profile, template

极客风格的设计师个人主页模板（带马赛克图片动画特效）

一款很棒的设计师个人主页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：