كيفاش تصاوب 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;
}