Flexbox Resume Challenge

Developer
Kendrick Arnett
Size
10,625 Kb
Views
62,744
  1. Flexbox Resume Challenge Previews
  2. Flexbox Resume Challenge HTML Codes
  3. Flexbox Resume Challenge CSS Codes
  4. Flexbox Resume Challenge JS Codes

How do I make an flexbox resume challenge?

What is a flexbox resume challenge? How do you make a flexbox resume challenge? This script and codes were developed by Kendrick Arnett on 12 June 2022, Sunday.

Flexbox Resume Challenge Previews
IQ Test

Flexbox Resume Challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Resume Challenge</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col col-3 avatar"></div> <div class="col col-6"> <div class="row"> <div class="col col-5 name section"> <h1>Kendrick Arnett</h1> </div> <div class="col download section"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M14 2v11h2.51L12 18.01 7.49 13H10V2h4zm2-2H8v11H3l9 10 9-10h-5V0zm3 19v3H5v-3H3v5h18v-5h-2z"/> </svg> </div> </div> </div> <div class="row"> <div class="col col-5 subtitle section"> <h3>The experienced <span class="the-experienced-role"></span></h3> <div class="the-experienced-roles"> <p>user experience fanatic.</p> <p>front-end developer.</p> <p>bike commuter.</p> <p>A/B tester.</p> <p>photographer.</p> <p>pattern library enthusiast.</p> </div> </div> <div class="col github section"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.238 1.84 1.238 1.07 1.834 2.806 1.304 3.49.997.108-.776.42-1.306.763-1.605-2.665-.305-5.467-1.334-5.467-5.93 0-1.312.47-2.382 1.236-3.222-.125-.303-.536-1.524.116-3.176 0 0 1.008-.322 3.3 1.23.958-.266 1.984-.4 3.004-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.236 1.91 1.236 3.22 0 4.61-2.807 5.625-5.48 5.922.43.372.824 1.102.824 2.222v3.293c0 .32.192.694.8.576C20.567 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"/> </svg> </div> </div> </div> <div class="row toc"> <div class="col section" data-title="home"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M4 24H2V0h2v24zM22 2H6v12h16l-4-5.97L22 2z"/> </svg> </div> </div> <div class="col section" data-title="resume"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M13.744 8s1.522-8-3.335-8H2v24h20V11c0-3.42-5.247-3.745-8.256-3zM14 19H6v-1h8v1zm4-3H6v-1h12v1zm0-3H6v-1h12v1zM14.568.075C16.77 1.25 20.506 4.958 22 6.955c-1.286-.9-4.044-1.656-6.09-1.178.22-1.468-.186-4.534-1.342-5.702z"/> </svg> </div> </div> <div class="col section" data-title="portfolio"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12.23 15.5c-6.8 0-10.367-1.22-12.23-2.597V22h24v-8.95c-3.218 2.222-9.422 2.45-11.77 2.45zM14 18.032C14 19.12 13.104 20 12 20s-2-.88-2-1.968V17h4v1.032zM0 9.492V7h24v2.605c0 5.29-24 5.133-24-.114zM9 2c-1.104 0-2 .896-2 2v2h2V4.5c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5V6h2V4c0-1.104-.896-2-2-2H9z"/> </svg> </div> </div> <div class="col section" data-title="contacts"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M17.997 18H6.002L6 17.377c0-1.26.1-1.986 1.588-2.33 1.684-.39 3.344-.736 2.545-2.21C7.767 8.476 9.46 6 12 6c2.49 0 4.225 2.383 1.865 6.84-.775 1.463.826 1.81 2.545 2.208C17.9 15.392 18 16.12 18 17.38l-.003.62zm4.81-2.214c-1.29-.298-2.49-.56-1.908-1.657 1.768-3.343.468-5.13-1.4-5.13-1.266 0-2.25.817-2.25 2.324 0 3.903 2.27 1.77 2.247 6.676h4.5l.003-.463c0-.946-.074-1.493-1.192-1.75zM.003 18h4.5c-.02-4.906 2.247-2.772 2.247-6.676C6.75 9.817 5.765 9 4.5 9c-1.868 0-3.168 1.787-1.398 5.13.58 1.098-.62 1.358-1.91 1.656C.075 16.044 0 16.59 0 17.536L.002 18z"/> </svg> </div> </div> <div class="col section" data-title="feedback"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10.252 23h-3.21c-.612 0-1.157-.427-1.354-1.007L4.098 17H8.71l.918 3.17c.178.553.512 1.042.962 1.41.758.617.27 1.42-.34 1.42zm9.286-21.902c-1.522.617-4.525 3.74-8.252 4.64C10.484 6.835 10 8.617 10 10.582c0 1.86.44 3.553 1.166 4.662 3.94.942 6.303 3.996 8.31 4.67 2.2.743 4.528-3.467 4.524-9.42-.003-5.96-2.47-10.203-4.462-9.397zm1.704 15.472c-.72 1.656-1.987 1.685-2.72 0-.436-1-.73-2.77-.892-3.96h.38c1.174 0 2.125-.954 2.125-2.13s-.95-2.133-2.125-2.133h-.39c.16-1.21.538-2.947.974-3.89.764-1.652 1.94-1.68 2.72 0 1.315 2.837 1.368 8.793-.072 12.113zM8.807 15h-4.37C1.983 15 0 12.953 0 10.5S1.984 6 4.436 6H8.88c-.56 1.3-.876 2.887-.876 4.594 0 1.627.29 3.14.803 4.406z"/> </svg> </div> </div> <div class="col section" data-title="blog"> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12.014 6.54S14.16 2.57 15.49 0L24 8.51c-2.583 1.322-6.556 3.46-6.556 3.46l-5.43-5.43zm-8.517 6.423S2.157 18.217 0 21.567l.827.826 3.967-3.967c.348-.348.57-.8.63-1.288.033-.27.152-.532.36-.74.498-.498 1.306-.498 1.803 0 .498.5.498 1.305 0 1.803-.208.21-.47.33-.74.362-.488.06-.94.28-1.288.63L1.59 23.16l.826.84c3.314-2.133 8.604-3.51 8.604-3.51l4.262-7.838-3.95-3.95-7.837 4.26z"/> </svg> </div> </div> </div> </div> </div> <div class="row"> <div class="col col-6 about-me section"> <h2>About Me</h2> <blockquote> <p class="lede">Hard-working person on the way to success…</p> <p>Customize your website as you want.</p> </blockquote> <ul class="soft-skills"> <li class="skill"> <div> <h3>Creative</h3> <p> Lorem ipsum dolor sit amet </p> </div> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M5 8.5C5 7.672 5.672 7 6.5 7S8 7.672 8 8.5c0 .83-.672 1.5-1.5 1.5S5 9.33 5 8.5zm9 .5l-2.52 4L9 11.04 5 17h14l-5-8zm8-4v14H2V5h20zm2-2H0v18h24V3z"/> </svg> </div> </li> <li class="skill"> <div> <h3>Self-Motivated</h3> <p> Lorem ipsum dolor sit amet </p> </div> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M5 20v2H3v-2h2zm2-2H1v6h6v-6zm6-1v5h-2v-5h2zm2-2H9v9h6v-9zm6-2v9h-2v-9h2zm2-2h-6v13h6V11zm0-11l-6 1.22 1.716 1.71-6.85 6.732-3-3.002-7.842 7.797 1.41 1.418 6.427-6.39 2.992 2.993 8.28-8.137L21.8 6 23 0z"/> </svg> </div> </li> <li class="skill"> <div> <h3>Punctual</h3> <p> Lorem ipsum dolor sit amet </p> </div> <div class="wrap-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 12V6h-2v8h7v-2h-5z"/> </svg> </div> </li> </ul> </div> <div class="col col-3 personal-info section"> <h2>Personal Info</h2> <dl class="info-lines"> <ul> <li class="info-line"> <dt>Name:</dt> <dd>Kendrick Arnett</dd> </li> <li class="info-line"> <dt>Date of Birth:</dt> <dd>09/24/1980</dd> </li> <li class="info-line"> <dt>Address:</dt> <dd>101 Main Street</dd> </li> <li class="info-line"> <dt>Phone:</dt> <dd>555/555-1234</dd> </li> <li class="info-line"> <dt>Email:</dt> <dd>[email protected]</dd> </li> </ul> </dl> </div> </div> <div class="row"> <div class="col col-3 experience section"> <h2>Pro. Experience</h2> <ul class="jobs"> <li class="job" data-start-date="12/2010" data-end-date="12/2011" data-job-title="Sr. Awesomeness Engineer">Fancy Company Name</li> </ul> <ul class="jobs"> <li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li> </ul> <ul class="jobs"> <li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li> </ul> </div> <div class="col col-6 professional-skills section"> <h2>Professional Skills</h2> <ul class="skills"> <li class="skill"> <div class="pie-wrap"> <div class="pie">90%</div> </div> <h4 class="skill-title">Prototyping</h4> <p> Concept of the number one Tunguska event courage of our questions quasar realm of the galaxies. Corpus callosum, Tunguska event, shores of the cosmic ocean rich in mystery the ash of stellar alchemy something incredible is waiting to be known. </p> </li> <li class="skill"> <div class="pie-wrap"> <div class="pie">85%</div> </div> <h4 class="skill-title">Design</h4> <p> Flatland billions upon billions dispassionate extraterrestrial observer tendrils of gossamer clouds venture, permanence of the stars prime number at the edge of forever explorations, hundreds of thousands star stuff harvesting star light, made in the interiors of collapsing stars? </p> </li> <li class="skill"> <div class="pie-wrap"> <div class="pie">70%</div> </div> <h4 class="skill-title">Development</h4> <p> Drake Equation Flatland radio telescope quasar, rings of Uranus, something incredible is waiting to be known preserve and cherish that pale blue dot the only home we've ever known realm of the galaxies. </p> </li> </ul> </div> </div> <div class="row footer"> <div class="col col-f footer-name section"> <h3>Kendrick Arnett</h3> <p> Light years inconspicuous motes of rock and gas venture shores of the cosmic ocean brain. </p> </div> <div class="col col-f cv section"> <h3>CV</h3> <ul> <li>English</li> <li>French</li> <li>Spanish</li> </ul> </div> <div class="col col-f subscribe section"> <h3>Subscribe</h3> <input type="text" class="input"/> </div> <div class="col col-f social section"> <h3>Follow Me At</h3> <ul class="social-icons"> <li class="social-icon"></li> <li class="social-icon"></li> <li class="social-icon"></li> <li class="social-icon"></li> <li class="social-icon"></li> <li class="social-icon"></li> </ul> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/mattboldt/typed.js/master/dist/typed.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox Resume Challenge - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,500italic,400italic,300italic,100italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
html { background: -webkit-linear-gradient(right, #8e9eab, #efeff0); background: linear-gradient(to left, #8e9eab, #efeff0); font-size: 1vw; font-family: 'Roboto'; font-weight: 300; box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
h1, h2, h3, h4 { font-family: 'Roboto Condensed'; font-weight: 100;
}
h1, h2, h3 { text-transform: uppercase;
}
h1 { font-size: 3.05176rem;
}
h2 { font-size: 1.95313rem;
}
h3 { font-size: 1.5625rem;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 90%; margin: 2rem auto; box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.3);
}
.section { padding: 2rem;
}
.section h2:first-of-type { margin-top: 0;
}
.section h3:first-of-type { margin-top: 0;
}
.row { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.col { -webkit-box-flex: 1; -ms-flex: 1 1 10%; flex: 1 1 10%; min-height: 10vw;
}
.col.col-2 { -webkit-box-flex: 2; -ms-flex: 2 2 20%; flex: 2 2 20%;
}
.col.col-3 { -webkit-box-flex: 3; -ms-flex: 3 3 30%; flex: 3 3 30%;
}
.col.col-4 { -webkit-box-flex: 4; -ms-flex: 4 4 40%; flex: 4 4 40%;
}
.col.col-5 { -webkit-box-flex: 5; -ms-flex: 5 5 50%; flex: 5 5 50%;
}
.col.col-6 { -webkit-box-flex: 6; -ms-flex: 6 6 60%; flex: 6 6 60%;
}
.col.col-7 { -webkit-box-flex: 7; -ms-flex: 7 7 70%; flex: 7 7 70%;
}
.col.col-8 { -webkit-box-flex: 8; -ms-flex: 8 8 80%; flex: 8 8 80%;
}
.col.col-9 { -webkit-box-flex: 9; -ms-flex: 9 9 90%; flex: 9 9 90%;
}
.col.col-f { -webkit-box-flex: 2.25; -ms-flex: 2.25 2.25 22.5%; flex: 2.25 2.25 22.5%;
}
.avatar { background: #fff; background-image: url("https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg"); background-size: cover; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: scale(1); transform: scale(1);
}
.name, .subtitle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.name h1, .name h3, .subtitle h1, .subtitle h3 { margin-top: 0; margin-bottom: 0;
}
.download, .github { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #2f2f2f; background: -webkit-linear-gradient(63deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, -webkit-linear-gradient(243deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, -webkit-linear-gradient(63deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, -webkit-linear-gradient(243deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, -webkit-linear-gradient(left, #313131 0.625rem, transparent 0.625rem), -webkit-linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737); background: linear-gradient(27deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #313131 0.625rem, transparent 0.625rem), linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737); background-color: #292929; background-size: 1.25rem 1.25rem;
}
.download svg, .github svg { fill: #848484; -webkit-transition: -webkit-transform 150ms ease-in-out; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; -webkit-transform: scale(1); transform: scale(1);
}
.download svg:hover, .github svg:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transition: -webkit-transform 150ms ease-in-out; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; z-index: 2;
}
.name { background: -webkit-linear-gradient(63deg, #424242 0.3125rem, transparent 0.3125rem) 0 0.3125rem, -webkit-linear-gradient(243deg, #424242 0.3125rem, transparent 0.3125rem) 0.625rem 0, -webkit-linear-gradient(63deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0 0.625rem, -webkit-linear-gradient(243deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, -webkit-linear-gradient(left, #484848 0.625rem, transparent 0.625rem), -webkit-linear-gradient(#484848 25%, #464646 25%, #464646 50%, transparent 50%, transparent 75%, #4e4e4e 75%, #4e4e4e); background: linear-gradient(27deg, #424242 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #424242 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #484848 0.625rem, transparent 0.625rem), linear-gradient(#484848 25%, #464646 25%, #464646 50%, transparent 50%, transparent 75%, #4e4e4e 75%, #4e4e4e); background-color: #404040; background-size: 1.25rem 1.25rem; color: #efefef;
}
.subtitle { background: -webkit-linear-gradient(63deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, -webkit-linear-gradient(243deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, -webkit-linear-gradient(63deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, -webkit-linear-gradient(243deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, -webkit-linear-gradient(left, #313131 0.625rem, transparent 0.625rem), -webkit-linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737); background: linear-gradient(27deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #313131 0.625rem, transparent 0.625rem), linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737); background-color: #292929; background-size: 1.25rem 1.25rem; color: #efefef;
}
.github { background: -webkit-linear-gradient(63deg, #131313 0.3125rem, transparent 0.3125rem) 0 0.3125rem, -webkit-linear-gradient(243deg, #131313 0.3125rem, transparent 0.3125rem) 0.625rem 0, -webkit-linear-gradient(63deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0 0.625rem, -webkit-linear-gradient(243deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, -webkit-linear-gradient(left, #1a1a1a 0.625rem, transparent 0.625rem), -webkit-linear-gradient(#1a1a1a 25%, #181818 25%, #181818 50%, transparent 50%, transparent 75%, #212121 75%, #212121); background: linear-gradient(27deg, #131313 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #131313 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #1a1a1a 0.625rem, transparent 0.625rem), linear-gradient(#1a1a1a 25%, #181818 25%, #181818 50%, transparent 50%, transparent 75%, #212121 75%, #212121); background-color: #121212; background-size: 1.25rem 1.25rem; color: #fff;
}
.wrap-icon { width: 4rem;
}
.toc .wrap-icon { width: 2.5rem; height: 100%; margin: 1rem;
}
.toc svg { fill: #fff;
}
.toc .col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: -webkit-transform 100ms ease-in-out; transition: -webkit-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out; -webkit-transform: scale(1); transform: scale(1);
}
.toc .col svg { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 100ms ease-in-out; transition: -webkit-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out;
}
.toc .col:hover { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 100ms ease-in-out; transition: -webkit-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out; z-index: 2;
}
.toc .col:hover svg { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-transition: -webkit-transform 100ms ease-in-out; transition: -webkit-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out;
}
.toc .col:after { content: attr(data-title); color: #fff; letter-spacing: 0.1rem; text-transform: uppercase;
}
.toc .col[data-title="home"] { background-color: #00bd9c;
}
.toc .col[data-title="resume"] { background-color: #2c97de;
}
.toc .col[data-title="portfolio"] { background-color: #9c56b8;
}
.toc .col[data-title="contacts"] { background-color: #e87e03;
}
.toc .col[data-title="feedback"] { background-color: #e94b35;
}
.toc .col[data-title="blog"] { background-color: #daa900;
}
.about-me { background: #fff;
}
.about-me blockquote { border-left: 0.25rem solid #e94b35; padding-left: 1rem; margin-left: 0;
}
.about-me blockquote .lede { color: #e94b35; font-weight: 500; letter-spacing: 0.3rem; text-transform: uppercase;
}
.about-me .soft-skills { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; padding: 0; list-style-type: none;
}
.about-me .soft-skills .skill { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: top; -ms-flex-align: top; align-items: top; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; width: 30%;
}
.about-me .soft-skills .skill h3 { font-weight: 700; margin: 0;
}
.about-me .soft-skills .wrap-icon { margin: 0; margin-right: 1rem; width: 3rem;
}
.soft-skills .skill:hover .wrap-icon { -webkit-transform: scale(1); transform: scale(1); fill: #e94b35; -webkit-transition: all 200ms ease; transition: all 200ms ease;
}
.soft-skills .skill .wrap-icon { -webkit-transform: scale(0.8); transform: scale(0.8); fill: #a1a1a1; -webkit-transition: all 200ms ease; transition: all 200ms ease;
}
.the-experienced-roles { display: none; visibility: hidden;
}
.personal-info { background-color: #f3f3f3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.personal-info .info-lines { -webkit-margin-before: 0; -webkit-margin-after: 0;
}
.personal-info .info-lines ul { margin: 0; padding: 0; list-style-type: none;
}
.personal-info .info-line { margin-bottom: 1rem;
}
.personal-info .info-line dt, .personal-info .info-line dd { display: inline-block; margin: 0;
}
.personal-info .info-line dt { text-transform: uppercase; font-weight: 500; margin-right: 0.5rem;
}
.experience { background-color: #9c56b8; color: #fff;
}
.jobs, .job-lines { list-style-type: none; margin: 0; padding: 0;
}
.jobs .job { text-transform: uppercase; font-weight: 500; margin-bottom: 1rem;
}
.jobs .job:before { text-transform: none; font-weight: 100; display: block; opacity: 0.6; content: attr(data-start-date) " – " attr(data-end-date);
}
.jobs .job:after { text-transform: none; font-weight: 100; display: block; opacity: 0.6; content: attr(data-job-title);
}
.professional-skills { background-color: #2c97de; color: #fff;
}
.professional-skills .skills { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; list-style-type: none; margin: 0; padding: 0;
}
.professional-skills .skills .skill-title { text-transform: uppercase; letter-spacing: 0.1rem;
}
.professional-skills:hover .outer { -webkit-animation: dash 1s ease-in-out forwards; animation: dash 1s ease-in-out forwards;
}
.professional-skills .skill { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 25%;
}
.professional-skills .skill .pie { text-align: center; margin-bottom: 1rem; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.professional-skills .skill svg { position: static; width: 7rem; height: 7rem; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background: transparent; border-radius: 50%;
}
.professional-skills .skill circle { fill: #fff; fill-opacity: 0.2; stroke: #fff; stroke-width: 32;
}
.professional-skills .skill .outer { -webkit-animation: dash 1s ease-in-out forwards; animation: dash 1s ease-in-out forwards;
}
.professional-skills .skill .innerCircle { fill: #2c97de; stroke-width: 0; stroke: #2c97de; fill-opacity: 1;
}
@-webkit-keyframes dash { from { stroke-dasharray: 0 100; } to { stroke-dasharray: auto 100; }
}
@keyframes dash { from { stroke-dasharray: 0 100; } to { stroke-dasharray: auto 100; }
}
.footer { background-color: #424242; color: #a1a1a1;
}
.footer .cv ul, .footer .social ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style-type: none; padding: 0;
}
.footer .subscribe .input { padding: 0.5rem; background: transparent; border: 2px solid #a1a1a1; color: #a1a1a1; width: 100%;
}
.footer .subscribe .input:focus { outline: 0;
}
.social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.social-icons .social-icon { border-radius: 0.125rem; width: 2.5rem; height: 2.5rem; background-color: #a1a1a1;
}
.typed-cursor { font-size: 1.5625rem; opacity: 1; -webkit-animation: blink 0.7s infinite; animation: blink 0.7s infinite;
}
@-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }
}

Flexbox Resume Challenge - Script Codes JS Codes

$(function(){ $('.the-experienced-role').typed({ stringsElement: $('.the-experienced-roles'), loop: true, loopCount: false, startDelay: 2000, backSpeed: 25, backDelay: 2000, typeSpeed: 25 });
});
function $$(selector, context) {	context = context || document;	var elements = context.querySelectorAll(selector);	return Array.prototype.slice.call(elements);
}
$$('.pie').forEach(function(pie) { var p = parseFloat(pie.textContent); var NS = "http://www.w3.org/2000/svg"; var svg = document.createElementNS(NS, "svg"); var circle = document.createElementNS(NS, "circle"); var title = document.createElementNS(NS, "title"); circle.setAttribute("r", 16); circle.setAttribute("cx", 16); circle.setAttribute("cy", 16); circle.setAttribute("stroke-dasharray", p + " 100"); circle.setAttribute('class', 'outer') svg.setAttribute("viewBox", "0 0 32 32"); title.textContent = pie.textContent; pie.textContent = ''; svg.appendChild(title); svg.appendChild(circle); var innerCircle = document.createElementNS(NS, "circle"); innerCircle.setAttribute("class", 'innerCircle'); innerCircle.setAttribute("r", 14); innerCircle.setAttribute("cx", 16); innerCircle.setAttribute("cy", 16); innerCircle.setAttribute("stroke-dasharray", "100 100"); svg.appendChild(innerCircle); pie.appendChild(svg);
});
Flexbox Resume Challenge - Script Codes
Flexbox Resume Challenge - Script Codes
Home Page Home
Developer Kendrick Arnett
Username kendrick
Uploaded June 12, 2022
Rating 3.5
Size 10,625 Kb
Views 62,744
Do you need developer help for Flexbox Resume Challenge?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kendrick Arnett (kendrick) Script Codes
Name
Duotone Fixed Backgrounds
Include-media Include
SVG Social Icons
Flexbox Grid
A Pen by Kendrick Arnett
Reasonably Shadowed Button
SVG Button
Pulse for Skeleton Screens
Media Queries via include-media
Colors
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!