Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

.modelpopup-btn {
 font-family: 'Rubik', sans-serif;
 background-color: #000;
 border: 1px solid transparent;
 color: #fff;
 font-size: 16px;
 padding: 14px 20px;
 margin-bottom: 25px;
 display: inline-block;
 outline: none;
 cursor: pointer;
 position: fixed;
 left: 50%;
 top: 20%;
 transform: translateX(-50%);
}

/**Typeo CSS End**/
.subscribemodel, .subscribemodel * {
 --base-fm: 'Rubik', sans-serif;
 --title-size: 24px;
 --base-size: 14px;
 --white-clr: #ffffff;
 --black-clr: #000000;
}

.model-ovelay {
 position: fixed;
 transition: all 0.5s ease 0s;
 visibility: hidden;
 opacity: 0;
 width: 100%;
 height: 100%;
 float: left;
 background: rgba(0, 0, 0, 0.4);
 pointer-events: auto;
 top: 0px;
 z-index: 988;
}

.modelclose {
 cursor: pointer;
 float: right;
 font-size: 40px;
 text-align: center;
 line-height: 36px;
 color: var(--black-clr);
 position: absolute;
 right: 5px;
 top: 2px;
 z-index: 1;
}

.subscribemodel {
 max-width: 800px;
 width: 100%;
 transition: all 0.5s ease 0s;
 margin: auto;
 background: #fff;
 position: fixed;
 top: 50%;
 left: 50%;
 opacity: 0;
 pointer-events: none;
 z-index: 999;
 max-height: 95%;
 overflow: auto;
 transform: translate(-50%, -50%);
 font-family: var(--base-fm);
}

.custom-popup .model-ovelay {
 pointer-events: auto;
 opacity: 1;
 visibility: visible;
}

.custom-popup .subscribemodel {
 pointer-events: auto;
 opacity: 1;
}

/**Inner Content part**/
.model-content {
 display: flex;
 flex-flow: row wrap;
 width: 100%;
 padding: 15px;
}

.model-content .img-part {
 max-width: 50%;
}

.model-content .img-part img {
 max-width: 100%;
 display: block;
}

.model-content .cont-part {
 width: 100%;
 max-width: 50%;
 padding: 10px 25px 10px 10px;
}

.model-content .cont-part h3 {
 font-size: var(--title-size);
 text-transform: uppercase;
 margin: 10px 0px;
}

.model-content .cont-part p {
 margin: 0px;
 font-size: var(--base-size);
 line-height: 1.5;
 display: inline-block;
 width: 100%;
}

.subscribe-form {
 width: 100%;
 margin-top: 20px;
}

.row-subscibe {
 width: 100%;
}

.row-subscibe input {
 width: 100%;
 font-family: var(--base-fm);
 font-size: var(--base-size);
 border: #ccc 1px solid;
 padding: 14px 15px;
 outline: none;
}

.subscribe-btn {
 width: 100%;
 background-color: var(--black-clr);
 color: var(--white-clr);
 padding: 14px;
 cursor: pointer;
 text-transform: uppercase;
 font-weight: 700;
 font-family: var(--base-fm);
 margin-top: 10px;
 border: var(--black-clr) 1px solid;
}

.subscribe-btn:hover {
 background-color: transparent;
 color: var(--black-clr);
}

.checkbox-group {
 margin-top: 20px;
 font-size: var(--base-size);
 position: relative;
}

.checkbox-group input {
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0
}

.checkbox-group label {
 padding-left: 24px;
 cursor: pointer;
}

.checkbox-group label:before {
 content: '';
 width: 16px;
 height: 16px;
 border: #ccc 1px solid;
 position: absolute;
 left: 0px;
 top: 0px;
 display: inline-block;
}

.checkbox-group input:checked + label:after {
 content: '';
 width: 10px;
 height: 10px;
 background-color: var(--black-clr);
 position: absolute;
 left: 4px;
 top: 4px;
 display: inline-block;
}

.checkbox-group input:checked + label:before {
 border-color: var(--black-clr);
}

@media(max-width:992px) {
 .subscribemodel {
  width: calc(100% - 30px);
 }

 .subscribemodel {
  width: calc(100% - 30px);
 }

 .model-content .cont-part {
  padding: 0px;
  max-width: 100%;
  order: 2;
 }

 .model-content .img-part {
  max-width: 100%;
  order: 1;
  margin-bottom: 10px;
 }

}

/**Inner Content part**/

function popupModel() {
 document.body.classList.add('custom-popup');
}
function popupModelClose() {
 document.body.classList.remove('custom-popup');
}