Código CSS:
Ver original@charset "UTF-8";
/* CSS Document */
* {
padding:0px;
margin:0 auto;
}
body {
background-image:url(../img/background1.jpg);
background-repeat:repeat-x;
}
#contingut {
position:relative;
width:1024px;
height:auto;
font-family:'Abel', sans-serif;
}
#top {
height:331px;
position:relative;
background-image:url(../img/backgroundtop.jpg);
background-repeat:no-repeat;
}
#menu {
background-color:#BF2C39;
font-size:18px;
height:30px;
width:350px;
left:385px;
position:absolute;
float:left;
padding-top:10px;
padding-left:25px;
}
#menueng {
background-color:#BF2C39;
font-size:18px;
height:30px;
width:350px;
left:395px;
position:absolute;
float:left;
padding-top:10px;
padding-left:30px;
}
#menuidiomes {
background-color:#6271A0;
font-size:18px;
height:30px;
width:160px;
position:absolute;
left:760px;
float:left;
padding-top:10px;
padding-left:25px;
}
#menuidiomes li{
margin-right:25px;
float:left;
}
#menuidiomeseng li{
margin-right:25px;
float:left;
}
#menuidiomesfra li{
margin-right:25px;
float:left;
}
#menu li{
margin-right:25px;
float:left;
}
#menueng li{
margin-right:35px;
float:left;
}
#menufra li{
margin-right:25px;
float:left;
}
li {
list-style-type:none;
float:left;
}
#idiomes li{
margin-right:10px;
}
#top a {
color:white;
text-decoration:none;
}
.titols {
font-size:24px;
padding-left:40px;
}
#quiensomos {
height:438px;
position:relative;
width:1024px;
text-align:justify;
}
#portada {
left:470px;
top:115px;
width:400px;
height:150px;
position:absolute;
font-size:18px;
color:#51638E;
text-align:center;
}
.MyLife {
font-size:24px;
}
#text1 {
padding-top:40px;
font-size:18px;
color:white;
width:415px;
position: absolute;
left:45px;
float:left;
}
.espai {
font-size:8px;
}
#text1fra {
padding-top:40px;
font-size:18px;
color:white;
width:415px;
position: absolute;
left:45px;
float:left;
}
#text2 {
margin-left:80px;
padding-top:95px;
font-size:18px;
color:white;
width:415px;
position:absolute;
right:70px;
}
#productos {
height:600px;
position:relative;
}
#contproductes {
padding-top:40px;
font-size:16px;
color:white;
width:960px;
position: absolute;
left:45px;
height:562px;
}
#pro1 {
left: 265px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonaalarm.png);
position: absolute;
}
#pro1:hover {
background-image: url(../img/overalarm1.png);
width:285px;
height:285px;
left:250px;
top:35px;
}
#pro2 {
left: 665px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonahealth.png);
position: absolute;
}
#pro2:hover {
background-image: url(../img/overhealth.png);
width:285px;
height:285px;
left:650px;
top:35px;
}
#pro3 {
left: 460px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonalocation.png);
position: absolute;
}
#pro3:hover {
background-image: url(../img/overlocation.png);
width:285px;
height:285px;
left:445px;
top:300px;
}
#pro5 {
left: 60px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonafleet.png);
position: absolute;
}
#pro5:hover {
background-image: url(../img/overfleet.png);
width:285px;
height:285px;
left:45px;
top:300px;
}
#pro1eng {
left: 265px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonaalarm.png);
position: absolute;
}
#pro1eng:hover {
background-image: url(../img/overalarmeng.png);
width:285px;
height:285px;
left:250px;
top:35px;
}
#pro2eng {
left: 665px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonahealth.png);
position: absolute;
}
#pro2eng:hover {
background-image: url(../img/overhealtheng.png);
width:285px;
height:285px;
left:650px;
top:35px;
}
#pro3eng {
left: 460px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonalocation.png);
position: absolute;
}
#pro3eng:hover {
background-image: url(../img/overlocationeng.png);
width:285px;
height:285px;
left:445px;
top:300px;
}
#pro5eng {
left: 60px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonafleet.png);
position: absolute;
}
#pro5eng:hover {
background-image: url(../img/overfleeteng.png);
width:285px;
height:285px;
left:45px;
top:300px;
}
#pro1fra {
left: 265px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonaalarm.png);
position: absolute;
}
#pro1fra:hover {
background-image: url(../img/overalarmfran.png);
width:285px;
height:285px;
left:250px;
top:35px;
}
#pro2fra {
left: 665px;
top: 50px;
height: 253px;
width: 253px;
background-image: url(../img/rodonahealth.png);
position: absolute;
}
#pro2fra:hover {
background-image: url(../img/overhealthfra.png);
width:285px;
height:285px;
left:650px;
top:35px;
}
#pro3fra {
left: 460px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonalocation.png);
position: absolute;
}
#pro3fra:hover {
background-image: url(../img/overlocationfra.png);
width:285px;
height:285px;
left:445px;
top:300px;
}
#pro5fra {
left: 60px;
top: 315px;
height: 253px;
width: 253px;
background-image: url(../img/rodonafleet.png);
position: absolute;
}
#pro5fra:hover {
background-image: url(../img/overfleetfran.png);
width:285px;
height:285px;
left:45px;
top:300px;
}
#contacto {
height:385px;
position:relative;
background-image:url(../img/backgroundcontacte.png);
background-repeat:no-repeat;
}
#mapa {
right:20px;
top:60px;
width:308px;
height:286px;
position:absolute;
}
#contacte {
padding-top:40px;
font-size:16px;
color:white;
width:650px;
position: absolute;
left:45px;
float:left;
height:340px;
color:black;
}
#info {
left:290px;
top:90px;
font-size:20px;
position:absolute;
width:330px;
height:240px;
background-image:url(../img/icones.png);
background-repeat:no-repeat;
}
#infodades {
left:60px;
font-size:20px;
position:absolute;
width:265px;
height:200px;
padding-top:10px;
#contingut #quiensomos #text1fra p {
font-size: 9px;
}