Partez en famille
Offrez le meilleur a ceux que vous aimez et partagez des moments fabuleux
Plus d'infos
Travel Agency
Travel Agency.
Organiser votre
voyage sur mesure
Par ici
-
Planifier
Confiez-nous vos rêves blablabla
-
Organiser
Beneficiez de l'expertise blablabla
-
Voyager
Nous nous chargerons d'assurer blablabla
Partez en famille
Offrez le meilleur a ceux que vous aimez et partagez des moments fabuleux
Plus d'infos
Contactez-nous
Chez Travel agency nous savons que voyager est.... blablablablablablabla
/* GENERAL */
* /* tout les elements */
{
margin: 0;
padding: 0;
}
body
{
font-family: arial, sans-serif;
font-size: 15px;
}
h1, h2, h3, h4
{
color: #444;
}
{
font-family: 'create round', serif;
font-size: 45px;
}
h2
{
font-size: 55px;
}
h3
{
font-size: 30px;
}
h4
{
font-size: 24px;
}
p
{
line-height: 20px;
color: #777;
}
ul
{
list-style: none; /* Enleve les puces */
}
a
{
text-decoration: none;
color: #444;
}
.wrapper
{
width: 940px;
margin: 0 auto; /* auto pour centrer */
padding: 0 10px;
}
.orange
{
color: #ff7a00;
}
.clear
{
clear: both;
}
small
{
font-size: 13px;
font-style: italic;
}
/* HEADER */
header
{
height: 120px;
}
header h1
{
float: left;
margin-top: 32px;
}
header nav
{
float: right;
margin-top: 50px;
}
header nav ul li /* Uniquement le li qui est dans ul, dans nav et dans header*/
{
float: left;
display: inline-block;
}
header nav ul li a
{
text-transform: uppercase;
font-weight: bold;
margin-right: 20px;
}
/* MAIN IMAGE */
#main-image
{
height: 580px;
background: url(Images/main.jpg) center;
}
#main-image h2
{
font-weight: normal; /* enleve le gras */
text-transform: uppercase; /* Mettre le texte en majuscule */
text-align: center; /* centre le texte */
padding: 150px 0 40px 0;
}
.button-1
{
display: block;
width: 120px;
height: 50px;
background: #ff7a00;
color: #fff;
font-size: 20px;
margin: 0 auto;
line-height: 50px;
text-align: center;
border-radius: 3px; /* arrondir les bords du cadre */
}
.button-1:hover /* Couleur survol lien */
{
background: #02d8dd;
}
/* STEPS */
#steps ul
{
margin: 80px;
}
#steps ul li
{
width: 250px;
float: left; /* Textes les un a coté des autres */
padding-top: 140px;
text-align: center;
margin-right: 10px;
}
#steps h4
{
text-transform: uppercase;
margin-bottom: 20px;
}
#steps p
{
margin-bottom: 20px;
}
#step-1
{
background: url(Images/steps-icon-1.png) no-repeat top center;
}
#step-2
{
background: url(Images/steps-icon-2.png) no-repeat top center;
}
#step-3
{
background: url(Images/steps-icon-3.png) no-repeat top center;
}
/* Possibilities */
#possibilities
{
background-color: #efefef;
padding: 60px 0;
}
#possibilities article
{
width: 460px;
height: 270px;
float: left;
border-radius: 10px; /* Arrondir les bords */
}
#possibilities article:first-child /* prendre le 1er article */
{
margin-right: 20px;
}
.overlay
{
background: rgba(255,255,255, 0.95); /* 0.95 transparence */
height: 100%;
width: 190px;
padding: 20px;
border-radius: 10px 0 0 10px; /* Arrondir les bords */
text-align: center;
box-sizing: border-box; /* "la hauteur du overlay inclue le padding" */
}
article h4
{
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
}
#possibilities p
{
text-align: center;
margin-bottom: 20px;
}
.button-2
{
color: #fff;
background-color: #ff7a00;
padding: 6px 20px;
border-radius: 3px;
}
.button-2:hover /* Quand on passe la souris dessus */
{
color: #fff;
background-color: #02b8bd;
padding: 6px 20px;
border-radius: 3px;
}
/* CONTACT */
#contact
{
padding: 60px 0;
text-align: center;
}
#contact h3
{
width: 400px;
text-transform: uppercase;
margin: 0 auto 20px auto;
margin-bottom: 20px;
border-bottom: 1px solid #02b8dd;
padding-bottom: 20px ;
}
form
{
margin: 60px 0 20px 0;
}
label
{
font-weight: bold;
font-size: 20px;,
margin-right: 10px;
color: #777;
}
input[type="text"] /* change les attribus (les type...) ici "text" dans input */
{
padding: 10px;
font-size: 20px;
margin-right: 20px;
border: 2px solid #ddd;
border-radius: 3px; /* Arrondi */
}
.button-3
{
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 11px;
background-color: #02b8dd;
border-style: none;
border-radius: 3px;
}
.button-3:hover
{
color: #fff;
background-color: #444;
}
/* FOOTER */
footer
{
height: 260px;
background-color: #444;
}
footer h1
{
color: #fff;
text-align: center;
padding-top: 80px;
}
.copyright
{
text-align: center;
font-weight: bold;
padding-top: 30px;
color: #777;
}