Solution Idea Code
<html> <head> <title>CS202 Assignment no 2</title> <style> body{ padding:0; margin:0; width:100%; } #mynav{ background-color:black; height:80px; } #mynav a:link, a:visited { background-color: red; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } #mynav a:hover, a:active { background-color: black; } #firstimage img{ width:100%; height:600px; fill:cover; margin: 0px auto; } #serviceheading{ padding-top:10px; padding-bottom:10px; } #serviceheading h2{ text-align:center; } .servicesection{ width:32%; float:left; padding-left:5px; margin-bottom:5px; } .servicesection img{ width:15%; height:100px; padding-left:80px; margin:2px; } .servicesection h2{ margin: 5px 20px; } #banner1{ background-color:#21E6E0; } #banner2{ background-color:#F91912; } #banner3{ background-color:#58F912; } #myfooter{ width:99%; margin-top:5px; background-color:black; float:left; padding-bottom:100px; } #footer1{ width:41%; margin-left:5px; float:left; } #footer1 h3{ color:Red; padding-left:150px; } #footer1 p{ color:white; } #footer2{ width:41%; margin-left:90px; float:left; } #footer2 h4{ color:green; font-size:25px; } #btn{ background-color:#F91912; } #btn:hover{ background-color:green; } </style> </head> <body> <form action=""> <div id="mynav"> <a href="Home.html">Home</a> <a href="service.html">Service</a> <a href="about.html">About</a> <a href="contactus.html">Contact us</a> </div> <div id="firstimage"> <img src="banner.jpg" alt="Banner Image"> </div> <div id="serviceheading"> <h2>Service</h2> <div class="servicesection" id="banner1"> <img src="camera.PNG" alt="Banner Image"> <h2>Photgraphy</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="servicesection" id="banner2"> <img src="video.PNG" alt="Banner Image"> <h2>VideoGraphy</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="servicesection" id="banner3"> <img src="web.PNG" alt="Banner Image"> <h2>Web Design</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="myfooter"> <div id="footer1"> <h3>About Us</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p> </div> <div id= "footer2"> <h4>Contact Us</h4><br> <input type="text" placeholder="name"><br><br> <input type="text" placeholder="Email Addres"><br><br> <textarea rows="4" cols="50"> </textarea><br><br> <button id="btn"> Press Me</button> </div> </div> </form> </body> </html> cs202 assignment solution with internal css in head section.html Displaying cs202 assignment solution with internal css in head section.html.