How to make Sticky ad or sticky div with close button?

How to make Sticky ad or sticky div with close button?

How to make Sticky ad or sticky div with close button

HTML Code

 <div id="T4Tutorials_UP1" class="T4Tutorials">
    	<div class="T4Tutorials_UP" >
    		<h2>Welcome</h2>
    		<a class="Exit" href="#T4Tutorials_UP1">×</a>
    		<div class="Main_Main_Content">
    			This is the div showing the Main_Content
    		</div>
    	</div>
    </div>

CSS Code

  .T4Tutorials {
    position: fixed;
    bottom: 0;
    height: 90px;
    left: 0;
    right: 0;
    background: red;
    transition: opacity 500ms;
    visibility: visible;
    opacity: 1;
}
          .T4Tutorials:target {
            visibility: hidden;
            opacity: 0;
            display:none
          }
          .T4Tutorials_UP {
    margin: 5px auto;
    padding: 0px;
    background: #fff;
    border-radius: 5px;
    width: 80%;
    position: relative;
}
          .T4Tutorials_UP h2 {
            margin-top: 0;
            color: green;
            font-family: Tahoma, Arial, sans-serif;
          }
          .T4Tutorials_UP .Exit {
    position: absolute;
    top: -40px;
    right: 0px;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: blue;
    background-color: chartreuse;
}
          .T4Tutorials_UP .Exit:hover {
            color: orange;
          }
          .T4Tutorials_UP .Main_Content {
            max-height: 30%;
            overflow: auto;
          }

Download Code

sticky ad with close button

Leave a Reply

Contents Copyrights Reserved By T4Tutorials