test du coverflow page d'acceuil
This commit is contained in:
Jerome Morjon
parent
9879943073
commit
2a4fef10d7
|
|
@ -0,0 +1,95 @@
|
|||
.coverflow
|
||||
{
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.coverflow ul
|
||||
{
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
perspective: 500px;
|
||||
-webkit-perspective : 500px;
|
||||
-moz-perspective : 500px;
|
||||
}
|
||||
|
||||
.coverflow ul li{
|
||||
padding-top : 4%;
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 280px;
|
||||
background: orangered;
|
||||
margin-right: -60px;
|
||||
transform: rotateY(45deg);
|
||||
-webkit-transform :rotateY(45deg);
|
||||
-moz-transform :rotateY(45deg);
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* l'element actif element */
|
||||
.coverflow ul li:nth-child(1)
|
||||
{
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
height: 320px;
|
||||
background: orangered;
|
||||
-webkit-transform :rotateY(0deg) scale(1.2);
|
||||
-moz-transform :rotateY(0deg) scale(1.2);
|
||||
transform: rotateY(0deg) scale(1.2);
|
||||
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
/* z-index du premier et dernier element (derrière) */
|
||||
.coverflow ul li:first-child,
|
||||
.coverflow ul li:last-child{
|
||||
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
/* les elements qui suivent l'element central */
|
||||
.coverflow ul li:nth-child(1) ~ li
|
||||
{
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 280px;
|
||||
background: orangered;
|
||||
transform: rotateY(-45deg);
|
||||
-webkit-transform :rotateY(-45deg);
|
||||
-moz-transform :rotateY(-45deg);
|
||||
}
|
||||
|
||||
.coverflow ul li:hover,
|
||||
.coverflow ul li:nth-child(1) ~ li:hover /* element survole */
|
||||
{
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
height: 320px;
|
||||
background: black;
|
||||
transform: rotateY(0deg) scale(1.2);
|
||||
-webkit-transform: rotateY(0deg) scale(1.2);
|
||||
-moz-transform: rotateY(0deg) scale(1.2);
|
||||
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.coverflow ul li:hover ~ li
|
||||
{
|
||||
transform: rotateY(-45deg);
|
||||
-webkit-transform :rotateY(-45deg);
|
||||
-moz-transform :rotateY(-45deg);
|
||||
}
|
||||
|
||||
/* les elements non survoles, lors du survol du parent */
|
||||
.coverflow ul:hover li:not(:hover){
|
||||
transform: rotateY(45deg);
|
||||
-moz-transform: rotateY(45deg);
|
||||
-webkit-transform: rotateY(45deg);
|
||||
}
|
||||
|
||||
/* les elements qui suivent l'element survole */
|
||||
.coverflow ul:hover li:hover ~ li{
|
||||
transform: rotateY(-45deg);
|
||||
-moz-transform: rotateY(-45deg);
|
||||
-webkit-transform: rotateY(-45deg);
|
||||
}
|
||||
|
|
@ -6,6 +6,21 @@ body {
|
|||
background-size:cover;
|
||||
}
|
||||
|
||||
.back_home
|
||||
{
|
||||
background: white;
|
||||
width : 10%;
|
||||
padding : 1%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
.back_home img
|
||||
{
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.imgSearch /* image de la loupe */
|
||||
{
|
||||
height: 25px;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,16 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
|
|||
width : 25%;
|
||||
}
|
||||
|
||||
.tablethead
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chosen-select /* les select */
|
||||
{
|
||||
width : 20%;
|
||||
}
|
||||
|
||||
.listg legend
|
||||
{
|
||||
color: white;
|
||||
|
|
@ -114,11 +124,6 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
|
|||
width: 20px;
|
||||
}
|
||||
|
||||
.control-label
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------- switch checkbox ---------------------------------*/
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -2,7 +2,11 @@
|
|||
|
||||
@section('content')
|
||||
<link href="css/home.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<div style="margin-top: 70px" class="container-fluid">
|
||||
<div class="back_home">
|
||||
<a href="/" > < Retour <img src="./pictures/pic/home.png" alt="Retour" /></a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
|
|
@ -23,7 +27,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<form class="form-horizontal" role="form" method="POST" action="login">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@extends('app')
|
||||
@section('content')
|
||||
<link href="css/home.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/coverflow.css" rel="stylesheet" type="text/css"/>
|
||||
<br>
|
||||
<center>
|
||||
<img style="height:auto; width:auto; max-width:100px;" alt="" src="./pictures/homePic/home.png">
|
||||
|
|
@ -45,6 +46,22 @@
|
|||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- COVERFLOW -->
|
||||
<div class="coverflow">
|
||||
<ul>
|
||||
@foreach ($referent as $ref)
|
||||
<li>
|
||||
<a href="/referents/vive.linux/games"><img class="imgRef" src="{{$ref -> image}}" width="150px" alt="{{ $ref -> name }}-Nom"></a>
|
||||
<a href="/referents/vive.linux/games"><div>{{$ref -> firstname}}, {{$ref -> lastname}}</div></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/referents/vive.linux/games"><img class="imgRef" src="{{$ref -> image}}" width="150px" alt="{{ $ref -> name }}-Nom"></a>
|
||||
<a href="/referents/vive.linux/games"><div>{{$ref -> firstname}}, {{$ref -> lastname}}</div></a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Controles -->
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<br><br>
|
||||
<legend>Mes listes d'oeuvres:</legend>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<thead class="tablethead">
|
||||
<tr>
|
||||
<th>Nom</th><th>Action</th><th>Supprimer</th>
|
||||
</tr>
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Auteur</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-placeholder="Choisissez un auteur" class="chosen-select" tabindex="4">
|
||||
<select data-placeholder="Choisissez un auteur" class="chosen-select" multiple tabindex="4">
|
||||
<option value=""></option>
|
||||
@foreach ($data['auteur'] as $val)
|
||||
<option value="{{$val -> id}}">{{$val -> nom}}</option>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Désignation</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-placeholder="Choisissez une désignation" class="chosen-select" tabindex="4">
|
||||
<select data-placeholder="Choisissez une désignation" class="chosen-select" multiple tabindex="4">
|
||||
<option value=""></option>
|
||||
@foreach ($data['designation'] as $val)
|
||||
<option value="{{$val->id}}">{{$val->nom}}</option>
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Domaine</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-placeholder="Choisissez un domaine" class="chosen-select" tabindex="4">
|
||||
<select data-placeholder="Choisissez un domaine" class="chosen-select" multiple tabindex="4">
|
||||
<option value=""></option>
|
||||
@foreach ($data['domaine'] as $val)
|
||||
<option value="{{$val->id}}">{{$val->nom}}</option>
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Matière</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-placeholder="Choisissez une matière" class="chosen-select" tabindex="4">
|
||||
<select data-placeholder="Choisissez une matière" class="chosen-select" multiple tabindex="4">
|
||||
<option value=""></option>
|
||||
@foreach ($data['matiere'] as $val)
|
||||
<option value="{{$val->id}}">{{$val->nom}}</option>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Technique</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-placeholder="Choisissez une technique" class="chosen-select" tabindex="4">
|
||||
<select data-placeholder="Choisissez une technique" class="chosen-select" multiple tabindex="4">
|
||||
<option value=""></option>
|
||||
@foreach ($data['designation'] as $val)
|
||||
<option value="{{$val->id}}">{{$val->nom}}</option>
|
||||
|
|
|
|||
Reference in New Issue