Use Notepad++ (Links to an external site.)Links to an external site. or another
ID: 3738106 • Letter: U
Question
Use Notepad++ (Links to an external site.)Links to an external site. or another bare minimum text editor and hand code the HTML and CSS. Do not use an HTML editor such as Dreamweaver in Design mode. The idea is to write HTML and not rely on a WYSIWYG (what-you-see-is-what-you-get) application to generate HTML for you.
Create an HTML5 file called test1.html and a CSS file called test1.css that, when rendered by the browser, appears as shown in the following screenshots. Note: The screenshots are of the whole page (you will normally see a scroll bar unless your browser window is tall enough to show the entire page):
Entire web page
(Links to an external site.)Links to an external site.
Entire web page when Industry Experience years ranges are clicked
(Links to an external site.)Links to an external site.
Use only HTML5 and CSS. Do not use JavaScript, PHP, jQuery, XML, widgets you found online, etc.
You are required to keep your CSS external to your HTML file.
Try to use semantic elements that we covered where appropriate.
Include a graphics file for your picture of Homer. It does not have to match the one in the screenshot but feel free to use this picture of Homer (Links to an external site.)Links to an external site. if you don't feel like finding one.
Explanation / Answer
Hi I created The same page using bootstrap here is the code for CSS file i.e test1.css
<style>
.header
{
text-align: center;
}
.text
{
line-height: 20px;
}
li
{
list-style-type:decimal;
font-size: 27px;
}
.inner li
{
list-style:circle;
}
.a li
{
list-style: square;
}
textarea
{
resize: none;
}
.h
{
width:70px;
}
</style>
And This is test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>PrettyPetalsToUK</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.html" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/bootstrap/bootstrap.css" rel="stylesheet">
<link href="assets/css/anythingslider.css" rel="stylesheet">
<link href="assets/css/prettyPhoto.css" rel="stylesheet">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
</head>
<body>
<div class="conteiner-fluid header">
<h1>Homer Simpson's Resume</h1>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<img src="images/homer_smart_preview.png" class="img-responsive">
<h3>Software Engineer And Enterpranaur</h3>
<p class="text">
My Name is homer Simpsons I Have wife and three beautiful kids My Name is homer Simpsons I Have wife and three beautiful kids My Name is homer Simpsons I Have wife and three beautiful kids My Name is homer Simpsons I Have wife and three beautiful kids My Name is homer Simpsons I Have wife and three beautiful kids (Here you can change your content)
</p>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<h1>Education and Skills</h1>
<ul>
<li>University Of California at Irvine</li>
<ul class="inner">
<li>Masters In Electrical Engineering</li>
<ul class="a">
<li>Concentration In Semiconductors</li>
<li>Minor In Survival Skills</li>
</ul>
</ul>
<li>Santa Monica College</li>
<ul class="inner">
<li>Bachelors in Computer Science</li>
<ul class="a">
<li>Concentration In Artificial Inteligence</li>
<li>Minor In Digital Arts</li>
</ul>
</ul>
</ul>
<h1>Technical Skills:-</h1>
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Languages</td>
<td>HTML,CSS,Javascript</td>
</tr>
<tr>
<td>Operating System</td>
<td>Linux,MacOsx,Windows</td>
</tr>
</tbody>
</table>
<h1>Industry Experience:-</h1>
<h4>Jan 2018-Present</h4>
<h4>Aug 2016-Jan 2018</h4>
<br>
<br>
<h1>Soft Skills:-</h1>
<h4>My Rating in Pie eating 0-10</h4>
<h4>HTML 5 ai 100^100</h4>
<br>
<h3>The following Data will be posted To my server at homerswebsights.com</h3>
<br>
<h3>Color</h3>
<textarea cols="12" rows="7" class="form-control">
<p>I Think Therefor I eat</p>
</textarea>
<p>Please Rate my web page </p><input type="tex" class="form-control h">
<button type="submit" class="btn btn-default">Submit</button>
</body>
</html>
I hope You get your answer so if you are satisfied with it please like and rate this answer Thank You and if you have daubt comment I will Help
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.