annonce BMW Business

Tutorials of (Annonce bmw business) by Haja randriakoto

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>annonce BMW Business</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="annonce-conteneur">
<div class="annonce">
<h2><span class="headline">Le plaisir de conduire à l'état pur.</span></h2>
<p>Découvrez la nouvelle BMW Série 1 en Location Longue Durée.</p>
</div>
<div/>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.annonce-conteneur {
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  width: 400px;
  height: 130px;
  padding: 30px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15)
}
.annonce .headline {
    font-family: Roboto Condensed;
    color: #1C69D4;
    font-size: 24px;
    box-shadow: none;
    font-weight: 700;
}

.annonce p {
  font-size: 15px;
  color: #666666;
  font-family: Roboto;
  text-shadow: none;
}

/*Animation*/
.annonce-conteneur {
  background: #E6E6E6;
  margin: auto;
  border: 2px solid #FFF;
  text-align: left;
  color: #fff;
  position: relative;
  transition: 500ms ease;
}
.annonce-conteneur:before {
  position: absolute;
  width: 0;
  height: 2px;
  content: '';
  background: #1C69D4;
  top: -2px;
  left: -2px;
  transition: 100ms width ease 300ms;
  -web-kit-transition: 100ms width ease 300ms;
}
.annonce-conteneur:after {
  position: absolute;
  width: 2px;
  height: 0;
  content: '';
  background: #1C69D4;
  top: -2px;
  right: -2px;
  transition: 100ms height ease 200ms;
  -web-kit-transition: 100ms height ease 200ms;
}
.annonce:after {
  position: absolute;
  width: 0;
  height: 2px;
  content: '';
  background: #1C69D4;
  bottom: -2px;
  right: -2px;
  transition: 100ms width ease 100ms;
  -web-kit-transition: 100ms width ease 100ms;
}
.annonce:before {
  position: absolute;
  width: 2px;
  height: 0;
  content: '';
  background: #1C69D4;
  bottom: -2px;
  left: -2px;
  transition: 100ms height ease 0ms;
  -web-kit-transition: 100ms height ease 0ms;
}
.annonce-conteneur:hover {
  border-color: transparent;
  background: #fff;
}
.annonce-conteneur:hover:before {
  width: 464px;
  transition: 100ms width ease 0ms;
  -web-kit-transition: 100ms width ease 0ms;
}
.annonce-conteneur:hover:after {
  height: 194px;
  transition: 100ms height ease 100ms;
  -web-kit-transition: 100ms height ease 100ms;
}
.annonce-conteneur:hover .annonce:after {
  width: 464px;
  transition: 100ms width ease 200ms;
  -web-kit-transition: 100ms width ease 200ms;
}
.annonce-conteneur:hover .annonce:before {
  height: 194px;
  transition: 100ms height ease 300ms;
  -web-kit-transition: 100ms height ease 300ms;
}

/*Demo purpose*/

body {
  background: gray;
}
.annonce {
  margin: auto;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( annonce BMW Business ) is write by Haja Randriakoto, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Haja Randriakoto