Skip to content

Instantly share code, notes, and snippets.

@dytra
Created December 22, 2019 12:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dytra/61d3b98f559e04ca22cf89d79dca23aa to your computer and use it in GitHub Desktop.
Save dytra/61d3b98f559e04ca22cf89d79dca23aa to your computer and use it in GitHub Desktop.
404 CV Not Found

404 CV Not Found

The goal of this pen is to attract recruiters to let them know that you really love coding in the web and hopefully this can make you get your first interview.

This landing page talk to the readers that your CV isn't just a PDF file, it's an interactive cv! That's what the Get CV buton is for. Link the Get CV button to your interactive CV.

So what are you waiting for? Fork this pen, make it suite for you and then convert this pen to a pdf file. Use a free service like Sejda's HTML to PDF and attach it in your LinkedIn profile or anything. Good luck!

A Pen by dytra on CodePen.

License.

<!-- This pen bellow suppose to be converted to PDF and then it can be attached on your LinkedIn Profile -->
<div id="root">
<div id="sticky-bar">
Made with ❤️ using HTML &amp; CSS by dytra.
</div>
<main>
<div id="main-box" class="">
<h2>Oopsy Doopsy</h2>
<h1 id="404">404</h1>
<h3>There's no CV here :(</h3>
<div id="detail-box">
<p>The CV that you're looking for isn't belong in this universe.</p>
<p>Because the CV's matter isn't fit in this dimension.</p>
<p>I'll give you a link that will guide you to the CV below. </p>
</div>
<!-- Put your interactive CV link below this anchor tag-->
<a href="#" id="getcv">Get CV</a>
</div>
</main>
</div>
/* there's no js here, cheers 🍺 */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto;
margin:0;
padding:0;
user-select:none;
}
html,body {
width:100%;
height:100%;
}
body {
background:#fbf5ff
}
#sticky-bar {
width:100%;
background: #ca91eb;
box-sizing:border-box;
padding:.5em;
text-align:center;
color:white;
}
#root {
position:relative;
width:100%;
height:100%;
/* overflow-y:hidden; */
}
main {
display:flex;
justify-content:center;
align-items:center;
height:100%;
ß
}
#main-box {
border-radius:10px;
display:flex;
flex-direction:column;
}
.boxed {
box-shadow:0px 8px 15px #e8e1ed;
background:white;
padding:2em 1.5em;
}
#main-box h1 {
font-size:8rem;
text-align:center;
color:#8e4ab5;
text-shadow:4px 5px 1px #703691, 5px 6px 1px #fc00f8;
}
#main-box h2 {
text-align:center;
/* margin-bottom:.5em; */
}
#main-box h3 {
font-weight:bold;
text-align:center;
margin-bottom:.5em;
}
#main-box p {
font-size:1.2rem;
margin-bottom:.5em;
}
#getcv {
align-self:center;
text-align:center;
text-decoration:none;
background: #ca91eb;
color:black;
padding: 1em 3.5em;
box-sizing:border-box;
margin-top:1em;
color:white;
border-radius:.5em;
text-shadow:0px 1px 0px #82358f;
box-shadow:0px 5px 11px 0px #ca91eb;
transition: all .3s ease-in-out;
/* transform: scaley(0px); */
/* transform: translateY(0); */
}
#getcv:hover {
box-shadow:0px 5px 15px 1px #ca91eb;
transform: translateY(-.2em);
}
#detail-box {
padding:0 1em;
}
#detail-box,h1,h2,h3,h4 {
color:#2e2e2e;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment