Novembre 2016

Changement de l'hideux panneau Portfolio, amélioration de la version
mobile

css/content.css

@@ -1,3 +1,9 @@
-#center {
+#center
+{
     text-align: center;
 }
+
+p.descriptionPortfolio
+{
+    font-size: 1.3em;
+}

css/freelancer.css

@@ -4,25 +4,31 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-.loader {
-	position: fixed;
-	left: 0px;
-	top: 0px;
-	width: 100%;
-	height: 100%;
-	z-index: 9999;
-	background: url('/img/loadinggif/preloader.gif') 50% 50% no-repeat rgb(256,256,256);
+.loader
+{
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: url('/img/loadinggif/preloader.gif') 50% 50% no-repeat rgb(256,256,256);
 }
 
-body {
+body
+{
     overflow-x: hidden;
 }
 
-p {
+p
+{
     font-size: 20px;
 }
 
-p.small {
+p.small
+{
     font-size: 16px;
 }
 
@@ -30,9 +36,10 @@ a,
 a:hover,
 a:focus,
 a:active,
-a.active {
-    outline: 0;
+a.active
+{
     color: #18bc9c;
+    outline: 0;
 }
 
 h1,
@@ -40,512 +47,675 @@ h2,
 h3,
 h4,
 h5,
-h6 {
-    text-transform: uppercase;
-    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+h6
+{
+    font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
     font-weight: 700;
+
+    text-transform: uppercase;
 }
 
 hr.star-light,
 hr.star-primary-portfolio,
-hr.star-primary-etudes{
+hr.star-primary-etudes
+{
+    max-width: 250px;
     margin: 25px auto 30px;
     padding: 0;
-    max-width: 250px;
+
+    text-align: center;
+
     border: 0;
     border-top: solid 5px;
-    text-align: center;
 }
 
 hr.star-light:after,
 hr.star-primary-portfolio:after,
-hr.star-primary-etudes:after{
-    content: "\f005";
-    display: inline-block;
-    position: relative;
-    top: -.8em;
-    padding: 0 .25em;
+hr.star-primary-etudes:after
+{
     font-family: FontAwesome;
     font-size: 2em;
+
+    position: relative;
+    top: -.8em;
+
+    display: inline-block;
+
+    padding: 0 .25em;
+
+    content: '\f005';
 }
 
-hr.star-light{
-    border-color: #ffffff;
+hr.star-light
+{
+    border-color: #fff;
 }
 
-hr.star-light:after {
+hr.star-light:after
+{
     color: #fff;
-    background-color: #6C6F7D  ;
+    background-color: #6c6f7d  ;
 }
 
 
-hr.star-primary-etudes{
-    border-color: #ffffff;
+hr.star-primary-etudes
+{
+    border-color: #fff;
 }
 
-hr.star-primary-etudes:after {
+hr.star-primary-etudes:after
+{
     color: #fff;
-    background-color: #6C6F7D  ;
+    background-color: #6c6f7d  ;
 }
 
-hr.star-primary-portfolio {
+hr.star-primary-portfolio
+{
     border-color: #2c3e50;
 }
 
 /*Star Color*/
 
-hr.star-primary-portfolio:after {
+hr.star-primary-portfolio:after
+{
     background-color: #fff;
 }
 
-.img-centered {
+.img-centered
+{
     margin: 0 auto;
 }
 
-header {
+header
+{
     text-align: center;
+
     color: #fff;
-    background-image:url(/img/cover/HeaderNewWebsite_size_opt.jpg);
+    background-image: url(/img/cover/background.jpg);
     background-attachment: scroll;
     background-position: center;
-    background-size:cover;
+    background-size: cover;
 }
 
-header .container {
+header .container
+{
     padding-top: 100px;
     padding-bottom: 50px;
 }
 
-header img {
+header img
+{
     display: block;
+
     margin: 0 auto 20px;
 }
 
-header .intro-text .name {
-    display: block;
-    text-transform: uppercase;
-    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-    text-shadow: 5px 5px #2E3138;
+header .intro-text .name
+{
+    font-family: Cabin,Helvetica,Arial,sans-serif;
     font-size: 4em;
     font-weight: 700;
+
+    display: block;
+
+    text-transform: uppercase;
+
+    text-shadow: 5px 5px rgba(93, 96, 103, .55);
 }
 
-header .intro-text .skills {
+header .intro-text .skills
+{
     font-size: 1.25em;
     font-weight: 500;
-    text-shadow: 1px 1px #000000;
+
+    text-shadow: 1px 1px #000;
 }
 
-@media(min-width:768px) {
-    header .container {
+@media(min-width:768px)
+{
+    header .container
+    {
         padding-top: 200px;
         padding-bottom: 100px;
     }
 
-    header .intro-text .name {
+    header .intro-text .name
+    {
         font-size: 4.75em;
     }
 
-    header .intro-text .skills {
+    header .intro-text .skills
+    {
         font-size: 1.75em;
     }
 }
 
-@media(min-width:768px) {
-    .navbar-fixed-top {
+@media(min-width:768px)
+{
+    .navbar-fixed-top
+    {
         padding: 25px 0;
+
         -webkit-transition: padding .3s;
-        -moz-transition: padding .3s;
-        transition: padding .3s;
+           -moz-transition: padding .3s;
+                transition: padding .3s;
     }
 
-    .navbar-fixed-top .navbar-brand {
+    .navbar-fixed-top .navbar-brand
+    {
         font-size: 2em;
+
         -webkit-transition: all .3s;
-        -moz-transition: all .3s;
-        transition: all .3s;
+           -moz-transition: all .3s;
+                transition: all .3s;
     }
 
-    .navbar-fixed-top.navbar-shrink {
+    .navbar-fixed-top.navbar-shrink
+    {
         padding: 10px 0;
     }
 
-    .navbar-fixed-top.navbar-shrink .navbar-brand {
+    .navbar-fixed-top.navbar-shrink .navbar-brand
+    {
         font-size: 1.5em;
     }
 }
 
-.navbar {
-    text-transform: uppercase;
-    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+.navbar
+{
+    font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
     font-weight: 700;
+
+    text-transform: uppercase;
 }
 
-.navbar a:focus {
+.navbar a:focus
+{
     outline: 0;
 }
 /* Navbar Color*/
-.navbar-default {
-    background-color: #2E3138;
+.navbar-default
+{
     border-color: transparent;
+    background-color: #2e3138;
 }
 
-.navbar .navbar-nav {
+.navbar .navbar-nav
+{
     letter-spacing: 1px;
 }
 
-.navbar .navbar-nav li a:focus {
+.navbar .navbar-nav li a:focus
+{
     outline: 0;
 }
 
 .navbar-default,
-.navbar-inverse {
+.navbar-inverse
+{
     border: 0;
 }
 
-section {
+section
+{
     padding: 100px 0;
 }
 
-section h2 {
+section h2
+{
+    font-size: 2.5em;
+
     margin: 0;
-    font-size: 3em;
 }
 
 /* About Portfolio*/
-section.contact {
+section.contact
+{
     color: #fff;
-    background: #6C6F7D;
+    background: #6c6f7d;
 }
 
 /* About section*/
-section.etudes {
+section.etudes
+{
     color: #fff;
-    background: #6C6F7D;
+    background: #6c6f7d;
 }
 
 section.etudes a,
 section.etudes a:hover,
 section.etudes a:focus,
 section.etudes a:active,
-section.etudes a.active {
+section.etudes a.active
+{
     outline: 0;
 }
 
-section.about {
+section.about
+{
     color: #fff;
-    background: #6C6F7D;
+    background: #6c6f7d;
 }
 
 section.about a,
 section.about a:hover,
 section.about a:focus,
 section.about a:active,
-section.about a.active {
+section.about a.active
+{
     outline: 0;
 }
 
-@media(max-width:767px) {
-    section {
+@media(max-width:767px)
+{
+    section
+    {
         padding: 75px 0;
     }
 
-    section.first {
+    section.first
+    {
         padding-top: 75px;
     }
 }
 
-#portfolio .portfolio-item {
+#portfolio .portfolio-item
+{
     right: 0;
+
     margin: 0 0 15px;
 }
 
-#portfolio .portfolio-item .portfolio-link {
-    display: block;
+#portfolio .portfolio-item .portfolio-link
+{
     position: relative;
-    margin: 0 auto;
+
+    display: block;
+
     max-width: 400px;
+    margin: 0 auto;
 }
 
-#portfolio .portfolio-item .portfolio-link .caption {
+#portfolio .portfolio-item .portfolio-link .caption
+{
     position: absolute;
+
     width: 100%;
     height: 100%;
+
+    -webkit-transition: all ease .5s;
+       -moz-transition: all ease .5s;
+            transition: all ease .5s;
+
     opacity: 0;
     background: rgba(24,188,156,.9);
-    -webkit-transition: all ease .5s;
-    -moz-transition: all ease .5s;
-    transition: all ease .5s;
 }
 
-#portfolio .portfolio-item .portfolio-link .caption:hover {
+#portfolio .portfolio-item .portfolio-link .caption:hover
+{
     opacity: 1;
 }
 
-#portfolio .portfolio-item .portfolio-link .caption .caption-content {
+#portfolio .portfolio-item .portfolio-link .caption .caption-content
+{
+    font-size: 20px;
+
     position: absolute;
     top: 50%;
+
     width: 100%;
     height: 20px;
     margin-top: -12px;
+
     text-align: center;
-    font-size: 20px;
+
     color: #fff;
 }
 
-#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
+#portfolio .portfolio-item .portfolio-link .caption .caption-content i
+{
     margin-top: -12px;
 }
 
 #portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
-#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
+#portfolio .portfolio-item .portfolio-link .caption .caption-content h4
+{
     margin: 0;
 }
 
-#portfolio * {
+#portfolio *
+{
     z-index: 2;
 }
 
-@media(min-width:767px) {
-    #portfolio .portfolio-item {
+@media(min-width:767px)
+{
+    #portfolio .portfolio-item
+    {
         margin: 0 0 30px;
     }
 }
 
-.btn-outline {
-    margin-top: 15px;
-    border: solid 2px #fff;
+.btn-outline
+{
     font-size: 20px;
-    color: #fff;
-    background: 0 0;
+
+    margin-top: 15px;
+
     transition: all .3s ease-in-out;
+
+    color: #fff;
+    border: solid 2px #fff;
+    background: 0 0;
 }
 
 .btn-outline:hover,
 .btn-outline:focus,
 .btn-outline:active,
-.btn-outline.active {
-    border: solid 2px #fff;
+.btn-outline.active
+{
     color: #18bc9c;
+    border: solid 2px #fff;
     background: #fff;
 }
 
-.floating-label-form-group {
+.floating-label-form-group
+{
     position: relative;
+
     margin-bottom: 0;
     padding-bottom: .5em;
+
     border-bottom: 1px solid #eee;
 }
 
 .floating-label-form-group input,
-.floating-label-form-group textarea {
-    z-index: 1;
+.floating-label-form-group textarea
+{
+    font-size: 1.5em;
+
     position: relative;
+    z-index: 1;
+
     padding-right: 0;
     padding-left: 0;
+
+    resize: none;
+
     border: 0;
     border-radius: 0;
-    font-size: 1.5em;
     background: 0 0;
     box-shadow: none!important;
-    resize: none;
 }
 
-.floating-label-form-group label {
-    display: block;
-    z-index: 0;
-    position: relative;
-    top: 2em;
-    margin: 0;
+.floating-label-form-group label
+{
     font-size: .85em;
     line-height: 1.764705882em;
+
+    position: relative;
+    z-index: 0;
+    top: 2em;
+
+    display: block;
+
+    margin: 0;
+
+    -webkit-transition: top .3s ease,opacity .3s ease;
+       -moz-transition: top .3s ease,opacity .3s ease;
+        -ms-transition: top .3s ease,opacity .3s ease;
+            transition: top .3s ease,opacity .3s ease;
     vertical-align: middle;
     vertical-align: baseline;
+
     opacity: 0;
-    -webkit-transition: top .3s ease,opacity .3s ease;
-    -moz-transition: top .3s ease,opacity .3s ease;
-    -ms-transition: top .3s ease,opacity .3s ease;
-    transition: top .3s ease,opacity .3s ease;
 }
 
-.floating-label-form-group:not(:first-child) {
+.floating-label-form-group:not(:first-child)
+{
     padding-left: 14px;
+
     border-left: 1px solid #eee;
 }
 
-.floating-label-form-group-with-value label {
+.floating-label-form-group-with-value label
+{
     top: 0;
+
     opacity: 1;
 }
 
-.floating-label-form-group-with-focus label {
+.floating-label-form-group-with-focus label
+{
     color: #18bc9c;
 }
 
-form .row:first-child .floating-label-form-group {
+form .row:first-child .floating-label-form-group
+{
     border-top: 1px solid #eee;
 }
 
-footer {
+footer
+{
     color: #fff;
 }
 
-footer h3 {
+footer h3
+{
     margin-bottom: 30px;
 }
 
-footer .footer-above {
+footer .footer-above
+{
     padding-top: 50px;
-    background-color: #6C6F7D;
+
+    background-color: #6c6f7d;
 }
 
-footer .footer-col {
+footer .footer-col
+{
     margin-bottom: 50px;
 }
 
-footer .footer-below {
+footer .footer-below
+{
     padding: 25px 0;
-    background-color: #2E3138;
+
+    background-color: #2e3138;
 }
 
-.btn-social {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    border: 2px solid #fff;
-    border-radius: 100%;
-    text-align: center;
+.btn-social
+{
     font-size: 20px;
     line-height: 45px;
+
+    display: inline-block;
+
+    width: 50px;
+    height: 50px;
+
+    text-align: center;
+
+    border: 2px solid #fff;
+    border-radius: 100%;
 }
 
 .btn:focus,
 .btn:active,
-.btn.active {
+.btn.active
+{
     outline: 0;
 }
 
-.scroll-top {
-    z-index: 1049;
+.scroll-top
+{
     position: fixed;
+    z-index: 1049;
     right: 2%;
     bottom: 2%;
+
     width: 50px;
     height: 50px;
 }
 
-.scroll-top .btn {
-    width: 50px;
-    height: 50px;
-    border-radius: 100%;
+.scroll-top .btn
+{
     font-size: 20px;
     line-height: 28px;
+
+    width: 50px;
+    height: 50px;
+
+    border-radius: 100%;
 }
 
-.scroll-top .btn:focus {
+.scroll-top .btn:focus
+{
     outline: 0;
 }
 
-.portfolio-modal .modal-content {
-    padding: 100px 0;
+.portfolio-modal .modal-content
+{
     min-height: 100%;
+    padding: 100px 0;
+
+    text-align: center;
+
     border: 0;
     border-radius: 0;
-    text-align: center;
     background-clip: border-box;
     -webkit-box-shadow: none;
-    box-shadow: none;
+            box-shadow: none;
 }
 
-.portfolio-modal .modal-content h2 {
+.portfolio-modal .modal-content h2
+{
+    font-size: 2.5em;
+
     margin: 0;
-    font-size: 3em;
 }
 
-.portfolio-modal .modal-content img {
+.portfolio-modal .modal-content img
+{
     margin-bottom: 30px;
 }
 
-.portfolio-modal .modal-content .item-details {
+.portfolio-modal .modal-content .item-details
+{
     margin: 30px 0;
 }
 
-.portfolio-modal .close-modal {
+.portfolio-modal .close-modal
+{
     position: absolute;
     top: 25px;
     right: 25px;
+
     width: 75px;
     height: 75px;
-    background-color: transparent;
+
     cursor: pointer;
+
+    background-color: transparent;
 }
 
-.portfolio-modal .close-modal:hover {
+.portfolio-modal .close-modal:hover
+{
     opacity: .3;
 }
 
-.portfolio-modal .close-modal .lr {
+.portfolio-modal .close-modal .lr
+{
     z-index: 1051;
+
     width: 1px;
     height: 75px;
     margin-left: 35px;
-    background-color: #2c3e50;
+
     -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+
+    background-color: #2c3e50;
 }
 
-.portfolio-modal .close-modal .lr .rl {
+.portfolio-modal .close-modal .lr .rl
+{
     z-index: 1052;
+
     width: 1px;
     height: 75px;
-    background-color: #2c3e50;
+
     -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+
+    background-color: #2c3e50;
 }
 
-.portfolio-modal .modal-backdrop {
+.portfolio-modal .modal-backdrop
+{
     display: none;
+
     opacity: 0;
 }
 
-.rotate-words {
+.rotate-words
+{
     display: inline-block;
+
     min-width: 180px;
     min-height: 34px;
+
     text-align: left;
     text-indent: 6px;
 }
-h6 {
-    display:inline;
+h6
+{
+    display: inline;
 }
-.left-little {
-    margin-left: -1px;
+.left-little
+{
     margin-top: -2px;
+    margin-left: -1px;
 }
 
-.txtcenter{
+.txtcenter
+{
+    margin-right: auto;
+    margin-left: auto;
     /*Since <center> is not W3C complia
     nt*/
-    text-align:center;
-    margin-left:auto;
-    margin-right:auto;
+
+    text-align: center;
 }
 
-.video-container {
-position: relative;
-padding-bottom: 56.25%;
-padding-top: 30px;
-height: 0;
-overflow: hidden;
+.video-container
+{
+    position: relative;
+
+    overflow: hidden;
+
+    height: 0;
+    padding-top: 30px;
+    padding-bottom: 56.25%;
 }
 .video-container iframe,
 .video-container object,
-.video-container embed {
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
+.video-container embed
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+}
+section
+{
+    background: #fff;
+}
+body
+{
+    background: #2e3138;
 }