Le reseau V2

In this example below you will see how to do a Le reseau V2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 10tribu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 10tribu ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Le reseau V2</title>
  <!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://reseau-bond.fr/wp-content/themes/mimian/css/style.css'>
<link rel='stylesheet prefetch' href='https://reseau-bond.fr/wp-content/themes/bond-child/style.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

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

  
</head>

<body>

  <nav class="navbar navbar-light bg-light sticky-top">
  <a role="button" href="#" class="navbar-brand"><img class="responsive-img" src="//reseau-bond.fr/wp-content/uploads/2017/09/logo.svg" alt="Logo"></a>
  <div class="my-2 my-lg-0">
    <div class="btn-group" style="z-index: 20;">
      <span class="fa-layers fa-fw fa-2x notification" data-toggle="dropdown" id="notif" aria-haspopup="true" aria-expanded="false">
        <a role="button" href="#" >
          <i data-fa-transform="shrink-6 " data-fa-mask="fas fa-circle" class="fas fa-bell" ></i></a>
        <span class="fa-layers-counter fa-lg" >19</span>
      </span>
      <div class="dropdown-menu" aria-labelledby="notif">
        <h5 class="dropdown-header">Vos notifications</h5>
        <div role="separator" class="dropdown-divider"></div>
        <div class="list-group notif">
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small>3 days ago</small>
            </div>
            <small>Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small>3 days ago</small>
            </div>
            <small>Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small>3 days ago</small>
            </div>
            <small>Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small>3 days ago</small>
            </div>
            <small>Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1">List group item </h6>
              <small class="text-muted">3 days ago</small>
            </div>
            <small class="text-muted">Donec id elit non mi porta.</small>
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </a>
          <div class="container"><button type="button" class="btn btn-dark btn-block">Voir toutes les notifications</button></div>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <a class="img-profil" role="button" href="#" id="profil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img class="rounded-circle " src="https://placeimg.com/100/100/people10" alt="Generic placeholder image" width="50" height="50">
        </a>
      <div class="dropdown-menu" aria-labelledby="profil">
        <div class="card profil">
          <div class="card-body">
            <h5 class="card-title">John Doe</h5>
            <p class="card-text text-muted">Membre</p>
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><a href="#">Cras justo odio</a></li>
            <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
            <li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
            <li class="list-group-item"><a href="#">Cras justo odio</a></li>
            <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
            <li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
          </ul>
          <div class="card-body">
            <a href="#" class="card-link btn btn-info">Profil</a>
            <a href="#" class="card-link btn btn-warning">Déconnexion</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
<div class="container has-margin-bottom">
  <div id="top" class="jumbotron p-2 p-md-2 rounded ">
    <div class="input-group mb-4">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mon groupe</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Tout les groupes</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Groupe A</a>
          <a class="dropdown-item" href="#">Groupe B</a>
          <a class="dropdown-item" href="#">Groupe C</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Chercher une entreprise, une activité, un contact...">
    </div>
    <div class="row mb-2 mt-4 card-columns resultat">
      <div class="col-xl-4 col-md-6 col-sm-12">
        <div class="card text-center flex-md-row mb-2 box-shadow h-md-125">
          <div class="card-header entreprise">Sarl tres long nom d'entreprise</div>
          <!-- Avant <img class="card-img-left ets-img flex-auto d-md-block" data-src="holder.js/200x100?theme=thumb" alt="Thumbnail"  src="https://placeimg.com/150/80/arch1" data-holder-rendered="true">-->
          <span class="card-img-left ets-img flex-auto d-md-block">
            <span class="helper"></span>
            <img class="" data-src="holder.js/200x100?theme=thumb" alt="Thumbnail"  src="https://placeimg.com/150/80/arch1" data-holder-rendered="true">
          </span>
          <!-- Fin -->
          <div class="card-body d-flex flex-column align-items-start">
            <div class="info-contact">
              <span class="contact-img">
                <span class="img-holder dr-color">
                  <img class="rounded-circle " src="https://placeimg.com/100/100/people1" alt="Generic placeholder image" width="60" height="60"></span>
              </span>
              <p class="card-text mb-auto contact-name">David james.</p>
              <div class="mb-1 text-muted contact-post">Directeur regional</div>
              <p class="card-text mb-auto contact-activite">Spécialiste lettrage autocollant</p>
            </div>
          </div>
          <ul class="list-group list-group-flush action-rapide">
            <li class="list-group-item" data-toggle="tooltip" data-placement="right" title="Appeler"><a href="#"><i data-fa-transform="up-4 grow-6" class="fas fa-phone"></i></a></li>
            <li class="list-group-item" data-toggle="tooltip" data-placement="right" title="Envoyer un mail"><a href="#"><i data-fa-transform="up-4 grow-6" class="fas fa-envelope"></i></a></li>
            <li class="list-group-item" data-toggle="tooltip" data-placement="right" title="Plus d'action"><a href="#" data-toggle="modal" data-target="#exampleModal"><i data-fa-transform="up-4 grow-6" class="fas fa-plus-circle"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<footer class="footer-area section-padding navbar fixed-bottom">
  <a id="scrollTop" href="#top"><i class="fa fa-angle-up"></i></a>
  <div class="container text-center">
    <div class="col-sm-12 col-xs-12">
      <span class="bloc-center mt-2"><small>Tous droits réservés bond 2018 - by <a title="agence de communication globale" class="designby" target="_blank" href="http://www.effissens.com/">effissens</a></small></span>
    </div>
  </div>
</footer>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Actions supplémentaires</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="list-group list-group-flush fa-ul">
          <li class="list-group-item ">
            <a href="#"><i data-fa-transform="down-3" class="fas fa-handshake fa-2x"></i> Recommandation</a></li>
          <li class="list-group-item">
            <a href="#">
                <span  class="fa-layers fa-fw fa-2x ">
                  <i data-fa-transform="down-3" class="fas fa-calendar "></i>
                  <span class="fa-layers-text fa-inverse " data-fa-transform="shrink-8 down-6" style="font-weight:900">27</span>
                </span> Prendre un Rdv</a></li>
          <li class="list-group-item">
            <a href="#"><i data-fa-transform="down-3" class="fas fa-eye fa-2x"></i> Voir la fiche du Membre</a></li>
        </ul>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src='https://use.fontawesome.com/releases/v5.0.8/js/all.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/10tribu/le-reseau-v2-oqNmQe */
:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
a {
  color: #344e9d;
}
a:hover {
  color: #1c2a50;
}
input.form-control {
  line-height: 0;
  height: 36px;
  margin-top: 31px;
}
/*style bond */
.mainmenu-area {
  background-color: #ffffff !important;
}
.mainmenu-area .navbar-nav > li > a {
  color: #344e9d !important;
}
.modal-body .list-group-item a {
  color: #344e9d;
}
.modal-body .list-group-item a:hover {
  color: #f0ad4e;
}
.mainmenu-area ul.nav.navbar-nav > li a:after {
  background-color: #000000;
}
.footer {
  color: #ffffff;
}
.text-center {
  text-align: center;
}
#scrollTop {
  background-color: #344e9d;
  border-color: ;
  color: ;
}
.footer-area {
  background-color: #344e9d;
  min-height: 100px;
}
body {
  background: #e9ecef;
}
.resultat card a:hover {
  color: #fff;
}
.profil,
#profil + .dropdown-menu,
.notif {
  width: 250px;
}
.notif {
  overflow: auto;
  max-height: 400px;
  display: block;
  height: auto;
}
.profil {
  margin-top: -75px;
}
a#profil {
  margin-right: 10px;
}
.notification + .dropdown-menu {
  margin-top: -40px;
  margin-right: -20px;
}
button.btn.btn-outline-secondary.dropdown-toggle {
  background: #e6e6e6;
}
.img-profil img {
  box-shadow: 0 0 0px 5px #344e9d;
}
.notification {
  margin-right: -20px;
}
.notification a {
  background: white;
  border-radius: 50%;
  display: block;
  height: 32px;
  width: 32px;
  margin: 0;
  padding: 0;
}
.navbar .dropdown-menu {
  right: 0;
  left: auto;
  z-index: -1;
}
.notification a {
  color: #344e9d;
}
a.img-profil:hover img {
  box-shadow: 0 0 0px 5px #f0ad4e;
}
.notification a:hover {
  color: #f0ad4e;
  z-index: 20;
}
.notification .fa-layers-counter {
  t: Tomato;
  top: 0px;
  right: 25px;
  text-align: center;
  vertical-align: middle;
  padding: 12px;
}
.btn-group.show .fa-layers-counter {
  display: none;
}
.resultat .card {
  background-color: #344e9d;
  color: #fff;
  border: none;
  transition: all 0.5s var(--ease-out-quart);
}
.container:hover .resultat .card:not(:hover) {
  opacity: 0.85;
  -webkit-filter: grayscale(60%);
          filter: grayscale(60%);
  transition: all 1s var(--ease-out-quart);
}
.resultat .card-header.entreprise {
  padding: 6px 25px 6px 4px;
  margin-bottom: 0;
  background-color: white;
  border-bottom: 0px solid #344e9d;
  border-top: 3px solid #344e9d;
  position: absolute;
  display: block;
  z-index: 1;
  color: #385198;
  width: 70%;
  transition: all 0.5s var(--ease-out-quart);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ets-img {
  margin-top: 30px;
}
.ets-img img {
  width: 50%;
}
.ets-img img::before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}
.ets-img img::after {
  content: "";
  display: block;
  clear: both;
}
.resultat .card .card-body {
  padding: 0;
  width: 50%;
}
.contact-img {
  position: relative;
}
.contact-img .dr-color img {
  box-shadow: 0 0 0px 3px #f0ad4e;
}
.contact-img .dg-color img {
  box-shadow: 0 0 0px 3px #b2b2b2;
}
.contact-img .pg-color img {
  box-shadow: 0 0 0px 3px #986c38;
}
.contact-img .mb-color img {
  box-shadow: 0 0 0px 3px #344e9d;
}
.info-contact {
  position: absolute;
  top: 3px;
  left: 50%;
  max-width: 140px;
  z-index: 2;
  transition: all 0.5s var(--ease-out-quart);
}
.fav {
  position: absolute;
  right: 0px;
  background: #f0ad4e;
  width: 22px;
  height: 22px;
  color: white;
  box-shadow: 0 0 0px 2px white;
  font-size: 13px;
  transition: all 0.5s var(--ease-out-quart);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.disable.fav {
  background: grey;
  z-index: -1;
  right: -11px;
  transition: all 0.5s var(--ease-out-quart);
}
.resultat .card:hover .disable.fav {
  z-index: 0;
}
.fav:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.contact-name {
  font-size: 14px;
  margin-top: 5px;
}

.contact-post.text-muted {
  font-size: 10px;
  color: lightgray !important;
}
.contact-activite {
  font-size: 10px;
}
.action-rapide {
  opacity: 0;
  position: absolute;
  right: -20px;
  top: 0;
  transition: all 0.5s var(--ease-out-quart);
}
.action-rapide li.list-group-item {
  padding: 10px;
  background: transparent;
}
.action-rapide a {
  padding: 8px;
  display: block;
  background: #1c2a50;
  border-radius: 8px;
  color: #8e9bbf;
  max-width: 32px;
  max-height: 32px;
}
.action-rapide a:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  color: white;
}

.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
.resultat .card:hover .action-rapide {
  opacity: 1;
  z-index: 20;
  right: 0px;
  transition: all 0.2s var(--ease-out-quart);
}
.resultat .card:hover {
  z-index: 200;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}
.resultat .card:hover .info-contact {
  left: 45%;
  transition: all 0.2s var(--ease-out-quart);
}
.resultat .card:hover .card-header.entreprise {
  width: 66%;
  transition: all 0.2s var(--ease-out-quart);
}
@media (max-width: 768px) {
  .info-contact {
    position: relative;
  }
  .resultat .card {
    flex-direction: row;
  }
  .action-rapide {
    opacity: 1;
    right: 0px;
  }
  .resultat .card .info-contact,
  .resultat .card:hover .info-contact {
    left: 30%;
    top: -2px;
  }
  .resultat .card .card-header.entreprise,
  .resultat .card:hover .card-header.entreprise {
    width: 63%;
  }
}
/* correction */
.ets-img {
  width: 125px;
  height: 120px;
  display: block;
  position:relative;
  background: white;
  margin-top: 39px;
  overflow:hidden;
  white-space: nowrap;
}
.ets-img img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin-left: -4px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*Downloaded from https://www.codeseek.co/10tribu/le-reseau-v2-oqNmQe */
// Initialize tooltip component
$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

// Initialize popover component
$(function() {
  $('[data-toggle="popover"]').popover();
});
// toggle pour les favoris
$(".fav").click(function() {
  $(this).toggleClass("disable", "");
});

Comments