Partage
  • Partager sur Facebook
  • Partager sur Twitter

Site responsive (HTML)

Page index.html non responsive

Sujet résolu
Lou-aqp
    10 janvier 2018 à 22:20:04

    Hello la communauté Openclassrooms et bonne année !

    J'ai une question concernant un site responsive que je suis entrain de créer: j'ai téléchargé un modèle qui était déjà responsive de base : celui-ci: https://freehtml5.co/demos/fitness/index.html  mais quand j'ai fait des modifications pour le personnaliser, toutes les pages sont bien responsive sauf index.html :/ 

    J'ai comparé le code avec celui du template mais trouve pas d'où vient le problème. Est ce que vous avez une idée? 

    Je vous laisse ci-dessous le code de la page index.html au cas où !

    Merci beaucoup pour votre aide ! :)

    <!DOCTYPE html>

    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Accrovital - Le sport sur mesure</title>

    <meta name="viewport" content="Accrovital">

    <meta name="description" content="Accrovital : la salle de sport spécialiste du fitness sur mesure ! Découvrez nos offres" />

    <meta name="keywords" content="salle de sport, fitness, santé, health, remise en forme, coach" />

    <meta name="author" content="Accrovital" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="shortcut icon" href="favicon.ico">

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900' rel='stylesheet' type='text/css'>

    <!-- Animate.css -->

    <link rel="stylesheet" href="css/animate.css">

    <!-- Icomoon Icon Fonts-->

    <link rel="stylesheet" href="css/icomoon.css">

    <!-- Bootstrap  -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- Superfish -->

    <link rel="stylesheet" href="css/superfish.css">

    <link rel="stylesheet" href="css/style.css">

    <!-- Modernizr JS -->

    <script src="js/modernizr-2.6.2.min.js"></script>

    <!-- FOR IE9 below -->

    <!--[if lt IE 9]>

    <script src="js/respond.min.js"></script>

    <![endif]-->

    </head>

    <body>

    <div id="fh5co-wrapper">

    <div id="fh5co-page">

    <div id="fh5co-header">

    <header id="fh5co-header-section">

    <div class="container">

    <div class="nav-header">

    <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>

    <h1 id="fh5co-logo"><a href="index.html">Accro<span>Vital</span></a></h1>

    <!-- START #fh5co-menu-wrap -->

    <nav id="fh5co-menu-wrap" role="navigation">

    <ul class="sf-menu" id="fh5co-primary-menu">

    <li class="active">

    <a href="index.html">Accueil</a></li>

    <li><a href="lecentre.html" >Le centre</a></li>

    <li><a href="planning.html">Horaires et plannings</a></li>

    <li><a href="subscription.html">Abonnement</a></li>

    <li><a href="contact.html">Contact</a></li>

    <li><a href="https://fr-fr.facebook.com/Accrovital-Charenton-94-398638643483028/"><i class="icon-facebook2"></i></a></li>

    </ul>

    </nav>

    </div>

    </div>

    </header>

    </div>

    <!-- end:fh5co-header -->

    <div class="fh5co-hero">

    <div class="fh5co-overlay"></div>

    <div class="fh5co-cover" data-stellar-background-ratio="0.5" style="background-image: url(images/home-image.jpg);">

    <div class="desc animate-box">

    <div class="container">

    <div class="row">

    <div class="col-md-7">

    <h2>Fitness &amp; Santé <br>c'est une<b> Mentalité</b></h2>

    <p><span>Découvrez nos abonnements</span></p>

    <span><a class="btn btn-primary" href="subscription.html">Commencer</a></span>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    <!-- end:fh5co-hero -->

    <div id="fh5co-programs-section">

    <div class="container">

    <div class="row">

    <div class="col-md-8 col-md-offset-2">

    <div class="heading-section text-center animate-box">

    <h2>Nos activités</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices nulla ligula, a vehicula lacus egestas nec.</p>

    </div>

    </div>

    </div>

    <div class="row text-center">

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/fit-dumbell.svg" alt="musculation">

    <h3>Musculation</h3>

    <p>Suspendisse vel sodales felis. Pellentesque vel sollicitudin leo donec porttitor porttitor eleifend.</p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/fit-yoga.svg" alt="Yoga">

    <h3>Yoga</h3>

    <p>Suspendisse vel sodales felis. Pellentesque vel sollicitudin leo donec porttitor porttitor eleifend. </p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/abs.png" alt="Abdos fessiers">

    <h3>Abdos Fessiers</h3>

    <p>Suspendisse vel sodales felis. Pellentesque vel sollicitudin leo donec porttitor porttitor eleifend. </p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/fit-boxing.svg" alt="Boxe">

    <h3>Boxe</h3>

    <p>Suspendisse vel sodales felis. Pellentesque vel sollicitudin leo donec porttitor porttitor eleifend. </p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/attack.png" alt="Arts Martiaux">

    <h3>Arts Martiaux</h3>

    <p>Suspendisse vel sodales felis. Pellentesque vel sollicitudin leo donec porttitor porttitor eleifend. </p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    <div class="col-md-4 col-sm-6">

    <div class="program animate-box">

    <img src="images/dancer.png" alt="Zumba">

    <h3>Zumba</h3>

    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>

    <span><a href="subscription.html" class="btn btn-default">Adhérez</a></span>

    </div>

    </div>

    </div>

    </div>

    <div id="fh5co-blog-section">

    <div class="container">

    <div class="row">

    <div class="col-md-6">

    <div class="col-md-12">

    <div class="heading-section animate-box">

    <h2>Articles du Blog</h2>

    </div>

    </div>

    <div class="col-md-12 col-md-offset-0">

    <div class="fh5co-blog animate-box">

    <div class="inner-post">

    <a href="https://www.google.fr/"><img class="img-responsive" src="images/blog-1.jpg" alt=""></a>

    </div>

    <div class="desc">

    <h3><a href="https://www.google.fr/">Préparez votre corps pour l'été</a></h3>

    <span class="posted_by">Ecrit par: Michelle Lewin</span>

    <span class="commentaires"><a href="">21<i class="icon-bubble22"></i></a></span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

    <a href="https://www.google.fr/" class="btn btn-default">Lire l'article</a>

    </div> 

    </div>

    </div>

    <div class="col-md-12 col-md-offset-0">

    <div class="fh5co-blog animate-box">

    <div class="inner-post">

    <a href="https://www.google.fr/"><img class="img-responsive" src="images/blog-2.jpg" alt=""></a>

    </div>

    <div class="desc">

    <h3><a href="https://www.google.fr/">Affiner ses cuisses</a></h3>

    <span class="posted_by">Posté par Tibo Inshape</span>

    <span class="commentaires"><a href="">21<i class="icon-bubble22"></i></a></span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

    <a href="https://www.google.fr/" class="btn btn-default">Lire l'article</a>

    </div> 

    </div>

    </div>

    </div>

    <div class="col-md-6">

    <div class="col-md-12">

    <div class="heading-section animate-box">

    <h2>Evènements à venir</h2>

    </div>

    </div>

    <div class="col-md-12 col-md-offset-0">

    <div class="fh5co-blog animate-box">

    <div class="meta-date text-center">

    <p><span class="date">15</span><span>Janvier</span><span>2018</span></p>

    </div>

    <div class="desc desc2">

    <h3><a href="https://www.google.fr/">Marathon de Paris</a></h3>

    <span class="posted_by">Posté par Lucile Woodward</span>

    <span class="comment"><a href="">21<i class="icon-bubble22"></i></a></span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing</p>

    <a href="https://www.google.fr/" class="btn btn-default">En savoir plus</a>

    </div> 

    </div>

    </div>

    <div class="col-md-12 col-md-offset-0">

    <div class="fh5co-blog animate-box">

    <div class="meta-date text-center">

    <p><span class="date">13</span><span>Juin</span><span>2018</span></p>

    </div>

    <div class="desc desc2">

    <h3><a href="https://www.google.fr/">Paris vélo-tour</a></h3>

    <span class="posted_by">Posté par David Roussillon</span>

    <span class="commentaires"><a href="">21<i class="icon-bubble22"></i></a></span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet  </p>

    <a href="https://www.google.fr/" class="btn btn-default">En savoir plus</a>

    </div> 

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    <!-- fh5co-blog-section -->

    <footer>

    <div id="footer">

    <div class="container">

    <div class="row">

    <div class="col-md-6 animate-box">

    <h3 class="section-title">A propos</h3>

    <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas rutrum justo fringilla ultricies. Curabitur tristique eros libero, et porttitor diam pharetra et. Phasellus efficitur nisl eu mattis venenatis.Praesent eget tristique nibh. Aenean dignissim, orci vel elementum aliquam, arcu orci condimentum mauris, in egestas lectus arcu eu sem.  </p>

    </div>

    <div class="col-md-6 animate-box">

    <h3 class="section-title">Nous trouver</h3>

    <ul class="contact-info">

    <li><i class="icon-map-marker"></i>157, rue de Paris - 94220 Charenton le Pont</li>

    <li>Metro ligne 8, station Liberté - Bus 180</li>

    <li><i class="icon-phone"></i><a href="tel:+33143687900" class=”mobilesOnly”>01 43 68 79 00</a></li>

    <li><i class="icon-envelope"></i><a href="#">info@accrovital.com</a></li>

    <li><i class="icon-globe2"></i><a href="#">www.accrovital.com</a></li>

    </ul>

    </div>

    </div>

    <div class="row copy-right">

    <div class="col-md-6 col-md-offset-3 text-center">

    <p>Copyright 2017 <a href="#">Accrovital</a>. All Rights Reserved. <br>Made with <i class="icon-heart3"></i> by <a href="http://freehtml5.co/" target="_blank">Accrovital</a> </p>

    </div>

    </div>

    </div>

    </div>

    </footer>

    </div>

    <!-- END fh5co-page -->

    </div>

    <!-- END fh5co-wrapper -->

    <!-- jQuery -->

    <script src="js/jquery.min.js"></script>

    <!-- jQuery Easing -->

    <script src="js/jquery.easing.1.3.js"></script>

    <!-- Bootstrap -->

    <script src="js/bootstrap.min.js"></script>

    <!-- Waypoints -->

    <script src="js/jquery.waypoints.min.js"></script>

    <!-- Stellar -->

    <script src="js/jquery.stellar.min.js"></script>

    <!-- Superfish -->

    <script src="js/hoverIntent.js"></script>

    <script src="js/superfish.js"></script>

    <!-- Main JS (Do not remove) -->

    <script src="js/main.js"></script>

    </body>

    </html>

    • Partager sur Facebook
    • Partager sur Twitter
    Lamecarlate
    • HTML / CSS
      10 janvier 2018 à 22:54:30

      Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement.
      Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
      Pour plus d'informations, nous vous invitons à lire les règles générales du forum

      Merci d'utiliser les balises de code

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton Image . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

      LeChevalierD_Or
      • HTML / CSS
        10 janvier 2018 à 22:58:34

        Balise code 😒

        • Partager sur Facebook
        • Partager sur Twitter
        Je suis quelqu’un de patient et de très stratégique . Je suis Militaire opérateur tourelle chars Leclerc ! !

        Site responsive (HTML)

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown