The first page (index page) should include two images and your name, the class n

ID: 3724915 • Letter: T

Question

The first page (index page) should include two images and your name, the class name, course number and section, the college name, and the date. There should be enough information to flow around the images (one on the left and one on the right). •The second page should have 6 short paragraphs (3 sentence minimum) that describes various aspect of your state . You must define three different paragraph styles,p1, p2, and p3. The p1 style must use left and right margins of 20 pixels, a background color of lavender, and a contrasting foreground color. The p2 style must use left and right margins of 30 pixels, a background color of blue, and a contrasting foreground color. The p3 style must use a text indent of 1 centimeter, a background color of your choosing and a contrasting foreground. The first and fourth paragraphs must use p1, the second and fifth must use p2, and the third and sixth must use p3. •The third page should utilize a 3 column format with a that has at least 3 columns and 4 rows. Please use appropriate headers, format the table, background. Needs to be done in notepad++

Explanation / Answer

Please find below the code for the 3 html files index.html, page2.html and page3.html along with their styles based on the instructions provided.

index.html

<!DOCTYPE html>

<head>

<title>New Pages</title>

body {

width: 80%;

margin: 0 auto;

}

.image-container1 img {

float: left

}

.image-container1 .content {

float: left;

margin-left: 25px;

}

.image-container2 img {

float: right

}

.image-container2 .content {

float: left;

text-align: right;

width: 50%;

margin-right: 25px;

}

</style>

</head>

<body>

<div>

</div>

<div>

<h1 class="name">Name: Akash Kumar</h1>

<h2 class="name">Class: B. Tech</h2>

<h2 class="name">Course Number: TS-011</h2>

<h2 class="name">Section : "A"</h2>

<h2 class="name">College Name : Tech Scholar India</h2>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan tortor sed bibendum eleifend. Praesent rutrum, magna vitae laoreet commodo, orci orci molestie quam, quis lobortis urna sapien a enim. Ut pellentesque est eros, lobortis commodo velit volutpat sed. Nunc luctus turpis consequat justo viverra, vestibulum ultrices neque sollicitudin. Nam iaculis scelerisque lacus vel congue. Phasellus blandit elit a magna dictum placerat. Duis placerat dolor sit amet cursus pretium. Nullam felis dolor, pulvinar dictum tellus a, pretium efficitur orci. Nunc fringilla, mi nec fringilla sodales, nulla lorem varius velit, at cursus quam sapien vitae purus. Nulla nisi ante, consequat sit amet purus et, convallis condimentum neque.</p>

</div>

</div>

</main>

</body>

</html>

page2.html

<!DOCTYPE html>

<head>

<title>New Pages</title>

body {

width: 80%;

margin: 0 auto;

}

.p1 {

margin: 0 20px;

background: lavender;

color: black;

}

.p2 {

margin: 0 30px;

background: blue;

color: #fff;

}

.p3 {

text-indent: 1cm;

background: #def;

color: black;

}

</style>

</head>

<body>

<div>

</div>

<div>

<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan tortor sed bibendum eleifend. Praesent rutrum, magna vitae laoreet commodo, orci orci molestie quam, quis lobortis urna sapien a enim. Ut pellentesque est eros, lobortis commodo velit volutpat sed. Nunc luctus turpis consequat justo viverra, vestibulum ultrices neque sollicitudin. Nam iaculis scelerisque lacus vel congue. Phasellus blandit elit a magna dictum placerat. Duis placerat dolor sit amet cursus pretium. Nullam felis dolor, pulvinar dictum tellus a, pretium efficitur orci. Nunc fringilla, mi nec fringilla sodales, nulla lorem varius velit, at cursus quam sapien vitae purus. Nulla nisi ante, consequat sit amet purus et, convallis condimentum neque.</p>

<p class="p2">Cras turpis eros, feugiat quis aliquam ac, pharetra eget tellus. Maecenas pellentesque ex ex, in fringilla libero varius a. Cras ornare sed magna auctor blandit. Curabitur quis felis condimentum, ullamcorper leo eget, pulvinar nulla. Pellentesque pretium tortor sed nisl egestas, eu dignissim elit accumsan. Aenean placerat, ligula ut ultricies tincidunt, neque ligula accumsan risus, dignissim rhoncus magna arcu et turpis. Cras eros lorem, mattis eu nibh non, vestibulum semper arcu. Maecenas tristique turpis vulputate sapien pretium, at auctor enim fermentum. Vivamus tincidunt pretium dui sollicitudin bibendum. Vestibulum eget auctor neque. Phasellus nec sem quis eros ultrices pulvinar. Proin at scelerisque justo, vitae sollicitudin arcu. Proin at magna placerat, vehicula est sit amet, posuere lacus. Nullam fermentum mauris mi, a rutrum felis laoreet venenatis. Donec nec volutpat ligula, eget aliquet libero. Nulla tempus convallis libero sit amet efficitur.</p>

<p class="p3">Donec et pulvinar felis. Phasellus elementum, est vel rutrum ultricies, urna dui ornare felis, congue tempor nibh ex sed risus. In mollis, orci eu rhoncus feugiat, dolor sem facilisis risus, sit amet commodo ante sapien ut neque. Nullam nec enim at dui tincidunt tincidunt. Sed porta lectus sit amet fringilla dignissim. Nunc id libero risus. Vivamus mollis ipsum vulputate bibendum facilisis. Donec nec molestie urna. Proin feugiat nulla ante, sit amet semper felis blandit quis. Maecenas fringilla lacinia ex condimentum rutrum. Quisque faucibus, nunc non ullamcorper lobortis, mi massa pellentesque augue, at egestas nisl nibh eu tellus. Nunc vehicula nisi aliquam elit imperdiet suscipit.</p>

<p class="p1">Maecenas varius justo et porta mattis. Praesent ut diam nibh. Nulla tempor mollis nisi, at imperdiet massa. Nullam mollis eleifend semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eu consectetur metus. Etiam feugiat congue massa sed ullamcorper. Vivamus in mi sem. In hac habitasse platea dictumst. Donec sed suscipit leo, ut tincidunt urna. Vestibulum eleifend ex sed consequat viverra.</p>

<p class="p2">Vestibulum arcu urna, congue in risus eget, porta tristique sem. Integer viverra justo sed mollis porta. Phasellus at sem sollicitudin, dignissim nibh nec, cursus orci. Cras in imperdiet ante. Sed iaculis risus sed ornare ornare. Integer sit amet nunc mauris. Nulla eleifend, nibh ac placerat placerat, ex est feugiat enim, ut posuere odio eros eget enim. Suspendisse varius ligula a pellentesque sagittis. Donec congue libero eu libero sagittis mattis et eu augue.</p>

<p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan tortor sed bibendum eleifend. Praesent rutrum, magna vitae laoreet commodo, orci orci molestie quam, quis lobortis urna sapien a enim. Ut pellentesque est eros, lobortis commodo velit volutpat sed. Nunc luctus turpis consequat justo viverra, vestibulum ultrices neque sollicitudin. Nam iaculis scelerisque lacus vel congue. Phasellus blandit elit a magna dictum placerat. Duis placerat dolor sit amet cursus pretium. Nullam felis dolor, pulvinar dictum tellus a, pretium efficitur orci. Nunc fringilla, mi nec fringilla sodales, nulla lorem varius velit, at cursus quam sapien vitae purus. Nulla nisi ante, consequat sit amet purus et, convallis condimentum neque.</p>

</div>

</main>

</body>

</html>

page3.html

<!DOCTYPE html>

<head>

<title>New Pages</title>

body {

width: 80%;

margin: 0 auto;

}

table {

width: 100%

}

td {

background: #efa;

}

th {

background: #123321;

color: #fff;

}

tr {

border-bottom: 2px solid;

}

</style>

</head>

<body>

<div>

</div>

<div>

<table>

<tr>

</tr>

<tr>

<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan tortor sed bibendum eleifend. Praesent rutrum, magna vitae laoreet commodo, orci orci molestie quam, quis lobortis urna sapien a enim. Ut pellentesque est eros, lobortis commodo velit volutpat sed. Nunc luctus turpis consequat justo viverra, vestibulum ultrices neque sollicitudin. Nam iaculis scelerisque lacus vel congue. Phasellus blandit elit a magna dictum placerat. </td>

</tr>

<tr>

</tr>

</table>

</div>

</main>

</body>

</html>

Hope this will help. Leave a comment if any clarification required.

Navigate

The first organ to emerge from a germinating seed is the root. You want to see t

The first part I already have down...I am just having troubles with the followin

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

The first page (index page) should include two images and your name, the class n

Question

Explanation / Answer

Related Questions

Navigate