Bonjour,
j'ai codé le template de mon portfolio sous Bootstrap. Il s'agit de mon premier design sous Bootstrap et je me permet de vous demandez des pistes d'améliorations pour que celui-ci soit optimal à 100%.
Jusque maintenant, la structure est faite et s'adapte parfaitement sur mobile et pc.
Lien de test: http://www.eeckhout.me/asset/file/bootstrap/index.html
Code HTML:
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 | <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="container"> <h1>Alexandre Eeckhout </h1> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </header> <nav> <div class="container"> <div class="row"> <!-- création d'une ligne --> <div class="link col-md-4"> <p><!-- 8 colonnes pour la zone principale --> Bloc 1 </p> </div> <div class="link col-md-4"> <p><!-- 8 colonnes pour la zone principale --> Bloc 2 </p> </div> <div class="link col-md-4"> <p><!-- 8 colonnes pour la zone principale --> Bloc 3 </p> </div> </div> </div> </nav> <div class="clear"></div> <section class="container"> <div class="row"> <div class="link col-md-12"> <h2>cOUCOu</h2> <p>In consectetur quam nec erat condimentum, at tristique elit mattis. Etiam sit amet placerat ipsum. Pellentesque at pharetra orci. Curabitur porttitor hendrerit ante. Morbi in consectetur eros. Suspendisse ac turpis ante. Praesent ornare diam magna, ac mattis mauris pellentesque vel.</p> </div> </div> </section> <footer class="container"> <p>Copyright</p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> |
Code CSS:
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 | @charset "utf-8"; nav .link:nth-child(1) { background-color: rgb(79,197,247); border-bottom: 4px solid rgb(77, 179, 222); ; } nav .link:nth-child(2) { background-color: rgb(251,177,82); border-bottom: 4px solid rgb(221, 150, 57); ; } nav .link:nth-child(3) { background-color: #dc5f2e; border-bottom: 4px solid #c85527; } .container { width: 1000px; } body nav { width: 100%; height: 105px; background-color: rgb(229, 77, 102); border-bottom: 4px solid rgb( 220, 53, 80); } nav .link { height: 105px; } header { background-color: rgb(57,66,99); } body { background-color: #20243d; color: white; } section { background-color: white; color: rgb(140,140,140); } footer { background-color: rgb(229, 77, 102); color: white; height: 40px; line-height: 40px; border-top: 4px solid rgb(211, 59, 84); } .clear { clear: both; } @media (max-width:999px){ nav .link { height: 50px; line-height: 50px; text-align: center; } body nav { height: 150px; } .container { width: 100%; } } |
Merci d'avance pour votre aide PS: Je ne sais pas mettre le code en secret pour ne pas surcharger la page :-/
+0
-0