Develop Reference

How can I hide or show a bootstrap modal in my web page?

I'm new at web programming and trying to figure out modal structure. The point is , my modal is always open even if I refresh the page. I want it to be activated after user clicks a submitting button.
Sory for long codes but I'm using a Colorlib template to make some practice. I didn't design the all form page by myself. Can you examine the code and tell me what is wrong with the bootstrap model? Why it is shown in the beginning, at the top of the page? I tried with different pages and it was working well.
HTML Code :
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="page-wrapper bg-gra-03 p-t-45 p-b-50">
<div class="wrapper wrapper--w790">
<div class="card card-5">
<div class="card-heading">
<h2 class="title">PROJENİZ VE KENDİNİZ HAKKINDA BİLGİ VERİNİZ</h2>
</div>
<div class="card-body">
<form method="post" action="/proje_ekle">
<div class="form-row m-b-55">
<div class="name">İsminiz ve<br>Soy İsminiz</div>
<div class="value">
<div class="row row-space">
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="first_name">
<span class="asterisk_input"> </span>
<label class="label--desc">isim</label>
</div>
</div>
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="last_name">
<span class="asterisk_input"> </span>
<label class="label--desc">soy isim</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Şirketiniz</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="company_name">
<option disabled="disabled" selected="selected">Şirketinizi Seçiniz
</option>
<option>Maxion</option>
<option>IGYA</option>
<option>İnci Holding</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Departmanınız</div>
<div class="value">
<div class="input-group">
<!-- <input class="input--style-5" type="text" name="department_name"> -->
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="department_name">
<option disabled="disabled" selected="selected">Departmanınızı seçiniz
</option>
<option>Bilgi Teknolojileri</option>
<option>İnsan Kaynakları</option>
<option>Mali İşler</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin İsmi</div>
<div class="value">
<div class="input-group">
<input class="input--style-5" type="text" name="project_name">
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Kategorisi</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="project_category">
<option disabled="disabled" selected="selected">Projenizin Kategorisini
Seçiniz
</option>
<option>ARGE</option>
<option>Mühendislik</option>
<option>İmalat</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Açıklaması</div>
<div class="value">
<div class="input-group">
<textarea cols="40" rows="3" class="input--style-5" type="text"
name="project_explanation"></textarea>
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row p-t-20">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Proje Dosyaları Ekle</label>
<input type="file" class="form-control" id="inputGroupFile" multiple>
</div>
</div>
<div>
<button class="btn btn--radius-2 btn--red" type="submit">Projemi Kütüphaneye Kaydet</button>
</div>
</form>
</div>
</div>
</div>
</div>
CSS Codes :
/* ==========================================================================
#FONT
========================================================================== */
.font-robo {
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}
.font-poppins {
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.font-opensans {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
}
/* ==========================================================================
#GRID
========================================================================== */
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row .col-2:last-child .input-group-desc {
margin-bottom: 0;
}
.row-space {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.row-refine {
margin: 0 -15px;
}
.row-refine .col-3 .input-group-desc,
.row-refine .col-9 .input-group-desc {
margin-bottom: 0;
}
.col-2 {
width: -webkit-calc((100% - 30px) / 2);
width: -moz-calc((100% - 30px) / 2);
width: calc((100% - 30px) / 2);
}
#media (max-width: 767px) {
.col-2 {
width: 100%;
}
}
.form-row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
}
.form-row .name {
width: 125px;
color: #555;
font-size: 15px;
font-weight: 700;
}
.form-row .value {
width: -webkit-calc(100% - 125px);
width: -moz-calc(100% - 125px);
width: calc(100% - 125px);
}
#media (max-width: 767px) {
.form-row {
display: block;
}
.form-row .name,
.form-row .value {
display: block;
width: 100%;
}
.form-row .name {
margin-bottom: 7px;
}
}
.col-3,
.col-9 {
padding: 0 15px;
position: relative;
width: 100%;
min-height: 1px;
}
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
#media (max-width: 767px) {
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 35%;
-moz-box-flex: 0;
-ms-flex: 0 0 35%;
flex: 0 0 35%;
max-width: 35%;
}
}
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-moz-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
#media (max-width: 767px) {
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 65%;
-moz-box-flex: 0;
-ms-flex: 0 0 65%;
flex: 0 0 65%;
max-width: 65%;
}
}
/* ==========================================================================
#BOX-SIZING
========================================================================== */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* ==========================================================================
#RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0;
}
button {
outline: none;
background: none;
border: none;
}
/* ==========================================================================
#PAGE WRAPPER
========================================================================== */
.page-wrapper {
min-height: 100vh;
}
body {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
/* ==========================================================================
#BACKGROUND
========================================================================== */
.bg-blue {
background: #2c6ed5;
}
.bg-red {
background: #fa4251;
}
.bg-gra-01 {
background: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a18cd1));
background: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -moz-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -o-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%);
}
.bg-gra-02 {
background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079));
background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}
.bg-gra-03 {
/* background: -webkit-gradient(linear, left bottom, right top, from(#08aeea), to(#b721ff));
background: -webkit-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -moz-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -o-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: linear-gradient(to top right, #08aeea 0%, #b721ff 100%); */
background-image: url(/images/form_images/form_resim.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* ==========================================================================
#SPACING
========================================================================== */
.p-t-100 {
padding-top: 100px;
}
.p-t-130 {
padding-top: 130px;
}
.p-t-180 {
padding-top: 180px;
}
.p-t-45 {
padding-top: 45px;
}
.p-t-20 {
padding-top: 20px;
}
.p-t-15 {
padding-top: 15px;
}
.p-t-10 {
padding-top: 10px;
}
.p-t-30 {
padding-top: 30px;
}
.p-b-100 {
padding-bottom: 100px;
}
.p-b-50 {
padding-bottom: 50px;
}
.m-r-45 {
margin-right: 45px;
}
.m-r-55 {
margin-right: 55px;
}
.m-b-55 {
margin-bottom: 55px;
}
/* ==========================================================================
#WRAPPER
========================================================================== */
.wrapper {
margin: 0 auto;
}
.wrapper--w960 {
max-width: 960px;
}
.wrapper--w790 {
max-width: 790px;
}
.wrapper--w780 {
max-width: 780px;
}
.wrapper--w680 {
max-width: 680px;
}
/* ==========================================================================
#BUTTON
========================================================================== */
.btn {
display: inline-block;
line-height: 50px;
padding: 0 50px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-family: inherit;
}
.btn--radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn--radius-2 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn--pill {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.btn--green {
background: #57b846;
}
.btn--green:hover {
background: #4dae3c;
}
.btn--blue {
background: #4272d7;
}
.btn--blue:hover {
background: #3868cd;
}
.btn--red {
background: #1a1a1a;
}
.btn--red:hover {
background: #b31515;
}
/* ==========================================================================
#DATE PICKER
========================================================================== */
td.active {
background-color: #2c6ed5;
}
input[type="date" i] {
padding: 14px;
}
.table-condensed td, .table-condensed th {
font-size: 14px;
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.daterangepicker td {
width: 40px;
height: 30px;
}
.daterangepicker {
border: none;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
display: none;
border: 1px solid #e0e0e0;
margin-top: 5px;
}
.daterangepicker::after, .daterangepicker::before {
display: none;
}
.daterangepicker thead tr th {
padding: 10px 0;
}
.daterangepicker .table-condensed th select {
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
padding: 5px;
outline: none;
}
/* ==========================================================================
#FORM
========================================================================== */
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.radio-container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
font-size: 16px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked ~ .checkmark {
background-color: #e5e5e5;
}
.radio-container input:checked ~ .checkmark:after {
display: block;
}
.radio-container .checkmark:after {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #57b846;
}
.checkmark {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
height: 20px;
width: 20px;
background-color: #e5e5e5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* input[required]{
background-image: radial-gradient(#F00 30%, transparent 30%), radial-gradient(#F00 15%, transparent 16%);
background-size: 1em 1em;
background-position: right top;
background-repeat: no-repeat;
} */
.asterisk_input::after {
content:" *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -15px;
font-size: large;
padding: 0 5px 0 0; }
.input--style-5 {
background: #e5e5e5;
line-height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.input-group-desc {
position: relative;
}
#media (max-width: 767px) {
.input-group-desc {
margin-bottom: 40px;
}
}
.input-group {
position: relative;
margin: 0;
}
.label {
color: #555;
font-size: 15px;
font-weight: 700;
}
.label--block {
width: 100%;
}
.label--desc {
position: absolute;
text-transform: capitalize;
display: block;
color: #999;
font-size: 14px;
margin: 0;
margin-top: 7px;
left: 0;
}
#inputGroupFile{
position:relative;
top:1.2em;
font-size: 0.8em ;
color: #b31515;
}
JavaScript Codes :
(function ($) {
'use strict';
/*==================================================================
[ Daterangepicker ]*/
try {
$('.js-datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoUpdateInput": false,
locale: {
format: 'DD/MM/YYYY'
},
});
var myCalendar = $('.js-datepicker');
var isClick = 0;
$(window).on('click',function(){
isClick = 0;
});
$(myCalendar).on('apply.daterangepicker',function(ev, picker){
isClick = 0;
$(this).val(picker.startDate.format('DD/MM/YYYY'));
});
$('.js-btn-calendar').on('click',function(e){
e.stopPropagation();
if(isClick === 1) isClick = 0;
else if(isClick === 0) isClick = 1;
if (isClick === 1) {
myCalendar.focus();
}
});
$(myCalendar).on('click',function(e){
e.stopPropagation();
isClick = 1;
});
$('.daterangepicker').on('click',function(e){
e.stopPropagation();
});
} catch(er) {console.log(er);}
/*[ Select 2 Config ]
===========================================================*/
try {
var selectSimple = $('.js-select-simple');
selectSimple.each(function () {
var that = $(this);
var selectBox = that.find('select');
var selectDropdown = that.find('.select-dropdown');
selectBox.select2({
dropdownParent: selectDropdown
});
});
} catch (err) {
console.log(err);
}
})(jQuery);
if ( window.history.replaceState ) {
window.history.replaceState(null, null, window.location.href);
}

It doesn't look like any CSS or JS is hiding the modal. Why would it be hidden?
There should be some CSS like:
.modal {
display: none;
}
.modal.active {
display: block; // or flex, grid, whatever you need
}
Then the triggering button needs an event listener, listening for a 'click' event, which will add the class active to the modal. To "close" the modal you need to remove the class "active" in another event listener.

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

space issue in html/css

I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?

Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Javascript / remove hover after click close button

Help me please!
Show me please how can I remove hover effect after click close button on the right corner?
I can’t figure out how to turn off the effect when you click on the close button
Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it
I'm insert code snippet!
$(".close_help").click(function() {
$('.close_help').removeClass(".product__element");
setInterval(function() {
$('.product__element').addClass('.product__element')
}, 100);
});
// // $(".close-hover").click(function () {
// const resetClose = document.querySelector('.close-hover');
// $(".close-hover").click(function () {
// resetClose.style.display = 'none';
// })
// // $('.product__element').removeClass("product__element");
// // setInterval(function () { $('.product__element').addClass('product__element') }, 500);
// // });
.product__element {
z-index: 9;
background-color: #fbfbfb;
width: 20%;
margin: 2%;
padding: 10px 10px 10px 20px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 5px;
-webkit-transform: translateY(0);
-webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.prodact_sezon {
content: "";
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(196, 196, 196, 0.4);
}
.close_help {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.interact:hover .close_help {
display: block;
}
/* .prodact_sezon .product__element:hover {
transform: scale(02);
} */
.product__element:hover {
background-color: white;
transform: scale(1.02);
box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09);
z-index: 10;
margin-bottom: 0px;
}
.elem123 {
margin-top: -1px;
margin-bottom: 0px;
display: none;
position: absolute;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09);
}
.product__element:hover .elem123 {
display: block;
background: #FFFFFF;
left: 0%;
right: 0%;
margin-bottom: 0%;
padding: 20px;
box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09);
border-radius: 10px;
}
.product__img {
max-width: 80%;
height: auto;
padding-top: -20px;
}
.product__name {
width: 100%;
padding: 1px 5px 10px 5px;
text-align: center;
font-weight: bold;
}
.product__name__two {
width: 100%;
font-size: 15px;
padding: 0px 5px 7px 5px;
text-align: center;
font-weight: regular;
}
.product__description {
width: 100%;
font-size: 14px;
padding: 10px 2px 2px 2px;
text-align: center;
font-weight: regular;
text-rendering: auto;
}
.product__price {
text-align: center;
padding: 10px 5px;
/* border: 1px solid #e2e2e2; */
border-radius: 10px;
margin-bottom: 0px;
color: #edaf26;
font-weight: bold;
z-index: 330;
font-size: 17px;
}
.product__size {
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product__size-element {
width: 48%;
border: 2px solid #e2e2e2;
font-size: 14px;
padding: 5px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 0px;
border-radius: 10px;
}
.product__size-element_active {
border: 3px solid #76AA6F !important;
border-radius: 10px;
}
.product__add-to-cart-button {
width: 100%;
height: 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
-webkit-appearance: none;
border-radius: 10px;
background: #76AA6F;
color: #fff;
cursor: pointer;
margin: 15px 0 0;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
outline: none;
}
.product__add-to-cart-button:hover {
background: #63915D;
-webkit-transition: .3s;
transition: .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__element interact">
<span class="close_help">×</span>
<img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c">
<div class="product__name">
Манго Махачонок
</div>
<div class="product__price">
<span class="product__price-number">220</span> Грн
</div>
<div class="elem123">
<div class="product__size">
<div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт.">
1 шт.
</div>
<div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг">
1 кг.
</div>
</div>
<div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button>
<div class="product__description">
По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий.
</div>
</div>
</div>

While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.
And to turn off the hover, change your jQuery code to
$(".close_help").click(function() {
$('div').removeClass("product__element");
setInterval(function() {
$('div').addClass('product__element')
}, 1000);
});
Here is the working example of how it works.

How to make my pricing table appear when clicking a button?

I'm building a website and I want to make a fancy animation for my pricing tables where they appear when you click their name. You can see the website here.
I've already tried this code from W3 Schools on how to make an accordion and wrapping the "panel" class around my pricing table but it didn't worked out for me, do you have any suggestions ? Below is the code of my pricing table and it's styling. For your information on the wbesite all the pricing boxes uses the same code.
.first-titre-table {
color: black;
font-size: 40px;
font-family: 'Open Sans';
}
.titre-table {
margin-top: 50%;
color: black;
width: auto;
height: auto;
font-size: 40px;
font-family: 'Open Sans';
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.snip1404 {
font-family: 'Open Sans';
color: #ffffff;
text-align: left;
font-size: 16px;
max-width: 1000px;
left: 20%;
margin-right: auto;
width: 100%;
padding: 10px;
margin-top: 7%;
display: block;
flex-wrap: wrap;
align-content: center;
position: relative;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 6px;
margin-top: 7px;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 5px solid #730000;
box-shadow: 0px 0px 10px #000;
background-color: #b30000;
}
.snip1404 .plan:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #b30000;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title::after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.9em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin-left: 10px;
list-style: outside none none;
text-align: center;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #700000;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #ff4d4d;
}
.text-garantie {
font-size: 17px;
display: inline;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 7px #ddd;
}
#media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .plan-featured .plan-select {
padding: 20px;
}
.snip1404 .plan-featured {
margin-top: 0;
}
}
#media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
.snip1404 .plan-non-featured {
width: 100%;
}
.snip1404 .plan-featured {
width: 100%;
}
}
<div class="snip1404">
<h2 class="first-titre-table">
Contrats Chaudière Gaz
</h2>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost">
<span class="plan-price">
188€
</span>
<span class="plan-type">
/an
</span>
</div>
</header>
<ul class="plan-features">
<li>
1 intervention/an
</li>
<li style="margin-bottom:63%;">
</li>
</ul>
<div class="plan-select">
<a href="">
Choisir
</a>
</div>
</div>
</div>
I would like to keep this site as framework free as possible because I don't know how it's gonna behave when I will try to host it on my company's servers so please consider this before answering, thanks !

$('.first-titre-table').click(function(){
$(this).next('.plan').slideToggle()
})
If I've understood you, this jQuery will do what you want.
Of course, you need to hide it first.
.plan{
display: none;
}

I tried this code from W3 Schools. Is this what you want?
Your website have js error and stop so other js can't execute. You need to fixed it by yourself.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.first-titre-table {
color: black;
font-size: 40px;
font-family: 'Open Sans';
}
.titre-table {
margin-top: 50%;
color: black;
width: auto;
height: auto;
font-size: 40px;
font-family: 'Open Sans';
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.snip1404 {
font-family: 'Open Sans';
color: #ffffff;
text-align: left;
font-size: 16px;
max-width: 1000px;
left: 20%;
margin-right: auto;
width: 100%;
padding: 10px;
margin-top: 7%;
display: block;
flex-wrap: wrap;
align-content: center;
position: relative;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 6px;
margin-top: 7px;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 5px solid #730000;
box-shadow: 0px 0px 10px #000;
background-color: #b30000;
}
.snip1404 .plan:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #b30000;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title::after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.9em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin-left: 10px;
list-style: outside none none;
text-align: center;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #700000;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #ff4d4d;
}
.text-garantie {
font-size: 17px;
display: inline;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 7px #ddd;
}
#media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .plan-featured .plan-select {
padding: 20px;
}
.snip1404 .plan-featured {
margin-top: 0;
}
}
#media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
.snip1404 .plan-non-featured {
width: 100%;
}
.snip1404 .plan-featured {
width: 100%;
}
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="snip1404">
<h2 class="first-titre-table accordion">
Contrats Chaudière Gaz
</h2>
<div class="plan panel">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost">
<span class="plan-price">
188€
</span>
<span class="plan-type">
/an
</span>
</div>
</header>
<ul class="plan-features">
<li>
1 intervention/an
</li>
<li style="margin-bottom:63%;">
</li>
</ul>
<div class="plan-select">
<a href="">
Choisir
</a>
</div>
</div>
</div>