css PROJET ENTIER：webagency
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css PROJET ENTIER：webagency相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="fr" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="description" content="WEBAGENCY est une agence spécialisée dans le webdesign et la création de site web internet, les solutions e-commerce et mobile, l'UX, l'IU et le référencement">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta property="og:title" content="Webagency, webdesign, UX, UI, SEO" />
<meta property="og:url" content="https://mydevchanel.shost.ca/webagency/" />
<link rel="stylesheet" type="text/css" href="css/webagency.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<title>Webagency, agence spécialisée dans l'UI, l'UX, le référencement web</title>
</head>
<body>
<!-- contenu de la page entière -->
<div id="content">
<!-- menu fixe -->
<header id="main-nav">
<nav>
<div id="main-nav-content">
<div id="logo">
<img src="logo/logo.png" alt="logo webagency" >
</div>
<ul>
<li class="menu"><a href="#contact">Contact</a></li>
<li class="menu"><a href="#portfolio">Portfolio</a></li>
<li class="menu"><a href="#services">Services</a></li>
<li class="menu"><a href="#accueil">Accueil</a></li>
</ul>
</div>
<!-- menu mobile-->
<div id="menu-mobile">
<div id="volet_clos">
<div id="volet">
<a href="#accueil">Accueil</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
<a href="#volet" class="ouvrir">Menu</a>
<a href="#volet_clos" class="fermer">Fermer</a>
</div>
</div>
</div>
</nav>
</header>
<!-- SECTION SLIDER -->
<section id="slider">
<img id="hide-me" src="img/slider/bg1.jpg" alt="slider">
<!-- contenu on slider-->
<div id="on-slider">
<h1><em>WEBAGENCY </em>: L'AGENCE DE TOUS VOS PROJETS !</h1>
<p>Vous avez un projet web ? La WebAgency vous aide à le réaliser !</p>
<div id="btn-more"><a href="#services">Plus d'infos</a></div>
</div>
<!--fleche des nav du slider -->
<button class="arrow-bg" id="left-arrow-bg"><i class="fa fa-angle-right fa-3x"></i></button>
<button class="arrow-bg" id="right-arrow-bg"><i class="fa fa-angle-right fa-3x"></i></button>
</section>
<div class="clear"></div>
<!-- section services -->
<section id="services-content">
<!-- header services -->
<header id="services">
<h1>NOS SERVICES</h1>
<div class="line">
<i class="fa fa-circle"></i>
</div>
<p class="caption">
Vous rêvez d'un site moderne, efficace et à votre image ? Un site avec une ergonomie qui s'adapte à tous les supports existants ? Confiez nous vos projets !
</p>
</header>
<!-- services contenu gauche : image -->
<div id="main-feature">
<img src="img/main-feature.png" alt="illustration site e-commerce">
</div>
<!-- services contenu droit : descriptif -->
<aside id="services-main">
<!-- #ux -->
<article class="services-art">
<!-- icone ux -->
<div class="icons">
<div class="circle">
<i class="fa fa-line-chart centered-icon"></i>
<i class="fa fa-circle small-circle"></i>
</div>
</div>
<!-- texte ux -->
<div class="description">
<h2><strong>UX DESIGN</strong></h2>
<p>L'expérience utilisateur Une des compétence de la webagency</p>
</div>
</article>
<!-- #ui -->
<article class="services-art">
<!-- icone ui -->
<div class="icons">
<div class="circle">
<i class="fa fa-cubes centered-icon"></i>
<i class="fa fa-circle small-circle"></i>
</div>
</div>
<!-- texte ui-->
<div class="description">
<h2><strong>UI DESIGN</strong></h2>
<p>Confiez nous votre identité visuelle, nous la sublimerons</p>
</div>
</article>
<!-- #seo -->
<article class="services-art">
<!-- icone seo -->
<div class="icons">
<div class="circle">
<i class="fa fa-pie-chart centered-icon"></i>
<i class="fa fa-circle small-circle"></i>
</div>
</div>
<!-- texte seo-->
<div class="description">
<h2><strong>SEO</strong></h2>
<p>Plus de 20 ans de métier dans le web ont fait de nous des experts en référencement</p>
</div>
</article>
</aside>
</section>
<!-- PROJETS : portfolio-->
<header id="portfolio-header">
<h1 id="portfolio">NOS PROJETS</h1>
<div class="line">
<i class="fa fa-circle"></i>
</div>
<p class="caption">Pour la WebAgency, chaque projet est une nouvelle aventure parce que vous avez tous des besoins et une identité différente. Nous sommes là pour donner vie à ce qui vous rend unique. </p>
<!--menu de navigation du portfolio -->
<nav id="navBarre">
<ul>
<li class="navBox">
<a href="#allWorks" id="allWorks">All Works</a>
<div class="arrowDown"></div>
</li>
<li class="navBox">
<a href="#creative">Creative</a>
<div class="arrowDown"></div>
</li>
<li class="navBox">
<a href="#corporate">Corporate</a>
<div class="arrowDown"></div>
</li>
<li class="navBox">
<a href="#portfolio" id="portfolioNav">Portfolio</a>
<div class="arrowDown"></div>
</li>
</ul>
<div class="clear"></div>
</nav>
</header>
<!-- contenu du portfolio -->
<div id="portfolio-content">
<!-- SITE 4 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Bags en Vrac</h3>
<p class="elementDescription">Site ecommerce pour une entreprise dans l'air du temps</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/bags.jpg" alt="bags en vrac">
</div>
<!-- SITE 3 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Solo Mium</h3>
<p class="elementDescription">Un site tout en animation pour un artiste pas comme les autres</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/bunny.jpg" alt="Solo mium">
</div>
<!-- SITE 2 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Marc Delapage</h3>
<p class="elementDescription">Portfolio du designer Marc Delapage</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/designer.jpg" alt="Marc Delapage">
</div>
<!-- SITE 1 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Yzo KUKI</h3>
<p class="elementDescription">Plongez dans l'univers de Yzo KUKI</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/drawing.jpg" alt="Yzo Kuki">
</div>
<!-- SITE 8 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">One two trees</h3>
<p class="elementDescription">Retour au source - le luxe sobre</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/furnitures.jpg" alt="one two trees">
</div>
<!-- SITE 7 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Pompadour</h3>
<p class="elementDescription">Design, élégence</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/pompadour.jpg" alt="Pompadour">
</div>
<!-- SITE 6 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">Mr Potato</h3>
<p class="elementDescription">Un site construit comme un puzzle</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/mrpotato.jpg" alt="Mr Potato">
</div>
<!-- SITE 5 -->
<div class="element">
<div class="element-content">
<h3 class="elementTitle">PackIt !</h3>
<p class="elementDescription">Sobriété, efficacité, la technicité mise en avant</p>
<div class="eyeCircle">
<i class="fa fa-eye"></i>
</div>
<div class="overlay"></div>
</div>
<img class="capture" src="img/portfolio/packaging.jpg" alt="PackIt">
</div>
</div><!--portfolioContent-->
<div class="clear"></div>
<!-- section contact avec formulaire et carte -->
<div id="contact">
<div itemscope itemtype="http://schema.org/Corporation">
<form method="post" action="none.php">
<h2>Contact Info</h2>
<address itemprop="name"><strong>WebAgency</strong><br>
<span itemprop="streetAddress">25 rue d'Hauteville</span><span itemprop="postalCode"> 75010</span><span itemprop="addressLocality"> Paris</span><br>
Tel : 01 02 03 04 05<br>
</address>
<p><input type="text" placeholder="Nom" id="nom"/></p>
<p><input type="email" placeholder="Email" id="email"/></p>
<p><input type="text" placeholder="Subject" id="subject"/></p>
<p><textarea placeholder="Message"></textarea></p>
<p><input type="submit" name="send" value="Send Message"></p>
</form>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.2183942979314!2d2.347634615399672!3d48.87311307928899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d'Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1487508504437" width="1600" height="800" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>/*---------------------------*/
/* COULEURS */
/* blue */
/* #5AAAD2 */
/* 90,170,210 */
/* darkerBlue */
/* #4696BE */
/* 70,150,190 */
/*darkGrey */
/* #5D5D5D */
/*lightGrey */
/* #E5E5E5 */
/*---------------------------*/
/*---------------------------*/
/* FONTS */
/*---------------------------*/
@font-face{
font-family: fontawesome;
src:
url('fonts/fontawesome.otf'),
url('fonts/fontawesome-webfont.eot'),
url('fonts/fontawesome-webfont.svg'),
url('fonts/fontawesome-webfont.ttf'),
url('fonts/fontawesome-webfont.woff');
}
@font-face{
font-family: glyphicons-halflings-regular;
src:
url('fonts/fontawesome.otf'),
url('fonts/glyphicons-halflings-regular.eot'),
url('fonts/glyphicons-halflings-regular.svg'),
url('fonts/glyphicons-halflings-regular.ttf'),
url('fonts/glyphicons-halflings-regular.woff');
}
/*---------------------------*/
/* GLOBAL */
/*---------------------------*/
html, body{
margin: 0px;
padding: 0px;
font-size: 1em;
font-family: verdana, sans-serif;
}
.service-art{
font-size: 1em;
}
/*----- conteneur pour la page entière ---*/
#content{
max-width: 1600px;
margin:auto;
}
/* commun headers */
h1{
font-size: 2.2em;
}
/*---- conteneurs des sections principale------*/
#portfolio-header, #main-nav-content, #services-content{
width: 80%;
margin:auto;
}
/*-- ajout d'un marge sup pour séparer les sections
marge plus importante => contenu précédent est hors flux */
#services-content{
margin-top: 140px;
}
#portfolio-header{
margin-top: 80px;
}
/*-------- embellissement pour les titres ---------*/
.line{
position: relative;
height: 2px;
background-color: #e5e5e5;
width: 10%;
margin: 30px auto 0 auto;
}
.line i{
position: absolute;
color: #5AAAD2;
border-radius: 50%;
border: 4px solid white;
bottom: -10px;
left: calc(50% - 10px);
}
.caption{
width: 60%;
text-align: center;
margin:40px auto 60px auto;
font-size: 1em;
}
/*---------------------------*/
/* MAIN NAV */
/*---------------------------*/
#main-nav{
width: 100%;
height: 100px;
line-height: 100px;
background-color: white;
position: fixed;
z-index:999;
}
#main-nav nav{
top:0;
}
#logo{
float: left;
}
#logo img{
vertical-align: middle;
}
#main-nav ul{
list-style-type: none;
height: 100px;
margin:0px;
padding: 0px;
}
.menu{
float: right;
vertical-align: top;
margin-left: 30px;
}
#main-nav a{
text-decoration: none;
padding-top: 20px;
color: #5D5D5D;
text-align: center;
}
#main-nav a:hover{
color: black;
border-top: solid 3px #5AAAD2;
}
#menu-mobile{
visibility: hidden;
}
/*---------------------------*/
/* SLIDER */
/*---------------------------*/
#slider{
position: relative;
overflow: hidden;
top:100px;
}
#slider img{
max-width:100%;
}
/*------------ slider > texte ------------*/
#on-slider{
position: absolute;
width: 40%;
top:20%;
left: 10%;
color: #fff;
}
#slider em{
color: #5AAAD2;
font-style: normal;
}
/*------------slider > btn--------------*/
#btn-more{
width: 100px;
line-height: 30px;
background-color: #5AAAD2;
border-bottom: 2px solid #4696BE;
font-size: 0.8em;
text-align: center;
}
#btn-more:hover{
background-color: #4696BE;
color: rgba(255,255,255,0.5);
border-bottom: 2px solid #297fa9;
}
#btn-more a{
color: white;
text-decoration: none;
}
/*----------slider >fléches de navigation----------*/
button{
border:0px;
}
.arrow-bg{
width:30px;
height: 60px;
background-color: rgba(0,0,0,0.4);
border-bottom-left-radius: 60px;
border-top-left-radius: 60px;
position: absolute;
}
.arrow-bg:hover{
background-color: rgba(0,0,0,0.6);
}
#right-arrow-bg{
bottom: 42%;
right:0px;
}
#left-arrow-bg{
bottom: 42%;
left:0px;
transform: rotate(180deg);
-webkit-transform :rotate(180deg);;
}
#right-arrow-bg i{
position: absolute;
color: white;
bottom: 22%;
right:0px;
}
#left-arrow-bg i{
position: absolute;
color: white;
bottom: 22%;
left: 12px;
}
#right-arrow-bg:hover i{
opacity: 0.5;
}
#left-arrow-bg:hover i{
opacity: 0.5;
}
/*---------------------------*/
/* SERVICES */
/*---------------------------*/
#services{
text-align: center;
}
/*----------service >bloc image---------*/
#main-feature{
display: inline-block;
width: 40%;
vertical-align: top;
}
#main-feature img{
max-width: 100%;
}
/*-----------service> bloc articles-------*/
#services-main{
display: inline-block;
width: 55%;
}
/* blocs d'icones*/
.icons{
display: inline-block;
width: 60px;
height: 120px;
line-height: 120px;
}
.circle{
width: 50px;
height: 50px;
border : 1px solid #e5e5e5;
border-radius: 50%;
position: absolute;
top: 35px;
}
.small-circle{
position: absolute;
top:15px;
left:38px;
color: #5AAAD2;
border-radius: 50%;
border: 4px solid white;
}
.centered-icon{
position: absolute;
top : 17px;
left:16px;
color: #5AAAD2;
}
/* main bloc textes*/
.services-art{
position: relative;
margin-bottom: 20px;
}
/* sous blocs texte */
.description{
display: inline-block;
width: 70%;
position: absolute;
margin-left: 90px;
}
/*---------------------------*/
/* PORTFOLIO = PROJETS */
/*---------------------------*/
/*---- conteneur projet ajout centrage----*/
#portfolio{
text-align: center;
}
/*---------menu portfolio-------*/
#navBarre{
margin:auto;
width: 480px;
height: 35px;
}
#navBarre ul{
padding: 0px;
}
.navBox {
float: left;
position: relative;
width: 120px;
line-height: 30px;
text-align: center;
padding:0;
margin:0;
list-style-type: none;
}
.navBox a{
display: block;
text-decoration: none;
background-color: #cccccc;
color: #5D5D5D;
width: 120px;
line-height: 30px;
}
.navBox a:hover{
background-color: #5AAAD2;
border-bottom: 2px solid #4696BE;
}
.arrowDown {
position: absolute;
width: 0;
height: 0;
left: 50%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #4696BE;
opacity: 0;
}
.navBox:hover .arrowDown{
opacity: 1;
}
.clear{
clear: both;
}
/* grille portfolio
(img : 220 *147) */
#allWorks{
border-radius: 5px 0 0 5px;
}
#portfolioNav{
border-radius: 0 5px 5px 0px;
}
/* limite : 4 img par lignes*/
#portfolio-content{
max-width: 980px;
margin: auto;
margin-top: 40px;
}
.element{
display: block;
position: relative;
width: 220px;
height: 147px;
text-decoration: none;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border: 1px solid #fff;
}
.element-content{
opacity: 0;
height: 147px;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.element-content:hover{
opacity: 1;
}
#portfolio-content .element {
float: right;
margin: 8px;
}
.elementTitle{
position: absolute;
color: white;
padding: 3px;
bottom: 30px;
font-size: 1em;
}
.elementDescription{
position: absolute;
color: white;
padding: 3px;
bottom: -10px;
font-size: 0.7em;
}
.overlay{
position: absolute;
width: 220px;
height: 70px;
bottom: 0px;
background-color: rgba(0,0,0,0.6);
z-index:-1;
}
.capture{
position: absolute;
left:0px;
top:0px;
width: 220px;
height: 147px;
z-index: -2;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.fa-eye{
position: relative;
top:20%;
left: 25%;
color: white;
}
.eyeCircle{
position: absolute;
width: 30px;
height: 30px;
border : 1px solid white;
background-color: #5AAAD2;
border-radius: 50%;
bottom: 55px;
right: 10px;
}
/*---------------------------*/
/* CONTACT */
/*---------------------------*/
#contact{
margin-top: 40px;
position: relative;
}
iframe{
width: 100%;
max-width: 100%;
}
form{
width: 300px;
background-color: #e5e5e5;
padding: 20px;
position: absolute;
top:80px;
right: 150px;
z-index: 99;
opacity: 0.8;
}
h2{
margin-top:0px;
}
address{
font-size: 0.8em;
font-style: normal;
color: #5D5D5D;
}
input[type=text]{
width: 100%;
font-family: verdana, sans-serif;
}
input[type=email]{
width: 100%;
font-family: verdana, sans-serif;
}
input[type=submit]{
background-color: #5AAAD2 ;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 3px;
border-bottom: #4696BE solid 2px;
border-left: 0px;
border-right:0px;
border-top:0px;
}
input[type=submit]:hover{
background-color: #4696BE;
color: rgba(255,255,255,0.5);
border-bottom: 2px solid #297fa9;
}
form p{
text-align: right;
}
textarea{
width: 100%;
height: 150px;
font-family: verdana, sans-serif;
}
/*---------------------------*/
/* RESPONSIVE */
/*---------------------------*/
/* ECRAN INFERIEUR A 1280px */
@media all and (max-width: 1280px){
#content{
max-width: 1280px;
}
#services-content{
margin-top: 100px;
}
#portfolio-header{
margin-top: 60px;
}
h1{
font-size: 1.6em;
}
#on-slider{
top:30%;
}
iframe{
display: block;
width:1000px;
margin:auto;
}
}
@media all and (max-width: 1024px){
/* la description sur les images du portfolio reste affichée en permanence => tablette */
#portfolio-content .element{
display: block;
margin:10px 0 10px 0;
}
.element-content{
opacity: 1;
}
.description{
margin-left: 30px;
}
}
/*-------- ECRAN INFERIEUR A 900px-------*/
@media all and (max-width: 900px){
#content{
max-width: 900px;
}
/* nouveau menu */
#main-nav-content{
display: none;
}
#menu-mobile, #volet, #volet_clos{
visibility: visible;
}
#volet{
width: 200px;
padding: 10px;
background: #4696BE;
color: #fff;
margin: 0px;
}
#volet a{
color: white;
padding: 5px;
display: block;
text-align: left;
}
#volet a.ouvrir,
#volet a.fermer {
padding: 10px 15px;
background: #5D5D5D;
color: #fff;
font-size: 0.8em;
text-decoration: none;
}
#volet {
position: fixed;
left: -220px;
top: 0px;
z-index:9999;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#volet a.ouvrir,
#volet a.fermer {
position: absolute;
left:200px;
top: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
#volet a.fermer {
display: none;
}
#volet:target {
left: 0px;
}
/* code pour la fermeture */
#volet:target a.fermer {
display: block;
}
#volet:target a.ouvrir {
display: none;
}
#volet_clos:target #volet {
left: -220px;
}
/* "reset" du style des liens */
#menu-mobile a:hover{
color: rgba(255,255,255,0.6);
border:0px;
}
/* suppression du slider, mise en forme différente du contenu "on-slider" */
#slider{
overflow: visible;
position: static;
}
#hide-me{
display: none;
}
#on-slider{
width: 80%;
margin: auto;
position: static;
color: #000;
text-align: center;
}
#slider button{
display: none;
}
#btn-more{
margin:auto;
}
/* plus de slider => plus de hors flux, les margins top identiques */
#portfolio-header, #services-content{
margin-top: 60px;
}
/* suppression de l'image d'ordi dans la section service et réorg */
#main-feature{
display: none;
}
#services-main{
float:none;
}
/* on occupe toute la largueur */
#portfolio-header, #services-main{
width: 100%;
}
.caption{
width: 90%;
}
#main-nav{
width: 100%;
line-height: 100%;
position: relative;
}
#portfolio-content{
max-width: 480px;
margin:auto;
}
iframe{
display: block;
width: 600px;
margin : auto;
}
}
@media all and (max-width: 800px){
#content{
max-width: 700px;
}
}
/*-------- ECRAN INFERIEUR A 600px-------*/
@media all and (max-width: 600px){
/* redimensionnement du menu portfolio */
#navBarre{
width:320px;
}
.navBox{
width: 80px;
}
.navBox a{
width: 80px;
font-size: 0.8em;
}
form{
position: static;
display: block;
opacity: 1;
margin : auto;
max-width: 100%;
}
/* evite que les input débordent du formlaire */
#contact p {
max-width: 90%;
}
iframe{
display: none;
}
}
/*-------- ECRAN INFERIEUR A 500px-------*/
@media all and (max-width: 500px){
/* portfolio : une seule vignette par ligne */
#portfolio-content{
width: 220px;
margin:auto;
}
/* formulaire : augmentation de la taille du texte dans les input et textarea */
input{
font-size: 1.2em;
}
textarea{
font-size: 1.2em;
}
}
以上是关于css PROJET ENTIER：webagency的主要内容，如果未能解决你的问题，请参考以下文章
markdown Dossier de ressources DEV pour le projet Zazzo
javax.el.PropertyNotFoundException：itemLabel="#projet.nomProjet"：在 java.lang.String 类型上找不到
Gradle projet，在heroku上部署期间出现错误NoSuchMethodException
C projet 在 Linux 上也可以工作，但在 Windows 上不工作