<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Empathy</title>
<link href="template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">
<img src="page-1_2.png" width="113" height="28" alt=""/> </h4>
</a>
<nav>
<ul>
<li><a class="Abouth-Empath" href="empathy.html#about" >About Empath</a></li>
<li><a class="How-It-Works" href="empathy.html#How">How It Works</a></li>
<li> <a class="Contact" href="empathy.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="page1">
<h2 class="logo_header"> <img src="group.png" width="470" height="127" alt=""/></h2>
</section>
<section class="about" id="about" >
<div class="left-side-sec"><blockquote>
<h2 class="About-Empath"> About Empath
<p class="aboutE">
Standard measurements — made for publishers, not brands — provide a singular view of performance.
<p class="Empath-is-a-propriet">Empath is a proprietary tool that surveys audiences
engaging within a brand’s ecosystem to discover content’s
true impact and ROI.
<p class="special">
- Brand Awareness + Perception Shift <br>
- Purchase Intent <br>
- Attitudinal insights for campaign optimization<br>
- Compare effectiveness across paid, native, owned, earned</p> </p>
</p>
</h2>
</blockquote>
</div>
</section>
<section class="Rectangle4" id="How">
<blockquote>
<h2 class="How-It-Work"> How It Works</h2>
</blockquote>
<div class="info">
<h2 class="text"> 01 02 03 04</h2>
</div>
<div class="info2">
<p class="Audience-engages-w"> Audience engages w/ your content and exposed to pixel.</p>
<p class="Audience-engages-w">Exposed audience and a control lookalike audience targeted with survey.</p>
<p class="Audience-engages-w">Both audiences verifiedand sent to custom survey experience.</p>
<p class="Audience-engages-w">Content’s impact is measured and Empath Score reported.</p>
</div>
</section>
<section class="mask" id="contact">
<div class="right-side" id="right">
<h2 class="Contact-Us" id="hContact"> Contact Us <p class="Sign-up-now-to-measu" id=" signtxt">
Sign up now to measure your content’s true impact and ROI.
</p>
<button class="button" onClick="signup();register()" id="signupBTN">Sign Up</button>
</h2>
</div>
<script>
function signup() {
document.getElementById("contact").style.backgroundColor = "red";
var element = document.getElementById("right");
element.classList.remove("right-side");
}
</script>
<script>
function register(){
var element = document.getElementById("fname");
element.classList.add("form");
}
</script>
</section>
<form class="form" action="/action_page.php" id="signUp">
<input type="text" id="fname" name="firstname" placeholder="Name*" class="Rectangle-8">
<input type="text" id="lname" name="lastname" placeholder="Email*">
<input type="text" id="job" name="job" placeholder="Job Title*">
<textarea id="subject" name="subject" placeholder="Message*." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>having trouble deleting one part and adding new content to the same div.
