Friday, December 31, 2021

Image Hover FullScreen Zoom

 Image Hover FullScreen Zoom


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Image Hover Fullscreen Zoom</h1>

<p>Hover over the image to see the zoom effect.

</p>

<div class="container">

    <img src="man.png"alt="man">

    <div class="overlay">

        <div class="text">Text</div>

    </div>

</div>

</body

</html>>


CSS Image Hover FullScreen Zoom Style

 .container{

  position: relative;

  width: 50%;

}

img{

  display: block;

  width:100%;

  height: auto;

}

.overlay{

  position: absolute;

  bottom:0;

  left:0;

  right:0;

  background-color: #008cba;

  overflow: hidden;

  width:100%;

  height:100%;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  -webkit-transition:3s ease ;

  transition:3s ease;

}

.container:hover .overlay{

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}

.text{

  color:white;

  font-size:20px;

  position: absolute;

  top:50%;

  left:50%;

  -webkit-transition:-50%, -50%;

  -ms-transition:-50%, -50%;

  transition:-50%, -50%;


} 



  

at No comments:

Thursday, December 30, 2021

Thumbnail

 Thumbnail


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Thumbnail</h1>

<p>Click to the image to enlarge it</p>

<a href="forest.jpg">

    <img src="forest.jpg" width="150px">

</a>

</body>


</html>


CSS Thumbnail Style

 img{

  border:1px solid #ddd;

  border-radius:5px;

  padding:5px;

  width:150px;

}

img:hover{

  box-shadow:0 0 2px 1px rgba(0,140,186,0.5) ;

}

at No comments:

Apply a Blur Effect in the image

 Apply a Blur Effect in the image


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Apply a blur Effect in the image</h1>

<img src="pin.jpg" width="300" height="300">

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>


</body>


</html>


CSS Blur Effect Style

 img{

  -webkit-filter: blur(5px);

  filter: blur(5px);

}

at No comments:

Wednesday, December 29, 2021

CSS Calendar

 CSS Calendar


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>CSS Calendar 2021</h1>

<div class="month">

    <li class="prev">&#10094</li>

    <li class="next">&#10095</li>

     <li>Ausgust<br><span style="font-size: 18px;">2021</span></li>

</div>

<ul class="weekdays">

    <li>Mo</li>

    <li>Tu</li>

    <li>We</li>

    <li>Th</li>

    <li>Fr</li>

    <li>Sa</li>

    <li>Su</li>

</ul>

<ul class="days">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li><span class="active">10</span></li>

    <li>11</li>

    <li>12</li>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    <li>20</li>

    <li>21</li>

    <li>22</li>

    <li>23</li>

    <li>24</li>

    <li>25</li>

    <li>26</li>

    <li>27</li>

    <li>28</li>

    <li>29</li>

    <li>30</li>

    <li>31</li>

</ul>

</body>


</html>


CSS Calendar Style

 *{

  box-sizing: border-box;

}

ul{

  list-style-type: none;

}

body{

  font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.month{

  padding:70px 25px;

  width:100%;

  background-color:#1abc9c;

  text-align: center;

}

.month ul{

  padding:0;

  margin:0;

}

.month ul li{

  color:white;

  font-size: 20px;

  text-transform: uppercase;

  letter-spacing:3px;

}

.month, .prev{

  float: left;

  padding-top:10px;

}

.month, .next{

  float: right;

  padding-top: 10px;

}

.weekdays{

  margin:0;

  padding:10px 0;

  background-color: #ddd;

}

.weekdays li{

  display: inline-block;

  width:13.6%;

  color: #666;

  text-align: center;

}

.days{

  padding:10px 0;

  background-color:#eee;

  margin:0;

}

.days li{

  list-style-type: none;

  display: inline-block;

  width:13.6%;

  margin-bottom:5px;

  font-size:12px;

  color:#777;

}

.days li .active{

  padding: 5px;

  background-color:#1abc9c;

  color: white:importan;

}

@media screen and (max-width:720;) {

  .weekdays li,  .days li{

    width:13.1% ;

  }

}

@media screen and (max-width:420;) {

  .weekdays li,  .days li{

    width:12.1% ;

  }

  .days, .active{

    padding:2px;

  }

}

@media screen and (max-width:920;) {

  .weekdays li,  .days li{

    width:12.2% ;

  }

}

at No comments:

Tuesday, December 28, 2021

Fading Button-"Fade in Effect "

 Fading Button-"Fade in Effect "

 


<!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Fading -"fad in Effect"</h1>

<button class="btn">Hover Over me</button>

</body>


</html>


CSS Fading Button-"Fade in Effect "Style

 .btn{

  background-color: #ddd;

  border: none;

  color: #000;

  padding:16px 32px;

  text-align: center;

  font-size:16px;

  margin:4px 0;

  transition:0.3s;

}

.btn:hover{

  background-color:#3e8e41;

  color: #fff;

}



at No comments:

Change Background Image on Scroll

Change Background Image on Scroll


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<div class="imge img1"></div>

<div class="imge img2"></div>

<div class="imge img3"></div>

<div class="imge img4"></div>

<div class="imge img5"></div>

<div class="imge img6"></div>

<div class="text">TEXT</div>


</body>


</html>


CSS Change Background Image on Scroll Style

*{

  box-sizing: border-box;

}

body{

  height:100%;

  margin:0;

  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

.imge{

  height:50%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

.img1{

  background-image: url(snow.jpg);

}

.img2{

  background-image: url(shit.jpg);

}

.img3{

  background-image: url(lights.jpg);

}.img4{

  background-image: url(hero.jpg);

}.img5{

  background-image: url(forest.jpg);

}.img6{

  background-image: url(woods.jpg);

}

.text{

  background-color: rgb(0,0,0);

  background-color: rgba(0,0,0,0.4);

  color: white;

  font-size:80%;

  font-weight: bold;

  border:10px solid #f1f1f1;

  position: fixed;

  top:50%;

  left:50%;

  transform: translate(-50%,-50%);

  z-index:2 ;

  width:300px;

  padding:20px ;

  text-align: center;


}


at No comments:

Thursday, December 23, 2021

The rotete()Method

 The rotete()Method


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>The rotete()Method</h1>

    <p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

    <div>This a normal div element</div>

    <div class="mydiv">This div element is rotated clockwise 20 degrees.</div>

</body>


</html>


CSS The rotete()Method Style

 div{

  width:300px;

  height:100px;

  background-color:red ;

  border:1px solid black ;

}

.mydiv{

  transform:rotate(20deg) ;

}

at No comments:

Image with Transparent Text

 Image with Transparent Text


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Image with Transparent</h1>

<div class="container">

<img src="notebook.jpg" style="width:100%;">

<div class="content">

    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p>

</div>

</div>

</body>


</html>


CSS Image with Transparent Text Style

 body{

  font-family: Arial, Helvetica, sans-serif;

  font-size:17px;

}

.container{

  position: relative;

  max-width:800px;

  margin:0 auto ;

}

.container img{vertical-align: middle;}

.content{

  position: absolute;

  bottom:0 ;

  background:rgba(0,0,0) ;

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

  color: #f1f1f1;

  width:100%;

  padding:20px ;

}

at No comments:

Wednesday, December 22, 2021

Product Card

 Product Card


<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="STYLESHEET" type="text/css" href="web.css">
    <title>web design</title>
</head>

<body>
<h1 style="text-align: center;">Product Card</h1>
<div class="card">
    <img src="jeans3.jpg" style="width: 100%;">
<h1>Triloard Jeans</h1>
<p class="pirce">$19.99</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.
</p>
<p><button>ADD TO Cart</button></p>
</div>
</body>

</html>

 

CSS Product Card Style

 .card{

  box-shadow:0px 4px 8px 0 rgba(0,0,0,0.2) ;

  max-width:300px;

  margin: auto;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

}

.price{

  color: gray;

  font-size:22px;

}

button{

  background-color: black;

  color: white;

  border: none;

  padding:12px ;

  text-align: center;

  width:100%;

  cursor: pointer;

  font-size:18px ;

}

at No comments:

Transform+The Transition()Method

 Transform+The Transition()Method


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The Transition() Method</h1>

<p>The translate() method moves an element from its current position:</p>

<div>

    This div element is moved 50 pixels to the right, and 100 pixels down from its current position.</div>

</body>


</html>


CSS Transform+The Transition()Method Style

div{

  width:300px;

  height:100px;

  background-color: red;

  border: 1px solid black;

  transform: translate(50px,100px);

}

at No comments:

Tuesday, December 21, 2021

Transition+Transform

 Transition+Transform


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Transition+Transform</h1>

<p>Hover over the div element below:

</p>

<div></div>

</body>


</html>


CSS Transition+Transform Style

 div{

  width:100px;

  height:100px;

  background-color: red;

  transition:width 2s,height 2s, transform 2s ;

}

div:hover{

  width: 300px;

  height:300px;

  transform: rotate(180deg);

}

at No comments:

Monday, December 20, 2021

Split Button Dropdown

 Split Button Dropdown

 


<!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Split Button Dropdown</h1>

<p>Move the mouse over the arrow icon to open the dropdown menu.

</p>

<button class="btn">Button</button>

<div class="drop">

<button class="btn" style="border-left:1px solid #0b8bf2 ;"><i class="fa fa-caret-down"></i></button>

<div class="down">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

</div>

</div>

</body>


</html>


CSS Split Button Dropdown Style

.btn{

  background-color: #2196f3;

  color:white;

  padding:16px;

  font-size:16px;

  border: none;

  outline: none;

}

.drop{

  position: absolute;

  display: inline-block;

}

.down{

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width:160px;

  z-index:1 ;

}

.down a{

  color: #000;

  padding:12px 16px;

  text-decoration: none;

  display: block;

}

.down a:hover{

  background-color: #ddd;

}

.drop:hover .down{

  display: block;

}

.btn:hover .drop:hover .btn{

  background-color: #0b7dda;

}

 

at No comments:

Sunday, December 19, 2021

Nav on image

 Nav on image


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Nav on image</h1>

<div class="img">

    <div class="container">

        <div class="nav">

      <a href="#">Home</a>

      <a href="#">News</a>

      <a href="#">Contact</a>

      <a href="#">Aboutus</a>


        </div>

    </div>

</div>

</body>


</html>


CSS Nav on image Style

 .img{

  background-image: url(hero.jpg);

  min-height:380px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}

.container{

  position: absolute;

  margin:20px;

  width: auto;

}

.nav{

  overflow: hidden;

  background-color: #333;

}

.nav a{

  float: left;

  color:#f2f2f2;

  text-align: center;

  padding:14px 16px;

  text-decoration: none;

  font-size:17px ;

}

.nav a:hover{

   background-color:#ddd;

   color: #000;

}

at No comments:

Saturday, December 18, 2021

Fade in Overlay icon with Cards

 Fade in Overlay icon with Cards


<!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Fade in Overlay icon</h1>

<p>Hover over the image to see the effect.

</p>

<div class="container">

    <img src="man.png">

    <div class="overlay">

        <a href="#" class="icon">

            <i class="fa fa-user"></i>

        </a>

    </div>

</div>

</body>


</html>


 CSS Fade in Overlay icon with Cards STYLE

.container{

  position: relative;

  width:100%;

  max-width:400px;

}

img{

  display: block;

  width:100%;

  height: auto;

}

.overlay{

  position: absolute;

  bottom:0px;

  top:0px;

  left:0px;

  right:0px;

  height:100%;

  width:100%;

  opacity:0;

  transition:.3s ease;

  background-color: red;

}

.container:hover .overlay{

  opacity:1;

}

.icon{

  color:white;

  font-size:100px;

  position: absolute;

  top:50%;

  left:50%;

  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  text-align: center;

}

.fa-user:hover{

  color: #eee;

}


at No comments:

Convert the image to grayscale

 Convert the image to grayscale


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<p>Convert to image the grayscale</p>

<img src="pin.jpg" width="300" height="400">

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>pineapple.jpg

</body>


</html>


CSS Convert the image to grayscale Style

 img{

  -webkit-filter:grayscale(100%);

  filter: grayscale(100%);

}

at No comments:

Friday, December 17, 2021

Image Cutout Text Effect

Image Cutout Text Effect


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

 <h1>CSS Cutout Effect</h1>

 <div class="container">

     <div class="text">NATURE</div>

 </div>

 <p>This example creates a responsive cutout text/knockout text - text that appears cut out on top of a background image.</p>

<p>Resize the browser window to see the responsive effect.</p>

<p><strong>Note:</strong> This example does not work in Internet Explorer or Edge.</p>

</body>


</html>


CSS Image Cutout Text Effect Style

 body{

  font-family: Arial, Helvetica, sans-serif;

}

.container{

  background-image:url(hero.jpg) ;

  background-size: cover;

  position: relative;

  height:300px;

}

.text{

  background-color: white;

  color: #000;

  font-size:10vw;

  font-weight: bold;

  margin:0 auto;

  padding: 10px;

  width:50%;

  text-align: center;

  position: absolute;

  top:50%;

  left:50%;

  transform: translate(-50%,-50%);

  mix-blend-mode: screen;

}

at No comments:

Thursday, December 16, 2021

Image Overlay Title

 Image Overlay Title


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>Image Overlay Title</h1>

    <p>Hover over the image to see the effect.</p>

    <div class="container">

    <img src="man.png">

     <div class="Overlay">My Name John</div>

    </div>

</body>


</html>


CSS Image Overlay Title Style

 .container{

  position: relative;

  width:50%;

  max-width:300px;

}

img{

  display: block;

  width:100%;

  height:auto ;

}

.Overlay{

  position: absolute;

  bottom:0px;

  background-color:rgba(0,0,0,0) ;

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

  color: #f1f1f1;

  width:100%;

  transition:.5s ease;

  color: white;

  opacity:0;

  font-size:20px;

  padding:20px;

  text-align: center;

}

.container:hover .Overlay{

  opacity:1;

}

at No comments:

Sticky image:Scroll down to See the Effect

 Sticky image:Scroll down to See the Effect


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>Sticky Image:Scroll Driwn to see the Effect</h1>

    <p>The image will "stick" to the screen when you reach its scroll position.</p>

    <img src="man.png" width="400" height="300">

    <h2>Scroll Down</h2>

<p>Some example text..</p>

<p><b>Scroll back up again to "remove" the sticky position.</b></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>


</html>


CSS Sticky image:Scroll down to See the Effect Style

img{

  position: -webkit-sticky;

  position: sticky;

  top:0px;

  width:200px ;

}

at No comments:
Subscribe to: Posts (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...