IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Portfolio avec bootstrap et isotope


Sujet :

Framework CSS Bootstrap

  1. #1
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Bonjour,
    Je me permets de venir vous demander de l’aide. Je rencontre un problème sur mon site internet ou j’ai intégrer un portfolio filtrable.
    Le site et fait avec le framework bootstrap a priori tout fonctionne sur les liens boutons.
    Mais je constate que lorsque je vide le cache sur les différents navigateurs j’ai parfois les 2 derniers rows du portfolio qui se chevauchent.
    Je ne comprends pas pourquoi. J’ai refais le site 2 fois mais le problème persiste.
    Pour info le problème apparait que lorsque je mets le site en ligne. Durant la phase de production le problème n’apparait jamais.
    Je pense que le problème est du au plugin isotope !
    Je vous joins le lien de mon portfolio www.keiratouir.com
    Qui peut m’aider
    En vous remerciant d’avance pour votre aide.

  2. #2
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Points : 1 509
    Points
    1 509
    Par défaut
    Hello,

    Je n'ai pas réussis à reproduire la chose, en vidant le cache, sous Firefox et Chrome. Aurais-tu éventuellement un screen à fournir dans ce cas-là? J'ai du mal à visualiser la chose.

    Juste, ton "#page-top" qui est censé ramener l'utilisateur en haut (je suppose) lors du clic sur ton logo, ne fonctionne pô :/
    Un fait toujours plaisir et encourage à l'entraide. Un n'est pas à négliger, pensez aux autres !

    Que la force soit avec Developpez.net
    Je ne suis pas un crack en informatique, loin de là, mais il n'y a pas que les mécaniciens qui sachent conduire une voiture

  3. #3
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut
    Bonjour
    Tout d’abord je tiens à te remercier pour ton retour et ton aide.

    J’ai corrigé le problème avec le lien qui ne fonctionner pas pour le logo tk (#page top).

    Je te joins 2 screenshots (un screenshot sur chrome et un autre sur firefox du problème que je rencontre c'est vraiment aléatoire.

    Je souhaite mettre mon lien de portfolio dans mon CV dans le cadre de mes recherches d’emploi et je ne peux pas me permettre d’avoir un bug.
    En te remerciant pour ton aide.

    Bien cordialement.
    Keira.

  4. #4
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Points : 1 509
    Points
    1 509
    Par défaut
    Re,

    Merci bien pour les screens. Aurais-tu les codes sources associées à cette partie de ton portefolio?
    Un fait toujours plaisir et encourage à l'entraide. Un n'est pas à négliger, pensez aux autres !

    Que la force soit avec Developpez.net
    Je ne suis pas un crack en informatique, loin de là, mais il n'y a pas que les mécaniciens qui sachent conduire une voiture

  5. #5
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    à priori, je pense qu'il suffit de mettre les width et les hight directement sur les balises img, ou juste dans le css s'ils ont tous la même taille; d'ailleurs peut-être y a t'il même un conflit a ce niveau la
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  6. #6
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Fichier en pièces jointes index.html et css
    Citation Envoyé par JujuPomme Voir le message
    Aurais-tu les codes sources associées à cette partie de ton portefolio?
    Voilà les fichiers sources
    si tu as besoin d'autres fichiers que le index.html et le css tu n’hésite pas à me les demander
    En te remerciant
    Keira

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    commence quand même par corriger les erreurs présentent dans ton code HTML.

    Voir la validation de la page

  8. #8
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Bonsoir,
    Merci pour le lien J’ai corrigé les erreurs ! Merci pour le lien.

    Mais le problème persiste.

    Votre aide serait très précieuse.

    Je mis en pièces jointes les codes sources et le lien du site.

    En vous remerciant.

  9. #9
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Merci de copier-coller les codes dans le contenu du message (pas en pièce jointe).

  10. #10
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Désolée je suis nouvelle sur le forum je ne connais encore toutes les bonnes pratique.
    Ci-dessous les codes.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    729
    730
    731
    732
    733
    734
    735
    736
    737
    738
    739
    740
    741
    742
    743
    744
    745
    746
    747
    748
    749
    750
    751
    752
    753
    754
    755
    756
    757
    758
    759
    760
    761
    762
    763
    764
    765
    766
    767
    768
    769
    770
    771
    772
    773
    774
    775
    776
    777
    778
    779
    780
    781
    782
    783
    784
    785
    786
    787
    788
    789
    790
    791
    792
    793
    794
    795
    796
    797
    798
    799
    800
    801
    802
    803
    804
    805
    806
    807
    808
    809
    810
    811
    812
    813
    814
    815
    816
    817
    818
    819
    820
    821
    822
    823
    824
    825
    826
    827
    828
    829
    830
    831
    832
    833
    834
    835
    836
    837
    838
    839
    840
    841
    842
    843
    844
    845
    846
    847
    848
    849
    850
    851
    852
    853
    854
    855
    856
    857
    858
    859
    860
    861
    862
    863
    864
    865
    866
    867
    868
    869
    870
    871
    872
    873
    874
    875
    876
    877
    878
    879
    880
    881
    882
    883
    884
    885
    886
    887
    888
    889
    890
    891
    892
    893
    894
    895
    896
    897
    898
    899
    900
    901
    902
    903
    904
    905
    906
    <!DOCTYPE html>
    <html lang="fr">
     
      <head>
     
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Graphiste &amp; Web Designer, UX Design, Directrice Artistique, Créative">
        <meta name="author" content="Kheira Touir">
     
        <title>Kheira Touir Graphiste &amp; Web Designe</title>
     
        <!-- Bootstrap core CSS -->
        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     
        <!-- Custom fonts for this template -->
        <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
        <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
     
        <!-- Custom styles for this template -->
        <link href="css/agency.min.css" rel="stylesheet">
       <!-- <link href="css/responsive.css" rel="stylesheet">-->
     
      </head>
     
      <body id="home">
     
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
          <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#home">TK</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              Menu
              <i class="fa fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav text-uppercase ml-auto">
                <li class="nav-item">
                  <a class="nav-link js-scroll-trigger" href="#home">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scroll-trigger" href="#cv">cv</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link js-scroll-trigger" href="#contact1">Contact</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
     
        <!-- Header -->
        <header class="masthead">
          <div class="container">
            <div class="intro-text">
              <div class="intro-lead-in">Kheira Touir</div>
              <div class="intro-heading text-uppercase">Graphiste <br> Web Designer</div>
              <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#portfolio">Portfolio</a>
            </div>
          </div>
        </header>
     
     
         <!-- Portfolio Grid -->
        <section class="bg-light" id="portfolio">
          <div class="container">
            <div class="row">
              <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Portfolio</h2>
                <h3 class="section-subheading text-muted">Voici une sélection de mes projets professionnels et personnels.</h3>
                <!-- av filtre -->
              <nav class="row justify-content-md-center">
                <div class="col-md-12 portfolio-list">
                <ul class="nav list-unstyled " id="portfolio-flters">
                  <li class="filter filter-active" data-filter=".all">all</li>
                  <li class="filter" data-filter=".webapp">Web &amp; App</li>
                  <li class="filter" data-filter=".print">Print</li>
                  <li class="filter" data-filter=".logo">logo</li>
                </ul>
              </div>
              <br/>
              </nav><!-- End nav filtre -->
              </div>
            </div><!-- End row -->
          </div><!-- End container -->
     
          <!-- Portfolio -->
          <div class="container">
            <!-- Visuel portfolio -->
            <div class="row grid portfolio-container">
              <div class="col-md-4 col-sm-6 portfolio-item  portfolio-thumbnail all webapp">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Web Design</h4>
                  <p class="text-muted">Groupe Total</p>
                </div>
              </div>
              <!-- End visuel 1 -->
     
              <!-- Visuel 2 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all webapp">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Design d'application</h4>
                  <p class="text-muted">Devoteam</p>
                </div>
              </div>
              <!-- End visuel 2 -->
     
              <!-- Visuel 3 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all webapp">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Web Design &amp; Print</h4>
                  <p class="text-muted">NDC</p>
                </div>
              </div>
              <!-- End visuel 3 -->
     
              <!-- Visuel 4 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all webapp">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Design d'application</h4>
                  <p class="text-muted">NDC</p>
                </div>
              </div> 
              <!-- End visuel 4 -->
     
              <!-- Visuel 5 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Affiche</h4>
                  <p class="text-muted">Agence de presse ATC</p>
                </div>
              </div>
               <!-- End Visuel 5 -->
     
               <!-- Visuel 6 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Mise en page article</h4>
                  <p class="text-muted">Agence de presse ATC</p>
                </div>
              </div>
               <!-- End Visuel 6 -->
     
               <!-- Visuel 7 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal7">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/07-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Brochure</h4>
                  <p class="text-muted">NDC</p>
                </div>
              </div>
               <!-- End Visuel 7 -->
     
               <!-- Visuel 8 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal8">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/08-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Retouche beauté</h4>
                  <p class="text-muted">Projet personnel</p>
                </div>
              </div>
               <!-- End Visuel 8 -->
     
               <!-- Visuel 9 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal9">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/09-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Photomontage</h4>
                  <p class="text-muted">Projet personnel</p>
                </div>
              </div>
               <!-- End Visuel 9 -->
     
               <!-- Visuel 10 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all print">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal10">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/10-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Photomontage</h4>
                  <p class="text-muted">Projet personnel</p>
                </div>
              </div>
               <!-- End Visuel 10 -->
     
               <!-- Visuel 11 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all logo">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal11">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/11-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Logo</h4>
                  <p class="text-muted">Projet personnel</p>
                </div>
              </div>
               <!-- End Visuel 11-->
     
               <!-- Visuel 12 -->
              <div class="col-md-4 col-sm-6 portfolio-item portfolio-thumbnail all logo">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal12">
                  <div class="portfolio-hover">
                    <div class="portfolio-hover-content">
                      <i class="fa fa-plus fa-3x"></i>
                    </div>
                  </div>
                  <img class="img-fluid" src="img/portfolio/12-thumbnail.jpg" alt="Visuel">
                </a>
                <div class="portfolio-caption">
                  <h4>Logo</h4>
                  <p class="text-muted">Projet personnel</p>
                </div>
              </div>
               <!-- End Visuel 12 -->
     
            </div> <!-- End row portfolio -->
          </div> <!-- End container portfolio -->
     
        </section><!-- End portfolio -->
     
     
        <!-- CV -->
        <section id="cv">
          <div class="container">
            <div class="row">
              <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">CV</h2>
                  <p>
                    <a href="img/cv/CV-kheira-touir.pdf" target="_blank" class="btn-get-started scrollto btn-border" title="CV au format PDF" hreflang="fr">Téléchargez mon CV</a>
                  </p> 
              </div>
            </div><!--End row -->
     
     
          <!--Compétences -->
          <div class="row">
            <div class="col-lg-4 col-md-6 sm-6 wow fadeInUp">
              <div class="box">
                <div class="icon"><a><i class="fa fa-desktop"></i></a></div>
                  <h4 class="title">Création graphique</h4>
                  <p class="description">Développement d’une charte graphique. Travailler sur des supports multiples et variés, Affiches, Flyers, Magazines, PLV, Multimédia. Retouches photos, Photomontages, Création de logos. Maîtrise d’Adobe CC.</p>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 wow fadeInUp">
              <div class="box">
                <div class="icon"><a><i class="fa fa-code"></i></a></div>
                  <h4 class="title">UX Design / Web design </h4>
                  <p class="description">Wireframes (Balsamiq), Prototypes (Xd, Axure). XHTML5, CSS3, Responsive design, Accessibilité, Bootstrap, Wordpress. Recette, test utilisateurs. Notions de base : PHP, JavaScript, jQuery.</p>
              </div>
              </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp">
                  <div class="box">
                    <div class="icon"><a><i class="fa fa-spinner"></i></a></div>
                      <h4 class="title">Outils informatique</h4>
                      <p class="description">Photoshop, Illustrator, Indesign, Premiere, After Effects, Dreamweaver, MS office.<br> Xd, Axure, Bootstrap, Wordpress.</p>
                  </div>
                </div>
            </div><!-- End compétences -->
     
                 <!-- experience  -->
            <div class="section experience">
                <div class="container">
                    <div class="col-md-12 col-lg-12">
                        <h4 class="section-description">Expériences Professionnelles</h4>
                        <div class="h-50"></div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <ul class="timeline">
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">Février 2017 - Avril 2017</p>
                                    <h3>Web designer</h3>
                                    <h4>Devoteam (Luxembourg)</h4>
                                    <p>Missions: Mockup, design & intégration d’une application destinée au service des ressources humaines de la société.</p>
                                </div>
                            </li>
                            <li class="timeline-event">
                                <label class="timeline-event-icon"></label>
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">Déc 2013 - juin 2016</p>
                                    <h3>Directrice Artistique Web/Print</h3>
                                    <h4>New Dimension Content S.A. (Luxembourg)</h4>
                                    <p>Missions : Prise en charge de la conception et de la réalisation de la communication interne et externe de l’entreprise sur des supports multiples.</p>
                                    <p class="title2">Webdesign :</p>
                                    <ul>
                                      <li>Conception et création des maquettes.</li>
                                      <li>Amélioration des sites existants.</li>
                                      <li>Recette, test utilisateurs.</li>
                                      <li>Concevoir des campagnes pour les réseaux sociaux (réalisation de bannières, animations, vidéos adaptées à la diffusion sur internet).</li>
                                    </ul>
                                    <br>
                                    <p class="title2">Prise en charge de la partie Print :</p>
                                    <ul>
                                      <li>Création de logos.</li>
                                      <li>Cartes de visites.</li>
                                      <li>Affiches, flyers, PLV.</li>
                                    </ul>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">Juil 2011 - Avr 2012</p>
                                    <h3>Web designer</h3>
                                    <h4>Groupe TOTAL (Luxembourg / Bruxelles)</h4>
                                    <p>Missions : Participation à la réalisation des nouveaux sites du groupe.</p>
                                    <ul>
                                      <li>Construction de l’arborescence des sites internet.</li>
                                      <li>Intégration des contenus (textes, images animations).</li>
                                      <li>Coordination des services marketing pour la gestion des contenus.</li>
                                      <li>Mise en place du taggage pour le référencement des sites internet.</li>
                                      <li>Recette, test utilisateurs.</li>
                                    </ul>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">Jan 2002 - Déc 2009</p>
                                    <h3>Graphiste &amp; Web designer</h3>
                                    <h4>Freelance</h4>
                                    <p class="title2">Clients :</p>
                                    <ul>
                                      <li>Agence De Presse ATC (Metz).</li>
                                      <li>Association Khoreia (Thionville).</li>
                                      <li>Tango TV (Luxembourg).</li>
                                      <li>Web Adgency Alibi (Luxembourg).</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div> <!--End experience -->
           <br>
            <!--Formation-->
            <div class="section experience">
                <div class="container">
                    <div class="col-md-12">
                        <h4 class="section-description">Formation</h4>
                        <div class="h-50"></div>
                    </div>
                    <div class="col-md-12">
                        <ul class="timeline">
                            <li class="timeline-event" data-aos="fade-up">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2017</p>
                                    <h3>Cours d’anglais intensif</h3>
                                    <h4>@ English world (Thionville)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2016-2017</p>
                                    <h3>Web designer</h3>
                                    <h4>@ AFPA (Amiens)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2016</p>
                                    <h3>Réaliser des vidéos pro avec son smartphone</h3>
                                    <h4>@ GOBELINS (Paris)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2013</p>
                                    <h3>Retouche beauté</h3>
                                    <h4>@ GOBELINS (Paris)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2009-2010</p>
                                    <h3>DHET N.T.I.C. «Nouvelles Techniques d’Information et Communication»</h3>
                                    <h4>@ INPL (Nancy)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2003</p>
                                    <h3>Formation Image de synthèse un métier</h3>
                                    <h4>@ I.N.A. (Paris)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">2000-2001</p>
                                    <h3>Métiers du multimédia infographiste concepteur</h3>
                                    <h4>@ Collège Européen (Longlaville)</h4>
                                </div>
                            </li>
     
                            <li class="timeline-event">
                                <div class="timeline-event-copy">
                                    <p class="timeline-event-thumbnail">1999</p>
                                    <h3>Formation infographiste P.A.O.</h3>
                                    <h4>@ Greta (Luneville)</h4>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        <!--Formation-->
     
          </div>
       </section>
     
         <!-- Contact -->
        <section id="contact1">
          <div class="container">
            <div class="row">
              <div class="col-lg-12 text-center">
                 <!-- social media -->
                <div class="row text-center">
                    <div class="col-md-12">
                        <h2 class="section-heading text-uppercase">Contact</h2>
                         <hr><br>
                        <ul class="list-inline">
                            <li  class="list-inline-item"><a class="in" href="https://www.linkedin.com/in/kheira-touir-8429876a/" target=_blank></a></li>
                        </ul>
                    </div>
                </div>
              </div>
            </div>
            <div class="row justify-content-md-center">
              <div class="col-lg-8">
                <form id="contactForm" name="sentMessage" novalidate="novalidate">
                  <div class="row justify-content-md-center">
                    <div class="col-md-8">
                      <div class="form-group">
                        <input class="form-control" id="name" type="text" placeholder="Votre Nom *" required="required" data-validation-required-message="S'il vous plaît entrez votre nom.">
                        <p class="help-block text-danger"></p>
                      </div>
                      <div class="form-group">
                        <input class="form-control" id="email" type="email" placeholder="Votre Email *" required="required" data-validation-required-message="S'il vous plaît entrez votre adresse email.">
                        <p class="help-block text-danger"></p>
                      </div>
                      <div class="form-group">
                        <input class="form-control" id="sujet" type="text" placeholder="Le sujet *" required="required" data-validation-required-message="S'il vous plaît entrez le Sujet.">
                        <p class="help-block text-danger"></p>
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="form-group">
                        <textarea class="form-control" id="message" placeholder="Votre Message *" required="required" data-validation-required-message="S'il vous plaît entrez votre message."></textarea>
                        <p class="help-block text-danger"></p>
                      </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-lg-12 text-center">
                      <div id="success"></div>
                      <button id="sendMessageButton" class="btn btn-primary text-uppercase btn-get-started" type="submit">Envoyer</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
     
        <!-- Footer -->
     
       <footer class="bg-dark text-cloud">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-12">
                        <p class="padding-10" style="margin-bottom:0;">&copy; Kheira TOUIR 2018</p>
                    </div>
                </div>
            </div>
        </footer>
     
     
     
       <!-- Portfolio Modals -->
     
        <!-- Modal 1 -->
        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 2 -->
        <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/02-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 3 -->
        <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 4 -->
        <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/04-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 5 -->
        <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/05-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 6 -->
        <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/06-full.jpg" alt="">
     
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 7 -->
        <div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/07-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 8 -->
        <div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/08-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 9 -->
        <div class="portfolio-modal modal fade" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/09-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 10 -->
        <div class="portfolio-modal modal fade" id="portfolioModal10" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/10-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 11 -->
        <div class="portfolio-modal modal fade" id="portfolioModal11" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/11-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Modal 12 -->
        <div class="portfolio-modal modal fade" id="portfolioModal12" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                  <div class="rl"></div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-8 mx-auto">
                    <div class="modal-body">
                      <!-- Project Details Go Here -->
                      <img class="img-fluid d-block mx-auto" src="img/portfolio/12-full.jpg" alt="">
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fa fa-times"></i>
                        Fermer le projet</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     
        <!-- Bootstrap core JavaScript -->
        <script src="vendor/jquery/jquery.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
     
        <!-- Plugin JavaScript -->
        <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
     
        <!-- Contact form JavaScript -->
        <script src="js/jqBootstrapValidation.js"></script>
        <script src="js/contact_me.js"></script>
     
        <!-- Custom scripts for this template -->
        <script src="js/agency.min.js"></script>
     
        <!--Portfolio-->
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
     
        <script src="lib/isotope/isotope.pkgd.min.js"></script>
        <!-- Template Main Javascript File -->
        <script src="js/main2.js"></script>
     
      </body>
     
    </html>

    /*CODE CSS*/

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    729
    730
    731
    732
    733
    734
    735
    736
    737
    738
    739
    740
    741
    742
    743
    744
    745
    746
    747
    body{
      overflow-x:hidden;
      font-family:'Roboto Slab','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     p{
      line-height:1.75;
    }
     
     a{
      color:#fed136;
     
     }
     a:hover{
      color:#fec503;
     }
     
     .text-primary{
      color:#fed136!important;
     }
     
     h1,h2,h3,h4,h5,h6{
      font-weight:700;
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     section{
      padding:100px 0;
     }
     
     section h2.section-heading{
      font-size:40px;
      margin-top:0;
      margin-bottom:15px;
     }
     
     section h3.section-subheading{
      font-size:16px;
      font-weight:400;
      font-style:italic;
      margin-bottom:75px;
      text-transform:none;
      font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     @media (min-width:768px){
      section{
        padding:150px 0;
      }
    }
     
     .btn{
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
      font-weight:700;
    }
     
     .btn-xl{
      font-size:18px;
      padding:20px 40px;
     }
     
     .btn-primary{
      background-color:#fed136;
      border-color:#fed136;
     }
     
     .btn-primary:active,.btn-primary:focus,.btn-primary:hover{
      background-color:#fec810!important;
      border-color:#fec810!important;
      color:#fff;
     }
     
     .btn-primary:active,.btn-primary:focus{
      box-shadow:0 0 0 .2rem rgba(254,209,55,.5)!important;
     }
     
     ::-moz-selection{
      background:#fed136;
      text-shadow:none;
     }
     
     ::selection{
      background:#fed136;
      text-shadow:none;
     }
     
     img::selection{
      background:0 0;
     }
     
     img::-moz-selection{
      background:0 0;
     }
     
     #mainNav{
      background-color:#212529;
     }
     
     #mainNav .navbar-toggler{
      font-size:12px;
      right:0;
      padding:13px;
      text-transform:uppercase;
      color:#fff;
      border:0;
      background-color:#fed136;
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     #mainNav .navbar-brand{
      color:#fed136;
      font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
      font-weight: bold;
    }
     
     #mainNav .navbar-brand.active,#mainNav .navbar-brand:active,#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{
      color:#fec503;
     }
     
     #mainNav .navbar-nav .nav-item .nav-link{
      font-size:90%;
      font-weight:400;
      padding:.75em 0;
      letter-spacing:1px;
      color:#fff;
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     #mainNav .navbar-nav .nav-item .nav-link.active,#mainNav .navbar-nav .nav-item .nav-link:hover{
      color:#fed136;
     }
     
     @media (min-width:992px){
      #mainNav{
        padding-top:25px;
        padding-bottom:25px;
        -webkit-transition:padding-top .3s,padding-bottom .3s;
        -moz-transition:padding-top .3s,padding-bottom .3s;transition:padding-top .3s,padding-bottom .3s;
        border:none;
        background-color:transparent;
      }
     
     #mainNav .navbar-brand{
      font-size:1.75em;
      -webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;
     }
     
     #mainNav .navbar-nav .nav-item .nav-link{
      padding:1.1em 1em!important;
     }
     
     #mainNav.navbar-shrink{
      padding-top:0;
      padding-bottom:0;
      background-color:#212529;
     }
     
     #mainNav.navbar-shrink .navbar-brand{
      font-size:1.25em;
      padding:12px 0;
      }
     
    }
     
     header.masthead{
      text-align:center;
      color:#fff;
      background-image:url(../img/header-bg.jpg);
      background-repeat:no-repeat;
      background-attachment:scroll;
      background-position:center center;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
    }
     
     header.masthead .intro-text{
      padding-top:150px;
      padding-bottom:100px;
     }
     
     header.masthead .intro-text .intro-lead-in{
      font-size:22px;
      font-style:italic;
      line-height:22px;
      margin-bottom:25px;
      font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     header.masthead .intro-text .intro-heading{
      font-size:39px;
      font-weight:700;
      line-height:50px;
      margin-bottom:25px;
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     @media (min-width:768px){
      header.masthead .intro-text{
        padding-top:300px;
        padding-bottom:200px;
     }
     
     header.masthead .intro-text .intro-lead-in{
      font-size:40px;
      font-style:italic;
      line-height:40px;
      margin-bottom:25px;
      font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     header.masthead .intro-text .intro-heading{
      font-size:75px;
      font-weight:700;
      line-height:75px;
      margin-bottom:50px;
      font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
      }
    }
     
     .service-heading{
      margin:15px 0;
      text-transform:none;
     }
     
     #portfolio .portfolio-item{
      right:0;
      margin:0 0 15px;
     }
     
     #portfolio .portfolio-item .portfolio-link{
      position:relative;
      display:block;
      max-width:400px;
      margin:0 auto;
      cursor:pointer;
     }
     
     #portfolio .portfolio-item .portfolio-link .portfolio-hover{
      position:absolute;
      width:100%;
      height:100%;
      -webkit-transition:all ease .5s;
      -moz-transition:all ease .5s;transition:all ease .5s;
      opacity:0;background:rgba(254,209,54,.9);
    }
     
     #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{
      opacity:1;
     }
     
     #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{
      font-size:20px;
      position:absolute;
      top:50%;
      width:100%;
      height:20px;
      margin-top:-12px;
      text-align:center;
      color:#fff;
    }
     
     #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{
      margin-top:-12px;
     }
     
     #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
     #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{
      margin:0;
     }
     
     #portfolio .portfolio-item .portfolio-caption{
      max-width:400px;
      margin:0 auto;
      padding:25px;
      text-align:center;
      background-color:#fff;
     }
     
     #portfolio .portfolio-item .portfolio-caption h4{
      margin:0;
      text-transform:none;
     }
     
     #portfolio .portfolio-item .portfolio-caption p{
      font-size:16px;
      font-style:italic;
      margin:0;
      font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     #portfolio *{
      z-index:2;
     }
     
     @media (min-width:767px){#portfolio .portfolio-item{
      margin:0 0 30px;
     }
     
    }
     
     .portfolio-modal{padding-right:0!important;
     }
     
     .portfolio-modal .modal-dialog{
      margin:1rem;
      max-width:100vw;
     }
     
     .portfolio-modal .modal-content{
      padding:100px 0;
      text-align:center;
     }
     
     .portfolio-modal .modal-content h2{
      font-size:3em;
      margin-bottom:15px;
     }
     
     .portfolio-modal .modal-content p{
      margin-bottom:30px;
     }
     
     .portfolio-modal .modal-content p.item-intro{
      font-size:16px;
      font-style:italic;
      margin:20px 0 30px;
      font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
     
     .portfolio-modal .modal-content ul.list-inline{
      margin-top:0;margin-bottom:30px;
     }
     
     .portfolio-modal .modal-content img{margin-bottom:30px;
     }
     
     .portfolio-modal .modal-content button{
      cursor:pointer;
     }
     
     .portfolio-modal .close-modal{
      position:absolute;
      top:25px;
      right:25px;
      width:75px;
      height:75px;
      cursor:pointer;
      background-color:transparent;
     }
     
     .portfolio-modal .close-modal:hover{
      opacity:.3;
     }
     
     .portfolio-modal .close-modal .lr{
      z-index:1051;
      width:1px;
      height:75px;
      margin-left:35px;
      -webkit-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      transform:rotate(45deg);
      background-color:#212529;
    }
     
     .portfolio-modal .close-modal .lr .rl{
      z-index:1052;
      width:1px;
      height:75px;
      -webkit-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      transform:rotate(90deg);
      background-color:#212529;
    }
     
     
    /*portfolio nav filtre*/
     
    #portfolio {
      position: relative;
      padding-bottom: 50px;
    }
     
    #portfolio .portfolio-list {
      margin-bottom: 50px;
    }
     
    #portfolio .portfolio-list .nav {
      display: inline-block;
      margin: 0;
    }
     
    #portfolio .portfolio-list .nav li {
      margin: 0 40px 0 0;
      float: left;
      font-size: 14px;
      color: #999999;
      line-height: 16px;
      cursor: pointer;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: capitalize;
      -moz-transition: all 0.5s ease-in-out 0s;
      -ms-transition: all 0.5s ease-in-out 0s;
      -o-transition: all 0.5s ease-in-out 0s;
      -webkit-transition: all 0.5s ease-in-out 0s;
      transition: all 0.5s ease-in-out 0s;
    }
     
    #portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active  {
      color: #000;
      font-weight: bold;
      -moz-transition: all 0.5s ease-in-out 0s;
      -ms-transition: all 0.5s ease-in-out 0s;
      -o-transition: all 0.5s ease-in-out 0s;
      -webkit-transition: all 0.5s ease-in-out 0s;
      transition: all 0.5s ease-in-out 0s;
    }
     
     
    /*portfolio nav filtre*/
    /*Nav filtre*/
    #portfolio {
      position: relative;
      padding-bottom: 50px;
    }
     
    #portfolio .portfolio-list {
      margin-bottom: 50px;
    }
     
    #portfolio .portfolio-list .nav {
      display: inline-block;
      margin: 0;
    }
     
    #portfolio .portfolio-list .nav li {
      margin: 0 25px 0 0;
      float: left;
      font-size: 14px;
      color: #999999;
      line-height: 16px;
      cursor: pointer;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: capitalize;
      -moz-transition: all 0.5s ease-in-out 0s;
      -ms-transition: all 0.5s ease-in-out 0s;
      -o-transition: all 0.5s ease-in-out 0s;
      -webkit-transition: all 0.5s ease-in-out 0s;
      transition: all 0.5s ease-in-out 0s;
    }
     
    #portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active  {
      color: #000;
      font-weight: bold;
      -moz-transition: all 0.5s ease-in-out 0s;
      -ms-transition: all 0.5s ease-in-out 0s;
      -o-transition: all 0.5s ease-in-out 0s;
      -webkit-transition: all 0.5s ease-in-out 0s;
      transition: all 0.5s ease-in-out 0s;
    }
     
    /* CV Section
    --------------------------------*/
     
    .btn-border {
    	border-color: #2dc997;
    }
    .btn-border : hover {
    	border-color: #2dc997;
    }
     
    .btn-get-started {
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 8px 32px;
      border-radius: 50px;
      transition: 0.5s;
      margin: 10px;
      color: #fff;
      background: #2dc997;
      margin-bottom: 30px;
      text-decoration: none;
     
    }
     
    .btn-get-started:hover {
      background: #f2c40a;
      color: #18d26e;text-decoration: none;
      padding: 8px 32px;
      border-radius: 50px;
      transition: 0.5s;
      font-family: "Montserrat", sans-serif;
      color: #FFF;
      text-decoration: none;
    }
     
     
    #cv {
      background: #fff;
      background-size: cover;
      padding: 80px 0 60px 0;
    }
     
    #cv .box {
      padding: 50px 20px;
      margin-bottom: 50px;
      text-align: center;
      border: 1px solid #e6e6e6;
      height: 245px;
      position: relative;
      background: #fafafa;
      margin-top: 10px;
    }
     
    #cv .icon {
      position: absolute;
      top: -36px;
      left: calc(50% - 36px);
      transition: 0.2s;
      border-radius: 50%;
      display: inline-block;
      border: 6px solid #fff;
     
    }
     
    #cv .icon a {
      display: inline-block;
      background: #2dc997;
      border: 2px solid #2dc997;
      padding: 16px;
      border-radius: 50%;
     
    }
     
    #cv .icon i {
      color: #fff;
      font-size: 25px;
    }
     
    #cv .title {
      font-weight: 700;
      font-size: 18px;
      margin-bottom: 15px;
      text-transform: uppercase;
     
    }
     
    #cv .title a {
      color: #111;
    }
     
    #cv .description {
      font-size: 14px;
      line-height: 24px;
    }
     
    .section-description-com{
      margin-bottom: 40px;
    }
     
    /*exeperience*/
    /* experience section*/
     
    .title2{
        font-weight: bold;
    }
     
    .experience {
        padding: 100px 0;
        background: #fafafa;
    }
     
    .experience-row {
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
    }
     
    .experience-row h3 {
        color: #2dc997 ;
        font-size: 16px;
        font-weight: bold;
    }
     
    .experience-row p {
        color: #888;
        margin-top: 20px;
        font-size: 15px;
    }
     
    .experience-row .date {
        color: #000;
        font-size: 17px;
    }
     
    .timeline {
        padding-left: 0;
        list-style: none;
        position: relative;
    }
     
     
    .timeline-event-copy h4 {
        font-size: 1.2em;
    }
     
     
     
    .timeline-event-thumbnail {
        color: white;
        font-size: 12px;
        font-weight: bold;
        background-color: black;
        box-shadow: inset 0 0 0 0em #2dc997;
        display: inline-block;
        margin-bottom: 1.2em;
        margin-top: 2em;
        padding: 0.25em 1em 0.2em 1em;
    }
     
     
     
    /*social media icons - CSS animation */
    section#contact1 a {
        display: inline-block;
        width: 128px;
        height: 128px;
        transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
    }
     
     
    a.in {
        background: url(../img/social_media.png)  -384px top;
    }
     
    section#contact1 li:hover a.in {
        background: url(../img/social_media.png) -384px bottom;
    }
     
     
    /*input et textarea*/
    input:not([type="submit"]), textarea{
      display:block;
     
     
      border:1px dashed #DBDBDB;
      color:#111;
      font-size:14px;
     
      border-radius:2px;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
     
      transition:background 0.2s linear,
            box-shadow 0.6s linear;
      -webkit-transition:background 0.2s linear,
            box-shadow 0.6s linear;
      -moz-transition:background 0.2s linear,
            box-shadow 0.6s linear;
      -o-transition:background 0.2s linear,
            box-shadow 0.6s linear;
    }
     
    section#contact {
      background-color: #212529;
      background-image: url("../img/map-image.png");
      background-repeat: no-repeat;
      background-position: center;
    }
     
    section#contact .section-heading {
      color: #fff;
    }
     
    section#contact .form-group {
      margin-bottom: 25px;
    }
     
    section#contact .form-group input,
    section#contact .form-group textarea {
      padding: 20px;
    }
     
    section#contact .form-group input.form-control {
      height: auto;
    }
     
    section#contact .form-group textarea.form-control {
      height: 248px;
    }
     
    section#contact .form-control:focus {
      border-color: #fed136;
      box-shadow: none;
    }
     
    section#contact ::-webkit-input-placeholder {
      font-weight: 700;
      color: #ced4da;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
     
    section#contact :-moz-placeholder {
      font-weight: 700;
      color: #ced4da;
      /* Firefox 18- */
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
     
    section#contact ::-moz-placeholder {
      font-weight: 700;
      color: #ced4da;
      /* Firefox 19+ */
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
     
    section#contact :-ms-input-placeholder {
      font-weight: 700;
      color: #ced4da;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
     
     
     
    /*Footer*/
    .bg-dark {
        background: #212529;
    }
     
    .text-cloud {
        color: rgb(236, 240, 241);
    }
     
    .padding-10 {
        padding: 10px;
    }

  11. #11
    Invité
    Invité(e)
    Par défaut
    Essaie en intervertissant les scripts, comme suit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
        <!-- Template Main Javascript File -->
        <script src="js/main2.js"></script>
     
        <!--Portfolio-->
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
     
        <script src="lib/isotope/isotope.pkgd.min.js"></script>
    Sinon, montre-nous le code de js/main2.js

  12. #12
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Je viens d’effectuer le changement malheureusement cela ne change rien.
    Ci-dessous le code js/main2.js.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
     
    /*global $, jQuery, alert*/
    $(document).ready(function() {
     
     
      // ========================================================================= //
      //  Owl Carousel Services
      // ========================================================================= //
     
     
      $('.services-carousel').owlCarousel({
          autoplay: true,
          loop: true,
          margin: 20,
          dots: true,
          nav: false,
          responsiveClass: true,
          responsive: { 0: { items: 1 }, 768: { items: 2 }, 900: { items: 4 } }
        });
     
     
      // ========================================================================= //
      //  Porfolio isotope and filter
      // ========================================================================= //
     
     
      var portfolioIsotope = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-thumbnail',
        layoutMode: 'fitRows'
      });
     
      $('#portfolio-flters li').on( 'click', function() {
        $("#portfolio-flters li").removeClass('filter-active');
        $(this).addClass('filter-active');
     
        portfolioIsotope.isotope({ filter: $(this).data('filter') });
      });
     
     
     
    });

  13. #13
    Invité
    Invité(e)
    Par défaut
    OK.

    1- remets les scripts dans l'ordre initial.

    2- je pense que isotope est appelé avant le chargement complet des images (*).

    Remplace dans js/main2.js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(document).ready(function() {
    Par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(document).on( 'load', function() {
    A voir... (on cherche, on cherche....)


    (*) Comme isotope place tous les items en position absolue, il a besoin de connaître les dimensions des images contenues (donc, elles doivent être chargées avant)...
    Dernière modification par Invité ; 20/06/2018 à 22h02.

  14. #14
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut
    Yes !!! Super :-)
    Ça fonctionne bien, grâce à toi !

    Un grand Merci.

    Si tu as besoin d’un coup de main sur un support graphique ou logo, tu n’hésite pas c'est avec plaisir que je rendrais service.
    Keira

    Bonne soirée

  15. #15
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut
    Zut J'ai parlé trop vite, je viens de voir que navigation filtre du portfolio ne fonctionne plus. Le changement effectué peut il influencer le filtrage ?

  16. #16
    Invité
    Invité(e)
    Par défaut
    Oui :
    • ordre d'appel des scripts,
    • chargement complet des éléments nécessaires (images,...)
    • ... (?)



    As-tu vérifié dans la DOC isotope ?

  17. #17
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Je dois vérifier quoi dans Doc isotope ?
    Ci-dessous le code isotope.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    /*!
     * Isotope PACKAGED v3.0.5
     *
     * Licensed GPLv3 for open source use
     * or Isotope Commercial License for commercial use
     *
     * <a href="https://isotope.metafizzy.co" target="_blank">https://isotope.metafizzy.co</a>
     * Copyright 2017 Metafizzy
     */
     
    !function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,s,a){function u(t,e,o){var n,s="$()."+i+'("'+e+'")';return t.each(function(t,u){var h=a.data(u,i);if(!h)return void r(i+" not initialized. Cannot call methods, i.e. "+s);var d=h[e];if(!d||"_"==e.charAt(0))return void r(s+" is not a valid method");var l=d.apply(h,o);n=void 0===n?l:n}),void 0!==n?n:t}function h(t,e){t.each(function(t,o){var n=a.data(o,i);n?(n.option(e),n._init()):(n=new s(o,e),a.data(o,i,n))})}a=a||e||t.jQuery,a&&(s.prototype.option||(s.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=n.call(arguments,1);return u(this,t,e)}return h(this,t),this},o(a))}function o(t){!t||t&&t.bridget||(t.bridget=i)}var n=Array.prototype.slice,s=t.console,r="undefined"==typeof s?function(){}:function(t){s.error(t)};return o(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},o=i[t]=i[t]||[];return o.indexOf(e)==-1&&o.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},o=i[t]=i[t]||{};return o[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var o=i.indexOf(e);return o!=-1&&i.splice(o,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var o=this._onceEvents&&this._onceEvents[t],n=0;n<i.length;n++){var s=i[n],r=o&&o[s];r&&(this.off(t,s),delete o[s]),s.apply(this,e)}return this}},e.allOff=function(){delete this._events,delete this._onceEvents},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=t.indexOf("%")==-1&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;e<h;e++){var i=u[e];t[i]=0}return t}function o(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See <a href="http://bit" target="_blank">http://bit</a>. ly/getsizebug1"),e}function n(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var n=o(e);s.isBoxSizeOuter=r=200==t(n.width),i.removeChild(e)}}function s(e){if(n(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var s=o(e);if("none"==s.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==s.boxSizing,l=0;l<h;l++){var f=u[l],c=s[f],m=parseFloat(c);a[f]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,y=a.paddingTop+a.paddingBottom,g=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,I=a.borderTopWidth+a.borderBottomWidth,z=d&&r,x=t(s.width);x!==!1&&(a.width=x+(z?0:p+_));var S=t(s.height);return S!==!1&&(a.height=S+(z?0:y+I)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(y+I),a.outerWidth=a.width+g,a.outerHeight=a.height+v,a}}var r,a="undefined"==typeof console?e:function(t){console.error(t)},u=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],h=u.length,d=!1;return s}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;i<e.length;i++){var o=e[i],n=o+"MatchesSelector";if(t[n])return n}}();return function(e,i){return e[t](i)}}),function(t,e){"function"==typeof define&&define.amd?define("fizzy-ui-utils/utils",["desandro-matches-selector/matches-selector"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("desandro-matches-selector")):t.fizzyUIUtils=e(t,t.matchesSelector)}(window,function(t,e){var i={};i.extend=function(t,e){for(var i in e)t[i]=e[i];return t},i.modulo=function(t,e){return(t%e+e)%e},i.makeArray=function(t){var e=[];if(Array.isArray(t))e=t;else if(t&&"object"==typeof t&&"number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e},i.removeFrom=function(t,e){var i=t.indexOf(e);i!=-1&&t.splice(i,1)},i.getParent=function(t,i){for(;t.parentNode&&t!=document.body;)if(t=t.parentNode,e(t,i))return t},i.getQueryElement=function(t){return"string"==typeof t?document.querySelector(t):t},i.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},i.filterFindElements=function(t,o){t=i.makeArray(t);var n=[];return t.forEach(function(t){if(t instanceof HTMLElement){if(!o)return void n.push(t);e(t,o)&&n.push(t);for(var i=t.querySelectorAll(o),s=0;s<i.length;s++)n.push(i[s])}}),n},i.debounceMethod=function(t,e,i){var o=t.prototype[e],n=e+"Timeout";t.prototype[e]=function(){var t=this[n];t&&clearTimeout(t);var e=arguments,s=this;this[n]=setTimeout(function(){o.apply(s,e),delete s[n]},i||100)}},i.docReady=function(t){var e=document.readyState;"complete"==e||"interactive"==e?setTimeout(t):document.addEventListener("DOMContentLoaded",t)},i.toDashed=function(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()};var o=t.console;return i.htmlInit=function(e,n){i.docReady(function(){var s=i.toDashed(n),r="data-"+s,a=document.querySelectorAll("["+r+"]"),u=document.querySelectorAll(".js-"+s),h=i.makeArray(a).concat(i.makeArray(u)),d=r+"-options",l=t.jQuery;h.forEach(function(t){var i,s=t.getAttribute(r)||t.getAttribute(d);try{i=s&&JSON.parse(s)}catch(a){return void(o&&o.error("Error parsing "+r+" on "+t.className+": "+a))}var u=new e(t,i);l&&l.data(t,n,u)})})},i}),function(t,e){"function"==typeof define&&define.amd?define("outlayer/item",["ev-emitter/ev-emitter","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("ev-emitter"),require("get-size")):(t.Outlayer={},t.Outlayer.Item=e(t.EvEmitter,t.getSize))}(window,function(t,e){"use strict";function i(t){for(var e in t)return!1;return e=null,!0}function o(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}function n(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})}var s=document.documentElement.style,r="string"==typeof s.transition?"transition":"WebkitTransition",a="string"==typeof s.transform?"transform":"WebkitTransform",u={WebkitTransition:"webkitTransitionEnd",transition:"transitionend"}[r],h={transform:a,transition:r,transitionDuration:r+"Duration",transitionProperty:r+"Property",transitionDelay:r+"Delay"},d=o.prototype=Object.create(t.prototype);d.constructor=o,d._create=function(){this._transn={ingProperties:{},clean:{},onEnd:{}},this.css({position:"absolute"})},d.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},d.getSize=function(){this.size=e(this.element)},d.css=function(t){var e=this.element.style;for(var i in t){var o=h[i]||i;e[o]=t[i]}},d.getPosition=function(){var t=getComputedStyle(this.element),e=this.layout._getOption("originLeft"),i=this.layout._getOption("originTop"),o=t[e?"left":"right"],n=t[i?"top":"bottom"],s=this.layout.size,r=o.indexOf("%")!=-1?parseFloat(o)/100*s.width:parseInt(o,10),a=n.indexOf("%")!=-1?parseFloat(n)/100*s.height:parseInt(n,10);r=isNaN(r)?0:r,a=isNaN(a)?0:a,r-=e?s.paddingLeft:s.paddingRight,a-=i?s.paddingTop:s.paddingBottom,this.position.x=r,this.position.y=a},d.layoutPosition=function(){var t=this.layout.size,e={},i=this.layout._getOption("originLeft"),o=this.layout._getOption("originTop"),n=i?"paddingLeft":"paddingRight",s=i?"left":"right",r=i?"right":"left",a=this.position.x+t[n];e[s]=this.getXValue(a),e[r]="";var u=o?"paddingTop":"paddingBottom",h=o?"top":"bottom",d=o?"bottom":"top",l=this.position.y+t[u];e[h]=this.getYValue(l),e[d]="",this.css(e),this.emitEvent("layout",[this])},d.getXValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&!e?t/this.layout.size.width*100+"%":t+"px"},d.getYValue=function(t){var e=this.layout._getOption("horizontal");return this.layout.options.percentPosition&&e?t/this.layout.size.height*100+"%":t+"px"},d._transitionTo=function(t,e){this.getPosition();var i=this.position.x,o=this.position.y,n=parseInt(t,10),s=parseInt(e,10),r=n===this.position.x&&s===this.position.y;if(this.setPosition(t,e),r&&!this.isTransitioning)return void this.layoutPosition();var a=t-i,u=e-o,h={};h.transform=this.getTranslate(a,u),this.transition({to:h,onTransitionEnd:{transform:this.layoutPosition},isCleaning:!0})},d.getTranslate=function(t,e){var i=this.layout._getOption("originLeft"),o=this.layout._getOption("originTop");return t=i?t:-t,e=o?e:-e,"translate3d("+t+"px, "+e+"px, 0)"},d.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},d.moveTo=d._transitionTo,d.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},d._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to);for(var e in t.onTransitionEnd)t.onTransitionEnd[e].call(this)},d.transition=function(t){if(!parseFloat(this.layout.options.transitionDuration))return void this._nonTransition(t);var e=this._transn;for(var i in t.onTransitionEnd)e.onEnd[i]=t.onTransitionEnd[i];for(i in t.to)e.ingProperties[i]=!0,t.isCleaning&&(e.clean[i]=!0);if(t.from){this.css(t.from);var o=this.element.offsetHeight;o=null}this.enableTransition(t.to),this.css(t.to),this.isTransitioning=!0};var l="opacity,"+n(a);d.enableTransition=function(){if(!this.isTransitioning){var t=this.layout.options.transitionDuration;t="number"==typeof t?t+"ms":t,this.css({transitionProperty:l,transitionDuration:t,transitionDelay:this.staggerDelay||0}),this.element.addEventListener(u,this,!1)}},d.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},d.onotransitionend=function(t){this.ontransitionend(t)};var f={"-webkit-transform":"transform"};d.ontransitionend=function(t){if(t.target===this.element){var e=this._transn,o=f[t.propertyName]||t.propertyName;if(delete e.ingProperties[o],i(e.ingProperties)&&this.disableTransition(),o in e.clean&&(this.element.style[t.propertyName]="",delete e.clean[o]),o in e.onEnd){var n=e.onEnd[o];n.call(this),delete e.onEnd[o]}this.emitEvent("transitionEnd",[this])}},d.disableTransition=function(){this.removeTransitionStyles(),this.element.removeEventListener(u,this,!1),this.isTransitioning=!1},d._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var c={transitionProperty:"",transitionDuration:"",transitionDelay:""};return d.removeTransitionStyles=function(){this.css(c)},d.stagger=function(t){t=isNaN(t)?0:t,this.staggerDelay=t+"ms"},d.removeElem=function(){this.element.parentNode.removeChild(this.element),this.css({display:""}),this.emitEvent("remove",[this])},d.remove=function(){return r&&parseFloat(this.layout.options.transitionDuration)?(this.once("transitionEnd",function(){this.removeElem()}),void this.hide()):void this.removeElem()},d.reveal=function(){delete this.isHidden,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("visibleStyle");e[i]=this.onRevealTransitionEnd,this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0,onTransitionEnd:e})},d.onRevealTransitionEnd=function(){this.isHidden||this.emitEvent("reveal")},d.getHideRevealTransitionEndProperty=function(t){var e=this.layout.options[t];if(e.opacity)return"opacity";for(var i in e)return i},d.hide=function(){this.isHidden=!0,this.css({display:""});var t=this.layout.options,e={},i=this.getHideRevealTransitionEndProperty("hiddenStyle");e[i]=this.onHideTransitionEnd,this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:e})},d.onHideTransitionEnd=function(){this.isHidden&&(this.css({display:"none"}),this.emitEvent("hide"))},d.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},o}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("outlayer/outlayer",["ev-emitter/ev-emitter","get-size/get-size","fizzy-ui-utils/utils","./item"],function(i,o,n,s){return e(t,i,o,n,s)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter"),require("get-size"),require("fizzy-ui-utils"),require("./item")):t.Outlayer=e(t,t.EvEmitter,t.getSize,t.fizzyUIUtils,t.Outlayer.Item)}(window,function(t,e,i,o,n){"use strict";function s(t,e){var i=o.getQueryElement(t);if(!i)return void(u&&u.error("Bad element for "+this.constructor.namespace+": "+(i||t)));this.element=i,h&&(this.$element=h(this.element)),this.options=o.extend({},this.constructor.defaults),this.option(e);var n=++l;this.element.outlayerGUID=n,f[n]=this,this._create();var s=this._getOption("initLayout");s&&this.layout()}function r(t){function e(){t.apply(this,arguments)}return e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e}function a(t){if("number"==typeof t)return t;var e=t.match(/(^\d*\.?\d*)(\w*)/),i=e&&e[1],o=e&&e[2];if(!i.length)return 0;i=parseFloat(i);var n=m[o]||1;return i*n}var u=t.console,h=t.jQuery,d=function(){},l=0,f={};s.namespace="outlayer",s.Item=n,s.defaults={containerStyle:{position:"relative"},initLayout:!0,originLeft:!0,originTop:!0,resize:!0,resizeContainer:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}};var c=s.prototype;o.extend(c,e.prototype),c.option=function(t){o.extend(this.options,t)},c._getOption=function(t){var e=this.constructor.compatOptions[t];return e&&void 0!==this.options[e]?this.options[e]:this.options[t]},s.compatOptions={initLayout:"isInitLayout",horizontal:"isHorizontal",layoutInstant:"isLayoutInstant",originLeft:"isOriginLeft",originTop:"isOriginTop",resize:"isResizeBound",resizeContainer:"isResizingContainer"},c._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),o.extend(this.element.style,this.options.containerStyle);var t=this._getOption("resize");t&&this.bindResize()},c.reloadItems=function(){this.items=this._itemize(this.element.children)},c._itemize=function(t){for(var e=this._filterFindItemElements(t),i=this.constructor.Item,o=[],n=0;n<e.length;n++){var s=e[n],r=new i(s,this);o.push(r)}return o},c._filterFindItemElements=function(t){return o.filterFindElements(t,this.options.itemSelector)},c.getItemElements=function(){return this.items.map(function(t){return t.element})},c.layout=function(){this._resetLayout(),this._manageStamps();var t=this._getOption("layoutInstant"),e=void 0!==t?t:!this._isLayoutInited;this.layoutItems(this.items,e),this._isLayoutInited=!0},c._init=c.layout,c._resetLayout=function(){this.getSize()},c.getSize=function(){this.size=i(this.element)},c._getMeasurement=function(t,e){var o,n=this.options[t];n?("string"==typeof n?o=this.element.querySelector(n):n instanceof HTMLElement&&(o=n),this[t]=o?i(o)[e]:n):this[t]=0},c.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},c._getItemsForLayout=function(t){return t.filter(function(t){return!t.isIgnored})},c._layoutItems=function(t,e){if(this._emitCompleteOnItems("layout",t),t&&t.length){var i=[];t.forEach(function(t){var o=this._getItemLayoutPosition(t);o.item=t,o.isInstant=e||t.isLayoutInstant,i.push(o)},this),this._processLayoutQueue(i)}},c._getItemLayoutPosition=function(){return{x:0,y:0}},c._processLayoutQueue=function(t){this.updateStagger(),t.forEach(function(t,e){this._positionItem(t.item,t.x,t.y,t.isInstant,e)},this)},c.updateStagger=function(){var t=this.options.stagger;return null===t||void 0===t?void(this.stagger=0):(this.stagger=a(t),this.stagger)},c._positionItem=function(t,e,i,o,n){o?t.goTo(e,i):(t.stagger(n*this.stagger),t.moveTo(e,i))},c._postLayout=function(){this.resizeContainer()},c.resizeContainer=function(){var t=this._getOption("resizeContainer");if(t){var e=this._getContainerSize();e&&(this._setContainerMeasure(e.width,!0),this._setContainerMeasure(e.height,!1))}},c._getContainerSize=d,c._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},c._emitCompleteOnItems=function(t,e){function i(){n.dispatchEvent(t+"Complete",null,[e])}function o(){r++,r==s&&i()}var n=this,s=e.length;if(!e||!s)return void i();var r=0;e.forEach(function(e){e.once(t,o)})},c.dispatchEvent=function(t,e,i){var o=e?[e].concat(i):i;if(this.emitEvent(t,o),h)if(this.$element=this.$element||h(this.element),e){var n=h.Event(e);n.type=t,this.$element.trigger(n,i)}else this.$element.trigger(t,i)},c.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},c.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},c.stamp=function(t){t=this._find(t),t&&(this.stamps=this.stamps.concat(t),t.forEach(this.ignore,this))},c.unstamp=function(t){t=this._find(t),t&&t.forEach(function(t){o.removeFrom(this.stamps,t),this.unignore(t)},this)},c._find=function(t){if(t)return"string"==typeof t&&(t=this.element.querySelectorAll(t)),t=o.makeArray(t)},c._manageStamps=function(){this.stamps&&this.stamps.length&&(this._getBoundingRect(),this.stamps.forEach(this._manageStamp,this))},c._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},c._manageStamp=d,c._getElementOffset=function(t){var e=t.getBoundingClientRect(),o=this._boundingRect,n=i(t),s={left:e.left-o.left-n.marginLeft,top:e.top-o.top-n.marginTop,right:o.right-e.right-n.marginRight,bottom:o.bottom-e.bottom-n.marginBottom};return s},c.handleEvent=o.handleEvent,c.bindResize=function(){t.addEventListener("resize",this),this.isResizeBound=!0},c.unbindResize=function(){t.removeEventListener("resize",this),this.isResizeBound=!1},c.onresize=function(){this.resize()},o.debounceMethod(s,"onresize",100),c.resize=function(){this.isResizeBound&&this.needsResizeLayout()&&this.layout()},c.needsResizeLayout=function(){var t=i(this.element),e=this.size&&t;return e&&t.innerWidth!==this.size.innerWidth},c.addItems=function(t){var e=this._itemize(t);return e.length&&(this.items=this.items.concat(e)),e},c.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},c.prepended=function(t){var e=this._itemize(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this._manageStamps(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},c.reveal=function(t){if(this._emitCompleteOnItems("reveal",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.reveal()})}},c.hide=function(t){if(this._emitCompleteOnItems("hide",t),t&&t.length){var e=this.updateStagger();t.forEach(function(t,i){t.stagger(i*e),t.hide()})}},c.revealItemElements=function(t){var e=this.getItems(t);this.reveal(e)},c.hideItemElements=function(t){var e=this.getItems(t);this.hide(e)},c.getItem=function(t){for(var e=0;e<this.items.length;e++){var i=this.items[e];if(i.element==t)return i}},c.getItems=function(t){t=o.makeArray(t);var e=[];return t.forEach(function(t){var i=this.getItem(t);i&&e.push(i)},this),e},c.remove=function(t){var e=this.getItems(t);this._emitCompleteOnItems("remove",e),e&&e.length&&e.forEach(function(t){t.remove(),o.removeFrom(this.items,t)},this)},c.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="",this.items.forEach(function(t){t.destroy()}),this.unbindResize();var e=this.element.outlayerGUID;delete f[e],delete this.element.outlayerGUID,h&&h.removeData(this.element,this.constructor.namespace)},s.data=function(t){t=o.getQueryElement(t);var e=t&&t.outlayerGUID;return e&&f[e]},s.create=function(t,e){var i=r(s);return i.defaults=o.extend({},s.defaults),o.extend(i.defaults,e),i.compatOptions=o.extend({},s.compatOptions),i.namespace=t,i.data=s.data,i.Item=r(n),o.htmlInit(i,t),h&&h.bridget&&h.bridget(t,i),i};var m={ms:1,s:1e3};return s.Item=n,s}),function(t,e){"function"==typeof define&&define.amd?define("isotope-layout/js/item",["outlayer/outlayer"],e):"object"==typeof module&&module.exports?module.exports=e(require("outlayer")):(t.Isotope=t.Isotope||{},t.Isotope.Item=e(t.Outlayer))}(window,function(t){"use strict";function e(){t.Item.apply(this,arguments)}var i=e.prototype=Object.create(t.Item.prototype),o=i._create;i._create=function(){this.id=this.layout.itemGUID++,o.call(this),this.sortData={}},i.updateSortData=function(){if(!this.isIgnored){this.sortData.id=this.id,this.sortData["original-order"]=this.id,this.sortData.random=Math.random();var t=this.layout.options.getSortData,e=this.layout._sorters;for(var i in t){var o=e[i];this.sortData[i]=o(this.element,this)}}};var n=i.destroy;return i.destroy=function(){n.apply(this,arguments),this.css({display:""})},e}),function(t,e){"function"==typeof define&&define.amd?define("isotope-layout/js/layout-mode",["get-size/get-size","outlayer/outlayer"],e):"object"==typeof module&&module.exports?module.exports=e(require("get-size"),require("outlayer")):(t.Isotope=t.Isotope||{},t.Isotope.LayoutMode=e(t.getSize,t.Outlayer))}(window,function(t,e){"use strict";function i(t){this.isotope=t,t&&(this.options=t.options[this.namespace],this.element=t.element,this.items=t.filteredItems,this.size=t.size)}var o=i.prototype,n=["_resetLayout","_getItemLayoutPosition","_manageStamp","_getContainerSize","_getElementOffset","needsResizeLayout","_getOption"];return n.forEach(function(t){o[t]=function(){return e.prototype[t].apply(this.isotope,arguments)}}),o.needsVerticalResizeLayout=function(){var e=t(this.isotope.element),i=this.isotope.size&&e;return i&&e.innerHeight!=this.isotope.size.innerHeight},o._getMeasurement=function(){this.isotope._getMeasurement.apply(this,arguments)},o.getColumnWidth=function(){this.getSegmentSize("column","Width")},o.getRowHeight=function(){this.getSegmentSize("row","Height")},o.getSegmentSize=function(t,e){var i=t+e,o="outer"+e;if(this._getMeasurement(i,o),!this[i]){var n=this.getFirstItemSize();this[i]=n&&n[o]||this.isotope.size["inner"+e]}},o.getFirstItemSize=function(){var e=this.isotope.filteredItems[0];return e&&e.element&&t(e.element)},o.layout=function(){this.isotope.layout.apply(this.isotope,arguments)},o.getSize=function(){this.isotope.getSize(),this.size=this.isotope.size},i.modes={},i.create=function(t,e){function n(){i.apply(this,arguments)}return n.prototype=Object.create(o),n.prototype.constructor=n,e&&(n.options=e),n.prototype.namespace=t,i.modes[t]=n,n},i}),function(t,e){"function"==typeof define&&define.amd?define("masonry-layout/masonry",["outlayer/outlayer","get-size/get-size"],e):"object"==typeof module&&module.exports?module.exports=e(require("outlayer"),require("get-size")):t.Masonry=e(t.Outlayer,t.getSize)}(window,function(t,e){var i=t.create("masonry");i.compatOptions.fitWidth="isFitWidth";var o=i.prototype;return o._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var t=0;t<this.cols;t++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0},o.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],i=t&&t.element;this.columnWidth=i&&e(i).outerWidth||this.containerWidth}var o=this.columnWidth+=this.gutter,n=this.containerWidth+this.gutter,s=n/o,r=o-n%o,a=r&&r<1?"round":"floor";s=Math[a](s),this.cols=Math.max(s,1)},o.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,o=e(i);this.containerWidth=o&&o.innerWidth},o._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&e<1?"round":"ceil",o=Math[i](t.size.outerWidth/this.columnWidth);o=Math.min(o,this.cols);for(var n=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",s=this[n](o,t),r={x:this.columnWidth*s.col,y:s.y},a=s.y+t.size.outerHeight,u=o+s.col,h=s.col;h<u;h++)this.colYs[h]=a;return r},o._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},o._getTopColGroup=function(t){if(t<2)return this.colYs;for(var e=[],i=this.cols+1-t,o=0;o<i;o++)e[o]=this._getColGroupY(o,t);return e},o._getColGroupY=function(t,e){if(e<2)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},o._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,o=t>1&&i+t>this.cols;i=o?0:i;var n=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=n?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},o._manageStamp=function(t){var i=e(t),o=this._getElementOffset(t),n=this._getOption("originLeft"),s=n?o.left:o.right,r=s+i.outerWidth,a=Math.floor(s/this.columnWidth);a=Math.max(0,a);var u=Math.floor(r/this.columnWidth);u-=r%this.columnWidth?0:1,u=Math.min(this.cols-1,u);for(var h=this._getOption("originTop"),d=(h?o.top:o.bottom)+i.outerHeight,l=a;l<=u;l++)this.colYs[l]=Math.max(d,this.colYs[l])},o._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},o._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},o.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}),function(t,e){"function"==typeof define&&define.amd?define("isotope-layout/js/layout-modes/masonry",["../layout-mode","masonry-layout/masonry"],e):"object"==typeof module&&module.exports?module.exports=e(require("../layout-mode"),require("masonry-layout")):e(t.Isotope.LayoutMode,t.Masonry)}(window,function(t,e){"use strict";var i=t.create("masonry"),o=i.prototype,n={_getElementOffset:!0,layout:!0,_getMeasurement:!0};for(var s in e.prototype)n[s]||(o[s]=e.prototype[s]);var r=o.measureColumns;o.measureColumns=function(){this.items=this.isotope.filteredItems,r.call(this)};var a=o._getOption;return o._getOption=function(t){return"fitWidth"==t?void 0!==this.options.isFitWidth?this.options.isFitWidth:this.options.fitWidth:a.apply(this.isotope,arguments)},i}),function(t,e){"function"==typeof define&&define.amd?define("isotope-layout/js/layout-modes/fit-rows",["../layout-mode"],e):"object"==typeof exports?module.exports=e(require("../layout-mode")):e(t.Isotope.LayoutMode)}(window,function(t){"use strict";var e=t.create("fitRows"),i=e.prototype;return i._resetLayout=function(){this.x=0,this.y=0,this.maxY=0,this._getMeasurement("gutter","outerWidth")},i._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth+this.gutter,i=this.isotope.size.innerWidth+this.gutter;0!==this.x&&e+this.x>i&&(this.x=0,this.y=this.maxY);var o={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=e,o},i._getContainerSize=function(){return{height:this.maxY}},e}),function(t,e){"function"==typeof define&&define.amd?define("isotope-layout/js/layout-modes/vertical",["../layout-mode"],e):"object"==typeof module&&module.exports?module.exports=e(require("../layout-mode")):e(t.Isotope.LayoutMode)}(window,function(t){"use strict";var e=t.create("vertical",{horizontalAlignment:0}),i=e.prototype;return i._resetLayout=function(){this.y=0},i._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},i._getContainerSize=function(){return{height:this.y}},e}),function(t,e){"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","desandro-matches-selector/matches-selector","fizzy-ui-utils/utils","isotope-layout/js/item","isotope-layout/js/layout-mode","isotope-layout/js/layout-modes/masonry","isotope-layout/js/layout-modes/fit-rows","isotope-layout/js/layout-modes/vertical"],function(i,o,n,s,r,a){return e(t,i,o,n,s,r,a)}):"object"==typeof module&&module.exports?module.exports=e(t,require("outlayer"),require("get-size"),require("desandro-matches-selector"),require("fizzy-ui-utils"),require("isotope-layout/js/item"),require("isotope-layout/js/layout-mode"),require("isotope-layout/js/layout-modes/masonry"),require("isotope-layout/js/layout-modes/fit-rows"),require("isotope-layout/js/layout-modes/vertical")):t.Isotope=e(t,t.Outlayer,t.getSize,t.matchesSelector,t.fizzyUIUtils,t.Isotope.Item,t.Isotope.LayoutMode)}(window,function(t,e,i,o,n,s,r){function a(t,e){return function(i,o){for(var n=0;n<t.length;n++){var s=t[n],r=i.sortData[s],a=o.sortData[s];if(r>a||r<a){var u=void 0!==e[s]?e[s]:e,h=u?1:-1;return(r>a?1:-1)*h}}return 0}}var u=t.jQuery,h=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},d=e.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});d.Item=s,d.LayoutMode=r;var l=d.prototype;l._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),e.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var t in r.modes)this._initLayoutMode(t)},l.reloadItems=function(){this.itemGUID=0,e.prototype.reloadItems.call(this)},l._itemize=function(){for(var t=e.prototype._itemize.apply(this,arguments),i=0;i<t.length;i++){var o=t[i];o.id=this.itemGUID++}return this._updateItemsSortData(t),t},l._initLayoutMode=function(t){var e=r.modes[t],i=this.options[t]||{};this.options[t]=e.options?n.extend(e.options,i):i,this.modes[t]=new e(this)},l.layout=function(){return!this._isLayoutInited&&this._getOption("initLayout")?void this.arrange():void this._layout()},l._layout=function(){var t=this._getIsInstant();this._resetLayout(),this._manageStamps(),this.layoutItems(this.filteredItems,t),this._isLayoutInited=!0},l.arrange=function(t){this.option(t),this._getIsInstant();var e=this._filter(this.items);this.filteredItems=e.matches,this._bindArrangeComplete(),this._isInstant?this._noTransition(this._hideReveal,[e]):this._hideReveal(e),this._sort(),this._layout()},l._init=l.arrange,l._hideReveal=function(t){this.reveal(t.needReveal),this.hide(t.needHide)},l._getIsInstant=function(){var t=this._getOption("layoutInstant"),e=void 0!==t?t:!this._isLayoutInited;return this._isInstant=e,e},l._bindArrangeComplete=function(){function t(){e&&i&&o&&n.dispatchEvent("arrangeComplete",null,[n.filteredItems])}var e,i,o,n=this;this.once("layoutComplete",function(){e=!0,t()}),this.once("hideComplete",function(){i=!0,t()}),this.once("revealComplete",function(){o=!0,t()})},l._filter=function(t){var e=this.options.filter;e=e||"*";for(var i=[],o=[],n=[],s=this._getFilterTest(e),r=0;r<t.length;r++){var a=t[r];if(!a.isIgnored){var u=s(a);u&&i.push(a),u&&a.isHidden?o.push(a):u||a.isHidden||n.push(a)}}return{matches:i,needReveal:o,needHide:n}},l._getFilterTest=function(t){
    return u&&this.options.isJQueryFiltering?function(e){return u(e.element).is(t)}:"function"==typeof t?function(e){return t(e.element)}:function(e){return o(e.element,t)}},l.updateSortData=function(t){var e;t?(t=n.makeArray(t),e=this.getItems(t)):e=this.items,this._getSorters(),this._updateItemsSortData(e)},l._getSorters=function(){var t=this.options.getSortData;for(var e in t){var i=t[e];this._sorters[e]=f(i)}},l._updateItemsSortData=function(t){for(var e=t&&t.length,i=0;e&&i<e;i++){var o=t[i];o.updateSortData()}};var f=function(){function t(t){if("string"!=typeof t)return t;var i=h(t).split(" "),o=i[0],n=o.match(/^\[(.+)\]$/),s=n&&n[1],r=e(s,o),a=d.sortDataParsers[i[1]];return t=a?function(t){return t&&a(r(t))}:function(t){return t&&r(t)}}function e(t,e){return t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&i.textContent}}return t}();d.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},l._sort=function(){if(this.options.sortBy){var t=n.makeArray(this.options.sortBy);this._getIsSameSortBy(t)||(this.sortHistory=t.concat(this.sortHistory));var e=a(this.sortHistory,this.options.sortAscending);this.filteredItems.sort(e)}},l._getIsSameSortBy=function(t){for(var e=0;e<t.length;e++)if(t[e]!=this.sortHistory[e])return!1;return!0},l._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw new Error("No layout mode: "+t);return e.options=this.options[t],e},l._resetLayout=function(){e.prototype._resetLayout.call(this),this._mode()._resetLayout()},l._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},l._manageStamp=function(t){this._mode()._manageStamp(t)},l._getContainerSize=function(){return this._mode()._getContainerSize()},l.needsResizeLayout=function(){return this._mode().needsResizeLayout()},l.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},l.prepended=function(t){var e=this._itemize(t);if(e.length){this._resetLayout(),this._manageStamps();var i=this._filterRevealAdded(e);this.layoutItems(this.filteredItems),this.filteredItems=i.concat(this.filteredItems),this.items=e.concat(this.items)}},l._filterRevealAdded=function(t){var e=this._filter(t);return this.hide(e.needHide),this.reveal(e.matches),this.layoutItems(e.matches,!0),e.matches},l.insert=function(t){var e=this.addItems(t);if(e.length){var i,o,n=e.length;for(i=0;i<n;i++)o=e[i],this.element.appendChild(o.element);var s=this._filter(e).matches;for(i=0;i<n;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;i<n;i++)delete e[i].isLayoutInstant;this.reveal(s)}};var c=l.remove;return l.remove=function(t){t=n.makeArray(t);var e=this.getItems(t);c.call(this,t);for(var i=e&&e.length,o=0;i&&o<i;o++){var s=e[o];n.removeFrom(this.filteredItems,s)}},l.shuffle=function(){for(var t=0;t<this.items.length;t++){var e=this.items[t];e.sortData.random=Math.random()}this.options.sortBy="random",this._sort(),this._layout()},l._noTransition=function(t,e){var i=this.options.transitionDuration;this.options.transitionDuration=0;var o=t.apply(this,e);return this.options.transitionDuration=i,o},l.getFilteredItemElements=function(){return this.filteredItems.map(function(t){return t.element})},d});

  18. #18
    Invité
    Invité(e)
    Par défaut
    Houla !!
    Inutile de mettre le script isotope : on ne va pas y toucher !

    Je parlais de la DOC : le "mode d'emploi"...

    Ton problème est difficile à reproduire (juste au 1er affichage).
    Donc : difficile à résoudre.
    On ne peut qu'emettre des hypothèses...
    Pas simple.

  19. #19
    Nouveau Candidat au Club
    Femme Profil pro
    france
    Inscrit en
    Juin 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : france

    Informations forums :
    Inscription : Juin 2018
    Messages : 10
    Points : 1
    Points
    1
    Par défaut Portfolio avec bootstrap et isotope
    Je regarde la doc demain, et éventuellement je refais un filtre de navigation.
    Je te tiens au courant.
    Merci.
    Bonne soirée.

Discussions similaires

  1. [Tutoriel] Création d'un site Portfolio avec BootStrap
    Par Guikingone dans le forum Général Conception Web
    Réponses: 33
    Dernier message: 13/09/2018, 09h32
  2. [Tutoriel] Création d'un site Portfolio avec BootStrap - Partie II
    Par Guikingone dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 13/11/2015, 10h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo