Resume #1

Give your rating
3.3
3 votes
    • 12+
    • 36+
    • 29+
    • 23+
    • 9+
    • 36+
    • 29+
    • 24+
    • 9+
    • 3+
    • 37+
Demo
  • 14.01 KB
  • HTML, CSS
  • Resume
  • MIT License
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">stephen colbert</p>
                    <p class="regular">Designer</p>
                </div>
                <ul>
                    <li>
                        <div class="icon">
                            <i class="fas fa-map-signs"></i>
                        </div>
                        <div class="data">
                            21 Street, Texas <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">skill's</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">Social</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">About us</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">Work Experience</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 - Present</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">Education</p>
            </div>
            <ul>
                <li>
                    <div class="date">2010 - 2013</div>
                    <div class="info">
                        <p class="semi-bold">Web Designing (Texas University)</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">Texas International School</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">Hobby</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;
}

This code snippet is essentially a blueprint for creating a stylish, modern resume website. It starts off by linking to an external font awesome library for icons, enhancing the visual appeal right from the get-go. The structure is divided into two main sections: resume_left and resume_right, each serving a distinct purpose.

The left side of the resume focuses on the individual’s profile, including a photo, contact information, skills, and social media links. It’s designed to give a quick, visually engaging overview of the person’s identity, professional skills, and how to connect with them. The use of icons next to each piece of information makes it easy to identify, and the skills are represented graphically in a percentage format, which is a neat way to show proficiency levels.

On the right, the resume turns more traditional with sections dedicated to an about me narrative, work experience, education, and hobbies. This part sticks to a more text-heavy presentation but maintains visual interest through the use of timelines, bold headings, and bullet points. It’s a space where one can dive into the details of their professional journey and personal interests.

Styling is achieved through CSS, ensuring the resume is not only informative but also pleasing to the eye. It employs a color scheme, fonts, and layout techniques like flexbox for responsiveness, ensuring the resume looks good on different devices. The choice of colors, rounded icons, progress bars for skills, and the structured layout all contribute to making the information accessible and easy to digest.

In summary, this code marries content with design, reflecting a modern approach to presenting one’s professional persona online. It’s a snapshot of how web technologies can be leveraged to create personal branding that stands out.

Menu