Resume #2
Demo
- 13.00 KB
- HTML, CSS
- Resume
- MIT License
HTML
<div class="container">
<div class="word_split wrapper">
<span class="word word1"> Antony </span>
<span class="word word2">Smith</span>
<span class="word word3">Personal</span>
<span class="word word4">Details</span>
<span class="word word5">Employment</span>
<span class="word word6">History </span>
<span class="word word7">Education</span>
<span class="word word8">Personal</span>
<span class="word word9">Skills </span>
<span class="word word10">Technical</span>
<span class="word word11">Skills </span>
<span class="word word12">Get In </span>
<span class="word word13">Touch</span>
<div class="bubble1">
<span class="the-arrow1"></span>
HI! <br />
I AM..
</div>
<div class="bubble2">
<span class="the-arrow2"></span>
<img src="https://dribbble.s3.amazonaws.com/users/10958/screenshots/271458/librarian.jpg" />
</div>
<div class="bubble3">
<span class="the-arrow3"></span>
NATIONALITY...<br />
LOCATION...<br />
BIRTHDAY...<br />
HOBBIES<br />
ETC...<br />
ETC...<br />
</div>
<div class="bubble4">
<span class="the-arrow4"></span>
GRAPHIC DESIGNER 2005 - 2007<br />
Lorem Ipsum dolor sit amet. Lorem Ipsum dolor.<br />
<br />
CREATIVE DIRECTOR 2008 - Current
<br />
Lorem Ipsum dolor sit amet.
</div>
<div class="bubble5">
<span class="the-arrow5"></span>
HIGH SCHOOL<br />
Lorem Ipsum dolor sit amet<br />
May 2004, GPA 1.5<br />
<br />
UNIVERSITY <br />
Lorem Ipsum dolor sit amet<br />
July 2007, GPA 1.5
</div>
<div class="bubble6">
<span class="the-arrow6"></span>
SOCIAL COMMITMENT<br />
ORGANIZATION<br />
CREATIVITY<br />
COMMUNICATION<br />
TEAMWORK<br />
</div>
<div class="bubble7">
<span class="the-arrow7"></span>
PHOTOSHOP<br />
ILLUSTRATOR<br />
INDESIGN<br />
FLASH<br />
DREAMWEAVER<br />
XHTML/CSS<br />
JAVASCRIPT<br />
</div>
<div class="bubble8">
<span class="the-arrow8"></span>
PHONE...<br />
EMAIL...<br />
WEBSITE... <br />
TWITTER...<br />
FACEBOOK...<br />
DRIBBBLE...<br />
</div>
</div>
</div>
<!--end container-->
CSS
@import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
.container {
width: 100%;
height: 100%;
}
.wrapper {
width: 270px;
margin: 50px auto;
position: Relative;
}
.word {
display: block;
text-align: justify;
font-family: "Yanone Kaffeesatz", sans-serif;
line-height: 0.8;
text-transform: uppercase;
letter-spacing: 0px;
}
.word1,
.word2 {
color: #9bc5de;
}
.word3,
.word4 {
color: #90b3c9;
}
.word5,
.word6 {
color: #809bb0;
}
.word7 {
color: #6b7b8a;
}
.word8,
.word9 {
color: #8b8091;
}
.word10,
.word11 {
color: #b68fa2;
}
.word12,
.word13 {
color: #d99ab5;
}
.word1 {
font-size: 6.3em;
}
.word2 {
font-size: 8.1em;
}
.word3 {
font-size: 4.8em;
}
.word4 {
font-size: 6.4em;
}
.word5 {
font-size: 3.8em;
}
.word6 {
font-size: 6em;
}
.word7 {
font-size: 4.5em;
}
.word8 {
font-size: 4.8em;
}
.word9,
.word11 {
font-size: 7.9em;
}
.word10 {
font-size: 4.9em;
}
.word12 {
font-size: 8.2em;
}
.word13 {
font-size: 7.8em;
}
.bubble1 {
height: 75px;
width: 75px;
padding: 20px;
position: absolute;
color: white;
background-color: #99c5de;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
top: 0;
left: -100px;
padding: 10px;
font-size: 1.5em;
line-height: 1;
}
.bubble1 span.the-arrow1 {
display: inline-block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 0px solid #99c5de;
border-bottom: 12px solid #99c5de;
position: absolute;
top: 63px;
left: 75px;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.bubble2 {
height: 150px;
width: 170px;
padding: 20px;
position: absolute;
color: white;
background-color: #99c5de;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
left: 100%;
top: 20px;
}
.bubble2 span.the-arrow2 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #99c5de;
border-bottom: 20px solid #99c5de;
position: absolute;
top: 130px;
left: -19px;
}
.bubble2 img {
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
background: white;
display: block;
width: 100%;
height: 100%;
}
.bubble3 {
height: 200px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #90b2cb;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
top: 183px;
left: -280px;
}
.bubble3 span.the-arrow3 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #90b2cb;
border-bottom: 20px solid #90b2cb;
position: absolute;
top: 0;
left: 250px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.bubble4 {
height: 180px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #809bae;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
top: 260px;
left: 280px;
}
.bubble4 span.the-arrow4 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #809bae;
border-bottom: 20px solid #809bae;
position: absolute;
top: 160px;
left: -19px;
}
.bubble5 {
height: 200px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #697a8a;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
top: 450px;
left: -280px;
}
.bubble5 span.the-arrow5 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #697a8a;
border-bottom: 20px solid #697a8a;
position: absolute;
top: 0;
left: 250px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.bubble6 {
height: 180px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #8b8091;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
top: 509px;
left: 280px;
line-height: 1.8;
}
.bubble6 span.the-arrow6 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #8b8091;
border-bottom: 20px solid #8b8091;
position: absolute;
top: 0px;
left: -19px;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.bubble7 {
height: 200px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #b68ea6;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
top: 675px;
left: -280px;
}
.bubble7 span.the-arrow7 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #b68ea6;
border-bottom: 20px solid #b68ea6;
position: absolute;
top: 0;
left: 250px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.bubble8 {
height: 180px;
width: 250px;
padding: 20px;
position: absolute;
color: white;
background-color: #d99ab5;
font-family: "Amatic SC", cursive;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
top: 853px;
left: 280px;
}
.bubble8 span.the-arrow8 {
display: inline-block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid #d99ab5;
border-bottom: 20px solid #d99ab5;
position: absolute;
top: 160px;
left: -19px;
}
This code is a creative way to present a resume or portfolio on a webpage, using HTML and CSS. It starts with a structure divided into various sections, each represented by a span tag containing different pieces of information like the person’s name, personal details, employment history, education, skills, and contact information. These sections are visually enhanced with “bubble” elements, making the resume interactive and engaging.
The CSS part of the code is particularly interesting. It uses custom fonts imported from Google Fonts, ensuring the text is visually appealing and easy to read. The layout is responsive, thanks to the use of percentage widths and absolute positioning, making sure the resume looks good on various devices. Each “bubble” is styled with rounded corners and specific colors, creating a unique look for each section. Arrows are added using CSS border tricks to point towards the content they’re related to, adding a dynamic feel to the presentation.
In essence, this code combines the traditional elements of a resume with modern web design techniques, creating a compelling and visually engaging online resume. The use of color, custom fonts, and positioning brings the content to life, making it more likely to catch the eye of potential employers or clients.
