més avançat

HTMLmenu.html

@@ -8,7 +8,7 @@
     <a href='index.html'><img class='own-overImage-logo' src='imatges/ivardialogo_invert_transparent.png' /></a>
     <div class='own-menuButtons'>
       <a href="index.html">Inici</a>
-      <a id='a-nosaltres' href='nosaltres.html'>Nosaltres</a>
+      <a href='nosaltres.html'>Nosaltres</a>
       <a href='#'>Contacte</a>
     </div>
   </div>

index.html

@@ -56,9 +56,18 @@
           <b>Ivardia Produccions</b> es un col·lectiu audiovisual que neix de  adskljfljk adsfk sdfkadhs kasdhkf ahdskj fhadsk fgads fasdf sdf ksgadf kjhsbavkshdvbjw h akdhfsfh dbfdkjasfkajdshbf kjasf kahsbf jshvf kjadsv fkad asdf.
         </div>
         <div class='own-caixaImatgesIndex'>
-          <a href='projecte.html'><img class='own-imatgeIndex' src='imatges/02.jpg' /></a>
-          <a href='projecte.html'><img class='own-imatgeIndex' src='imatges/03.jpg' /></a>
-          <a href='projecte.html'><img class='own-imatgeIndex' src='imatges/04.jpg' /></a>
+          <a href='projecte.html' class='own-caixaImatgeIndex'>
+          <p class="own-textHoverImage">PROJECTE</p>
+            <img class='own-imatgeIndex' src='imatges/02.jpg' />
+          </a>
+          <a href='projecte.html' class='own-caixaImatgeIndex'>
+            <p class="own-textHoverImage">BAKUR</p>
+            <img class='own-imatgeIndex' src='imatges/03.jpg' />
+          </a>
+          <a href='projecte.html' class='own-caixaImatgeIndex'>
+          <p class="own-textHoverImage">AGENDA</p>
+            <img class='own-imatgeIndex' src='imatges/04.jpg' />
+          </a>
         </div>
       </div>
       <div id='HTMLfooter'></div>

index.js

@@ -18,5 +18,7 @@ function OnLoadIndex(){
 }
 function OnLoadNosaltres(){
   OnLoadDefault();
-  //document.getElementById("a-nosaltres").className+=" own-currentPageMenu";
-}
+  setTimeout(function(){
+    document.getElementsByClassName("own-menuButtons")[0].childNodes[3].className="own-currentPageMenu";
+  }, 500);
+  }

nosaltres.html

@@ -32,7 +32,7 @@
         </div>
 
         <div class='own-nosaltresCenterRight'>
-          <img class='own-imgTopText' src='imatges/fotoQuadrada.jpg' />
+          <img class='own-imgTopText' src='imatges/fotoNosaltres.jpg' />
           <div class='own-nosaltresText'>
             Chupa chups jujubes dragée. Cookie chocolate caramels chupa chups tart lollipop caramels. Marzipan marzipan cotton candy. Marshmallow pudding brownie sweet roll chocolate cake. Sweet roll marshmallow pudding macaroon donut chocolate bar jelly beans. Chupa chups powder danish bear claw donut pie sweet. Pudding pastry bear claw tart. Jujubes chupa chups tart pastry apple pie. Pastry bonbon oat cake oat cake jelly-o. Liquorice cake marzipan pie jelly wafer danish caramels biscuit. Sesame snaps cotton candy tart bonbon dessert cheesecake chocolate bar tootsie roll. Pastry jelly beans jujubes bonbon jujubes powder tart pudding cheesecake. Tart cookie marshmallow marzipan.
 

own.css

@@ -126,6 +126,7 @@ a:active {
 }
 .own-verkami{
   /*border: 1px solid #000000;*/
+  margin-top: 20px;
   cursor: pointer;
 }
 .own-socialNetworks{
@@ -174,10 +175,33 @@ a:active {
   text-align: center;
   padding-bottom: 100px;
 }
-.own-imatgeIndex{
+.own-caixaImatgeIndex{
   display: inline-block;
   margin: 2%;
+}
+.own-imatgeIndex{
+  /*display: inline-block;*/
+
+  width: 210px;
+}
+.own-caixaImatgeIndex .own-textHoverImage{
+  position: absolute;
+  visibility: hidden;
+  text-decoration: none;
+  /*display: inherit;*/
+  z-index: 1px;
+  background: rgba(200, 81, 39, 0.4);
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 24px;
+  padding-top: 90px;
+  /*padding-left: 100px;*/
   width: 210px;
+  height: 210px;
+}
+
+.own-caixaImatgeIndex:hover .own-textHoverImage{
+  visibility:visible;
 }
 /*  /index  */
 
@@ -250,7 +274,10 @@ a:active {
   color: #C85127;
 }
 .own-currentPageMenu{
-  color: #C85127;
+  color: #C85127!important;
+  border-bottom: 3px solid #C85127;
+  padding-left: 7px;
+  padding-right: 7px;
 }
 .own-imgHeader{
   width: 100%;
@@ -318,7 +345,7 @@ a:active {
   color: #C85127;
 }
 
-@media (max-width:960px) {
+@media (max-width:1200px) {
   .own-textBoxLeft{
     display: inline-block;
     vertical-align: top;
@@ -330,16 +357,17 @@ a:active {
     font-weight: bold;
   }
 }
-@media (min-width:960px) {
+@media (min-width:1200px) {
   .own-textBoxLeft{
     display: inline-block;
     vertical-align: top;
     margin-top: 20px;
     margin-right: 20px;
     margin-bottom: 40px;
-    max-width: 100px;
+    max-width: 150px;
     text-align: left;
     font-weight: bold;
+    font-size: 18px;
   }
 }
 
@@ -365,4 +393,5 @@ a:active {
   max-width: 650px;
   text-align: left;
   vertical-align: top;
+  padding-bottom: 40px;
 }