fpodskpfsdfdspofdkpssfod

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

Thumbnail
This awesome code was written by Arguro, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arguro ©
  • HTML
  • CSS
  • JavaScript
        <div class="container">
  <div class="header-container">
    <img src="https://78.media.tumblr.com/9d19fc8ab524899234ab5f7b915926ea/tumblr_p6mzywTYPM1r6i34po1_500.jpg" alt="" class="header-image" />
    <div class="header">
      <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="header-icon">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
      </svg>

      <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="u-float-right header-icon">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
      <h1 class="main-heading">Thiago Kerbes</h1>
      <span class="tag">Zona Norte</span>
      <span class="tag">Apartamento</span>
      <div class="stats">
        <span class="stat-module">
          Recomendações<span class="stat-number">5</span>
        </span>
        <span class="stat-module">
          Gostei <span class="stat-number">10</span>
        </span>
        <span class="stat-module">
          Confiança <span class="stat-number">10</span>
        </span>
      </div>
    </div> <!-- END header -->
  </div>
  
  <div class="overlay-header"></div>
  
  <div class="body">
    <img src="https://i1.sndcdn.com/avatars-000244041123-1qe53c-t50x50.jpg" alt="Thiago Kerbes" class="body-image" />
    <div class="body-action-button u-flex-center">
      <svg fill="#ffffff" height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
    </div>
    <span class="body-stats">Preços <span>350k</span></span>
    <span class="body-stats">Locais<span> 1 milhão</span></span>
    <div class="u-clearfix"></div>
    <div class="body-info">
      <p>
        Apartamento na zona norte, boas referencias. Condominio Rosa das Flores, 4 comodos, duas vagas na garagem.
      </p>
      <p>
      ótima localização, boa vizinhança, acompanha local para festas, praça para crinças com centenas de brinquedos etc.
      </p>
    </div>
    <div class="body-more">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="card u-clearfix">
      <span class="card-heading">Fotos</span>
      <span class="card-more">
        <svg fill="#777777" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
      </span>
      <ul class="card-list">
        <li><img src="https://scontent.fxap1-1.fna.fbcdn.net/v/t34.0-12/14996435_1134046266679170_663340401_n.jpg?oh=11fea6261dd0e2dd04e21efbb7c9ecb9&oe=5827448C" alt="" /></li>
        <li><img src="https://scontent.fxap1-1.fna.fbcdn.net/v/t34.0-12/14996435_1134046266679170_663340401_n.jpg?oh=11fea6261dd0e2dd04e21efbb7c9ecb9&oe=5827448C" alt="" /></li>
        <li><img src="" alt="" /></li>
      </ul>
    </div>
  </div>
  
</div>
    

/*Downloaded from https://www.codeseek.co/Arguro/fpodskpfsdfdspofdkpssfod-PbZmjO */
        html {
  background-color: #fefefe;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.u-float-right {
  float: right;
}

.u-flex-center {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.u-clearfix:before,
.u-clearfix:after {
    content: " ";
    display: table;
}

.u-clearfix:after {
    clear: both;
}

.u-clearfix {
    *zoom: 1;
}

.container {
  box-shadow: 0 0 50px rgba(0,0,0,.3);
  margin: 10px auto;
  overflow: hidden;
  width: 360px;
}

.header-container {
  position: relative;
}

.header-image {
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
  height: auto;
  -webkit-animation: zoomEffect 35s infinite;
          animation: zoomEffect 35s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@-webkit-keyframes zoomEffect {
  0% {
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.2) translateX(-360px) translateY(-80px);
            transform: scale(1.2) translateX(-360px) translateY(-80px);
  }
}

@keyframes zoomEffect {
  0% {
    -webkit-transform: scale(1) translateX(0) translateY(0);
            transform: scale(1) translateX(0) translateY(0);
  }
  100% {
    -webkit-transform: scale(1.2) translateX(-360px) translateY(-80px);
            transform: scale(1.2) translateX(-360px) translateY(-80px);
  }
}

.header {
  color: #fff;
  padding: 15px;
  height: 300px;
}

.header > svg {
  cursor: pointer;
}

.main-heading {
  color: #fff;  
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 12px;
}

.tag {
  background-color: rgba(255, 255, 255, .35);
  border-radius: 20px;
  font-size: 11px;
  margin-right: 8px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.stats {
  margin-top: 35px;
}

.stat-module {
  display: inline-block;
  font-size: 12px;
  margin-right: 20px;
  text-transform: uppercase;
}

.stat-number {
  display: inline-block;
  font-weight: 600;
  margin-left: 4px;
}

.overlay-header {
  background-color: #eee;
  height: 100px;
  margin: -50px 0 0 -25%;
  transform: rotate(-10deg);
  width: 150%;
  z-index: 0;
}

.body {
  background-color: #eee;
  color: #555;
  margin-top: -50px;
  padding: 0 15px 15px;
  position: relative;
}

.body-image {
  border-radius: 100%;
  box-shadow: 5px 10px 75px rgba(0, 0, 0, .4);
  float: left;
  margin: -90px 0 20px;
  position: relative;
  z-index: 2;
}

.body-action-button {
  background-color: #383838;
  border-radius: 50%;
  box-shadow: 1px 2px 12px rgba(0,0,0,.4);
  cursor: pointer;
  height: 40px;
  position: absolute;
  right: 15px;
  top: -97px;
  width: 40px;
}

.body-stats {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  float: left;
  margin: -14px 0  0 30px;
  position: relative;
  text-transform: uppercase;
  width: 20%;
}

.body-stats > span {
  display: inline-block;
  font-weight: 900;
  margin-top: 8px;
}

.body-info {
  clear: left;
  position: relative;
  max-height: 100px;
  overflow: hidden;
  transition: all 600ms ease-out;
}

.body-more {
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(238,238,238,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(238,238,238,1) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(238,238,238,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#eeeeee',GradientType=0 );
  cursor: pointer;
  margin: -57px auto 0px;
  padding: 20px 0 20px;
  position: relative;
  text-align: center;
}

.body-more span {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 5px rgba(0,0,0,.3);
  display: inline-block;
  height: 6px;
  margin-right: 2px;
  width: 6px;
}

.card {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  margin-top: 15px;
  padding: 10px;
}

.card-heading {
  font-size: 12px;
  text-transform: uppercase;
}

.card-more {
  cursor: pointer;
  float: right;
}

.card-list {
  list-style-type: none;
  margin: 10px 0 0;
  overflow-x: scroll;
  padding: 0;
  white-space: nowrap;
}

.card-list::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	border-radius: 2px;
	background-color: #F5F5F5;
}

.card-list::-webkit-scrollbar
{
	height: 3px;
	background-color: #F5F5F5;
}

.card-list::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #ddd;
}

.card-list li {
  display: inline;
  margin-left: 10px;
}

.card-list li:first-child {
  margin-left: 0;
}
    

/*Downloaded from https://www.codeseek.co/Arguro/fpodskpfsdfdspofdkpssfod-PbZmjO */
        
    

Comments