Резюме №1

Оцените
3.3
3 оценки
    • 12+
    • 36+
    • 29+
    • 23+
    • 9+
    • 36+
    • 29+
    • 24+
    • 9+
    • 3+
    • 37+
Демо
  • 14,15 КБ
  • HTML, CSS
  • Резюме
  • Лицензия MIT
HTML
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>

<div class="resume">
    <div class="resume_left">
        <div class="resume_profile">
            <img src="https://i.imgur.com/eCijVBe.png" alt="profile_pic" />
        </div>
        <div class="resume_content">
            <div class="resume_item resume_info">
                <div class="title">
                    <p class="bold">Стивен Колберт</p>
                    <p class="regular">Дизайнер</p>
                </div>
                <ul>
                    <li>
                        <div class="icon">
                            <i class="fas fa-map-signs"></i>
                        </div>
                        <div class="data">
                            Москва <br />
                            USA
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="data">
                            +324 4445678
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="data">
                            stephen@gmail.com
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fab fa-weebly"></i>
                        </div>
                        <div class="data">
                            www.stephen.com
                        </div>
                    </li>
                </ul>
            </div>
            <div class="resume_item resume_skills">
                <div class="title">
                    <p class="bold">навыки</p>
                </div>
                <ul>
                    <li>
                        <div class="skill_name">
                            HTML
                        </div>
                        <div class="skill_progress">
                            <span style="width: 80%;"></span>
                        </div>
                        <div class="skill_per">80%</div>
                    </li>
                    <li>
                        <div class="skill_name">
                            CSS
                        </div>
                        <div class="skill_progress">
                            <span style="width: 70%;"></span>
                        </div>
                        <div class="skill_per">70%</div>
                    </li>
                    <li>
                        <div class="skill_name">
                            SASS
                        </div>
                        <div class="skill_progress">
                            <span style="width: 90%;"></span>
                        </div>
                        <div class="skill_per">90%</div>
                    </li>
                    <li>
                        <div class="skill_name">
                            JS
                        </div>
                        <div class="skill_progress">
                            <span style="width: 60%;"></span>
                        </div>
                        <div class="skill_per">60%</div>
                    </li>
                    <li>
                        <div class="skill_name">
                            JQUERY
                        </div>
                        <div class="skill_progress">
                            <span style="width: 88%;"></span>
                        </div>
                        <div class="skill_per">88%</div>
                    </li>
                </ul>
            </div>
            <div class="resume_item resume_social">
                <div class="title">
                    <p class="bold">Соц сети</p>
                </div>
                <ul>
                    <li>
                        <div class="icon">
                            <i class="fab fa-facebook-square"></i>
                        </div>
                        <div class="data">
                            <p class="semi-bold">Facebook</p>
                            <p>Stephen@facebook</p>
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fab fa-twitter-square"></i>
                        </div>
                        <div class="data">
                            <p class="semi-bold">Twitter</p>
                            <p>Stephen@twitter</p>
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fab fa-youtube"></i>
                        </div>
                        <div class="data">
                            <p class="semi-bold">Youtube</p>
                            <p>Stephen@youtube</p>
                        </div>
                    </li>
                    <li>
                        <div class="icon">
                            <i class="fab fa-linkedin"></i>
                        </div>
                        <div class="data">
                            <p class="semi-bold">Linkedin</p>
                            <p>Stephen@linkedin</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="resume_right">
        <div class="resume_item resume_about">
            <div class="title">
                <p class="bold">Обо мне</p>
            </div>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis illo fugit officiis distinctio culpa officia totam atque exercitationem inventore repudiandae?</p>
        </div>
        <div class="resume_item resume_work">
            <div class="title">
                <p class="bold">Опыт работы</p>
            </div>
            <ul>
                <li>
                    <div class="date">2013 - 2015</div>
                    <div class="info">
                        <p class="semi-bold">Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                    </div>
                </li>
                <li>
                    <div class="date">2015 - 2017</div>
                    <div class="info">
                        <p class="semi-bold">Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                    </div>
                </li>
                <li>
                    <div class="date">2017 - Настоящее время</div>
                    <div class="info">
                        <p class="semi-bold">Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="resume_item resume_education">
            <div class="title">
                <p class="bold">Образование</p>
            </div>
            <ul>
                <li>
                    <div class="date">2010 - 2013</div>
                    <div class="info">
                        <p class="semi-bold">Веб-дизайн (Техасский университет)</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                    </div>
                </li>
                <li>
                    <div class="date">2000 - 2010</div>
                    <div class="info">
                        <p class="semi-bold">Техасская международная школа</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="resume_item resume_hobby">
            <div class="title">
                <p class="bold">Увлечения</p>
            </div>
            <ul>
                <li><i class="fas fa-book"></i></li>
                <li><i class="fas fa-gamepad"></i></li>
                <li><i class="fas fa-music"></i></li>
                <li><i class="fab fa-pagelines"></i></li>
            </ul>
        </div>
    </div>
</div>
CSS
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap");

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    font-family: "Montserrat", sans-serif;
}

.bold {
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}

.semi-bold {
    font-weight: 500;
    font-size: 16px;
}

.resume {
    width: 800px;
    max-width: 100%;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    font-size: 14px;
    line-height: 22px;
    color: #555555;
}

.resume .resume_left {
    width: 280px;
    background: #0bb5f4;
}

.resume .resume_left .resume_profile {
    width: 100%;
    height: 280px;
}

.resume .resume_left .resume_profile img {
    width: auto;
    height: 100%;
}

.resume .resume_left .resume_content {
    padding: 0 25px;
}

.resume .title {
    margin-bottom: 20px;
}

.resume .resume_left .bold {
    color: #fff;
}

.resume .resume_left .regular {
    color: #b1eaff;
}

.resume .resume_item {
    padding: 25px 0;
    border-bottom: 2px solid #b1eaff;
}

.resume .resume_left .resume_item:last-child,
.resume .resume_right .resume_item:last-child {
    border-bottom: 0px;
}

.resume .resume_left ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.resume .resume_left ul li:last-child {
    margin-bottom: 0;
}

.resume .resume_left ul li .icon {
    width: 35px;
    height: 35px;
    background: #fff;
    color: #0bb5f4;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 16px;
    position: relative;
}

.resume .icon i,
.resume .resume_right .resume_hobby ul li i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.resume .resume_left ul li .data {
    color: #b1eaff;
}

.resume .resume_left .resume_skills ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    margin-bottom: 10px;
    color: #b1eaff;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.resume .resume_left .resume_skills ul li .skill_name {
    width: 25%;
}

.resume .resume_left .resume_skills ul li .skill_progress {
    width: 60%;
    margin: 0 5px;
    height: 5px;
    background: #009fd9;
    position: relative;
}

.resume .resume_left .resume_skills ul li .skill_per {
    width: 15%;
}

.resume .resume_left .resume_skills ul li .skill_progress span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
}

.resume .resume_left .resume_social .semi-bold {
    color: #fff;
    margin-bottom: 3px;
}

.resume .resume_right {
    width: 520px;
    background: #fff;
    padding: 25px;
}

.resume .resume_right .bold {
    color: #0bb5f4;
}

.resume .resume_right .resume_work ul,
.resume .resume_right .resume_education ul {
    padding-left: 40px;
    overflow: hidden;
}

.resume .resume_right ul li {
    position: relative;
}

.resume .resume_right ul li .date {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.resume .resume_right ul li .info {
    margin-bottom: 20px;
}

.resume .resume_right ul li:last-child .info {
    margin-bottom: 0;
}

.resume .resume_right .resume_work ul li:before,
.resume .resume_right .resume_education ul li:before {
    content: "";
    position: absolute;
    top: 5px;
    left: -25px;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #0bb5f4;
}

.resume .resume_right .resume_work ul li:after,
.resume .resume_right .resume_education ul li:after {
    content: "";
    position: absolute;
    top: 14px;
    left: -21px;
    width: 2px;
    height: 115px;
    background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
}

.resume .resume_right .resume_hobby ul li {
    width: 80px;
    height: 80px;
    border: 2px solid #0bb5f4;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    color: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li i {
    font-size: 30px;
}

.resume .resume_right .resume_hobby ul li:before {
    content: "";
    position: absolute;
    top: 40px;
    right: -52px;
    width: 50px;
    height: 2px;
    background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li:last-child:before {
    display: none;
}

Этот код — настоящий конструктор для создания стильного и современного сайта-резюме. Он начинается с подключения внешней библиотеки шрифтов от Font Awesome для иконок, что сразу задаёт эстетический настрой. Структура разделена на две основные части: resume_left и resume_right, каждая из которых выполняет свою уникальную роль.

Левая часть резюме посвящена профилю личности, включая фотографию, контактную информацию, навыки и ссылки на социальные сети. Это сделано для быстрого и визуально привлекательного представления личности, профессиональных умений и способов связи. Использование иконок рядом с каждым типом информации облегчает идентификацию, а навыки представлены в графическом формате процентов, что является оригинальным способом демонстрации уровня владения.

Правая часть резюме более традиционна и содержит разделы обо мне, опыт работы, образование и увлечения. Здесь текст более объёмный, но визуальный интерес сохраняется за счёт использования временных шкал, жирных заголовков и маркированных списков. Это пространство для детального описания профессионального пути и личных интересов.

Стилизация достигается с помощью CSS, что гарантирует не только информативность, но и эстетичность резюме. Используется цветовая схема, шрифты и техники верстки, такие как flexbox для адаптивности, обеспечивая корректное отображение резюме на различных устройствах. Выбор цветов, закруглённые иконки, полосы прогресса для навыков и структурированная компоновка делают информацию доступной и легко усвояемой.

В итоге, этот код сочетает в себе содержание и дизайн, отражая современный подход к представлению профессионального лица в интернете. Это отличный пример того, как веб-технологии могут быть использованы для создания уникального личного бренда.

Меню