Cv
How do I make an cv?
What is a cv? How do you make a cv? This script and codes were developed by Omar Hassane on 21 January 2023, Saturday.
Cv Previews
Cv - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cv</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main data-equalizer> <section id="left-side" class="large-4 medium-5 small-12 left" data-equalizer-watch> <section class="hexagon-container"> <figure class="hexagon hexagon-image"> <div class="inner"> </div> </figure> <figure class="hexagon hexagon-background"> <div class="inner"> </div> </figure> <figure class="hexagon hexagon-background-dark"> <div class="inner"> </div> </figure> </section> <h2 class="name">HASSANE <strong>Omar</strong></h2> <h3 class="job-titles"> Elève ingénieur </h3> <h3 class="job-titles"><strong>Institut National des Postes et Télécommunications</strong></h3> <section class="icon-title"> <div class="hexagon-icon"> <i class="fa fa-file-text"></i> </div> <h3>Génie Informatique</h3> </section> <section class="info-content"> <p> Option : Ingénierie des Systèmes <strong>Web</strong>, <strong>Mobiles </strong>et <strong>Décisionnels</strong> . </p> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-user"></i> </div> <h3>Contacts</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-icons"> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-map-marker"></i> </div> <p>INPT ,Avenue Allal El Fassi, Rabat, Maroc </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-phone"></i> </div> <p> <a >(+212) 06-70-98-27-20 <br/> </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-envelope"></i> </div> <p> <a >[email protected]</a> </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-linkedin-square"></i> </div> <p> <a >www.linkedin.com/in/hassaneomar</a> </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-skype"></i> </div> <p> <a >omar.hassane.</a> </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-github"></i> </div> <p> <a >https://github.com/omodev</a> </p> </li> <li> <div class="hexagon-icon-fill-small"> <i class="fa fa-codepen"></i> </div> <p> <a >https://codepen.io/omodev/</a> </p> </li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-code"></i> </div> <h3>Connaissances côté client </h3><a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-skills"> <li>HTML5</li> <li>CSS3 /SASS</li> <li>JavaScript / jQuery</li> <li>Bootstrap</li> <li>Angular.js</li> <li>D3.js</li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-code-fork"></i> </div> <h3>Connaissances côté serveur</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-skills"> <li>PHP</li> <li>MySQL</li> <li>Symfony 3</li> <li>Java EE</li> <li>Spring MVC /Hibernate /JPA </li> <li>Git</li> <li>Mongodb , node.js & express.js</li> <li>web services & api</li> </ul> </section> </section> <section id="right-side" class="large-8 medium-7 small-12 left" data-equalizer-watch> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-briefcase"></i> </div> <h3>Cursus académique</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience"> <li><label>2014/2016 : </label> <p> <strong>Génie Informatique option Ingénierie des Systèmes Web, Mobiles et Décisionnels </strong> à l'institut national des postes et télécommunications (INPT) . </p> </li> <li><label>2012/2014 : </label> <p> <strong>Classes Préparatoires aux grandes écoles d'ingénieurs </strong> au lycée IBN TAHIR-ERRACHIDIA . <strong>Option :MPSI/MP . </strong> <li><label>2011/2012 : </label> <p> <strong>Baccalauréat science Math (A) </strong> au lycée IBN TAHIR-ERRACHIDIA . <strong>Mention:Bien . </strong> </p> </li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-graduation-cap"></i> </div> <h3>Connaissances académiques et théoriques</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience works"> <li><label>Conception et analyse des algorithmes . </label></li> <li><label>Administration système avec Linux .</label></li> <li><label>Cryptographie .</label></li> <li><label>TCP/IP & IPV6 .</label></li> <li><label>Langage assembleur et ingénierie des systèmes d'exploitation .</label></li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-laptop"></i> </div> <h3>Projets</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience"> <li> <label>Création d'un site E-commerce B2B avec JAVA EE : </label> <p> <strong>https://github.com/omodev/E-commerce</strong> </p> </li> <li> <label>Création d'un site pour la gestion des agences immobilières avec JAVA EE et SPRING MVC : </label> <p> <strong>https://github.com/omodev/agences-immo</strong> </p> </li> <li> <label>Création d'un editeur de text avec C : </label> <p> <strong>https://github.com/omodev/text-editor</strong> </p> </li> <li> <label>Animation d'une introduction d'un site ou d'un portfolio avec Javascript : </label> <p> <strong>https://github.com/omodev/portfolio-animation</strong> </p> </li> <li> <label>Visualisation de données (intéractivité avec les données) d'une Bar chart avec D3.js : </label> <p> <strong>https://github.com/omodev/data-visualation-with-D3.js-library</strong> </p> </li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-language"></i> </div> <h3>Langues</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience works"> <li><label><strong>Français :</strong> lu,écrit et parlé .</label></li> <li><label><strong>Arabe </strong>:langue maternelle .</label></li> <li><label><strong>Anglais :</strong> lu ,écrit et parlé .</label></li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-male"></i> </div> <h3>Informations complémentaires :</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience works"> <li><label>Membre du club Informatique et télécom . </label></li> <li><label>Organisateur de la journée nationale des jeunes développeurs . </label></li> </ul> </section> <section class="icon-title toggle-title"> <div class="hexagon-icon"> <i class="fa fa-gamepad"></i> </div> <h3>Loisirs</h3> <a href="javascript:void(0)" class="do-toggle"><i class="fa fa-chevron-down"></i></a> </section> <section class="info-content"> <ul class="list-experience works"> <li><label>Guitare .</label></li> <li><label>jeux video .</label></li> <li><label>Football .</label></li> </ul> </section>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.equalizer.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cv - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
html, body { font-size: 10px;
}
body { font-family: 'Open Sans', sans-serif;
}
body h1, body h2, body h3, body h4, body h5, body h6 { font-family: 'Open Sans', sans-serif;
}
body main > section { padding: 52px 22px;
}
body main .icon-title { font-size: 0;
}
body main .icon-title fa, body main .icon-title h3, body main .icon-title div { display: inline-block; vertical-align: middle;
}
body main .icon-title h3 { text-transform: uppercase; margin-left: 12px; font-weight: bold;
}
body main .info-content { padding: 0 32px; margin-top: 40px; margin-bottom: 40px;
}
body main .info-content p { font-size: 14px; text-align: justify; color: inherit;
}
body main .info-content ul.list-icons { list-style: none; margin: 0;
}
body main .info-content ul.list-icons li { margin: 30px 0;
}
body main .info-content ul.list-icons li:first-child { padding-top: 10px;
}
body main .info-content ul.list-icons li:last-child { padding-bottom: 10px;
}
body main .info-content ul li div, body main .info-content ul li p { display: inline-block; vertical-align: middle;
}
body main .info-content ul li p { margin: 0; margin-left: 12px;
}
body main #left-side { background: #3f5771;
}
body main #left-side .name, body main #left-side .job-titles { color: white; text-align: center;
}
body main #left-side .name { text-transform: uppercase;
}
body main #left-side .job-titles { margin-bottom: 60px;
}
body main #left-side .hexagon-container { position: relative; height: 140px; margin-bottom: 24px;
}
body main #left-side .hexagon-container .hexagon { position: absolute; overflow: hidden; width: 140px; height: 140px; right: 0; left: 0; margin-left: auto; margin-right: auto; margin: 0 auto; -moz-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); -ms-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); -webkit-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); transform: rotate(-30deg) skewX(30deg) scaleY(0.866); backface-visibility: hidden;
}
body main #left-side .hexagon-container .hexagon .inner { position: absolute; right: 6.7%; bottom: 0; left: 6.7%; top: 0; -moz-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); -ms-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); -webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
}
body main #left-side .hexagon-container .hexagon.hexagon-image { z-index: 3; -moz-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-4px, 4px); -ms-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-4px, 4px); -webkit-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-4px, 4px); transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-4px, 4px);
}
body main #left-side .hexagon-container .hexagon.hexagon-image .inner { background: url(https://scontent.fmad3-1.fna.fbcdn.net/t31.0-8/13576920_10208793819236990_4192596359211801259_o.jpg); background-size: 170%; background-position: right; background-repeat: no-repeat;
}
body main #left-side .hexagon-container .hexagon.hexagon-background { width: 144px; height: 144px; z-index: 2; -moz-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-2px, 2px); -ms-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-2px, 2px); -webkit-transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-2px, 2px); transform: rotate(-30deg) skewX(30deg) scaleY(0.866) translate(-2px, 2px);
}
body main #left-side .hexagon-container .hexagon.hexagon-background .inner { background-color: #FFFFFF;
}
body main #left-side .hexagon-container .hexagon.hexagon-background-dark { width: 148px; height: 148px;
}
body main #left-side .hexagon-container .hexagon.hexagon-background-dark .inner { background-color: #2d3e50;
}
body main #left-side .icon-title fa, body main #left-side .icon-title h3, body main #left-side .icon-title div { color: white;
}
body main #left-side .info-content { color: #fff;
}
body main #left-side .info-content ul.list-skills li { margin: 16px 0; font-size: 14px; text-transform: uppercase;
}
body main #left-side .info-content ul li a { color: white;
}
body main #left-side .hexagon-icon,
body main #left-side .hexagon-icon:before,
body main #left-side .hexagon-icon:after { border-style: solid; border-color: #fff; border-width: 2px; width: 56px; height: 32px; border-top: none; border-bottom: none;
}
body main #left-side .hexagon-icon { text-align: center; line-height: 32px; position: relative; z-index: 0;
}
body main #left-side .hexagon-icon:before, body main #left-side .hexagon-icon:after { content: ""; position: absolute; top: 0; left: -2px; z-index: -1;
}
body main #left-side .hexagon-icon:before { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
body main #left-side .hexagon-icon:after { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
body main #left-side .hexagon-icon .fa { color: #fff; font-size: 28px; line-height: 32px;
}
body main #left-side .hexagon-icon-fill-small,
body main #left-side .hexagon-icon-fill-small:before,
body main #left-side .hexagon-icon-fill-small:after { border-style: solid; border-color: #fff; border-width: 1px; width: 38px; height: 22px; background: #fff; border-top: none; border-bottom: none;
}
body main #left-side .hexagon-icon-fill-small { text-align: center; line-height: 22px; position: relative; z-index: 0;
}
body main #left-side .hexagon-icon-fill-small:before, body main #left-side .hexagon-icon-fill-small:after { content: ""; position: absolute; top: 0; left: -1px; z-index: -1;
}
body main #left-side .hexagon-icon-fill-small:before { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
body main #left-side .hexagon-icon-fill-small:after { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
body main #left-side .hexagon-icon-fill-small .fa { color: #2d3e50; font-size: 22px; line-height: 22px;
}
body main #right-side { padding-top: 70px; padding-bottom: 0;
}
body main #right-side .icon-title fa, body main #right-side .icon-title h3, body main #right-side .icon-title div { color: #2d3e50;
}
body main #right-side .info-content { color: #2d3e50;
}
body main #right-side .info-content ul.list-experience { list-style: none;
}
body main #right-side .info-content ul.list-experience li { margin: 20px 0;
}
body main #right-side .info-content ul.list-experience label { font-size: 16px; color: #2d3e50; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;
}
body main #right-side .info-content ul.list-experience label:before { content: ''; width: 10px; height: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #2d3e50; display: block; display: inline-block; margin-left: -18px; margin-right: 8px;
}
body main #right-side .info-content ul.list-experience span { font-weight: 300; color: #a7a7a7; font-size: 12px;
}
body main #right-side .info-content ul.list-experience p { display: block; margin-left: 0; color: black; text-transform: none;
}
body main #right-side .info-content ul.list-experience.works label { color: black; text-transform: none; font-weight: normal; letter-spacing: 0;
}
body main #right-side .info-content ul.list-experience.works label a { font-size: 12px; color: #527191;
}
body main #right-side .info-content ul.references { list-style: none; margin: 0;
}
body main #right-side .info-content ul.references li { overflow: hidden;
}
body main #right-side .info-content ul.references li:after { content: '\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 '; font-size: 25px; overflow: hidden; white-space: nowrap; font-family: Arial; letter-spacing: -1px;
}
body main #right-side .info-content ul.references li:last-child:after { content: '';
}
body main #right-side .info-content ul.references li:last-child .reference-info { margin-bottom: 25px;
}
body main #right-side .info-content ul.references li:first-child h3 { margin-top: 0;
}
body main #right-side .info-content ul.references h3 { margin-top: 35px; text-align: center;
}
body main #right-side .info-content ul.references .reference-info { text-align: center; margin-top: 35px; margin-bottom: 45px;
}
body main #right-side .info-content ul.references .reference-info p { display: block; text-align: center; margin-top: 10px; margin-left: 0;
}
body main #right-side .info-content ul.references .reference-info p a { color: #527191;
}
body main #right-side .hexagon-icon,
body main #right-side .hexagon-icon:before,
body main #right-side .hexagon-icon:after { border-style: solid; border-color: #2d3e50; border-width: 2px; width: 56px; height: 32px; border-top: none; border-bottom: none;
}
body main #right-side .hexagon-icon { text-align: center; line-height: 32px; position: relative; z-index: 0;
}
body main #right-side .hexagon-icon:before, body main #right-side .hexagon-icon:after { content: ""; position: absolute; top: 0; left: -2px; z-index: -1;
}
body main #right-side .hexagon-icon:before { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
body main #right-side .hexagon-icon:after { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
body main #right-side .hexagon-icon .fa { color: #2d3e50; font-size: 28px; line-height: 32px;
}
body main #right-side .hexagon-icon-fill-small,
body main #right-side .hexagon-icon-fill-small:before,
body main #right-side .hexagon-icon-fill-small:after { border-style: solid; border-color: #2d3e50; border-width: 1px; width: 38px; height: 22px; background: #2d3e50; border-top: none; border-bottom: none;
}
body main #right-side .hexagon-icon-fill-small { text-align: center; line-height: 22px; position: relative; z-index: 0;
}
body main #right-side .hexagon-icon-fill-small:before, body main #right-side .hexagon-icon-fill-small:after { content: ""; position: absolute; top: 0; left: -1px; z-index: -1;
}
body main #right-side .hexagon-icon-fill-small:before { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
body main #right-side .hexagon-icon-fill-small:after { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
body main #right-side .hexagon-icon-fill-small .fa { color: #ffffff; font-size: 22px; line-height: 22px;
}
/*Movil*/
@media only screen and (max-width: 40em) { body main .do-toggle { right: 0; margin-top: -20px; font-size: 20px; position: absolute; top: 50%; } body main .toggle-title + .info-content { display: none; } body main .toggle-title { position: relative; margin-bottom: 40px; } body main .toggle-title h3 { max-width: 75%; } body main #left-side { padding-bottom: 0; } body main #left-side .do-toggle { color: white; } body main #left-side .toggle-title:last-of-type { margin-bottom: 0; } body main #right-side { padding-top: 35px; } body main #right-side .do-toggle { color: #2d3e50; }
}
/*iPad*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { body main .info-content { padding: 0 8px; } body main > section { padding: 52px 18px; }
}
Cv - Script Codes JS Codes
$(document).foundation();
function background() { var leftSide = document.getElementById('left-side'); var pattern = Trianglify({ height: leftSide.clientHeight, width: leftSide.clientWidth, cell_size: 250, x_colors: ['#3B5168', '#364b60', '#3F5870', '#445E79', '#496481', '#4D6B89', '#527191'] }); leftSide.setAttribute('style', 'background-image: url\(' + pattern.png() + '\)');
}
background();
$('.do-toggle').click(function() { $(this).closest('.toggle-title').next().slideToggle(); if ($(this).find('i').hasClass('fa-chevron-up')) { $(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down'); } else { $(this).find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up'); if ($(this).closest('#left-side').length > 0) { setTimeout(background, 500); } }
});
var resizeTimer;
$(window).on('resize', function(e) { clearTimeout(resizeTimer); resizeTimer = setTimeout(background, 250);
});
| Developer | Omar Hassane |
| Username | omodev |
| Uploaded | January 21, 2023 |
| Rating | 3 |
| Size | 8,159 Kb |
| Views | 4,048 |
Do you need developer help for Cv?
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!
Omar Hassane (omodev) Script Codes
| Name | Size |
| Pop-up vacances bleus | 3,674 Kb |
| Smooth scrolling | 2,086 Kb |
| Svg exercises | 10,044 Kb |
| D3 liquid visualisation | 5,171 Kb |
| A Pen by Omar Hassane | 1,611 Kb |
| Svg exercises 2 | 5,937 Kb |
| Quote-generator | 2,284 Kb |
| Homepage | 6,048 Kb |
| Portfolio-animation | 3,375 Kb |
| TODO | 4,271 Kb |
Create amazing SEO 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!
Similar Scripts & Codes
| Name | Username | Size |
| Animated skewed panes | NyX | 4,462 Kb |
| Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
| Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
| CSS eye follow | Pedrocampos | 2,592 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| Single element checkbox | Ivijaygupta | 1,996 Kb |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
| CSS Tooltips | Darylldoyle | 2,599 Kb |
| Welcome | Nakome | 6,076 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!