mpro9x/put_this_code_in_unbounce_custom_html_module.html

## put_this_code_in_unbounce_custom_html_module.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

/* Clear floats after the tab */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/**additional code for LP**/
button.tablinks p {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
}

button.tablinks.active p {
    opacity: 1;
    height: auto;
}

.tab {
    font-family: 'Open Sans';
    border: none;
    background: transparent;
    width: 50%;
    margin-top: 60px;
}

button.tablinks h2 {
    font-size: 23px;
    font-weight: 600;
}

button.tablinks.active h2 {
    color: #1E97DB;
}

.tab button.active {
    background: transparent;
    border-left: 7px solid #1E97DB;
    border-radius: 5px;
    padding: 0;
    padding-left: 23px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.tab button {
    border-left: 7px solid #fff;
    padding-left: 23px;
}

.tab button.active p {color: #1F1F1F;font-size: 16px;line-height: 24px;padding-top: 6px;}

.tabcontent {width: 50%;border: none;}

.tabcontent img {
    filter: drop-shadow(0px 1.1660900592803955px 8.152198791503906px rgba(30, 151, 219, 0.20));
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
}

@media only screen and (max-width: 767px) {
    .tab {
        width: 100%;
        margin-top: 0px;
        height: fit-content;
        padding-right: 20px;
    }

    .tabcontent {
        width: 100%;
    }

    button.tablinks h2 {
        font-size: 18px;
    }

    .tab button.active {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .tab button {
        padding: 15px 23px;
    }
}

</style>
</head>
<body>

<div class="tab">
  <button class="tablinks active" onmouseover="openCity(event, 'tab_content1')"><h2>Automated Calling System</h2><p>Use our mass notification app to send out automated phone calls to a list of phone numbers in seconds. We make it easy for you to create, schedule and send your automated phone call to all your contacts at once.</p></button>
  <button class="tablinks" onmouseover="openCity(event, 'tab_content2')"><h2>Bulk Email Service</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc.</p></button>
  <button class="tablinks" onmouseover="openCity(event, 'tab_content3')"><h2>Mass Text Messaging</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc.</p></button>
</div>

<div id="tab_content1" class="tabcontent" style="display: block;">
  <img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/5f20bc69-f0f0-4440-afa6-16b063acf824/1.original.png" width="100%">
</div>

<div id="tab_content2" class="tabcontent">
  <img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/cc49d00c-1ac8-4ffa-9dbe-66d4b2418643/2.original.png" width="100%">
</div>

<div id="tab_content3" class="tabcontent">
  <img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/9b14bb43-236c-4c48-ac3c-50e5c18177b6/3.original.png" width="100%">
</div>

<div class="clearfix"></div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Display the content of the active tab when the page loads
  var activeTab = document.querySelector(".tablinks.active").getAttribute("onmouseover");
  var cityName = activeTab.split("'")[1];
  document.getElementById(cityName).style.display = "block";
});

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	* {box-sizing: border-box}

	/* Style the tab */
	.tab {
	float: left;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	width: 30%;
	height: 300px;
	}

	/* Style the buttons inside the tab */
	.tab button {
	display: block;
	background-color: inherit;
	color: black;
	padding: 22px 16px;
	width: 100%;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	font-size: 17px;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
	background-color: #ddd;
	}

	/* Create an active/current "tab button" class */
	.tab button.active {
	background-color: #ccc;
	}

	/* Style the tab content */
	.tabcontent {
	float: left;
	padding: 0px 12px;
	border: 1px solid #ccc;
	width: 70%;
	border-left: none;
	height: 300px;
	display: none;
	}

	/* Clear floats after the tab */
	.clearfix::after {
	content: "";
	clear: both;
	display: table;
	}


	/additional code for LP/
	button.tablinks p {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, height 0.3s ease;
	}

	button.tablinks.active p {
	opacity: 1;
	height: auto;
	}

	.tab {
	font-family: 'Open Sans';
	border: none;
	background: transparent;
	width: 50%;
	margin-top: 60px;
	}

	button.tablinks h2 {
	font-size: 23px;
	font-weight: 600;
	}

	button.tablinks.active h2 {
	color: #1E97DB;
	}

	.tab button.active {
	background: transparent;
	border-left: 7px solid #1E97DB;
	border-radius: 5px;
	padding: 0;
	padding-left: 23px;
	padding-top: 10px;
	padding-bottom: 10px;
	}

	.tab button {
	border-left: 7px solid #fff;
	padding-left: 23px;
	}

	.tab button.active p {color: #1F1F1F;font-size: 16px;line-height: 24px;padding-top: 6px;}

	.tabcontent {width: 50%;border: none;}

	.tabcontent img {
	filter: drop-shadow(0px 1.1660900592803955px 8.152198791503906px rgba(30, 151, 219, 0.20));
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	}

	@media only screen and (max-width: 767px) {
	.tab {
	width: 100%;
	margin-top: 0px;
	height: fit-content;
	padding-right: 20px;
	}

	.tabcontent {
	width: 100%;
	}

	button.tablinks h2 {
	font-size: 18px;
	}

	.tab button.active {
	padding-top: 0px;
	padding-bottom: 0px;
	}

	.tab button {
	padding: 15px 23px;
	}
	}

	</style>
	</head>
	<body>

	<div class="tab">
	<button class="tablinks active" onmouseover="openCity(event, 'tab_content1')"><h2>Automated Calling System</h2><p>Use our mass notification app to send out automated phone calls to a list of phone numbers in seconds. We make it easy for you to create, schedule and send your automated phone call to all your contacts at once.</p></button>
	<button class="tablinks" onmouseover="openCity(event, 'tab_content2')"><h2>Bulk Email Service</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc.</p></button>
	<button class="tablinks" onmouseover="openCity(event, 'tab_content3')"><h2>Mass Text Messaging</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc.</p></button>
	</div>

	<div id="tab_content1" class="tabcontent" style="display: block;">
	<img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/5f20bc69-f0f0-4440-afa6-16b063acf824/1.original.png" width="100%">
	</div>

	<div id="tab_content2" class="tabcontent">
	<img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/cc49d00c-1ac8-4ffa-9dbe-66d4b2418643/2.original.png" width="100%">
	</div>

	<div id="tab_content3" class="tabcontent">
	<img src="https://user-assets-unbounce-com.s3.amazonaws.com/4f9f6eb5-f770-4d44-bcb2-abe2babd5906/9b14bb43-236c-4c48-ac3c-50e5c18177b6/3.original.png" width="100%">
	</div>

	<div class="clearfix"></div>

	<script>
	document.addEventListener("DOMContentLoaded", function() {
	// Display the content of the active tab when the page loads
	var activeTab = document.querySelector(".tablinks.active").getAttribute("onmouseover");
	var cityName = activeTab.split("'")[1];
	document.getElementById(cityName).style.display = "block";
	});

	function openCity(evt, cityName) {
	var i, tabcontent, tablinks;
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}
	document.getElementById(cityName).style.display = "block";
	evt.currentTarget.className += " active";
	}
	</script>

	</body>
	</html>