Jump to content
  • Summertime Fun Challenge

       (0 reviews)

    A summer colors post template for the Summertime Fun Challenge.  You can modify text size pretty easily.  The title should be kept to two lines.  If it's short enough it will stay within the circle.  Works on mobile as well with a slightly different format.  Works nicely with or without an image.  If you do not want the image, just take away the <img> tag.    Make sure to place images within the <p>.  All images will be max 100px and rounded.  They will resize automatically and constrain to proportions.  Create line breaks using <br>.


    Actual Template Responsive

    Summertime Fun Challenge

    ImagehereLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sollicitudin aliquam. Fusce consequat imperdiet lobortis. Donec rutrum, turpis a egestas faucibus, ante mauris pretium libero, in aliquam arcu ex in nisi. Mauris scelerisque sapien id eros consequat condimentum. Donec porttitor semper eleifend. Mauris faucibus velit ac vestibulum ullamcorper. Aliquam semper posuere luctus. Cras tempor sodales quam vitae maximus. Donec quis fermentum orci. Nulla pellentesque diam elit, eget rhoncus eros commodo sed. Suspendisse ex lectus, tempor in tellus quis, rutrum rhoncus sem. Ut in venenatis nisi. Cras rutrum ultricies arcu, id interdum mi.

    Template code

      <style>
        
        @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Antic&display=swap');
        
    .funcontainerall {
      max-width: 600px;
    }
      
    .stcircle {
        align-items: center;
        background: #026475;
        border-radius: 50%/50%; 
        border-spacing: 5px;
        display: table;
        flex-direction: column;
        height: 500px;
        justify-content: center;
        position: relative;
        width: 500px;
    }
    
    .stcircle div {
        align-items: center;
        border-spacing: 5px;
        color: #fbb728;
        display: table;
        flex-direction: column;
        font-family: 'Alfa Slab One', cursive;
        font-size: 40px;
        justify-content: center;
        line-height: 35px;
        margin: auto;
        position: relative;
        text-align: center;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        top: 25px;
    }
    
    .stcircle img {
        border-radius: 50%;
        float: left;
        max-width: 100px;
        padding-right: 5px;
    }
    
    .stcircle ::first-letter {
        font-weight: bold;
    }
    
    .stcircle br ::after {
        font-weight: bold;
    }
    
    .stcircle p {
        background-color: #68bdcc;
        border: 1px solid #013a44; 
        color: #023038;
        font-family: 'Antic', sans-serif;
        font-size: 12px;
        height: 295px;
        justify-content: left;
        left: 50%;
        overflow-y: scroll;
        padding: 10px;
        position: absolute;
        text-align: justify;
        top: 50%; 
        transform: translate(-50%,-50%);
        width: 295px;
     }
    
    .stcircle ::-webkit-scrollbar {
         width: 5px;
    }
    
    .stcircle  ::-webkit-scrollbar-track {
         background: #68bdcc;
    }
    
    .stcircle ::-webkit-scrollbar-thumb {
         background: #023038; 
    }
    
    @media only screen and (max-device-width: 480px) {
         
     
    .stcircle {
    font-size: 2em;
    max-width: 500px;
    width: 100%;
       }
    
    .stcircle div {
    font-size: 2em;
    max-width: 500px;
    Padding-bottom: 30px;
    width: 100%;
    }
      
    </style>
    
    
    <div class="funcontainerall">
    <div class="stcircle"><div>Summertime Fun Challenge</div><p><img src="https://via.placeholder.com/150" alt="Imagehere">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sollicitudin aliquam. Fusce consequat imperdiet lobortis. Donec rutrum, turpis a egestas faucibus, ante mauris pretium libero, in aliquam arcu ex in nisi. Mauris scelerisque sapien id eros consequat condimentum. Donec porttitor semper eleifend. Mauris faucibus velit ac vestibulum ullamcorper. Aliquam semper posuere luctus. Cras tempor sodales quam vitae maximus. Donec quis fermentum orci. Nulla pellentesque diam elit, eget rhoncus eros commodo sed. Suspendisse ex lectus, tempor in tellus quis, rutrum rhoncus sem. Ut in venenatis nisi. Cras rutrum ultricies arcu, id interdum mi.</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.