Scribd
Upload
237 views24 pages

Web Technologies Assessment 1

The document contains code snippets demonstrating various features of HTML. It includes 20 sections where the author creates webpages to: 1) Print text and set titles using basic HTML tags 2) Change text colors, fonts and styles 3) Add comments, formulas, images and set background colors 4) Format text, add lists and display code samples The author provides fully coded HTML examples to demonstrate each task. The examples cover fundamental HTML elements like <html>, <head>, <title>, <body> as well as more advanced formatting with <font>, <sup>, <sub>, <b>, <i> and using CSS for styling.

Uploaded by

ANKIT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
237 views24 pages

Web Technologies Assessment 1

The document contains code snippets demonstrating various features of HTML. It includes 20 sections where the author creates webpages to: 1) Print text and set titles using basic HTML tags 2) Change text colors, fonts and styles 3) Add comments, formulas, images and set background colors 4) Format text, add lists and display code samples The author provides fully coded HTML examples to demonstrate each task. The examples cover fundamental HTML elements like <html>, <head>, <title>, <body> as well as more advanced formatting with <font>, <sup>, <sub>, <b>, <i> and using CSS for styling.

Uploaded by

ANKIT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

ANKIT KUMAR

Reg: 19BIT0267

Web Technologies Lab


Assessment-1
HYPER TEXT MARKUP LANGUAGE (HTML)
1) Introduction to HTML

a. Create a webpage that prints your name to the screen.


 <html>
<head>
</head>
<body>
Ankit Kumar
</body>
</html>

b. Create a webpage that prints the numbers 1 - 10 to the screen.


 <HTML>
<HEAD>
</HEAD>
<BODY>
1 2 3 4 5 6 7 8 9 10
</BODY>
</HTML>

c. Create a webpage and set its title to "This is a webpage".


 <HTML>
<HEAD>
<TITLE>This is a webpage</TITLE>
</HEAD>
<BODY>
The title of this webpage is "This is a Webpage"
</BODY>
</HTML>
ANKIT KUMAR
Reg: 19BIT0267

d. Create a webpage that prints the message "When was this webpage created? Check page's title
for the answer." to the screen, and set the title of the page to the current date.
 <html>
<head>
<title>July 31st, 2020</title>
</head>
<body>
When was this webpage created?
Check page's title for the answer.
</body>
</html>

e. Create a webpage that prints any text of your choice to the screen; do not include a head section
in the code.
 <html>
<body>
I am a student of VIT University
</body>
</html>

f. Create a webpage which keeps track of the browsers information and do the following

 refreshes its page in 5 seconds,


 expires in a duration of time
 <html>
<head>
<title>Auto Refresh</title>
<meta http-equiv="refresh" content="thu, 31dec 2020">
<meta name="expires" content="30">
</head>
<body>
This page will refresh in 5 second and will expire on 31st december 2020.
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

2) HTMLTEXT EXERCISES

a. Print your name in green


 <html>
<head>
<title>Name in Green</title>
</head>
<body>
<h3 style="color:Green;">Ankit Kumar</h3>
</body>
</html>

b. Print the numbers 1 - 10, each number being a different color.


 <html>
<head>
<title>Numbers in colour</title>
</head>
<body>
<font color="purple">1</font>
<font color="brown">2</font>
<font color="gray">3</font>
<font color="#008080">4</font>
<font color="#0008B">5</font>
<font color="blue">6</font>
<font color="#dcdcdc">7</font>
<font color="#800000">8</font>
<font color="green">9</font>
<font color="#688e23">10</font>
</body>
</html>

c. Prints your name in a Tahoma font.


 <html>
<head>
<title>Tahoma Font</title>
</head>
<body>
<font face="Tahoma">Ankit Kumar</font>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

d. Display a part of a word with bold underline.


 <html>
<head>
<title>Bold Underline</title>
</head>
<body>
This is a webpage text which has a part <b><u>bold and underlined</b></u>.
</body>
</html>

e. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.


 <html>
<head>
<title>Different fonts</title>
</head>
<body>
<p>
<font face="Courier New">
This webpage is about Eye Tracking System </font>
<font face="Times New Roman">Eye-movement tracking is a method that is increasingly being
employed to study usability issues in HCI contexts.</font>
<font face="Helvetica">
The objectives of the present chapter are threefold. </font>
<font face="Georgia">
First, we introduce the reader to the basics of eye-movement technology, and also present key
aspects of practical guidance to those who might be interested in using eye tracking in HCI research,
whether in usability-evaluation studies, or for capturing people's eye movements as an input
mechanism to drive system interaction.</font>
</p>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

f. Print a paragraph that is a description of a book; include the title of the book as well as its author.
Names and titles should be underlined, adjectives should be italicized and bolded.
<html>
<head>
<title>Book Review</title>
</head>
<body>
<p>
A book which is my favourite is <u>I too Had a Love Story </u> by <u>Ravinder Singh</u>.This book is
about a man named Ravin who falls in love with a girl whom he met at online dating site.Then he
loses her in an accident. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books
by <u>Ravinder Singh</u> include <u>Can Love Happen Twice</u>, <u>Belated Bachelor Party</u>,
and <u>The Reunion</u>.
</p>
</body>
</html>

g. Print your name to the screen with every letter being a different heading size.
 <html>
<head>
<title>Headings</title>
</head>
<body>
<h1>A</h1>
<h2>N</h2>
<h3>K</h3>
<h4>I</h4>
<h5>T</h5>
</body>
</html>

h. Write a comment line on your code and make sure it is not displayed in the page.
 <html>
<head>
<title>Comment</title>
</head>
<body>
<!This is a comment and will not be visible in webpage>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

i. Print a2+b2=2ab
 <html>
<head>
<title>Formula</title>
</head>
<body>
a<sup>2</sup>+b<sup>2</sup> =2ab
</body>
</html

j. Print H2O
 <html>
<head>
<title>Formula</title>
</head>
<body>
H<sub>2</sub>O
</body>
</html>

k. Display a c code as it is in the page


<html>
<head>
<title>C code</title>
</head>
<body>
<h3>This is a C Code in webpage</h3>
#include &ltstdio.h&gt<br>
int main() {<br>
int i;<br>
printf("This is a c code");<br>
return 0;<br>
}<br>
</body>
</html>

l. Set the background color of the page as yellow


 <html>
<head>
<title>Bg color</title>
</head>
<body style="background-color:yellow;">
<h3>This is a text on a yellow background</h3>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

m. Set an image as background of the page


 <html>
<head>
<title>Bg image</title>
</head>
<body style="background-image: url('image.jpg');">
</body>
</html>

n. Set the font size as 10. Print it. Again try to decrease the font size. Check whether the font size is
reduced.
 <html>
<head>
<title>Font Size</title>
</head>
<body>
<p style="font-size:10;">Web Technologies</p>
</body>
</html>

o. Apply marquee for your name

 <html>
<head>
<title>Marqueee</title>
</head>
<body>
<marquee>ANKIT KUMAR</marquee>
</body>
</html>

p. Display a paragraph contents in a single line.


 <html>
<head>
<title>para</title>
</head>
<body>
<p>The Milky Way is the galaxy that contains our Solar System, with the name describing the galaxy's
appearance from Earth: a hazy band of light seen in the night sky formed from stars that cannot be
individually distinguished by the naked eye.</p>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

3) HTML TEXT FORMATTING, LISTS EXERCISES

a. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the
number 2 superscripted, an equal sign and the result.
 <html>
<head>
<title>Square of numbers</title>
</head>
<body>
1<sup>2</sup> = 1
<br />
2<sup>2</sup> = 4
<br />
3<sup>2</sup> = 9
<br />
4<sup>2</sup> = 16
<br />
5<sup>2</sup> = 25
<br />
6<sup>2</sup> = 36
<br />
7<sup>2</sup> = 49
<br />
8<sup>2</sup> = 64
<br />
9<sup>2</sup> = 81
<br />
10<sup>2</sup> = 100
<br />
11<sup>2</sup> = 121
<br />
12<sup>2</sup> = 144
<br />
13<sup>2</sup> = 169
<br />
14<sup>2</sup> = 196
<br />
15<sup>2</sup> = 225
<br />
16<sup>2</sup> = 256
<br />
17<sup>2</sup> = 289
<br />
18<sup>2</sup> = 324
<br />
19<sup>2</sup> = 361
<br />
20<sup>2</sup> = 400
</body>
</html>

b. Prints 10 names with a line break between each name. The list should be alphabetized, and to do
this place a subscripted number next to each name based on where it will go in the alphabetized list.
(Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name,
then the alphabetized list. Both lists should have an level heading
ANKIT KUMAR
Reg: 19BIT0267

 <html>
<head>
<title>Names alphabetical list</title>
</head>
<body>
<h1>Unalphabetical list</h1>
Aritam<sub>3</sub><br>
Chandan<sub>5</sub><br>
Ankit<sub>1</sub><br>
Sakshi<sub>7</sub><br>
Ankita<sub>2</sub><br>
Zainab<sub>10</sub><br>
Harshit<sub>6</sub><br>
Tushar<sub>9</sub><br>
Barkha<sub>4</sub><br>
Shivam<sub>8</sub><br>
<h1>Alphabetical list</h1>
Ankit<br>
Ankita<br>
Aritam<br>
Barkha<br>
Chandan<br>
Harshit<br>
Sakshi<br>
Shivam<br>
Tushar<br>
Zainab<br>
</body>
</html>

c. Print two lists with any information you want. One list should be an ordered list, the other list
should be an unordered list.
 <html>
<head>
<title>List</title>
</head>
<body>
<b>Input devices</b>
<ol type="I">
<li>Mouse</li>
<li>Keyboard</li>
<li>Microphone</li>
<li>Touch Sensor</li>
</ol>
<b>Output Devices</b>
<ul type="square">
<li>Monitor</li>
<li>Projector</li>
<li>Speakers</li>
<li>Printers</li>
</ul>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

d. Print a list which starts with 7 with the type i.


 <html>
<head>
<title>List</title>
</head>
<body>
<b>Input devices</b>
<ol type="i" start="7">
<li>Mouse</li>
<li>Keyboard</li>
<li>Microphone</li>
<li>Touch Sensor</li>
</body>
</html>

e. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal
line print a paragraph relating to the text in the heading
 <html>
<head>
<title>Para width</title>
</head>
<body>
<h1>Energy</h1>
<hr width="100%" />
<p>
Energy, in physics, the capacity for doing work.
It may exist in potential, kinetic, thermal, electrical, chemical, nuclear, or other various forms.
There are, moreover, heat and work—i.e., energy in the process of transfer from one body to
another.
</p>
</body>
</html>

f. Print a definition list with 5 items.

 <html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt>CPU</dt>
<dd>Central Processing Unit where the actual processing of data takes place.</dd>
<dt>RAM</dt>
ANKIT KUMAR
Reg: 19BIT0267

<dd>The main memory, plus additional slots for adding more memory</dd>
<dt>Monitor</dt>
<dd>A output of what is processed</dd>
<dt>Pen Drive</dt>
<dd>A storage device used to transfer files</dd>
<dt>Operating System</dt>
<dd>The user interface on which computer runs</dd>
</dl>
</body>
</html>

g. Print two addresses in the same format used on the front of envelopes (senders address in top left
corner, receivers address in the center).

 <html>
<head>
<title>Adresses</title>
</head>
<body>
<address>
PHED Colony<br>
Sahijna Road,Garhwa<br>
Pin Code - 822114
</address>
<br><br>
<center>
<address>
N Block, Mens Hostel<br>
VIT University<br>
Vellore
</address>
</center>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

h. Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the
data that the abbreviations and acronyms represent.
 <html>
<head>
<title>Acronym</title>
</head>
<body>
<abbr title="Abstract">Abstr.</abbr>
<br /><br />
<abbr title="Biochemistry">Biochem.</abbr>
<br /><br />
<abbr title="Example">Ex.</abbr>
<br /><br />
<abbr title="Literature">Lit.</abbr>
<br /><br />
<abbr title="Mathematics">Math.</abbr>
<br /><br />
<acronym title="World Wide Web Consortium">W3C</acronym>
<br /><br />
<acronym title="Institute of Electrical
and Electronic Engineers">IEEE</acronym>
<br /><br />
<acronym title="International Standards Organization">
ISO
</acronym>
<br /><br />
<acronym title="Hyper Text Markup Language">HTML</acronym>
<br /><br />
<acronym title="Beginners All Purpose
Symbolic Instruction Code">BASIC
</acronym>
</body>
</html>

4) HTML IMAGE EXERCISES

a. Display five different images. Skip two lines between each image.
Each image should have a title.

 <html>
<head>
<title>Five images</title>
</head>
<body>
<img src="car.jpg" alt="Car" title="Car" />
<br /><br />
<img src="cat.jpg" alt="Cat" title="Cat" />
<br /><br />
<img src="book.jpg" alt="Book" title="Book" />
<br /><br />
<img src="dog.jpg" alt="Dog" title="Dog" />
<br /><br />
<img src="flower.jpg" src="flower" title="flower" />
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

b. Display an image that has a border ofsize 2, a width of 200, and a height of 200.
 <html>
<head>
<title>images</title>
</head>
<body>
<img src="image.jpg" width="200" height="200" alt="Tree" border="2" />
</body>
</html>

c. Display the image towards the right corner of the webpage

 <html>
<head>
<title>images</title>
<style>
.topright {
position: absolute;
top: 8px;
right: 16px;
}
</style>
</head>
<body>
<div class="topright"><img src="image.jpg" width="200" height="200" alt="Tree" border="2" /></div>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

5) HTML TABLES
 <html>
<head>
<title>Tables</title>
</head>
<body>
<TABLE border="1" cellpadding="5" cellspacing="2">
<TR>
<TH colspan="5" scope="colgroup">Purchased Equipments (June, 2006)</TH>
</TR>
<TR>
<TH scope="col">Item Num#</TH>
<TH scope="col">Item Picture</TH>
<TH scope="col"><p>Item Description</p><p>Shipping Handling Installation, etc</p></TH>
<TH scope="col"><p>Price</p><p>Expense</p></TH>
</TR>
<TR>
<TD scope="row">1</TD>
<TD><img src="comp.jpg" width="100" height="100" alt="comp" border="2" /></TD>
<TD>
<p>IBM Clone Computer</p>
<p>Shipping Handling Installation, etc</p></EM>
</TD>
<TD><p>&dollar;400.00</p><p>&dollar;20.00</TD>
</TR>
<TR>
<TD scope="row">2</TD>
<TD><img src="ram.jpg" width="100" height="100" alt="Ram" border="2" /></TD>
<TD>
<p>1GB RAM Module for Computer.</p>
<p>Shipping Handling Installation, etc</p></EM>
</TD>
<TD><p>&dollar;50.00</p><p>&dollar;14.00</TD>
</TR>
</TABLE>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

6) HTML Forms
 <html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>The World of Fruit</h3>
<h3>Fruit Survey</h3>
<form name="f1" method="get" action="" >
Name: <input type="text" name="sname" /> <br/><br/>
Address: <input type="text" name="add" /> <br/><br/>
Email: <input type="text" name="em" /> <br/><br/>
How many pieces of fruit<br> do you eat per day:<br>
<input type="radio" name="gen" >0<br>
<input type="radio" name="gen">1<br>
<input type="radio" name="gen">2<br>
<input type="radio" name="gen">More than 2
<br/><br/>
My favorite fruit:<br>
<select name="company" multiple="multiple">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Plum</option>
<option value="4">Pomegranate</option>
<option value="4">Mango</option>
</select>
<br/><br/>
Would you like a brochure:
<input type="checkbox" name="yes" value="y"/>
<br/><br/>
<input type="submit" name="bt1" value="Submit" />
</form>
</body>
</html>

7) HTML Frames
 Frame 1:
<html>
<head>
<title>
frames
</title>
</head>
<body>
<div style="height: 200px; padding: 2%;color: red;" >
<h1 style = "text-align : center;font-family: arial;">
AMAZON BOOK WORLD
</h1>
</div>
</body>
</html>

 Frame 2
<html>
<head>
<title>
frames
ANKIT KUMAR
Reg: 19BIT0267

</title>
</head>
<body style="background-color: #172b4a">

<div>
<ul style="font-size: 2em; color: red;text-decoration: underline;padding:5%; ">
<li>User Login</li>
<li>User profile</li>
<li>Books</li>
<li>Shopping cart</li>
<li>Payment</li>
</ul>

</div>
</body>
</html>

 Frame 3
<html>
<head>
<title> frames</title>
</head>
<body style="background: #82b2ff">
<Table border="8px solid #eee" width = "80%" align="center" margin="100px" style =
"background: #eee; ">
<caption style="font-size: 2em;text-align: center;color: blue;padding: 1em;text-decoration:
underline;">USER'S PROFILE</caption>
<tr>
<th style="padding: 25px;"> S.no </th>
<th style="padding: 25px;"> User name </th>
<th style="padding: 25px;"> DOB </th>
<th style="padding: 25px;"> Address </th>
<th style="padding: 25px;"> occupation </th> </tr>
<tr>
<td style="padding: 25px;"> 1 </td>
<td style="padding: 25px;"> Ramu P </td>
<td style="padding: 25px;"> 12th jan 1980 </td>
<td style="padding: 25px;"> MG road VIJ </td>
<td style="padding: 25px;"> Engineer </td></tr>
<tr>
<td style="padding: 25px;"> 2 </td>
<td style="padding: 25px;"> Mohan </td>
<td style="padding: 25px;"> 23rd may 1982 </td>
<td style="padding: 25px;"> Patel road Hyd </td>
<td style="padding: 25px;"> Driver </td></tr>
<tr>
<td style="padding: 25px;"> 3 </td>
<td style="padding: 25px;"> Pavani V </td>
<td style="padding: 25px;"> 27th july 1983 </td>
<td style="padding: 25px;"> Ameerpet hyd </td>
<td style="padding: 25px;"> Software Engineer </td>
</tr>
</Table>

<a href="#" align="center"><h1>Home</h1></a>


</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

 Main
<!DOCTYPE html>
<html>
<frameset rows="30,70">
<frame src="frame.html">
<frameset cols="30,70">
<frame src="frame 2.html">
<frame src="frame3.html">
</frameset>

</frameset>
</html>

8) Create an external style sheet named as “external.css” and provide some styles for h2, p
and body tags. Create an html file named as “welcome.html” and link the external style
sheet. Include internal style sheet for body tags. Include a <p> tags with inline style sheet

 HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
<title></title>
</head>
<body>
<style type="text/css">
body{
background: #d0d0d6;
}
</style>
<div style=" padding: 5%;background: #f5f5f5; width: 50%">
<h2 >Black Holes</h2>
<p style="padding:2%;font-family: arial;"> A black hole is a place in space where gravity pulls
so much that even light can not get out. The gravity is so strong because matter has been squeezed
into a tiny space. This can happen when a star is dying. Because no light can get out, people can't see
black holes. They are invisible. Space telescopes with special tools can help find black holes. The
special tools can see how stars that are very close to black holes act differently than other stars.
ANKIT KUMAR
Reg: 19BIT0267

</p>
</div>
<p style="border : 3px dashed black; width: 50%; padding: 10px;">
The sun will never turn into a black hole. The sun is not a big enough star to make a black hole.
</p>
</body>
</html>

 External.css
h2{
text-decoration: underline;
font-size: 4em;
}
p{
border-color: black;
}
body{
font-family: georgia;
}

9) Write the CSS code necessary to recreate the following appearance on-screen, exactly as shown.
 <html>
<head>
<title>CSS</title>
</head>
<body>
<div id="all">
<h1>WALL-E</h1>
<p>
Walt Disney Studios Motion Pictures
| Release date: Jun 27, 2008
</p>
<div id="menu">
ANKIT KUMAR
Reg: 19BIT0267

<p>Summary</p>
<p>Critic Reviews</p>
<p>User Reviews</p>
<p>Details and Credits</p>
<p>Trailers and Videos</p>
</div>
<div id="pic">
<img src="wall.jpg" width="200" height="300">
<id="rating"><img src="94.jpg" width="60" height="100">
<div id="score">
<h2>Metascore</h2>
<p>
Universal acclaim <br />
based on 39 Critics
</p>
<ul>
<li>
Starring: Ben Burtt, Elissa
Knight, Jeff Garlin
</li>
<li>
Summary: After hundreds of
lonely years of doing what he
was built for, Wall-E
discovers a new purpose in
life when he meets a sleek
search robot named EVE. [Walt
Disney Pictures]
</li>
</ul>
</div>
</div>
</body>
</html>
ANKIT KUMAR
Reg: 19BIT0267

11) Design the following web page using HTML5 and CSS:

 HTML
<html>
<head>
<title>Zozor</title>
</head>
<body>
<div id="main-wrapper">
<header>
<div id="main-tittle">
<img id="logo" src="https://s15.postimg.org/ti3na4tln/zozor_logo.png" alt="Zozor logo">
<h1>Zozor</h1>
<h2>Travel Diaries<h2>
</div>

<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">resume</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

<div id="img-banner">
<div id="texto-banner"><h3>Reflections on my holiday in the United States...</h3>
<a href="#" class="botao">See article<img
src="https://s15.postimg.org/t7mxzb07v/flecheblanchedroite.png"></a>
</div>
</div>

<section>
<article>
<h1><img class="icon" src="https://s15.postimg.org/70swfl8ez/ico_epingle.png" alt="Clothe
Pin">Im a great traveller</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis dignissim lorem quis
maximus. Praesent nec lacus turpis. Donec tincidunt eros varius placerat scelerisque. Quisque a
fringilla mi, eu pharetra nibh. Morbi consequat lacinia magna vitae tempus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Suspendisse eu vehicula arcu, nec elementum turpis.
Phasellus vitae neque eu libero aliquet cursus. Sed semper ex nisl, in tristique sem laoreet et. Duis eu
erat vitae lorem pellentesque rhoncus. Suspendisse eu dolor ac tellus pretium finibus non non nisi.
Sed molestie dolor sed vestibulum pharetra. Proin vel venenatis lectus, ac maximus dolor. Cras a
efficitur dui, sed consequat velit. Aliquam vehicula mattis nunc, et egestas turpis vehicula nec.
Vivamus elementum purus vel bibendum elementum.</p>
<p>Duis hendrerit, nisi ac consequat mattis, felis ante vulputate odio, vitae viverra massa est eu
sem. Suspendisse quis vulputate ex, gravida accumsan tellus. Morbi et tellus mattis, finibus ante et,
volutpat arcu. Nam nibh risus, porta sit amet mattis eu, varius ut eros. Donec ac tempor eros, in
porttitor sem. Etiam sit amet luctus risus. Etiam volutpat sit amet orci vitae varius. Aliquam posuere,
nulla sed suscipit tempor, lacus turpis lacinia odio, vel ornare nulla sem a massa. Etiam scelerisque
auctor dui id imperdiet.</p>
<p>Fusce malesuada nisl id blandit convallis. Integer nunc turpis, aliquet at dapibus id, lobortis in
nunc. Suspendisse in enim rutrum, posuere ante non, malesuada eros. Proin eu mi justo. Maecenas
eget quam felis. Nam suscipit, justo sit amet tempus dapibus, quam sapien gravida velit, ut venenatis
lectus nisi eu mi. Aliquam quis risus ut elit congue laoreet. Donec mi velit, lobortis ut finibus vitae,
faucibus vitae lectus. Fusce eros purus, malesuada gravida ultricies ac, tristique sit amet dui.</p>
</article>
ANKIT KUMAR
Reg: 19BIT0267

<aside>
<h1>About the author</h1>
<img src="https://s15.postimg.org/c3jf1uwgr/zozor_classe.png" alt="Donkey">
<p>Let me introduce myself: My name's Zozor. I was born on 23 November 2005.</p>
<p>A bit meager is it not?! This is why I've now decided to write my biography to let my readers
know who I really am.</p>
<a href="#"><img src="https://s15.postimg.org/40c1z1x3v/facebook.png" alt="Facebook"></a>
<a href="#"><img src="https://s15.postimg.org/gzigft78b/twitter.png" alt="Twitter"></a>
<a href="#"><img src="https://s15.postimg.org/9eau6lmu3/flickr.png" alt="Flickr"></a>
<a href="#"><img src="https://s15.postimg.org/jv050f0m3/vimeo.png" alt="Vimeo"></a>
</aside>
</section>

<footer>
<div id="twitter">
<h1>My last tweet</h1>
<p>Lorem Ipsum</p>
<p>12/05 23:12</p>
</div>
<div id="my-pictures">
<h1>My Pictures</h1>
<a href="#"><img src="https://s15.postimg.org/nh1czbhln/photo1.png" alt="Photo1"></a>
<a href="#"><img src="https://s15.postimg.org/m39q40icb/photo2.png" alt="Photo2"></a>
<a href="#"><img src="https://s15.postimg.org/8avb8drkr/photo3.png" alt="Photo3"></a>
<a href="#"><img src="https://s15.postimg.org/pco5ah6fv/photo4.png" alt="Photo4"></a>
</div>
<div id="friends">
<h1>My friends</h1>
<ul>
<li><a href="#">Pupi the rabbit</a></li>
<li><a href="#">My Baobab</a></li>
<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval</a></li>
</ul>
<ul>
<li><a href="#">J1</a></li>
<li><a href="#">Super Cucumber</a></li>
<li><a href="#">Prince</a></li>
<li><a href="#">Mr Fan</a></li>
</footer>
</div>
</body>
</html>

 CSS
body{
background-image:url("https://s15.postimg.org/lvhhtrhzv/fond_jaune.png");
}
#main-wrapper{
width:900px;
margin:auto;
}
section h1, footer h1, nav a{
text-transform:uppercase;
}
header{
background-image:url("https://s15.postimg.org/ida3b46hn/separateur.png");
ANKIT KUMAR
Reg: 19BIT0267

background-repeat: repeat-x;
background-position: center bottom;
}
#main-tittle{
display:inline-block;
}
#logo, header h1{
display:inline-block;
margin-bottom:0px;
}
header h2{
margin-top:0px;
}
nav{
display:inline-block;
width:740px;
text-align:right;
}
nav ul{
list-style-type:none;
}
nav li{
display:inline-block;
margin-left:10px;
}
nav a{
text-decoration:none;
color:black;
}
nav a:hover{
color:red;
border-bottom:1px solid;
}
#img-banner{
margin-top:15px;
height:200px;
border-radius:5px;
background-image:url("https://s15.postimg.org/h9pyz5luj/sanfrancisco.jpg");
background-repeat:no-repeat;
margin-bottom:25px;
box-shadow:0px 4px 4px #1c1a19;
position:relative;
}
#texto-banner{
position:absolute;
bottom:0;
border-radius: 0px 0px 5px 5px;
width: 98.9%;
height: 50px;
padding-left: 10px;
background-color: rgba(24,24,24,0.8);
color: white;
}
.botao{
display:inline-block;
height:25px;
position:absolute;
right:10px;
ANKIT KUMAR
Reg: 19BIT0267

bottom:9px;
color:white;
background-image:url("https://s15.postimg.org/objb7m02j/fond_degraderouge.png");
border-radius:5px;
padding:4px 8px 0px 8px;
text-decoration:none;
}
.botao img{
border:0;
margin-left:6px;
vertical-align:middle;
}
article, aside{
display:inline-block;
vertical-align:top;
}
article{
width:625px;
margin-right:15px;
}
.icon{
vertical-align:middle;
margin-right:15px;
}
aside{
width:235px;
background-color:grey;
border-radius:5px;
box-shadow:2px 5px 5px;
text-align:center;
padding:10px;
color:white;
}
aside img{
border-radius:10px;
box-shadow:1px 1px 3px black;
}
aside a:hover{
opacity:0.5;
}
footer{
background-image:url("https://s15.postimg.org/sr6bqm1uj/ombre.png");
background-repeat:repeat-x;
background-position:center top;
padding-top:15px;
}
#twitter, #my-pictures, #friends{
display:inline-block;
vertical-align:top;
width:33%;
}
footer h1{
font-size:1em;
}
#friends ul{
display:inline-block;
list-style-image:url("https://s15.postimg.org/z26xtadp7/ico_liensexterne.png");
}
ANKIT KUMAR
Reg: 19BIT0267

#friends a{
text-decoration:none;
color:black;
}
#friends a:hover{
color:red;
border-bottom:1px solid;
}
#my-pictures img{
box-shadow:1px 1px 2px black;
margin-right:2px;
}
#my-pictures img:hover{
opacity:0.5;
border-radius:100%;
}

You might also like