Materialize CSS | Create portfolio

Commenter

Contenu du snippet 

// PHP ARRAY
$data = array(
 'img-key-name' => array(
  'title' => 'Website Name',
  'description' => 'Website Description',
  'baseline' => 'Your Baseline for this item',
  'techno' => 'Techno used',
  'url' => 'wesite url',
  'chips' => array(
    array(
    'title' => 'Tag#1',
    'url' => 'Url Tag#1',
    'alt' => 'URL TITLE',

   ),
    array(
    'title' => 'Tag#2',
    'url' => 'Url Tag#2',
    'alt' => 'URL TITLE Tag#2',

   )
  )
 ),
 'img-key-name-2' => array(
  'title' => 'Website Name',
  'description' => 'Website Description',
  'baseline' => 'Your Baseline for this item',
  'techno' => 'Techno used',
  'url' => 'wesite url',
  'chips' => array(
    array(
    'title' => 'Tag#1',
    'url' => 'Url Tag#1',
    'alt' => 'URL TITLE',

   ),
    array(
    'title' => 'Tag#2',
    'url' => 'Url Tag#2',
    'alt' => 'URL TITLE Tag#2',

   )
  )
 ),
 //... Other portfolio
);

// PHP FUNCTION :
function displayReal(array $data){
extract($data);

//print_r($data);die();
foreach($data as $key => $real){
$real = (object) $real;
 ?>

<div class="row row-container">
     <div class="div s6 hide-on-small-only hover14 hover01">
      <figure>
       <img class="responsive-img"  src="/images/<?php echo strtolower($key); ?>-realisation.jpg" alt="<?php echo $real->title; ?> | <?php echo $real->techno; ?> realisation" />
      </figure>
     </div> 
     <div class="col  s12 m6">
      <h3><?php echo $real->title; ?></h3>
      <blockquote>
       <?php echo $real->description; ?>
      </blockquote>
      <div class="col s12">
       <p><?php echo $real->baseline; ?></p>
       <p>
        <?php 
         foreach($real->chips as $chip){
          ?>
           <div class="chip">
            <?php 
             if($chip['url'] != false){
              ?>
              <a <?php echo isset($chip['target']) ?  'target="'.$chip['target'].'"':''; ?> href="<?php echo $chip['url'] ?>" title="<?php echo $chip['alt'] ?>"> 
              <?php echo $chip['title']; ?></a>
              <?php
             }else{
                 echo $chip['title']; 
             }
             ?>
           </div>
          <?php
         }
        ?>
       </p>
      </div>
      <div class="col s12 right-align">
       <a target="_blank" href=" <?php echo $real->url; ?>" class="green lighten-1 waves-effect waves-light btn-large"><i class="material-icons left">open_in_new</i>Visitez le site</a>
      </div>
     </div>
    </div> 
 <?php
 }
}
?>
<style>
.row-container .div { width:50%; }
.row-container img {
	width: 100%;
}
.row.row-container {
    margin: 0;
}
.row.row-container:nth-child(even){
	flex-direction: row-reverse;
}
.row.row-container:nth-child(odd) {
    flex-direction: row;
}
.row.row-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    box-align: start;
    -webkit-align-items: start;
}
figure {
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}
.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.hover14 figure {
	position: relative;
}
.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
</style>


<style> body { display : none } </style>

Compatibilité : 1.0.1

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.