White Services

<!DOCTYPE html>
<html>
<head>
<title>service Box</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="box">
<div class="icons">01</div>
<div class="content">
<h3>Services Name</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="icons">02</div>
<div class="content">
<h3>Services Name</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="icons">03</div>
<div class="content">
<h3>Services Name</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
body{margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Poppins', sans-serif;}
.container .box{position: relative;width: 350px; padding: 40px; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, .1); border-radius: 4px; margin: 20px; box-sizing: border-box; overflow: hidden; text-align: center;}
.container .box:before{content: '' width:50%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgb(255, 255, 255, .2) z-index:2; pointer-events: none;}
.container {display: flex; flex-wrap: wrap; justify-content: space-between;}
.container .box .icons{position: relative; width: 80px; height: 80px; color: #fff; background-color: #000; display: flex; justify-content: center; align-items: center; margin: 0px auto; border-radius: 50%; font-size: 40px; font-weight: 700; transition: 1s;}
.container .box:nth-child(1) .icons{box-shadow: 0 0 0 0 #e91e63; background-color: #e91e63;}
.container .box:nth-child(1):hover .icons{box-shadow: 0 0 0 400px #e91e63; background-color: #e91e63;}
.container .box:nth-child(2) .icons{box-shadow: 0 0 0 0 #23e629; background-color: #23e629;}
.container .box:nth-child(2):hover .icons{box-shadow: 0 0 0 400px #23e629; background-color: #23e629;}
.container .box:nth-child(3) .icons{box-shadow: 0 0 0 0 #2196f3; background-color: #2196f3;}
.container .box:nth-child(3):hover .icons{box-shadow: 0 0 0 400px #2196f3; background-color: #2196f3;}
.container .box .content{position: relative; z-index: 1; transition: 0.5s; color: #333;}
.container .box:hover .content{color: #fff;}
.container .box .content h3{font-size: 20px; margin: 10px 0; padding: 0px;}
.container .box .content p{margin: 0px; padding: 0px;}
a{display: inline-block; padding: 10px 20px; background-color: #fff; border-radius: 4px; text-decoration: none; color: #000; font-weight: 500; margin-top: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, .2)}
</style>

Comments

Post a Comment

Popular posts from this blog

Call Desktop

 <div class="phone_lefts-side glow" data-target="html">     <a title="Contact Us" href="tel:+91 "><i class="fa fa-phone"></i></a> </div> /*Call Me*/ .phone_lefts-side{position:relative;} .phone_lefts-side a{ position: fixed;    bottom: 50px;    color:white;    background-color:#03a84e;   animation: topBottom 4s infinite;    z-index: 11111;    left: 20px;    background-color: #0000ff;    color: white;    padding: 11px 16px;    border-radius: 50%;    font-size: 20px;    animation: bounce 4s infinite alternate;} .glow {  font-size: 80px;  color: #fff;  text-align: center;  -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate;  animation: glow 1s ease-in-out infinite alternate;} @-webkit-keyframes glow { from {text-shadow: 0 0 10px ...
Read more

Right click disable

 <body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }        }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.getElementById(sc...
Read more

soft button

Image
<!DOCTYPE html> <html> <head> <title>Soft Button</title> </head> <body> <a href="#"><span>Button</span></a> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f2f3f7; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a84a2; font-size: 18px; border-radius: 40px; box-shadow: -2px -2px 8px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0,0,0,0.15); } a:hover{ box-shadow: inset -2px -2px 8px rgba(255,255,255,1), inset -2px -2px 12px rgba(255,255,255,0.5), inset 2...
Read more