Solution:1 847702ca-b2f8-47e1-bc50-67e732da2334-image.png
Solution:2 ffc7a7af-70d3-453d-9f0b-a5de6696e77d-image.png
Assignment No. 02
Semester: Fall 2019
CS202: Fundamentals of Front-End Development Total Marks: 20
Lectures Covered: 8 to 15
Due Date:
Monday, December 2, 2019
Instructions:
Please read the following instructions carefully before submitting assignment. It should be clear that your assignment will not get any credit if:
The assignment is submitted after due date.
The submitted assignment does not open or file is corrupt.
Assignment is copied(partial or full) from any source (websites, forums, students, etc)
Objective:
The objectives of this assignment are:
• To learn and practice the basic HTML tags.
• Use of <img>, <table>, <div> and HTML Forms.
• Style the tags mentioned above .
Note:
• This assignment is a Graded Assignment.
• The assignment submitted through email will not be accepted.
• This assignment is covering Lectures 8-15.
• For detail of topics in each lecture, see syllabus file given in download section of this course. The link of file is: Link
Guidelines:
Code should be properly indented.
You can use the following tools/software:
o Sublime, Netbeans, Adobe Dreamweaver , Notepad
You will not use any other software to make .html file
For any query about the assignment, contact at [email protected].
Assignment Statement:
Suppose you have been hired as a front-end designer to develop a one page website for an organization as shown below:
Sample Web Page:
Solution Instructions:
• Use <div> / <table> element to develop this webpage.
• On the top, navigation bar is used.
• An image is used with 100% width and 600px height.
• In services section, Three divs or <td> are used with equal width.
• In the last section, 2 divs or <td> with equal width are used.
• You can use colors of your own choice.
• Use <textarea> for the comment section in the form under Contact Us.
Note:
BEST OF LUCK!
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.