diff --git a/css/content.css b/css/content.css index dd2e501..99354a0 100644 --- a/css/content.css +++ b/css/content.css @@ -1,3 +1,9 @@ -#center { +#center +{ text-align: center; } + +p.descriptionPortfolio +{ + font-size: 1.3em; +} diff --git a/css/freelancer.css b/css/freelancer.css index 9c8c19f..1f501c2 100644 --- a/css/freelancer.css +++ b/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
Discutons autour d'un café!
-