"CV"
Bootstrap 4.1.1 Snippet by ALUSMANA727

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CV</title> <link rel="stylesheet" href="CSS/styles.css"> </head> <body> <!-- CV --> <section class="CV pt-0"> <div class="container"> <h1 class="CV text-xlarge "><center><h1 class="text-warnig bg-success">CV</h1></center></h1> <div class="row"> <div class="col-3 text-center bg-success text-white"> <div class="py-20"> <h2 class="">info:</h2> <img src="imgs/Usman Ghani.jpg" alt="Usman Ghani"> <p class="text-left"><b>Name:</b></p> <p class="text-xlarge pb-10">Usman Ghani</p> <p class="text-left"><b>Email:</b> <a href="mailto:"> Usmanghusman1@gmail.com</a></p> <p class="text-left"><b>Phone:</b> <a href="tel:">03268730727</a></p> <p class="text-left"><b>Address:</b> Muhammadi Street, Mian Ka More, Phool Nagar, District Kasur</p> <p class="text-left"><b>CNIC:</b> 42501-8728704-5</p> </div> </div> <div class="col-9 text-whit"> <!-- Objective --> <h3 class="text-medium text-primery">Objective:</h3> <p class="text-success">I am a web developer. I am lucky to be promoted in your company and from junior web developer in your company I will try my best to get promoted to senior web developer as soon as possible. And I will try my best to make your company grow a lot. Thank you, goodbye</p> <!-- ../Objective --> <!-- Qualification --> <h4 class="text-medium text-primery">Qualification:</h4> <table> <thead> <tr class="text-center text-primery"> <th>#</th> <th>Year of Passing</th> <th>Degree Name</th> <th>Institute</th> <th>Grades</th> </tr> </thead> <tbody> <tr class="text-center text-success"> <td>1</td> <td>2022</td> <td>FSC Pre Medical</td> <td>PGC</td> <td>D</td> </tr> <tr class="text-center text-success"> <td>2</td> <td>2020</td> <td>Matric Biology</td> <td>New Model School</td> <td>D+</td> </tr> </tbody> </table> <!-- ../Qualification --> <!-- Experience --> <h5 class="text-medium text-primery">Experience:</h5> <table> <thead> <tr class="text-center text-primery"> <th>#</th> <th>Year of Passing</th> <th>Degree Name</th> <th>Institute</th> <th>Experience</th> </tr> </thead> <tbody> <tr class="text-center text-success"> <td>1</td> <td>2022</td> <td>Web Development</td> <td>Slills Development Center</td> <td>3 Month</td> </tr> </tbody> </table> <!-- ../Experience --> <!-- skills --> <h6 class="text-medium text-primery">Skills:</h6> <ol class="text-success"> <li>HTML</li> <li>CSS</li> <li>WordPress</li> </ol> <!-- ../skills --> <!-- Hobies --> <h1 class="text-medium text-primery">Hobies:</h1> <ul class="text-success"> <li>Acquiring Digital Skills</li> <li>Mastring Kung Fu</li> <li>Bedminton</li> <li>Read Story</li> </ul> <!-- ../Hobies --> <h2 class="text-medium text-primery">Referance:</h2> <p class="text-success"><i>Referance Will be Provide on Demand</i></p> </div> </div> </div> </section> <!-- CV --> </body> </html>
/*************************************/ /************* text-alignment ************/ /*************************************/ .text-center{ text-align: center; } .text-left{ text-align: left; } .text-right{ text-align: right; } /*************************************/ /*************Typography ************/ /*************************************/ .text-small{ font-size: 14px; } .text-medium{ font-size: 20px; } .text-large{ font-size: 24px; } .text-xlarge{ font-size: 28px; } .text-xxlarge{ font-size: 32px; } .text-xxxlarge{ font-size: 50px; } /*************************************/ /************* background-colors ************/ /*************************************/ .bg-white{ background-color: white; } .bg-primery{ background-color: blue; } .bg-danger{ background-color: red; } .bg-muted{ background-color: grey; } .bg-success{ background-color: green; } .bg-warnig{ background-color: yellow; } .bg-yellowgreen{ background-color: yellowgreen; } /*************************************/ /************* Colors ************/ /*************************************/ .text-white{ color: white; } .text-primery{ color: blue; } .text-success{ color: green; } .text-muted{ color: grey; } .text-danger{ color: red; } .text-warnig{ color: yellow; } /*************************************/ /************* padding ************/ /*************************************/ .pt-0{ padding: 0px; } .pt-10{ padding: 10px; } .pt-20{ padding: 20px; } .pl-20{ padding: 20px; } .pb-10{ padding: 10px; } .pb-20{ padding: 20px; } .pr-20{ padding: 20px; } .p-20{ padding: 20px; } .px-20{ padding: 0 20px; } .py-20{ padding: 20px 0; } /*************************************/ /************* margin ************/ /*************************************/ .mt-0{ margin: 0px; } .mt-20{ margin: 20px; } .ml-20{ margin: 20px; } .mb-20{ margin: 20px; } .m-20{ margin: 20px; } .ml-auto{ margin-left: auto; } .mx-auto{ margin: 0 auto; } .mx-20{ margin: 0 20px; } .my-20{ margin: 20px 0; } /*************************************/ /************* Display ************/ /*************************************/ .d-block{ display: block !important; } .d-inline{ display: inline; } .d-flex, .row{ display: flex; } /*************************************/ /************* columns ************/ /*************************************/ .col-12{ width: 100% !important; } .col-9{ width: 75% !important; } .col-6{ width: 60% !important; } .col-4{ width: 33.33% !important; } .col-3{ width: 25% !important; } .col{ width: auto; } [class*="col-"] { padding-right: 12px; padding-left: 12px; } .w-25{ max-width: 25%; } .w-50{ max-width: 50%; } .w-75{ max-width: 75%; } /* Comman Classes */ img{ max-width: 100%; } section{ padding: 50px 0; height: 700px; } /* header */ header{ height: 100px; background-color: aqua; color: white; } /* footer */ footer{ height: 100px; background-color: aqua; color: white; } /* section.CV { height: 700px; } */ .col-9{ background: yellowgreen; } .col-3 img{ border-bottom-right-radius: 70px; border-top-left-radius: 70px; }

Related: See More

Material Kit PRO React

Questions / Comments: