Jump to content
  • Swan Lake

       (0 reviews)

    Entry for Coding Challenge Aqua. Mobile friendly template adjusts for no hover on smaller screens. 


    Actual Template Responsive

    'Put song lyrics or a quote here. Doesn't look bad if it spans two lines.'

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec eros faucibus, venenatis massa et, pretium diam. Maecenas porta sit amet erat non eleifend. In lobortis accumsan justo et semper. Mauris ornare bibendum lectus eu dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in lorem urna. Sed commodo nisl turpis, eget iaculis metus porta non. Integer ullamcorper enim massa, quis porta arcu sagittis vel.

    Sed dictum sit amet dui sit amet sollicitudin. Phasellus fermentum, nulla eget tincidunt lacinia, arcu justo imperdiet ex, accumsan dictum elit metus sit amet mi. Maecenas vel sem rhoncus, luctus lacus sed, volutpat enim. Vivamus malesuada quam at tellus commodo congue. Curabitur vel elit at nibh vulputate malesuada rutrum sed ante. Morbi malesuada, lacus et dapibus auctor, nulla nisl imperdiet lacus, vel viverra justo ex vitae lorem. Proin vulputate egestas augue quis facilisis. Vestibulum luctus dui in sollicitudin ullamcorper. Nulla ut ultricies ligula, nec pellentesque elit. In vitae nibh mattis, posuere magna a, tincidunt nunc. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec faucibus tortor in viverra iaculis. Proin tortor ipsum, porta nec ultricies at, mattis nec massa. Ut egestas nisi nec eros accumsan imperdiet ac eget lacus. Vestibulum egestas sapien at accumsan lacinia.

    Vestibulum quis posuere ipsum, sit amet cursus magna. Nulla vitae molestie augue. Ut maximus hendrerit neque, eget dictum mi fringilla id. Sed eleifend nisi libero, ut tempus erat volutpat eget. Mauris non sem dui. Sed id mauris non eros laoreet fermentum. Aenean luctus mauris ligula, eget commodo nunc congue vel. Nam mollis, turpis ut accumsan ornare, mi mauris rutrum magna, a maximus leo elit sed erat. Nulla hendrerit dolor vel nisi semper varius.

    Duis ante nunc, pellentesque eget odio eu, fermentum ultricies ipsum. Sed arcu nisi, viverra porta erat eget, luctus porttitor odio. Quisque scelerisque urna mauris, vitae placerat risus consequat at. Proin pellentesque libero lectus, sed ultrices tellus porttitor accumsan. Fusce placerat molestie elit, et volutpat dui luctus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non volutpat augue, non tristique arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Template code

    <style>
    @import url('https://fonts.googleapis.com/css?family=Pompiere|Arizonia');
    
    .swannieBase {
      box-sizing: border-box;
      height: auto;
      width: 75%;
      max-width: 550px;
      min-width: 200px;
      background: linear-gradient(to right top, #16222A, #3A6073);
      background: url("https://via.placeholder.com/500x500/16222A");
      background-position: center center;
      background-size: cover;
      border: #21353A .15rem solid;
      font-size: 16px;
      margin: 0 auto .90rem; 
      padding: 1rem .75rem 1.5rem;
      overflow: hidden;
    }
    
    .swannieTextie {
      display: none;
      height: auto;
      width: auto;
      background-color: rgba(19, 56, 68, .90);  
      padding: .2rem .5rem;
      border: 5px double #CDD0DA;
      font: 16px "Pompiere";
      color: white;
    }
    
    .swannieWriter {
      height: auto;
      width: 100%;
      background-color: transparent;
      visibility: visible;
      transition: transform 5s ease-in-out;
      transition-duration: 5s;
    }
    
    .swannieWriterGif img {
      display: block;
      margin: 2rem auto;
      height: auto;
      width: 100%;
      max-width: 300px;
      background-color: black;
      box-shadow: 1.5px 1.5px 2px #5e6566;
    }
    
    .swannieWriterQuote {
     display: block;
     font: 30px "Arizonia"; 
     text-align: center;
     color: white;
     text-shadow: 3px 0 1px #5e6566;
     padding-top: 15rem;
    }
    
    .swanniecredit a {
      font: 15px "Pompiere";
      text-decoration: none;
      color: white;
      position: relative;
      display: block;
      float: right;
      margin: 0;
    }
    
    .swannieBase:hover .swannieTextie {
      display: block;
    }
    
    .swannieBase:hover .swannieWriter {
      display:none;
    }
    
    @media only screen and (max-width: 768px) {
     .swannieWriter {
           display:none;
        } 
     .swannieTextie {
           display:block;
        } 
    }
    </style>
    
    <div class="swannieBase">
        <div class="swannieWriter">
          <div class="swannieWriterGif"><img src="https://via.placeholder.com/500x350"></div>
          <div class="swannieWriterQuote">'Put song lyrics or a quote here. Doesn't look bad if it spans two lines.'</div>
            
          </div>
      <div class="swannieTextie">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec eros faucibus, 
              venenatis massa et, pretium diam. Maecenas porta sit amet erat non eleifend. In lobortis 
              accumsan justo et semper. Mauris ornare bibendum lectus eu dapibus. Lorem ipsum dolor sit 
              amet, consectetur adipiscing elit. Duis in lorem urna. Sed commodo nisl turpis, eget iaculis
              metus porta non. Integer ullamcorper enim massa, quis porta arcu sagittis vel.</p>
          <p>Sed dictum sit amet dui sit amet sollicitudin. Phasellus fermentum, nulla eget tincidunt
            lacinia, arcu justo imperdiet ex, accumsan dictum elit metus sit amet mi. Maecenas vel sem 
            rhoncus, luctus lacus sed, volutpat enim. Vivamus malesuada quam at tellus commodo congue. 
            Curabitur vel elit at nibh vulputate malesuada rutrum sed ante. Morbi malesuada, lacus et 
            dapibus auctor, nulla nisl imperdiet lacus, vel viverra justo ex vitae lorem. Proin vulputate
            egestas augue quis facilisis. Vestibulum luctus dui in sollicitudin ullamcorper. Nulla ut 
            ultricies ligula, nec pellentesque elit. In vitae nibh mattis, posuere magna a, tincidunt 
            nunc. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada 
            fames ac turpis egestas. Donec faucibus tortor in viverra iaculis. Proin tortor ipsum, porta
            nec ultricies at, mattis nec massa. Ut egestas nisi nec eros accumsan imperdiet ac eget 
            lacus. Vestibulum egestas sapien at accumsan lacinia.</p>
          <p>Vestibulum quis posuere ipsum, sit amet cursus magna. Nulla vitae molestie augue. Ut
            maximus hendrerit neque, eget dictum mi fringilla id. Sed eleifend nisi libero, ut tempus 
            erat volutpat eget. Mauris non sem dui. Sed id mauris non eros laoreet fermentum. Aenean 
            luctus mauris ligula, eget commodo nunc congue vel. Nam mollis, turpis ut accumsan ornare,
            mi mauris rutrum magna, a maximus leo elit sed erat. Nulla hendrerit dolor vel nisi semper
            varius.</p>
          <p>Duis ante nunc, pellentesque eget odio eu, fermentum ultricies ipsum. Sed arcu nisi, 
            viverra porta erat eget, luctus porttitor odio. Quisque scelerisque urna mauris, vitae 
            placerat risus consequat at. Proin pellentesque libero lectus, sed ultrices tellus porttitor
            accumsan. Fusce placerat molestie elit, et volutpat dui luctus venenatis. Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Fusce non volutpat augue, non tristique arcu. Lorem 
            ipsum dolor sit amet, consectetur adipiscing elit. </p>
        </div>
      <div class="swanniecredit"><a href=https://rpginitiative.com/profile/1870-jones/>©</a></div>
    </div>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.