1 Reply Latest reply on Mar 7, 2019 6:54 AM by Andrew Gilleran

    Create mosaic on overview page to have main pages and sub pages linked

    sbootman18

      I want to create a mosaic on the overview page where the main content of the page is displayed in 4 boxes and the important content of each of those displayed in a list that can be clicked on to the right. below is a rough example of what i'm looking for with generic content. I am hoping someone can help me with the HTML code required to do this.

       

        • Re: Create mosaic on overview page to have main pages and sub pages linked
          Andrew Gilleran

          There are lots of mosaic HTML CSS code blocks available. Here is one example: Mosaic layout - orig  or this one CSS Grid Mosaic Layout

          Now there is some work involved in sorting out the images and the links but should be doable for you. I tested the first one in Jive but haven't fully used it properly yet.

          Code is below. But it's not responsive.

           

          <html>

          <head>

            <style>html {

            font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;

            line-height: 1.5;

            font-size: 12px;

            font-weight: 400;

            font-size: 62.5%;

            -webkit-text-size-adjust: 100%;

            -ms-text-size-adjust: 100%;

          }

           

           

          body {

            font-family: helvetica,arial,sans-serif;

          }

           

           

          h3 {

            margin-top: 1.4rem;

            margin-bottom: 1.4rem;

            line-height: 1.4;

            font-size: 24px;

            font-size: 2.4rem;

            font-style: normal;

            font-weight: 300;

            color: #333;

          }

           

           

          .mosaic {

            margin: 0 auto;

            width: 1100px;

            background: #fff;

          }

          .mosaic-title {

            text-align: center;

          }

          .mosaic-cell {

            position: relative;

            overflow: hidden;

            margin-right: 10px;

            float: left;

            background-repeat: no-repeat;

          }

          .mosaic-cell-overlay {

            position: absolute;

            width: 100%;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background-image: url("https://css-tricks.com/wp-content/csstricks-uploads/transpBlack10.png");

          }

          .mosaic-cell-caption {

            position: absolute;

            right: 0;

            bottom: 0;

            left: 0;

            top: 0;

            transition: all .15s ease-in-out;

          }

          .mosaic-cell-caption:hover {

            width: 100%;

            cursor: pointer;

            background-image: url("https://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png");

            background: rgba(0, 0, 0, 0.5);

          }

          .mosaic-cell-caption-city, .mosaic-cell-caption-country {

            text-align: right;

            color: #fff;

          }

          .mosaic-cell-caption-city {

            position: absolute;

            bottom: 23px;

            right: 10px;

            font-size: 24px;

            font-weight: bold;

          }

          .mosaic-cell-caption-country {

            position: absolute;

            bottom: 5px;

            right: 10px;

            font-size: 16px;

          }

          .mosaic-row {

            width: 1100px;

            clear: both;

            margin-right: 0;

          }

          .mosaic-row-one {

            height: 328px;

            margin-bottom: 10px;

          }

          .mosaic-row-one > .mosaic-cell {

            width: 762px;

            height: 328px;

            background-image: url("http://lorempixel.com/762/328/city");

          }

          .mosaic-row-one > .mosaic-cell + .mosaic-cell {

            width: 328px;

            background-image: url("http://lorempixel.com/328/328");

            margin-right: 0;

          }

          .mosaic-row-two {

            height: 345px;

            margin-bottom: 10px;

          }

          .mosaic-row-two > .mosaic-cell {

            width: 345px;

            height: 345px;

            background-image: url("http://lorempixel.com/345/345");

          }

          .mosaic-row-two > .mosaic-cell + .mosaic-cell {

            width: 345px;

            background-image: url("http://lorempixel.com/345/345/city");

          }

          .mosaic-row-two > .mosaic-cell + .mosaic-cell + .mosaic-cell {

            background: #fff;

            width: 390px;

            font-size: 0;

            margin-right: 0;

            margin-bottom: 10px;

          }

          .mosaic-row-two > .mosaic-cell + .mosaic-cell + .mosaic-cell > .mosaic-cell {

            width: 390px;

            height: 168px;

            background-image: url("http://lorempixel.com/398/168/city");

            display: block;

            margin-bottom: 10px;

          }

          .mosaic-row-two > .mosaic-cell + .mosaic-cell + .mosaic-cell > .mosaic-cell + .mosaic-cell {

            background-image: url("http://lorempixel.com/g/398/168/city");

            display: block;

            height: 168px;

            margin-bottom: 0;

          }

          .mosaic-row-three {

            height: 298px;

          }

          .mosaic-row-three > .mosaic-cell {

            width: 396px;

            height: 298px;

            background-image: url("http://lorempixel.com/396/298/city");

          }

          .mosaic-row-three > .mosaic-cell + .mosaic-cell {

            width: 694px;

            height: 298px;

            background-image: url("http://lorempixel.com/694/298/city");

            margin-right: 0px;

          }

          </style>

          </head>

          <body>

            <section>

             <div>

              <h3>Top Destinations</h3>

              <!-- do we care about SEO value? -->

             </div>

             <div>

              <div>

               <div></div>

               <a> <span>Sydney</span> <span>Australia</span> </a>

              </div>

              <div>

               <div></div>

               <a> <span>Paris</span> <span>France</span> </a>

              </div>

             </div>

             <div>

              <div>

               <div></div>

               <a> <span>Rome</span> <span>Italy</span> </a>

              </div>

              <div>

               <div></div>

               <a> <span>Munich</span> <span>Germany</span> </a>

              </div>

              <div>

               <!-- nest these two mosaic-cells below because they need to sit right in the layout -->

               <div>

                <!-- this is the lite gradient overlay -->

                <div></div>

                <a> <span>Nagoya</span> <span>Japan</span> </a>

               </div>

               <div>

                <div></div>

                <a> <span>Zermatt</span> <span>Switzerland</span> </a>

               </div>

              </div>

             </div>

             <div>

              <div>

               <div></div>

               <a> <span>Hong Kong</span> <span>Hong Kong</span> </a>

              </div>

              <div>

               <div></div>

               <a> <span>Bangkok</span> <span>Thailand</span> </a>

              </div>

             </div>

            </section> 

          </body>

          </html>