"CV resum ready to print pdf #beta "
Bootstrap 4.0.0 Snippet by shu3aybbadran

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- AlphaD - CV maker * Version: 1.0 * Build Date : 27 3 2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.alphadsy.github.io --> <!DOCTYPE html> <html lang="en"> <head> <!-- meta tags --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- website meta --> <!-- set website Info --> <meta name="description" content="alphad web development"> <meta name="keywords" content="alphad, web development, syria"> <meta name="author" content="ALPHA D"> <!-- set Website Title --> <title>AlphaD</title> <!-- Favicon set link to website favicon in href="" ex:href="img/icon.png" --> <link href="#" rel="icon" type="image/png"> <!-- css --> <!-- Bootstrap 4 --> <link href="vendor/css/bootstrap.css" rel="stylesheet" media="all"> <!-- font-awesome icons --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <!-- cv css --> <link href="css/cv.css" rel="stylesheet" media="all"> <!-- template css --> <link href="css/template.css" rel="stylesheet" media="all"> </head> <body> <div class="cv a4 print"> <!-- title: personal information --> <section class="title"> <h1 class="name">Jone Doe<span class="dot">.</span></h1> <p class="slogan">Web developer and Dreamer </p> </section> <!-- description: basic description --> <section class="discription"> <p>Hey! i'm<b>jone Doe</b> from <b>syria</b> <b>25</b>years old, study <b>it</b> and work for several big prjects</b></p> </section> <!-- education --> <section class="education"> <h4>Education</h4> <!-- edu#1 --> <div class="entry"> <h6><i class="fa fa-book"></i> study <b>it</b></h6> <p>in<b>University</b> from <b>2017</b>. </p> </div> <!-- edu#2 --> <div class="entry"> <h6><i class="fa fa-book"></i> study <b>it</b></h6> <p>in<b>University</b> from <b>2017</b>. </p> </div> </section> <!-- Volunteer --> <section class="Volunteer"> <h4>vlounteer work</h4> <div class="row"> <div class="left col-6"> <!-- vol#1 --> <div class="entry"> <h6><i class="fa fa-youtube"></i>volunteer work </h6> <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> <p>alphadsy.com</p> </div> </div> <div class="right col-6"> <!-- vol#2 --> <h6><i class="fa fa-youtube"></i>volunteer work </h6> <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> <p>alphadsy.com</p> </div> </div> </div> </section> <!-- contact --> <section class="contact"> <h4>contact us</h4> <div class="row"> <div class="left col-6"> <ul class="list-unstyled"> <li class=""><i class="fa fa-map-marker"></i>syria - tartus</li> <li class=""><i class="fa fa-mobile"></i>0900000000</li> </ul> </div> <div class="right col-6"> <ul class="list-unstyled"> <li class=""><i class="fa fa-facebook"></i>jone doe</li> <li class=""><i class="fa fa-linkedin"></i>jone doe</li> <li class=""><i class="fa fa-envelope"></i>jone doe@yahoo</li> </ul> </div> </div> </section> </div><!-- /.a4 --> </body> </html>
/** AlphaD - CV maker * Version: 1.0 * Build Date : 27 3 2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.alphadsy.github.io [Layout] +cv +section [Color codes] [Typography] [content table] */ /** AlphaD - CV maker * Version: 1.0 * Build Date : 27 3 2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.alphadsy.github.io [Layout] +cv +size +section [Color codes] [Typography] [content table] */ body { background-color: #eee; } .cv { color: #fff; } .a4 { position: relative; max-width: 100%; max-height: 100%; background-color: #fff; border-radius: 15px; } section { padding: 2rem; text-align: center; } section h4 { padding-bottom: 1.5rem; font-weight: 600; } section .entry { padding-bottom: 2rem; } section .entry h6{ font-weight: 700; } /* ========================= print only style ======================== */ @media print { body { background-color: #fff; } .cv { margin: 0; box-shadow: none; } .a4 { position: relative; max-width: 100%; max-height: 100%; background-color: #fff; border-radius: 0; } .a4::after { visibility: hidden; } } ====== .cv { color: #fff; } .title { text-align: center; padding-bottom: 1.5rem; background: linear-gradient(to right, #443a8b, #443a8b); } .name { font-size: 2.5rem; } .dot { color:#F11712; } .slogan { margin-top: .5rem; letter-spacing: 3px; } .discription { background: linear-gradient(to right, #443a8b, #443a8b); } .education { color: #000; } .education h4{ color: #443a8b; } .Volunteer { background: linear-gradient(to right, #383075, #443a8b); } .contact { color: #000; } .contact h4{ color: #443a8b; } .left { } .right { } i { color:#F11712; padding-left: 5px; opacity: .8; }

Related: See More

Light Bootstrap Dashboard React
Modal for beta invite

Questions / Comments: