ZuoTi.Pro
Question
write a Html/CSS codes to design web page below
ayout References Mailings ReviewView nment 1 Write the required HTML/CSS codes to design the web page below: YAHOO English (U
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Hi please find the complete answer

Create a folder and create html and css page then copy and paste html and css code inside the respective page. create another folder with name images inside the main folder and put all images inside this folder.

For icon i am using font awesome CDN and CDN require internet so make sure your computer should be connect with internet while running of this html code

If you have any query please let me know first by comment i will give solutions

===============================

index.html

<!DOCTYPE html>
<html>
<!-- head section-->
<head>
<!-- title-->
<title>Home page</title>
<!-- external css link-->
<link href="style.css" rel="stylesheet" />
<!-- font awesome cdn link and its require internet to run the cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- body section-->
<body>
<!-- header section start-->
<header>
<!-- container start-->
<div class="container">
<!-- table-->
<table>
<!-- table row-->
<tr>
<!-- logo-->
<td class="logo">
<img src="images/yahoo.png" alt="Yahoo" />
</td>
<!-- search box-->
<td class="search">
<div class="search-container">
<!-- use form to post search data-->
<form action="#">
<input type="text" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</td>
<!-- last part of header-->
<td class="sign">
<ul class="topList">
<li>
<button type="submit" class="btnSignIn">Sign In</button></li>
<li><a href="#"><i class="fa fa-envelope fa-lg"></i>Mail</a></li>
</ul>
</td>
</tr>
</table>
<!-- end table-->

<!-- start navigation-->
<nav>
<ul class="navigation">
<li><a href="#"><i class="fa fa-envelope fa-lg"></i>Mail</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Movie</a></li>
<li><a href="#">Travel</a></li>
</ul>
</nav>
</div>
</header>
<!-- header end-->

<!-- main container for news content-->
<div class="container main-content">
<!-- left section-->
<div class="left">
<table class="tblContent">
<tr>
<td>
<!-- News item section-->
<div class="newsItem">
<!-- your news link-->
<a href="#">
<!-- News item image-->
<div class="newImg">
<!-- put your own image here and image should be inside the images folder
do same in below -->
<img src="images/financial.jpg" />
</div>
<!-- News item Content-->
<div class="newsContents">
<!-- News category-->
<span class="newTitle" style="color:#ff006e">Style</span>
<div>
<!-- News heading-->
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
<!-- News small content-->
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a</p>
</div>
</div>
</a>
</div>
  

</td>
<td>
<div>
<i class="fa fa-file-text-o fa-lg"></i>
</div>
</td>
</tr>
<tr>
<td>
<div class="newsItem">
<a href="#">
<div class="newImg">
<img src="images/cricket.jpg" />
</div>
<div class="newsContents">
<span class="newTitle">Spnosored</span>
<div>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a</p>
</div>
</div>
</a>
</div>
  

</td>
<td>
<div>
<i class="fa fa-file-text-o fa-lg"></i>
</div>
</td>
</tr>
<tr>
<td>
<div class="newsItem">
<a href="#">
<div class="newImg">
<img src="images/financial.jpg" />
</div>
<div class="newsContents">
<span class="newTitle">News</span>
<div>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a</p>
</div>
</div>
</a>
</div>
  

</td>
<td>
<div>
<i class="fa fa-file-text-o fa-lg"></i>
</div>
</td>
</tr>
<tr>
<td>
<div class="newsItem">
<a href="#">
<div class="newImg">
<img src="images/cricket.jpg" />
</div>
<div class="newsContents">
<span class="newTitle">News</span>
<div>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a</p>
</div>
</div>
</a>
</div>
  

</td>
<td>
<div>
<i class="fa fa-file-text-o fa-lg"></i>
</div>
</td>
</tr>
</table>
</div>

<!-- right section-->
<div class="right">
<!-- temperature section-->
<div class="temperature">
<!-- temperature title-->
<span class="tempTitle">Temperature</span><br>
<!-- temperature data
here i am use same name you need to change according to your name of place-->
<div>
<!-- temperature image icon use your icon which you need
same do below also-->
<img src="images/sun.png" />
<h5>Place1</h5>
</div>
<div>
<img src="images/sun.png" />
<h5>Place1</h5>
</div>
<div>
<img src="images/sun.png" />
<h5>Place1</h5>
</div>
<div>
<img src="images/sun.png" />
<h5>Place1</h5>
</div>
</div>
<img src="images/vertical.JPG" />
</div>
</div>
</body>
</html>

=============================================

style.css

*
{
box-sizing: border-box;
}
/*css for body with font family*/
body
{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/*css for container with width 1200px*/
.container
{
width: 1200px;
margin: auto;
display: block;
}

/*css for header*/
header
{
width: 100%;
padding: 5px 0 1px 0;
box-shadow: 0px 6px 6px -5px #c1c1c1;
position: fixed;
background-color: #fff;
}
/*css for header table*/
header table
{
width: 100%;
}

/*css for logo*/

.logo
{
width: 20%;
}

.logo img
{
margin-top: 8px;
width: 80%;
}

/*css for search box*/
.search
{
width: 50%;
height: 50px;
vertical-align: middle;
padding: 0;
margin: 0;
}
/*css for search box textbox*/
.search input[type=text]
{
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: 1px solid rgba(0,0,0,.2);
width: 83%;
}
/*css for search box button container*/
.search .search-container button
{
float: right;
padding: 6px;
margin-top: 8px;
/* margin-right: 16px; */
background: #1f3ff5;
font-size: 26px;
border: none;
cursor: pointer;
width: 17%;
color: #fff;
}

.search .search-container button:hover
{
background: #0026ff;
}

/*css for search box button*/
.btn
{
background-color: #1f3ff5;
border: none;
color: white;
padding: 12px 16px;
font-size: 26px;
cursor: pointer;
}

.btn:hover
{
background-color: RoyalBlue;
}

/*css for sign In*/
.sign
{
vertical-align: middle;
}

/*css for ul and li inside sign*/
.topList
{
float: right;
}

.topList li
{
list-style: none;
display: inline-block;
margin-right: 15px;
color: #4d00ae;
}

.topList li a
{
color: #4d00ae;
text-decoration: none;
}

.topList li i
{
margin-right: 8px;
}

/*css for button sign in*/
.btnSignIn
{
color: #4d00ae;
padding: 5px 25px;
text-align: center;
border: 2px solid #4d00ae;
background: none;
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
}
/*css for on hover of button sign in*/
.btnSignIn:hover
{
color: #fff;
background: #4d00ae;
}

/*css for navigation bar*/
.navigation
{
padding: 0;
margin: 5px 0;
}

.navigation li
{
list-style: none;
display: inline-block;
margin-right: 15px;
padding: 5px 15px;
color: #4d00ae;
}

.navigation li a
{
color: #4d00ae;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}

.navigation li i
{
margin-right: 8px;
}

/*css for main-content div lef and right*/
.left
{
width: 74%;
display: inline-block;
}

.right
{
width: 24%;
display: inline-block;
vertical-align: top;
}

/*css .tblContent for table which is inside left div*/
.tblContent
{
width: 100%;
}

.tblContent td:first-child
{
width: 95%;
vertical-align: top;
}

.tblContent td:last-child
{
vertical-align: top;
padding-top: 20px;
}

/*css for table which is inside left div*/
.newsItem
{
margin-top: 15px;
}
/*css for image*/
.newImg
{
display: inline-block;
width: 30%;
}

.newImg img
{
height: 150px;
width: 250px;
}

/*css for news content div*/
.newsContents
{
width: 65%;
margin-left: 25px;
display: inline-block;
vertical-align: top;
}

.newsContents .newTitle
{
font-size: 14px;
color: #808080;
font-weight:500;
}

.newsContents p
{
color: #333;
}

.newsContents h2
{
margin: 5px 0px;
font-weight: 700;
font-size: 19px;
color: #020e65;
}

.newsContents:hover h2
{
color: #0026ff;
}

/*css for temperature*/
.temperature
{
padding:10px 0;
}
/*css for temperature div */
.temperature>div
{
width:22%;
text-align:center;
padding:10px 0;
display:inline-block;
}
/*css for temperature image*/
.temperature > div > img
{
width:45px;
height:45px;
}
/*css for temperature div h5*/
.temperature > div > h5
{
margin:5px 0;
}
/*css for temperature div title*/
.temperature .tempTitle
{
font-size:16px;
font-weight:600;
}

.main-content
{
padding-top: 120px;
}

========================================

output

YAHOO! Sign In Mail Mail Home Cricket Finance Lifestyle Movie Travel Temperature Style Lorem lpsum is simply dummy text of th

======================================

If you have any query please let me know first by comment i will give solutions

0 0
Add a comment
Know the answer?
Add Answer to:
Ayout References Mailings ReviewView nment 1 Write the required HTML/CSS codes to design the web ...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Styles Assignment 1 Write the required HTML/CSS codes to design the web page below: YAHOO Norma...

    Styles Assignment 1 Write the required HTML/CSS codes to design the web page below: YAHOO Normal 1 No Sp Font Paragraph Q1: Build the following tables using HTML codes: 1. Send My Table Example celipacing contro boedesWeb pag wtrluter apper isside de TABLE tag nnbutes appear inside the TD g 2. Time Table Mon Tue Wed Thu Fri Science Maths Science Maths Arts Social History English Social Sports Sclence Maths Science Maths SocialHistory English Social Hours Lunch Project Styles 3....

  • Styles Assignment 1 Write the required HTML/CSS codes to design the web page below: YAHOO Normal...

    Styles Assignment 1 Write the required HTML/CSS codes to design the web page below: YAHOO Normal 1 No Sp Font Paragraph Q1: Build the following tables using HTML codes: 1. Send My Table Example celipacing contro boedesWeb pag wtrluter apper isside de TABLE tag nnbutes appear inside the TD g 2. Time Table Mon Tue Wed Thu Fri Science Maths Science Maths Arts Social History English Social Sports Sclence Maths Science Maths SocialHistory English Social Hours Lunch Project Styles 3....

  • How to make this same webpage using HTML and css properties like display property, float,clear and...

    How to make this same webpage using HTML and css properties like display property, float,clear and media queries Picture Tools lab04 (1).docx - Saved to this PC raw Design Layout References Mailings Review View Help Format Tell me spigotdesign VISUAL DESIGN&WEB DEVELOPMENT FROM PARK CITY UTAH ESIGNDEVELLP SUPPORT HOST THE ADMIN BAR AND SOLUTE PASTINNG 200e WEBSTE TESTING

  • 1 Mark Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor...

    1 Mark Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. Question One Write Step by Step Instruction for creating a new Website. What are the Technologies & Tools needed for creating your Web Site? web design

  • 1. Write the HTML code to create a fragment identifier at the beginning of a web...

    1. Write the HTML code to create a fragment identifier at the beginning of a web page designated by the word “top”. 2. Write the HTML code to create a hyperlink to the named fragment designated by “top”. 3. Write the HTML code to assign the header element to the appropriate ARIA landmark role, as shown in the slides. 4. Write the HTML code to associate a web page with an external style sheet named myprint.css to configure a printout....

  • 1. Write the HTML code to create a fragment identifier at the beginning of a web...

    1. Write the HTML code to create a fragment identifier at the beginning of a web page designated by the word “top”.

  • Write an HTML file that creates the following table on a web page. Important notes: 1....

    Write an HTML file that creates the following table on a web page. Important notes: 1. You should have to copy and paste the “HTML script” as your answer to this question. DON’T take a screenshot for your HTML script. It must be an editable script. 2. Take a screen shot for your output web page and paste it as a part of your answer. . SEU COURSES COURSE CLASS -ROOM INSTRUCTOR IT 404 CLASS ROOM 1 DR ALI CLASS...

  • a Assignment for Bonus Points DB SUDA- Draw Design Layout Home Insert References Mailings Review View 2 Calibri (B....

    a Assignment for Bonus Points DB SUDA- Draw Design Layout Home Insert References Mailings Review View 2 Calibri (B. 1 BIU AA AA EE ADA Code ABD ABCD Aalbcd AaBb Acceler 3. Which of the following options is better and why? Assume an opportunity cost of 12.5% Option A: Receive $10,000 today Option B: Receive $15,000 five years from today Focus E- Page 1 of Words English (United States

  • Statistics Exam 2 (1) Compatibility Mode Layout References Mailings ReviewView HelpTell me what you want to...

    Statistics Exam 2 (1) Compatibility Mode Layout References Mailings ReviewView HelpTell me what you want to do A-e. A.|ー 1,-. Isa-B. ||1Normal 1No Spac Heading 1 Heading 2 Title Paragraph Styles a matched-subjects design d. all of the above would require the same number of subjects 22. For an experiment comparing two treatment conditions, an independent-measures design would obtain score(s) for each subject and a repeated-measures design would obtainscore(s) for each subject a. 1, 1 b. 1,2 c. 2,1 d....

  • 1. Predict the Result.Draw and write a brief description of the Web page that will becreated...

    1. Predict the Result.Draw and write a brief description of the Web page that will becreated with the following XHTML code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CircleSoft Designs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { background-color: #FFFFCC;color: #330000;font-family Arial,Helvetica,sans-serif; }.content { width: 750px; }</style></head>Apply Your Knowledge<body><div class="content"><h1>CircleSoft Design</h1><div><strong>CircleSoft Designs will </strong><ul><li>work with you to create a Web presence that fits yourcompany</li><li>listen to you and answer your questions</li><li>utilize the most appropriate technology for your sites:JavaScript, Java, PHP, databases,...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT