كيفاش تصاوب CV ديالك ب bootstrap 4
imadbelasri
Bootstrap
BS
فهاد الدرس الجديد من سلسلة Html & Css غادي نشوفو كيفاش نقادو cv ديالنا باستعمال bootstrap 4 فعوض مايكون عندك cv بالطريقة العادية لي كنعرفوا ممكن أنك تصاوب واحد ديالك en ligne ب bootstrap.
نظرة سريعة بالفيديو
1- الملف index.html
أول حاجة زيد dossier جديد سميه لي بغيتي فيه زيد dossier css و dossier js منبعد زيد ملف جديد سميه index.html ومتنساش télécharger bootstrap وتزيد ملفات css ف dossier css وملفات javascript ف dossier js منبعد ف index كنزيد روابط لملفات css و js منبعد كنزيد الصورة وروابط مواقع التواصل الإجتماعي منبعد عندي menu لي ملي كنكليكي شي item منها كتديني لواحد div لي عندها نفس ل id ول classe collapse لي هي ديال bootstrap فعندي ل accueil كتديني ل home و cursus كتديني ل education ونفس الشي بالنسبة للأخرين منبعد كنخدم ب des classes اخرين باش كنزيد ل contenu ديالي الكود ديال الملف هو :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome-all.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<title>Bootstrap 4 CV</title>
</head>
<body>
<div class="container">
<header class="main-head">
<div class="row no-gutters">
<div class="col-lg-4 col-md-5 col-sm-12">
<img src="img/person1.jpg" alt="">
</div>
<div class="col-lg-8 col-md-7 col-sm-12">
<div class="d-flex flex-column">
<div class="p-5 bg-inverse text-white">
<div class="row">
<div class="col-md-6">
<h1 class="display-4">Salmi Samir</h1>
</div>
<div class="col-md-6 mt-4">
<div class="social float-left mx-1 mb-1"><i class="fab fa-facebook text-primary"></i></div>
<div class="social float-left mx-1 mb-1"><i class="fab fa-twitter text-primary"></i></div>
<div class="social float-left mx-1 mb-1"><i class="fab fa-youtube text-primary"></i></div>
<div class="social float-left mx-1 mb-1"><i class="fab fa-instagram text-primary"></i></div>
</div>
</div>
</div>
<div class="bg-dark p-4 text-white text-uppercase">
Developpeur Web Experimenté
</div>
<div class="d-flex flex-row text-white align-items-stretch text-center">
<div class="flex-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
<i class="fa fa-home d-block"></i>Accueil
</div>
<div class="flex-item p-4 bg-success" data-toggle="collapse" data-target="#education">
<i class="fa fa-graduation-cap d-block"></i>Cursus
</div>
<div class="flex-item p-4 bg-warning" data-toggle="collapse" data-target="#work-section">
<i class="fa fa-folder-open d-block"></i>Réalisation
</div>
<div class="flex-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
<i class="fa fa-envelope d-block"></i>Contact
</div>
</div>
</div>
</div>
</div>
</header>
<div id="home" class="collapse show">
<div class="card card-block bg-primary text-white p-4">
<h2>Bienvenue sur ma page</h2>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste pariatur illo quidem dolorem. Omnis ducimus nisi at saepe quia molestiae ipsa, aliquid voluptatibus debitis eum? Eos cumque soluta eius quod.</p>
</div>
<div class="card card-block p-4">
<h3>Compétences</h3>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, maxime voluptas dolore molestias doloribus debitis eligendi nam! Eligendi libero ullam commodi. Iure illo eveniet, quos ut suscipit omnis ex architecto!</p>
<hr>
<h4>HTML</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width:100%"></div>
</div>
<h4>CSS</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width:100%"></div>
</div>
<h4>JAVASCRIPT</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width:80%"></div>
</div>
<h4>PHP</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width:70%"></div>
</div>
<h4>JAVA</h4>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width:60%"></div>
</div>
</div>
</div>
<div id="education" class="collapse">
<div class="card card-block bg-success text-white p-4">
<h2>Diplômes</h2>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste pariatur illo quidem dolorem. Omnis ducimus nisi at saepe quia molestiae ipsa, aliquid voluptatibus debitis eum? Eos cumque soluta eius quod.</p>
</div>
<div class="row">
<div class="col-md-6">
<div class="card p-4">
<div class="card-block mb-2">
<h4 class="card-title">Téchnicien Spécialisé En Développement Informatique</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint laborum inventore voluptas nulla eligendi explicabo adipisci repellendus. Laborum sunt, neque, itaque, quisquam rem eaque odit sapiente at alias perspiciatis cupiditate!</p>
</div>
<div class="card-footer bg-inverse mt-1 p-2">
<div class="text-muted">
<h6>2010 - 2012</h6>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card p-4">
<div class="card-block mb-2">
<h4 class="card-title text-capitalize">License Professionelle En Dévelopement informatique</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint laborum inventore voluptas nulla eligendi explicabo adipisci repellendus. Laborum sunt, neque, itaque, quisquam rem eaque odit sapiente at alias perspiciatis cupiditate!</p>
</div>
<div class="card-footer bg-inverse mt-1 p-2">
<div class="text-muted">
<h6>2012 - 2013</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="work-section" class="collapse">
<div class="card card-block bg-warning text-white p-4">
<h2>Réalisations</h2>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste pariatur illo quidem dolorem. Omnis ducimus nisi at saepe quia molestiae ipsa, aliquid voluptatibus debitis eum? Eos cumque soluta eius quod.</p>
</div>
<div class="row content no-gutters">
<div class="col-md-3">
<div class="img-box">
<a href="img/1.jpg">
<img src="img/1.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-box">
<a href="img/2.jpg">
<img src="img/2.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-box">
<a href="img/3.jpg">
<img src="img/3.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-box">
<a href="img/4.jpg">
<img src="img/4.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<div id="contact" class="collapse">
<div class="card card-block bg-danger text-white p-4">
<h2>Me Contacter</h2>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste pariatur illo quidem dolorem. Omnis ducimus nisi at saepe quia molestiae ipsa, aliquid voluptatibus debitis eum? Eos cumque soluta eius quod.</p>
</div>
<div class="card card-block p-4">
<form action="#">
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon p-4 bg-danger text-white">
<i class="fa fa-user"></i>
</span>
<input type="text" class="form-control lg-inverse bg-inverse text-white" placeholder="Nom & Prénom">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon p-4 bg-danger text-white">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control lg-inverse bg-inverse text-white" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon p-4 bg-danger text-white">
<i class="fa fa-pencil-alt"></i>
</span>
<textarea name="message" id="" cols="30" rows="10" class="form-control lg-inverse bg-inverse text-white" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-danger btn-block btn-lg">Envoyer</button>
</div>
</form>
</div>
</div>
<footer id="footer" class="text-white p-4 mb-4 bg-inverse">
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-outline-secondary text-white"><i class="fa fa-cloud"></i> Télécharger le cv</a>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script>
$('.flex-item').click(function(){
$('.collapse').collapse('hide');
});
</script>
</body>
</html>
2- الملف main.js
منبعد ف dossier js زيد ملف جديد سميه main.js فيه غادي يكون لكود لي كيمكن باش ملي كنكليكي على شي صورة كتفتح ودرناه بواحد ل library javascript سميتها magnific popup ولي زدت les liens ل fichier css و js ف index.html دبا تلقاها ف source code الكود ديال الملف هو :
$(function () {
$('#work-section').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
});
3- الملف style.css
منبعد ف dossier css زيد ملف جديد سميه style.css فيه غادي يكون لكود css لي غادي نحتاجو الكود ديال الملف هو :
.main-head img{
width: 100%;
height: 100%;
}
.bg-inverse{
background-color: #343434;
}
.flex-item{
width: 30%;
}
.flex-item:hover{
opacity: 0.8;
cursor: pointer;
}
.i{
font-size: 2em;
}
@media(min-width:1199px){
.flex-item{
padding: 3em !important;
}
}
@media(max-width:991px){
.flex-item{
width: 25%;
}
.i{
font-size: 25px;
}
}
.card{
border-radius: 0;
}
.img-box{
overflow: hidden;
}
#work-section a img{
width: 100%;
height: 300px;
transition: transform .5s ease;
}
#work-section a img:hover{
transform: scale(1.5);
cursor: zoom-in;
}
input:focus,
textarea:focus{
outline: none !important;
box-shadow: 0 !important;
text-shadow: 0 !important;
}
.social{
display: table;
}
.social i{
width: 30px;
height: 30px;
background-color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
border-radius: 5px;
}