Blob shape hover effect on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/FWqlH7012vA Contact Us: https://www.fiverr.com/s/DBj4m3P #Blobshapehovereffect, #calculatoronsquarespace, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

Image
Blob shape hover effect on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/FWqlH7012vA Contact Us: https://www.fiverr.com/s/DBj4m3P #Blobshapehovereffect , #calculatoronsquarespace , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode

Advanced Card border with html & css in 2022 by jishaansinghal

 <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Document</title>

  <style>

body{

margin: 0;

padding: 0;

width: 100%;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #060c21;

}

.container .box{

position: relative;

width: 200px;

height: 300px;

background: #060c21;

display: flex;

justify-content: center;

align-items: center;

border: 1px solid #000;

padding: 15px;

  }

.container .box::before{

  content: "";

  position: absolute;

  top: -2px;

  left: -2px;

  bottom: -2px;

  right: -2px;

  background: #fff;

  transform: skew(2deg,2deg);

  z-index:-1;

}

.container .box::before{

  background: linear-gradient(315deg,green, #fff);

}


  h2,p{

    color: #fff;

    font-weight: bold;

  }

  h2 {

    text-transform: uppercase;

  }



  </style>


</head>

<body>

  <div class="container">

<div class="box">

<div class="content">

<h2>jishaan</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Officiis ipsam eos rerum at necessitatibus expedita.</p>

</div>

</div>

  </div>

</body>

</html>

Comments

Popular posts from this blog

how to add a button as a circle button on the Squarespace by jishaansinghal

How to add Vector Scrolling GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal

Bouncing word change animation on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/X1ERq32l6ik Contact Us: https://www.fiverr.com/s/R7ko6EV #Bouncingwordchange, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode