| <!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