|
*{float:left; z-index:0;} |
|
.one{ background:aqua; |
|
content:url("https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png") !important; |
|
} |
|
.two{ background:bisque; |
|
content:url("https://c1.staticflickr.com/9/8893/18416750928_c5495d9eb2_z.jpg") !important; |
|
} |
|
.three{ background:antiquewhite; |
|
content:url("https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png") !important;} |
|
|
|
.four{ background:bisque; |
|
content:url("http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png") !important; |
|
} |
|
#pattern{ |
|
z-index:2; |
|
height: 455px; |
|
background-repeat: no-repeat; |
|
width: 560px; |
|
background-size: 100% 100%; |
|
position: absolute; |
|
top: 750px; |
|
left: 70px; |
|
/*background-image: url(https://c1.staticflickr.com/9/8860/18604492365_d8d169ec16_z.jpg);*/ |
|
/*background-image: url(https://c1.staticflickr.com/1/424/18439197599_ccac848318_z.jpg);*/ |
|
background-image: url("https://c1.staticflickr.com/1/372/18631823651_36e9bfc7c9_z.jpg"); |
|
} |
|
.ppattern{ background-image: url(http://www.scientificamerican.com/sciam/cache/file/8C649A0C-74A0-460D-AF1C5E66C605563A.jpg); |
|
} |
|
.photo{left:0px; width:100%;} |
|
.poly{ |
|
width:200px; |
|
height:173px; |
|
-webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); |
|
clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); |
|
} |
|
.lozic{ |
|
position:absolute;left:200px; |
|
transform: rotate(-120deg); |
|
-ms-transform: rotate(-120deg); |
|
-moz-transform: rotate(-120deg); |
|
-webkit-transform: rotate(-120deg); |
|
-o-transform: rotate(-120deg); |
|
|
|
|
|
width:200px; |
|
height:173px; |
|
-webkit-clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%);clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%); |
|
/* -webkit-clip-path: polygon(48% 51%, 0 76%, 0 29%, 50% 0); |
|
clip-path: polygon(48% 51%, 0 76%, 0 29%, 50% 0);*/ |
|
} |
|
.lozia{ |
|
position:absolute;left:400px; |
|
|
|
transform: rotate(0deg); |
|
-ms-transform: rotate(0deg); |
|
-moz-transform: rotate(0deg); |
|
-webkit-transform: rotate(0deg); |
|
-o-transform: rotate(0deg); |
|
|
|
width:200px; |
|
height:173px; |
|
/*-webkit-clip-path: polygon(50% 50%, 100% 75%, 47% 100%, 0 75%); |
|
clip-path: polygon(50% 50%, 100% 75%, 47% 100%, 0 75%);*/ |
|
-webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%);clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%); |
|
} |
|
.lozib{ |
|
|
|
position:absolute;left:600px; |
|
|
|
transform: rotate(120deg); |
|
-ms-transform: rotate(120deg); |
|
-moz-transform: rotate(120deg); |
|
-webkit-transform: rotate(120deg); |
|
-o-transform: rotate(120deg); |
|
|
|
width:200px; |
|
height:173px; |
|
-webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0);clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0); |
|
/* -webkit-clip-path: polygon(50% 50%, 100% 75%, 100% 25%, 50% 0); |
|
clip-path: polygon(50% 50%, 100% 75%, 100% 25%, 50% 0);*/ |
|
} |
|
|
|
#lozi1a{top:3px;left:216px;} |
|
#lozi1b{top:90px;left:68px;} |
|
#lozi1c{top:179px;left:-81px;} |
|
|
|
#lozi2a{top:3px;left:318px;} |
|
#lozi2b{top:90px;left:168px;} |
|
#lozi2c{top:179px;left:21px;} |
|
|
|
#lozi3a{top:90px;left:264px;} |
|
#lozi3b{top:179px;left:123px;} |
|
#lozi3c{top:264px;left:-23px;} |
|
|
|
|
|
#lozi4a{top:-84px;left:270px;} |
|
#lozi4b{top:3px;left:115px;} |
|
#lozi4c{top:90px;left:-35px;} |
|
/* |
|
#lozi4a{top:90px;left:470px;} |
|
#lozi4b{top:177px;left:290px;} |
|
#lozi4c{top:264px;left:120px;}*/ |
|
/**/ |