Partage
  • Partager sur Facebook
  • Partager sur Twitter

Manque d'inspiration pour un catalogue de vidéo

Sujet résolu
methos0
    9 août 2018 à 9:57:49

    Bonjour,

    Je suis en train de réaliser un site pour mon père qui voudrait faire des vidéo d'équitation sur son site. Mais je manque cruellement d'inspiration pour que cela soit joli. Je n'ai aucune contrainte, je dois juste lui faire son catalogue de vidéo avec le titre de la vidéo, une miniature (ou photo qui représente le theme), et une petite description.

    Si vous auriez des exemples de site design se serait super cool pour que je puisse m'en inspirer !

    Merci d'avance

    Methos

    • Partager sur Facebook
    • Partager sur Twitter
    exen
      9 août 2018 à 21:21:42

      Bonsoir, j'ai cru lire que tu avais déjà un site donc ce qui serrais bien c'est de voir à quoi il ressemble pour que la charte graphique de ta galerie colle à celle de ton site, si tu veut rajouter du style je vais te montrer la partie portfolio de rhooManu .

      https://www.emmanuelbeziat.com/portfolio

      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

      methos0
        13 août 2018 à 9:54:49

        Bonjour, 

        Merci pour la réponse, ton si est super jolie :D 

        Moi j'apprend, je suis auto didacte :o, j'ai déjà fait deux autres sites. Pour le moment voila ce que j'ai fait.

        Je sais que j'ai encore des trucs a modifié notamment la police des titres mais c'est pas le plus dur :D

        J'avais pensais a un catalogue dans ce style:

        https://openclassrooms.com/fr/courses

        Mais un peu plus épuré, avec uniquement deux éléments par ligne et sans espace entre les éléments.

        Methos

        • Partager sur Facebook
        • Partager sur Twitter
        exen
          14 août 2018 à 17:40:14

          Bonjour,

          et desolé de ne pas t'avoir répondu plus tôt.

          Ce genre de style tu est dans ce que l'on appelle le material design.

          Tu peut arriver à ce genre de résultat avec materializecss.

          A la section card https://materializecss.com/cards.html

          • Partager sur Facebook
          • Partager sur Twitter

          Compos sui.

          exen
            15 août 2018 à 19:37:14 

             <!DOCTYPE html>
  <html lang="fr">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Materialize Rc2</title>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!-- ///// CDN \\\ -->
          <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
        
        <!-- ///////   OFF-Line   \\\\\\ -->

      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="css/galocr.css"  media="screen,projection"/>
 
      <!--s<META HTTP-EQUIV="Refresh" CONTENT="15" />-->
 
      <style type="text/css">
nav {
 background:#fafafa;
}
.nav-wrapper a{
  font-family: 'Dancing Script', cursive;
  font-size: 1.2em!important;
  color: #f0dd5a!important;
  text-shadow: 0 0 0.2em #474744, 0 0 0.2em #474744,
        0 0 0.2em #f0dd5a!important;
} 
.logods{
  font-family: 'Dancing Script', cursive;
  font-size: 1.2em!important;
  color: #f0dd5a!important;
  text-shadow: 0 0 0.2em #474744, 0 0 0.2em #474744,
        0 0 0.2em #f0dd5a!important;
 
}
.p1{
  padding-left: 1vw;
  padding-right: 1vw;
}
.brand-logo{
  font-style: oblique;
  margin-left: 1vw;
}
 
.acardv{
  font-family: 'Dancing Script', cursive;
  font-size: 1.2em;
  color: #f0dd5a;
  text-shadow: 0 0 0.2em #474744, 0 0 0.2em #474744,
  0 0 0.2em #f0dd5a;
}
 
 
/* ////////// SHADOW'S \\\\\\\\\\\\\\ */
.hoverable {
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
}
 
.hoverablej:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(232, 206, 87, 0.6), 0 6px 20px 0 rgba(232, 206, 87, 0.9);
          box-shadow: 0 8px 17px 0 rgba(232, 206, 87, 0.6), 0 6px 20px 0 rgba(232, 206, 87, 0.9);
}
 
 
.hoverable1:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(221, 120, 36, 0.6), 0 6px 20px 0 rgba(221, 120, 36, 0.9);
          box-shadow: 0 8px 17px 0 rgba(221, 120, 36, 0.6), 0 6px 20px 0 rgba(221, 120, 36, 0.9);
}
 
.hoverable3:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(255, 160, 0, 0.6), 0 6px 20px 0 rgba(255, 160, 0, 0.7);
          box-shadow: 0 8px 17px 0 rgba(255, 160, 0, 0.6), 0 6px 20px 0 rgba(255, 160, 0, 0.7);
}
.hoverable4:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(230, 238, 156, 0.6), 0 6px 20px 0 rgba(230, 238, 156, 0.9);
          box-shadow: 0 8px 17px 0 rgba(230, 238, 156, 0.6), 0 6px 20px 0 rgba(230, 238, 156, 0.9);
}
 
 
 
 
 
 
@media screen and (min-width: 600px){
.zoom1{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.zoom1:hover{
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.brand-logo{
  font-style: oblique;
  
}
 
 
}
         
 
 
 
      </style>
    </head>
 
 
 

 
     <body class="yellow lighten-4">
 
  <nav>
      <div class="nav-wrapper ">
      <a href="#" class="brand-logo logods ">Galerie</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#">Forum</a></li>
        <li><a href="#">Connexion</a></li>
        <li><a href="#">Inscription</a></li>
      </ul>
    </div>
  </nav>
 
<div class="row">
 
    <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/1.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card1<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
        <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/6.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card2<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
        <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/2.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card3<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
        <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/1.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card4<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
 
        <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/6.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card5<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
            <div class="col s12 m4 l4 xl4">
<div class="card hoverablej zoom1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="img/1.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card6<i class="material-icons right">more_vert</i></span>
      <p><a class="acardv" href="#">Lancer la vidéo</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">06/2018<i class="material-icons right">close</i></span>
      <p><a class="acardv" href="#">Regarder la vidéo</a><br/>Voici la description de ma superbe video, ou l’on y vois TornadoVI y remporter le grand derby de Joué-lès-Tours.
</p>
    </div>
  </div>
    </div>
 
 
</div>
 
 
  </div>
<div class="row">
<p class="p1 text-grey darken-1-text ">
 
Lorem Ipsum
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"Il n’y a personne qui n’aime la souffrance pour elle-même, qui ne la recherche et qui ne la veuille pour elle-même…"
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac elit mattis, sollicitudin nisl nec, condimentum erat. Ut sit amet lorem ut elit euismod mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec in elementum magna. Mauris semper vel nisi cursus accumsan. Vivamus feugiat elementum tellus eget euismod. Mauris vehicula bibendum nulla, ut ornare tortor pharetra in. Proin auctor erat tellus, id finibus ante luctus sed. Aenean vel libero neque. Aliquam porta erat vel volutpat bibendum. Fusce nisl urna, vestibulum non mi id, fringilla rhoncus lorem. Pellentesque quis nisi et ipsum blandit hendrerit. Aliquam dui eros, feugiat id dapibus vitae, fringilla et arcu. Suspendisse volutpat diam lacus, at pharetra sapien eleifend in.
 
Aliquam maximus nibh vel turpis sodales volutpat. Morbi ac pretium est. Aliquam mollis massa eu facilisis bibendum. Phasellus pharetra efficitur aliquet. Nam viverra elit arcu, eu placerat mi lacinia non. Sed finibus suscipit interdum. Curabitur cursus condimentum neque in volutpat. Duis et facilisis massa, eget interdum ex. Vivamus blandit est dolor, aliquet malesuada elit pharetra in. Cras facilisis gravida sapien, vel varius elit. Donec eget metus a quam aliquet semper at ut felis. Quisque at iaculis dui, in maximus turpis. Curabitur sit amet odio ac dui blandit posuere. Curabitur volutpat volutpat tempor. Nunc nec augue turpis. Aenean vel luctus sapien, at tristique nisl.
 
Sed iaculis finibus sem, sed aliquam purus. Mauris congue tempor cursus. Morbi maximus, dolor sed tristique egestas, elit diam lobortis dolor, eu malesuada dui tellus in lorem. Nulla iaculis elementum justo consectetur aliquet. Fusce in sapien porta augue iaculis congue vel id nunc. Etiam nec ante dictum felis laoreet interdum a et orci. Nullam consectetur nibh arcu, id ultricies eros pharetra vitae. Donec eget mattis dui. Integer orci mi, vestibulum id consequat a, semper interdum dui. Morbi at nulla tortor. Morbi eu ipsum tempus, lacinia lectus vel, vehicula ipsum.
 
Vestibulum venenatis eleifend dui, id viverra sapien maximus sit amet. Maecenas ultrices nibh odio, eu consequat nisl viverra ac. Integer tempor rutrum luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere leo turpis, ut fringilla risus dictum sit amet. Morbi vel elementum sem. Duis congue eros at odio lobortis suscipit ut sed sapien. Morbi eu nunc vel metus pulvinar luctus et nec erat. Phasellus eu velit vestibulum, varius risus at, varius urna. Nunc sagittis scelerisque tempus. Nunc cursus, libero ut semper accumsan, dolor magna aliquet velit, vitae venenatis elit tellus vel purus. Vestibulum tempus quis neque at placerat. Nam tincidunt odio semper, imperdiet mauris quis, vulputate orci. Aliquam elit orci, aliquam sed eros ut, pulvinar porta mauris.
 
Nunc eget nisl vel magna auctor interdum. Ut consequat, dui sit amet gravida consequat, ante metus finibus nibh, id elementum erat erat id tortor. Duis augue neque, dapibus id pellentesque quis, sagittis et urna. Nullam in tellus sit amet sapien elementum vulputate. Sed nec nulla lorem. Integer quis arcu sagittis, gravida urna sit amet, tincidunt eros. Aliquam justo eros, venenatis consectetur lobortis non, vehicula quis lacus. Praesent a est a libero fringilla lobortis sed a orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, metus id posuere dignissim, arcu dui sollicitudin purus, et ullamcorper sapien nisl nec eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent venenatis lectus ac felis vehicula, vel tincidunt nisi viverra. Ut id sapien at purus sollicitudin elementum sit amet eget lacus. Curabitur eget imperdiet lectus. Proin sodales velit et tincidunt fringilla.
 
</p>
</div>
<div class="row">
 
  <div class="col s12 m12 l6 xl3">
    <div class="card hoverable1 zoom1 orange darken-3">
      <a href="#" >
        <div class="card-content">
          <span class="center-align card-title white-text">
           Forum
           </span>
          <div class="center center-align">
        <i class=" center-align large material-icons orange-text text-lighten-1">group</i>
       </div>
      </div>
     </a> 
    </div>
    </div>
 
  <div class="col s12 m12 l6 xl3">
    <div class="card hoverable3 zoom1 amber">
      <a href="#" >
        <div class="card-content">
          <span class="center-align card-title white-text">
           Connexion
           </span>
          <div class="center center-align">
        <i class=" center-align large material-icons amber-text text-lighten-3">airplay</i>
       </div>
      </div>
     </a> 
    </div>
    </div>
 
  <div class="col s12 m12 l6 xl3">
    <div class="card hoverable3 zoom1 orange accent-2">
      <a href="#" >
        <div class="card-content">
          <span class="center-align card-title white-text">
           Inscription
           </span>
          <div class="center center-align">
        <i class=" center-align large material-icons orange-text text-lighten-4">create</i>
       </div>
      </div>
     </a> 
    </div>
  </div>
 
  <div class="col s12 m12 l6 xl3">
    <div class="card hoverable4 zoom1 lime darken-1">
      <a href="#" >
        <div class="card-content">
          <span class="center-align card-title white-text">
           Home
           </span>
          <div class="center center-align">
        <i class=" center-align large material-icons lime-text text-lighten-3">account_balance</i>
       </div>
      </div>
     </a> 
    </div>
    </div>
 
</div>
 
<script type="text/javascript">
 
      </script>
      <!--JavaScript at end of body for optimized loading-->
      <!-- ////////////////////////////////////////////////-->
   
      <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
      <!--JavaScript at end of body for optimized loading-->

      <!-- ///// CDN \\\ -->

     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
     <!-- ///// OFF-Line \\\ -->
     <!--
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript" src="js/mon.js"></script>
    -->
    </body>
  </html>



             Par exemple vu que je le testais, pour que tu vois comment peuvent se comporter les cadres.

            EDIT : Je viens de m’apercevoir que je n'avais pas posé la feuille avec les CDN.

            -
            Edité par exen 17 août 2018 à 15:47:34

            • Partager sur Facebook
            • Partager sur Twitter

            Compos sui.

            methos0
              16 août 2018 à 11:18:40

              merci pour ta réponse :D

              ça te semble correcte comme cela ?

              • Partager sur Facebook
              • Partager sur Twitter
              exen
                16 août 2018 à 12:33:51

                Oui c'est super, je trouve que ca s'accorde parfaitement avec le style de ta page d’accueil.

                Je suis curieux tu l'a fait avec ?

                • Partager sur Facebook
                • Partager sur Twitter

                Compos sui.

                methos0
                  16 août 2018 à 12:46:07

                  Merci :D 

                  J'ai codé moi même la page si j'ai bien compris la question en utilisant les flex-box :D

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Manque d'inspiration pour un catalogue de vidéo

                  × 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