cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- Offscreen zoom nav idea forked from https://codepen.io/chriswrightdesign/details/GwfEq/ by Chris Wright -->
<!-- This is a WORK IN PROGRESS -->
<div class="layout container">
  <span class="webdings" ></span>
  <button type="button" class="btn btn-secondary toggler">
    <i class="fa"></i>
  </button>
  <main class="main row">
    <div class="content vcard col d-flex justify-content-center">
      <div class="corner-ribbon top-left sticky bg-inverse text-white shadow hidden-print" title="Moins de 20 euros bruts de l'heure négociables" data-toggle="tooltip" data-placement="right" itemprop="priceRange"><a class="paypal" href="https://www.paypal.me/HubertSouchaud/20" target="_blank">≤20€/h</a></div>
      <div class="align-self-center">
        <h1 itemprop="member" itemscope="itemscope" itemtype="http://schema.org/Person">
          <img class="photo sr-only" itemprop="image" src="http://hubertsouchaud.free.fr/Hubert-Souchaud.jpg" alt="Hubert Souchaud" data-pin-description="#Webdev - Webmaster Freelance" data-pin-media="http://hubertsouchaud.free.fr/Hubert-Souchaud-480x480.jpg" />
          <span class="fn org" itemprop="name"><span class="given-name" itemprop="givenName">Hubert</span> <span class="family-name" itemprop="familyName">Souchaud</span></span> <br />
          <small><a href="http://hubertsouchaud.free.fr" class="url" rel="me" itemprop="url" title="web, serveur, print, audio/video, réseau, câblage" data-toggle="tooltip" data-placement="bottom"><em class="note" itemprop="description">Webmaster Freelance</em></a> <meta class="category" itemprop="jobtitle" content="Développeur web" /></small>
        </h1>
        <address>
          <p itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
            <a itemprop="hasMap" href="https://www.google.com/maps/place/Hubert+Souchaud/@46.581446,0.3496533,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x83cbdbf15430417b!8m2!3d46.581446!4d0.351842?hl=fr" data-toggle="modal" data-target=".map-modal" title="Voir la carte"><i class="fa fa-map-marker" aria-hidden="true"></i><meta itemprop="geo" content="46.5814457,0.3518422" /></a>
            <span class="street-address" itemprop="streetAddress">26 Grand'Rue</span> <br>
            <span class="postal-code" itemprop="postalCode">86000</span> <span class="locality" itemprop="addressLocality">Poitiers</span>, <span class="country-name" itemprop="addressCountry">France</span> 
          </p>
          <p class="call" id="cellular">
            <span class="flex"><a class="zoom" href="#mobile" title="Appeler mon numéro de téléphone mobile"><i id="mobile-ico" class="fa fa-mobile" aria-hidden="true"></i></a></span> <span id="mobile" class="tel" itemprop="telephone">+33 6 51 09 70 69</span><a href="#mobile-ico" class="ico-close" title="Close" aria-label="Close dialog">&times;</a>
          </p>
          <p class="call" id="landline">
            <span class="flex"><a class="zoom" href="#phone" title="Appeler mon numéro de téléphone fixe"><i id="phone-ico" class="fa fa-phone" aria-hidden="true"></i></a></span> <span id="phone" class="tel" itemprop="telephone">+33 9 50 10 94 79</span><a href="#phone-ico" class="ico-close" title="Close" aria-label="Close dialog">&times;</a>
          </p>
          <p class="mailto" id="e-mail">
            <span class="flex"><a class="mail" href="https://dmsr.wufoo.com/forms/zarb7of1r8eula/" target="_blank" data-toggle="modal" data-target=".mail-modal" title="Utiliser ce formulaire (un service de  Wufoo.com) pour m'envoyer un e-mail"><i id="mail-ico" class="fa fa-envelope-o" aria-hidden="true"></i></a> <span class="email" itemprop="email">hubertsouchaud&#64;free&#46;fr</span></span>
          </p>
        </address>
        <p class="hidden-print">
          <a href="http://h2vx.com/vcf/hubertsouchaud.free.fr" class="download" rel="nofollow" title="Download vCard - Ajoutez mon contact à votre carnet d'adresses" type="text/directory" data-toggle="tooltip" data-placement="top"><span aria-hidden="true">⬇</span><i class="fa fa-lg fa-address-card" aria-hidden="true"></i><span class="sr-only">Download vCard</span></a>
        </p>
        <p>
          <small itemprop="description"><a href="http://www.societe.com/societe/monsieur-hubert-souchaud-539579649.html" target="_blank">Siret 53957964900028 - APE 6201Z - Programmation Informatique</a></small> 
        </p>
        <div class="bg-success corner-ribbon bottom-left sticky shadow hidden-print"><i class="fa fa-clock-o" aria-hidden="true"></i> <span id="open-close" class="text-white">Ouvert<meta itemprop="openingHours" content="Mo-Fr 8:00-20:00" /></span></div>
        <div class="corner-ribbon bottom-right sticky bg-primary shadow hidden-print">
          <a href="https://codepen.io/dmsr" title="CodePen - une mine d'idées de Web Design - voir &quot;Public, Forked ou Loved&quot;" rel="me" aria-hidden="true" data-toggle="tooltip" data-placement="left"><i class="fa fa-codepen"></i><span class="sr-only">Codepen</span></a> 
          <a href="https://github.com/djdmsr" title="GitHub: &quot;dépot&quot; de Codes Source Libres et Gratuits -  voir mes &quot;Stars&quot;" rel="me" aria-hidden="true" data-toggle="tooltip" data-placement="left"><i class="fa fa-github" aria-hidden="true"></i><span class="sr-only">Github</span></a>
          <a href="https://profiles.wordpress.org/dmsr/" title="WordPress: la + populaire des plateformes Web de gestion de contenu - voir ma selection &quot;Favorites&quot; de Plugins Gratuits" rel="me" aria-hidden="true" data-toggle="tooltip" data-placement="left"><i class="fa fa-wordpress" aria-hidden="true"></i><span class="sr-only">Wordpress</span></a>
        </div>
      </div>
    </div>
  </main>
  <header class="header">
    <figure class="user-profile">
      <div class="user-image-outer">
        <a href="https://fr.gravatar.com/djdmsr" rel="me">
          <img src="http://hubertsouchaud.free.fr/Hubert-Souchaud-480x480.jpg" 
             class="user-image" alt="Hubert Souchaud" title="Gravatar"
             data-toggle="tooltip" data-placement="bottom" />
        </a>
      </div>
      <figcaption class="user-profile-content">
        <h1 class="user-name text-white">Hubert Souchaud <br><small>Webmaster <span class="amp">&amp;</span> <a href="https://www.facebook.com/djdmsr/" rel="me" target="_blank">DJ</a></small> </h1>
        <details>
          <summary>Suivre <span class="social-user-name"><abbr title="Disk-Jockey" data-toggle="tooltip" data-placement="bottom">dj</abbr><abbr class="initialism" title="Dance Music Sex Romance" data-toggle="tooltip" data-placement="bottom">dmsr</abbr></span></summary>
          <nav class="nav user-social-profiles">
             <a href="https://www.facebook.com/web2site/" class="nav-link" rel="me"><i class="fa fa-facebook" title="facebook" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur Facebook</span></a>
            <a href="https://profiles.google.com/110283885428093802546" class="nav-link" rel="me"><i class="fa fa-google-plus" title="google+" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur Google+</span></a>
            <a href="https://twitter.com/djdmsr" class="nav-link" rel="me"><i class="fa fa-twitter" title="twitter" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur Twitter</span></a>
            <a href="https://www.linkedin.com/in/hubert-souchaud-190909144/" class="nav-link" rel="me"><i class="fa fa-linkedin" title="linkedIn" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur LinkedIn</span></a>
            <a href="https://vimeo.com/djdmsr" class="nav-link" rel="me"><i class="fa fa-vimeo" title="vimeo" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur Vimeo</span></a>
            <a href="https://www.youtube.com/user/djdmsr" class="nav-link" rel="me"><i class="fa fa-youtube" title="youtube" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"></i><span class="sr-only">Suivre Hubert Souchaud sur Youtube</span></a>
          </nav>
        </details>
      </figcaption>
    </figure>
    <nav class="navigation" role="navigation">
      <ul class="list-unstyled">
       <li><a class="navigation-link active" href="#" itemscope itemtype="http://schema.org/ContactPage" aria-current="page"><i class="fa fa-address-card" aria-hidden="true"></i> Contact</a></li>
       <li><a class="navigation-link" href="https://hubertsouchaud.wordpress.com/about/biographie/" target="_blank" itemscope itemtype="http://schema.org/AboutPage"><i class="fa fa-info-circle" aria-hidden="true"></i> À Propos</a></li>
        <li><a class="navigation-link" href="https://hubertsouchaud.wordpress.com/experiences/" target="_blank" itemscope itemtype="http://schema.org/CollectionPage"><i class="fa fa-th" aria-hidden="true"></i> Portfolio</a></li>
        <li><a class="navigation-link" href="https://hubertsouchaud.wordpress.com/" target="_blank" itemscope itemtype="http://schema.org/ProfilePage"><i class="fa fa-user-secret" aria-hidden="true"></i> CV</a></li>
        <!--<li><a class="navigation-link" href="#" itemscope itemtype=" https://schema.org/Blog"><i class="fa fa-rss" aria-hidden="true"></i> Blog</a></li>
        <li><a class="navigation-link" href="#" itemscope itemtype="http://schema.org/WebPage"><i class="fa fa-headphones" aria-hidden="true"></i> DJ</a></li>
        <li><a class="navigation-link" href="#" itemscope itemtype="http://schema.org/WebPage"><i class="fa fa-cogs" aria-hidden="true"></i> Admin</a></li>-->
      </ul>
    </nav>
  </header>
</div>

<div id="map" class="modal fade map-modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title w-100 px-3 py-4 map"><a href="https://www.google.com/maps/dir/26+Grand'Rue+Poitiers+France/" class="btn btn-primary" id="modal-title" title="Obtenir un itinéraire avec Google Maps">Venir <i class="fa fa-chevron-right" aria-hidden="true"></i></a></h3>
        <button type="button" class="close text-white" title="Fermer" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-4by3">
          <!-- access from business.google.com  https://maps.google.com/maps?cid=9496926068786872699 -->
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2742.2929420101495!2d0.3496533155952303!3d46.581445979129974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x83cbdbf15430417b!2sHubert+Souchaud!5e0!3m2!1sfr!2sus!4v1484204565552" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="wufoo" class="modal fade mail-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- https://dmsr.wufoo.com/forms/zarb7of1r8eula/ -->
        <iframe height="830" frameborder="0" style="border:0;width:100%" allowfullscreen  src="https://dmsr.wufoo.com/embed/zarb7of1r8eula/"></iframe>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/device.js/0.2.7/device.min.js" integrity="sha256-7/l5ueSGd9WLyoPL4cgw7QRrS9VnoqA9gDCYHGZUvy8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
            
          
!
            
              $main-background-color: #fcfcfc;
$background-image: url('http://hubertsouchaud.free.fr/Hubert-Souchaud-480x640.jpg');
$background-image-color: #4988e4;
$pulse-color: #cdde44;
$nav-link-color: $main-background-color;
$nav-link-color-hover: $pulse-color;

  $map: url("https://maps.googleapis.com/maps/api/staticmap?center=26+Grand'Rue+Poitiers+France&zoom=17&size=580x240&maptype=hybrid&format=jpg&visual_refresh=true&markers=size:mid%7Ccolor:0xd9230f%7Clabel:H%7C26+Grand'Rue+Poitiers+France");
  $map-2x: url("https://maps.googleapis.com/maps/api/staticmap?center=26+Grand'Rue+Poitiers+France&zoom=17&size=580x240&maptype=hybrid&format=jpg&visual_refresh=true&markers=size:mid%7Ccolor:0xd9230f%7Clabel:H%7C26+Grand'Rue+Poitiers+France&scale=2");

$font-base: 13;
$how-many-nav-link: 6;
$love: 'a, a:link, a:visited';
$hate: 'a:hover, a:active, a:focus';
@mixin linx ($link,
$visited,
$hover,
$active,
$focus) {
  a {
    color: $link;
    &:link {
      color: $link;
    }
    &:visited {
      color: $visited;
    }
    &:hover {
      color: $hover;
    }
    &:active {
      color: $active;
      cursor:wait;
    }
    &:focus {
      color: $focus;
    }
  }
}

:root {
  --background-image: $background-image;
  --background-image-color: $background-image-color;
  --pulse-color: $pulse-color;
  --body-background: $background-image-color;
  --main-background-color: $main-background-color;
  --nav-link-color: $nav-link-color;
  --nav-link-color-hover: $nav-link-color-hover;
  --font-base: $font-base;
  --map: $map;
  --map-2x: $map-2x;
}

html {
  font-size: calc( ( var(--font-base) + 0) * 1px);
  font-weight: lighter;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
  transition: all 1s ease;
}

@media (min-width: 400px) {
  html {
    font-size: calc( ( var(--font-base) + 1) * 1px);
  }
}

@media (min-width: 576px) {
  html {
    font-size: calc( ( var(--font-base) + 2) * 1px);
  }
}

@media (min-width: 768px) {
  html {
    font-size: calc( ( var(--font-base) + 3) * 1px);
  }
}

@media (min-width: 992px) {
  html {
    font-size: calc( ( var(--font-base) + 4) * 1px);
  }
}

@media (min-width: 1200px) {
  html {
    font-size: calc( ( var(--font-base) + 5) * 1px);
  }
}

body {
  background-color: var(--body-background);
  background-image: radial-gradient(circle at 100% 0%, rgba(white, 1), rgba($pulse-color, .75), transparent 25vmin);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.webdings {
  font-family: "Webdings";
  font-size: 3.5em;
  position: fixed;
  top: -1.2rem;
  left: -.2rem;
  color: black;
  z-index: 1;
}

#{$hate} {
  transition: color 1s ease;
}

summary {
  cursor: s-resize;
}

[open] summary {
  cursor: n-resize;
}

.layout {
  display: table;
  caption-side: top;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  &::after {
    content: "";
    background-image: var(--background-image);
    background-position: left;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: auto 100%;
    filter: blur(20px);
    opacity: 0.75;
    top: 11em;
    left: 100%;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
    transition: left 1s ease-in-out;
  }
}

.is-toggled .layout::after {
  left: 0;
  transition-delay: .5s;
}

.toggler {
  position: absolute;
  z-index: 99;
  top: 1.382rem;
  right: 1rem;
  left: inherit;
  cursor: e-resize;
  transition: all .25s ease-in-out;
  &:hover {
    animation: pulse 1s infinite ease-in-out;
  }
  & i:after {
    content: '\f067';
    color: inherit;
  }
}

.is-toggled .toggler {
  cursor: w-resize;
  & i:after {
    content: '\f00d';
    cursor: e-resize;
  }
}

.main {
  z-index: 50;
  transition: transform 0.5s ease;
  transform-origin: bottom right;
  &::before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    background: var(--main-background-color);
    background: linear-gradient(135deg, var(--background-image-color) 45%, #aaa 50%, #ccc 56%, var(--main-background-color) 80%);
    z-index: 1000;
    box-shadow: 1px 1px 1px rgba(#000, 0.4);
    transition-duration: 0.3s;
    transition-property: width, height;
  }
}

body:not(.is-toggled) .layout .toggler:hover~main::before,
body:not(.is-toggled) .layout body:not(.is-toggled) .toggler:focus~main::before,
.layout .toggler:active~main::before {
  width: 10vmin;
  height: 10vmin;
}

.is-toggled .main {
  transform: translateX( calc(320px - 1rem)) translateY(15em);
}

.header {
  display: table-caption;
  position: absolute;
  top: 0;
  right: 100%;
  transform: translateX(0);
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.user-profile {
  min-height: 15em;
  padding: 1em;
  margin-bottom: 0;
  text-shadow: 0px 1px 2px rgba(#000, 0.8);
  &::after {
    display: table;
    clear: both;
    content: " ";
  }
}

.user-image-outer {
  position: relative;
  margin-right: 1em;
}

.user-image {
  border-radius: 50%;
  width: 15vw;
  height: auto;
  max-width: 10rem;
  object-fit: cover
}

.user-profile-content {}

.amp {
  font-family: "Baskerville";
  font-style: italic;
}

.user-name {
  font-size: 2em;
  line-height: 1em;
  text-shadow: 2px 0 0 $pulse-color, -2px 0 0 $pulse-color, 0 2px 0 $pulse-color, 0 -2px 0 $pulse-color, 1px 1px $pulse-color, -1px -1px 0 $pulse-color, 1px -1px 0 $pulse-color, -1px 1px 0 $pulse-color, 0px 0px 8px rgba(128, 0, 128, 0.66);
  & small {
    color: var(--nav-link-color-hover);
    text-shadow: 2px 0 0 rgba($background-image-color, 0.66), -2px 0 0 rgba(128, 0, 255, 0.666), 0 2px 0 rgba($background-image-color, 0.66), 0 -2px 0 rgba($background-image-color, 0.66), 1px 1px rgba($background-image-color, 0.66), -1px -1px 0 rgba($background-image-color, 0.66), 1px -1px 0 rgba($background-image-color, 0.66), -1px 1px 0 rgba($background-image-color, 0.66);
  }
}

.social-user-name::before {
  content: '@';
}

@media (min-width: 400px) {
  .user-image-outer {
    float: left;
  }
  .user-profile-content {
    float: left;
  }
  .user-image-outer::before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: .5rem;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(#000, 0.35) 0%, transparent 80%);
    opacity: .8;
  }
  .is-toggled .user-profile {
    min-height: 11rem;
  }
  .is-toggled .main {
    transform: translateX( calc(320px - 1rem)) translateY(11rem);
  }
}

.user-profile-content {
  color: var(--nav-link-color);
}

.user-social-profiles {
  @include linx (var(--nav-link-color-hover),
  var(--nav-link-color-hover),
  var(--nav-link-color),
  var(--nav-link-color),
  var(--nav-link-color)r);
}

.navigation-link {
  display: block;
  font-size: 1.5rem;
  padding: 0.75rem;
  text-shadow: 0px 1px 2px rgba(#000, 0.8);
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}

.is-toggled .header {
  transform: translateX(100%);
  //1. each link goes to its position, and becomes visible
  //each link is delayed by an amount multiplied by where it is on the list
  @for $i from 1 through $how-many-nav-link {
    $initialdelay: 0.1;
    $transitiondelay: $initialdelay * $i;
    li:nth-of-type(#{$i}) .navigation-link {
      transition-delay: #{$transitiondelay}s;
    }
  }
}

.navigation {
  @include linx (var(--nav-link-color),
  var(--nav-link-color),
  var(--nav-link-color-hover),
  var(--nav-link-color-hover),
  var(--nav-link-color-hover));
  .active,
  #{$love} {
    border-top: transparent solid 1px;
    border-left: transparent solid 1px;
    border-bottom: transparent solid 1px;
    border-right: transparent solid 1px;
    text-decoration: none;
    transition: all .25s ease-in-out;
  }
  #{$hate} {
    border-top: var(--nav-link-color) solid 1px;
    border-left: var(--nav-link-color) solid .5em;
    border-bottom: var(--nav-link-color) solid 1px;
    border-right: transparent solid 1px;
    text-decoration: none;
    transition: all .25s ease-in-out;
  }
  a.active,
  a.active:hover {
    border-left: var(--nav-link-color) solid .5em;
  }
}

.is-toggled .navigation-link {
  opacity: 1;
  transform: translateY(0);
}

.content {
  background-color: var(--main-background-color);
  transform-origin: top left;
  backface-visibility: hidden; // solves the 'jumping text' problem (?)
  height: 100vh;
  font-size: 1rem;
}

.is-toggled .content {
  transform: scale(.666);
}

.vcard {
  position: relative;
  font-size: calc(1.5vw + 1.5vh + .75vmin);
  text-align: center;
  line-height: 1.25;
  & h1 {
    font-size: 2em;
    margin-bottom: .5em
  }
  & h1 small {
    font-size: .75em;
    font-weight: normal;
  }
  & p {
    margin-bottom: 1.25rem
  }
  & p:last-child, .call {
    margin-bottom: 0;
  }
  & .flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  & .zoom, .mail {
    display: inline-block;
    width: 2rem;
    text-align: center;
  }
  & .zoom i, .mail i {
    display: inline-block;
  }
  & a.dropdown-toggle::after {
    display: none;
 }
}

.ico-close {
  opacity: 0;
  visibility: hidden;
}

.tel:target {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.8);
  font-size: 2.5em;
  font-weight: bold;
  text-shadow: .1em .1em .3em #000;
  color: white;
  white-space: nowrap;
  &~.ico-close {
    opacity: 1;
    visibility: visible; 
    background-color: transparent;
    position: fixed;
    top: .2em;
    right: .5em;
    font-size: 1.5em;
    cursor: pointer;
    text-decoration: none;
    z-index: 1000;
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}
// device.js classes (we only can send sms via a mobile phone)
.tablet .sms-me,
.desktop .sms-me {
  display: none;
}
.tooltip-inner {
  color: var(--pulse-color);
}
.corner-ribbon {
  color: white;
  background-color: black;
  font-size: 1.5rem;
  width: 12rem;
  position: absolute;
  top: 1.5rem;
  left: -3rem;
  text-align: center;
  line-height: 2;
  letter-spacing: 1px;
  transform: rotate(-45deg);
  &.sticky {
    position: fixed;
  }
  &.shadow {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  }
  &.top-left {
    top: 1.5rem;
    left: -3rem;
    transform: rotate(-45deg);
  }
  &.bottom-right {
    top: auto;
    right: -3rem;
    bottom: 1.5rem;
    left: auto;
    transform: rotate(-45deg);
  }
  &.bottom-left {
  top: auto;
  bottom: 1.5rem;
  left: -3rem;
  transform: rotate(45deg);
  }
}
.corner-ribbon a.paypal {
  color: white;
}
.map {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-image: var(--map);
}

.map-modal .close {
  display: block;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 0px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 0px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 0px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 0px),
only screen and (                min-resolution: 192dpi) and (min-width: 0px),
only screen and (                min-resolution: 2dppx)  and (min-width: 0px) { 
  .map {
    background-image: var(--map-2x);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 .5rem rgba($pulse-color, .2);
  }
  50% {
    box-shadow: 0 0 .5rem rgba($pulse-color, .9);
  }
  100% {
    box-shadow: 0 0 .5rem rgba($pulse-color, .2);
  }
}

            
          
!
            
              /**
 * Get visitor's ISO 3166-1 alpha-2 country code.
 * Use IPinfo.io free API.
 *
 * @param {obj} optional?
 * @return {string} ISO Country code
 */
function getCountry(obj) {
  var ISOcode = '';
  $.ajax({
    async: false,
    dataType : 'json',
    url: 'https://ipinfo.io/geo',
    type : 'GET',
    success: function(data) {
      ISOcode = data.country;
    }
  });
  return ISOcode;
};
/**
 * Copy to user clipboard.
 * Used to copy a phone number.
 *
 * @param {id} DOM id of text target to be copied
 * @return an alert info when copied with success
 */
function copyTel2Clipboard(id) {
  var telLink = document.querySelector(id);  
  var range = document.createRange();  
  range.selectNode(telLink);  
  window.getSelection().addRange(range);

  try {  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'a été copié' : 'n\'a pas été copié';  
    alert('Le numéro ' + msg + ' dans votre press-papier');  
  } catch(err) {  
    console.log('Incapable de copier le numéro');  
  } 
  window.getSelection().removeAllRanges();
}

// we need to know from witch country the visitor come from
var country;
// about phone number displayed:
var local_ISO_code = 'FR'; // Here are french phone numbers
var international_call_prefix = '+33 '; // Prefix needed for international calls, displayed by default
var local_call_prefix = '0'; // local prefix we'll display for visits from France only
var d, mainToggle, navTrigger;

d = document;
mainToggle = d.querySelector( 'body' );
navTrigger = d.querySelector( '.toggler' );
navTrigger.addEventListener( 'click', function( e ) {
  e.preventDefault();
  mainToggle.classList.toggle( 'is-toggled' );
});

$(document).ready(function() {
  
  // To preserve API call limitation (1000/day) we want to use local storage
  if(typeof localStorage!=null) {
    // get country visitor from web storage
    var visitor_s_country = localStorage.getItem('visitor_s_country');
    // verify if country is stored
    if(visitor_s_country!=null) {
      // if yes define country
      country = visitor_s_country;
    } else {
      // if not get data from ipinfo.io API
      country = getCountry();
    }
    // Store it to next visit ...
    localStorage.setItem('visitor_s_country', country);
  } else {
    // local storage not supported
    country = getCountry();
  }
  // change phone prefix for local call only
  if (country == local_ISO_code) {
    $('.tel').each( function() {
      var tel = $(this).text().replace(international_call_prefix, local_call_prefix);
      $(this).html(tel);
    });
  }
  
  $('.zoom').wrap( '<div class="dropdown"></div>' );
  
  $('#cellular .dropdown').append('<div class="dropdown-menu" aria-labelledby="dropdownMenuCellular"><a class="dropdown-item display-large" href="#mobile"><i class="fa fa-search-plus" aria-hidden="true"></i> Composer mon numéro (Zoom)</a><div class="dropdown-divider"></div><a class="dropdown-item tel-me" href="tel:+33651097069"><i class="fa fa-mobile" aria-hidden="true"></i> M\'appeler!</a><a class="dropdown-item skype-me" href="callto:+33651097069"><i class="fa fa-skype" aria-hidden="true"></i> Skype-me!</a><a class="dropdown-item sms-me" href="sms:+33651097069"><i class="fa fa-keyboard-o" aria-hidden="true"></i> M\'envoyer un SMS!</a><div class="dropdown-divider"></div><button class="dropdown-item copy-number" type="button"><i class="fa fa-clipboard" aria-hidden="true"></i> Copier mon numéro dans votre press-papier!</button></div></div>');

  $('#cellular .zoom').attr('id','dropdownMenuCellular');
  
  $('#landline .dropdown').append('<div class="dropdown-menu" aria-labelledby="dropdownMenuLandline"><a class="dropdown-item display-large" href="#phone"><i class="fa fa-search-plus" aria-hidden="true"></i> Composer mon numéro (Zoom)</a><div class="dropdown-divider"></div><a class="dropdown-item tel-me" href="tel:+33950109479"><i class="fa fa-phone" aria-hidden="true"></i> M\'appeler!</a><a class="dropdown-item skype-me" href="callto:+33950109479"><i class="fa fa-skype" aria-hidden="true"></i> Skype-me!</a><div class="dropdown-divider"></div><button class="dropdown-item copy-number" type="button"><i class="fa fa-clipboard" aria-hidden="true"></i> Copier mon numéro dans votre press-papier!</button></div></div>');

  $('#landline .zoom').attr('id','dropdownMenuLandline');

  $('.zoom').attr({'aria-haspopup':'true','aria-expanded':'false','data-toggle':'dropdown'}).addClass('dropdown-toggle');

  $(function() {
    $('[data-toggle="tooltip"]').tooltip();
    $('address a[title]').tooltip();
    $('[data-toggle="dropdown"]').on('click', function(){
        $(this).parent().toggleClass('show');
        if ( $(this).parent().hasClass('show') ) {
          $(this).attr('aria-expanded','true');
        }
        else $(this).attr('aria-expanded','false');
    });
    $('.dropdown-menu a').on('click', function(){
      $('.dropdown').removeClass('show');
    });
    $('.copy-number').on('click', function(event) {
      event.preventDefault();
      if ($(this).parent().parent().parent().parent().attr('id') == "cellular") {
        var id = '#mobile';
      }
      else {
        var id = '#phone';
      }
      copyTel2Clipboard(id);
      $('.dropdown').removeClass('show');
   });

  });
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console