Webtech Lab Cycle Sheet 1 Q1. Code: html lang charset name content content content
Hochgeladen von
Khyati Gupta0 Bewertungen0% fanden dieses Dokument nützlich (0 Abstimmungen)
1 Ansichten40 SeitenBeschreibung:
web tech html css exercises
Datum des Uploads
Aug 08, 2020
Originaltitel
Webtech Lab 1
Copyright
© © All Rights Reserved
Verfügbare Formate
PDF, TXT oder online auf Scribd lesen
Dieses Dokument teilen
Dokument teilen oder einbetten
Stufen Sie dieses Dokument als nützlich ein?
Sind diese Inhalte unangemessen?
Dieses Dokument meldenBeschreibung:
web tech html css exercises
Copyright:
© All Rights Reserved
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen
0 Bewertungen0% fanden dieses Dokument nützlich (0 Abstimmungen)
1 Ansichten40 SeitenWebtech Lab Cycle Sheet 1 Q1. Code: html lang charset name content content content
Originaltitel:
Webtech Lab 1
Hochgeladen von
Khyati GuptaBeschreibung:
web tech html css exercises
Copyright:
© All Rights Reserved
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen
Verwandte Titel
Sie sind auf Seite 1von 40
WEBTECH LAB
CYCLE SHEET 1
Q1. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv = "refresh" content = "5; url =
C:\Users\user\Desktop\html-basics\excerise-1.html" />
<meta http-equiv = "expires" content = "5; url =
C:\Users\user\Desktop\html-basics\excerise-1.html" />
<title>This is a webpage-22/7/20</title>
</head>
<body background-color: black>
<h1 style = "color:blueviolet">Khyati Gupta</h1>
<hr>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<hr>
<p>
When was this webpage created?<br>
Check page's title for the answer.
</p>
</body>
</html>
Q2. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
</head>
<body>
<strong><font color= "green">Khyati Gupta 19BIT0285</font></strong><br>
<hr>
<font color = "pink">1</font><br>
<font color = "blue">2</font><br>
<font color = "green">3</font><br>
<font color = "red">4</font><br>
<font color = "black">5</font><br>
<font color = "midnightblue">6</font><br>
<font color = "orange">7</font><br>
<font color = "darkblue">8</font><br>
<font color = "purple">9</font><br>
<font color = "magenta">10</font><br>
<hr>
<p style= "font-family:Tahoma;">Hello It's Me</p>
<hr>
WO<u><b><font color = "blue">R</font></b></u>D.<br>
<hr>
<p style= "font-family: verdana;">Hello It's Me</p>
<p style= "font-family: 'Times New Roman', Times, serif;">Hello It's
Me</p>
<p style= "font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
sans-serif;">Hello It's Me</p>
<p style= "font-family: 'Courier New', Courier, monospace;">Hello It's
Me</p>
<p style= "font-family: Arial, Helvetica, sans-serif;">Hello It's
Me</p>
<h6>K</h6>
<h5>H</h5>
<h4>Y</h4>
<h3>A</h3>
<h2>T</h2>
<h1>I</h1>
<br>
<hr>
<!--This is a comment--><br>
<br>
<hr>
<p> a<sup>2</sup> + b<sup>2</sup> = 2ab</p><br>
<!--"sup is for superscript"-->
<hr>
<p>H<sub>2</sub>O</p>
<!--"sub is for subscript"-->
<hr>
C code
<p style="font-family: monospace;">
int main(){<br>
int a=1,b=2,c;<br>
c=a+b;<br>
printf("c");<br>
}
</p>
<hr>
<p style = "background-color: rgb(199, 199, 52);">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
recusandae neque eum provident dicta a, veniam eius ad, unde pariatur
impedit reiciendis quae sunt nostrum obcaecati quaerat enim odio
similique!
</p>
<hr>
<p style = "background-image:
url(https://wallup.net/wp-content/uploads/2019/09/110394-cats-grey-kittens
-fluffy-fat-grass-animals-cat-kitten-baby-cute-748x468.jpg);">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto
ratione voluptatibus adipisci? Error dolorum saepe laboriosam? Corporis,
accusantium. Quo quae autem eveniet doloremque laboriosam dolor, assumenda
maiores vitae sapiente? Facilis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis sit
praesentium nulla delectus. Laborum quo eum nihil culpa, hic consequatur
aut, repellat ducimus veritatis sit deleniti labori
osam officia exercitationem cupiditate.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quae
maiores eveniet pariatur ullam quia obcaecati tempore necessitatibus
consectetur earum vel optio labore sapiente id deserunt, cum magnam dolore
recusandae!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil
deleniti libero, repellat cum tempora cupiditate velit odio atque earum
laudantium vitae veritatis inventore ducimus iure in quod obcaecati rem
deserunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
maxime, quas facilis ut quod voluptatibus, laboriosam doloribus culpa
inventore earum sint quaerat nisi molestiae fuga aspernatur a nobis magnam
porro?
Lorem ipsum dolor sit amet consectetur adipisicing elit. A velit,
cupiditate natus labore beatae soluta facere quos, reiciendis
necessitatibus explicabo reprehenderit sint obcaecati recusandae ducimus
quasi commodi facilis impedit vitae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
consectetur fugiat iste officia dolore, eius omnis ipsum nisi.
Reprehenderit harum vel minus ullam consequuntur molestiae eveniet
doloremque illo, alias magni.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos,
ipsum aut earum laboriosam eos perferendis qui consequuntur accusantium
porro magni, tempora consequatur accusamus beatae. Blanditiis corrupti
unde animi. Saepe, autem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
temporibus. Dolorem eveniet dolore molestias! Eaque earum, dolores
voluptate corporis sint quis consectetur voluptatibus molestias quas ex
reprehenderit deleniti illo minima.
</p>
<hr>
<p style="font-size:10;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error odio
aperiam asperiores numquam perspiciatis neque quis voluptatum quia.
Laboriosam velit quibusdam molestiae amet ducimus obcaecati, quisquam
debitis minus doloremque neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
molestiae minima inventore odio magni iste. Eum tempore odit culpa quidem
eaque neque tenetur at magni, qui ea placeat perspiciatis incidunt!
</p>
<p style="font-size: 0.50em;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
odio aperiam asperiores numquam perspiciatis neque quis voluptatum quia.
Laboriosam velit quibusdam molestiae amet ducimus obcaecati, quisquam
debitis minus doloremque neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
molestiae minima inventore odio magni iste. Eum tempore odit culpa quidem
eaque neque tenetur at magni, qui ea placeat perspiciatis incidunt!
</p>
<hr>
<marquee height ="100px" direction="down">
Khyati made this!
</marquee>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim
voluptate corporis obcaecati, ducimus
expedita illum
placeat fugit
facere natus molestias wdcjhajkjwecnxjknrwrubceenmxkl !
</p>
</body>
</html>
Q3. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
</head>
<body>
<h2 style = "text-align: center">Squares of numbers:</h2>
<p style= "text-align: center">
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<br>
</p>
<hr>
<h1>Unalphabetized list</h1>
Dikshita<sub>3</sub>
<br>
Khyati<sub>5</sub>
<br>
Shambhavi<sub>6</sub>
<br>
Piyush<sub>7</sub>
<br>
Vandit<sub>10</sub>
<br>
Sattaki<sub>8</sub>
<br>
Shambhavi<sub>9</sub>
<br>
Gauri<sub>4</sub>
<br>
Aditi<sub>1</sub>
<br>
Anamika<sub>2</sub>
<h1>Alphabetized list</h1>
Aditi
<br>
Anamika
<br>
Dikshita
<br>
Gauri
<br>
Khyati
<br>
Rinisha
<br>
Piyush
<br>
Sattaki
<br>
Shambhavi
<br>
Vandit
<hr>
<ol>Branches of Engineering:
<li>IT</li>
<li>CSE</li>
<li>MECHANICAL</li>
<li>BIOTECHNOLOGY</li>
<li>CHEMICAL</li>
<li>ELECTRONICS</li>
</ol>
<ul>
My Roommates:
<li>Gargi</li>
<li>Natasha</li>
<li>Priyasha</li>
<li>Harshitha</li>
</ul>
<hr>
<ol type="i" start="7">Skincare brands:
<li>Innisfree</li>
<li>Kiehl's</li>
<li>Tony Moly</li>
<li>Garnier</li>
<li>Pond's</li>
<hr>
<h1>Khushi</h1>
</ol>
<hr width="100%">
<p>
Khushi is Khyati's pet name. Most peole are unaware of it.K that's
it have some Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis similique aspernatur, deleniti quas vel aut obcaecati
voluptatibus. Quam molestiae illo perspiciatis quos distinctio ipsum,
praesentium veniam ullam vero quaerat pariatur. </p>
<hr>
<dl> My names:
<dt>Khyati</dt>
<dt>Khushi</dt>
<dt>Gulla</dt>
<dt>Chotu</dt>
</dl>
<hr>
<address>
House no. 2B,<br>
Air Force Residential Colony, <br>
Mudfort <br>
Fictitious town, state.
</address>
<center>
<address>
House no. 15/B,<br>
Street no. 54, <br>
Sector- 72/B <br>
Fictitious town, state.
</address>
</center>
<hr>
<abbr title="Chhattisgarh">CG.</abbr><br>
<abbr title="Information Technology">Info tech.</abbr><br>
<abbr title="Example">Eg.</abbr><br>
<abbr title="Mathematics">Math.</abbr><br>
<hr>
<acronym title = "Institute of Electrical and Electronics
Engineers">IEEE</acronym><br>
<acronym title = "Vellore Institute of Technology">VIT</acronym><br>
<acronym title = "Knowledge Center for Success">KCS</acronym><br>
<acronym title = "Information Technology">IT</acronym><br>
<acronym title = "Hypertext Markup Language">HTML</acronym><br>
<hr>
</body>
</html>
Q4. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
</head>
<body bgcolor="#dddddd">
<center>
<h1>This is a collection of html exercises on images</h1>
<h1 >This is image 1</h1>
<img src="a.jpg" alt="bts", height="10%", width= "10%" >
<br>
<br>
<h1>This is image 2</h1>
<img src="b.jpg" alt="bts", height="10%", width= "10%" >
<br>
<br>
<h1>This is image 3</h1>
<img src="c.jpg" alt="bts", height="10%", width= "10%" >
<br>
<br>
<h1>This is image 4</h1>
<img src="d.jpg" alt="bts", height="10%", width= "10%" >
<br>
<br>
<h1>This is image 5</h1>
<img src="e.jpg" alt="bts", height="10%", width= "10%" >
<br>
<br>
<hr>
<h2>This is an image with border size=2, width=200 and height=200</h2>
<img src="a.jpg", alt="beautiful image", border-size= "2",height="200",
width="200">
</center>
<hr>
<h2 style="text-align: right;">This image is towards the right corner</h2>
<img src ="b.jpg"style="float:right;">
</body>
</html>
Q5. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h1>Table Exercise</h1>
<table border = "1" cellspacing = "2", cellpadding = "2">
<tr>
<td colspan="5" style="text-align: center;"><b>Purchased
Equipments(June,2006)</b></td>
</tr>
<tr>
<th rowspan="2">Item Number</th>
<th rowspan="2">Item Picture</th>
<th>Item Description</th>
<th>Price</th>
</tr>
<tr>
<td><b>Shipping,Handling,Installation,etc.</b></td>
<td><b>Expense</b></td>
</tr>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2"><img src="c1.jpg"></td>
<td>IBM Clone Computer</td>
<td>$400.00</td>
<tr>
<td>Shipping Handling,Installation, etc.</td>
<td>$20.00</td>
</tr>
</tr>
<tr>
<td rowspan="2">2.</td>
<td rowspan="2"><img src="c2.jpg"> </td>
<td>1GB RAM Module for Computer</td>
<td>$50.00</td>
<tr>
<td>Shipping Handling,Installation, etc.</td>
<td>$14.00</td>
</tr>
</tr>
<tr>
<td colspan="5" style="text-align: center;">Purchased
Equipments(June,2006)</td>
</tr>
</table>
</center>
</body>
</html>
</body>
</html>
Q6. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
<style>
.page {
display: block;
margin-left: 35%;
margin-right: 35%;
margin-top: 5%;
background-color: #cccccc;
padding: 20px 20px;
}
#headline{
background-color: grey;
text-align: center;
margin-top: -20px;
width: 100%;
}
h3{
text-align: right;
padding: 10px 0px;
margin-right: 20px;
}
.fruits{
float: right;
}
.info{
display: block;
margin-left: 20%;
}
</style>
</head>
<body>
<form>
<div class="page">
<div id="headline"><h3>The World of Fruit</h3></div>
<h3>Fruit Survey</h3>
<div class="info">
<label>Name</label>
<input type="text" name= "name"><br> <br>
<label>Address</label>
<input type="address" name= "address"><br> <br>
<label>Email</label>
<input type="email" name= "email">
</div>
<br> <br>
<label>How many pieces of<br> fruit do you eat<br>per
day?</label>
<div class="fruits">
<label>0</label>
<input type="radio" name = "0"> <br>
<label>1</label>
<input type="radio" name = "1"> <br>
<label>2</label>
<input type="radio" name = "2"><br>
<label>More than 2</label>
<input type="radio" name = "num"> <br><br><br>
</div>
<br><br><br><br><br><br>
<label for="items">My favourite fruit</label>
<select id="items">
<option value="item-1">Apple</option>
<option value="item-2">Banana</option>
<option value="item-3">Plum</option>
<option value="item-4">Pomegrenate</option>
</select><br><br><br>
<label>Would you like a <br> brochure? </label>
<input type = "checkbox" name = "check"><br> <br>
<button align: "center">Submit</button>
</div>
</form>
</body>
</html>
Q7. CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19BIT0285</title>
</head>
<body>
<h1>AMAZON BOOK WORLD</h1>
<a href="something.com">USER LOGIN</a><br>
<a href="something.com">USER PROFILE</a><br>
<a href="something.com">BOOKS CATALOG</a><br>
<a href="something.com">SHOPPING CART</a><br>
<a href="something.com">ORDER CONFIRMATION</a><br>
<a href="something.com">PAYMENT</a>
<table border="2",cellspacing = "2", cellpadding = "2">
<tr>
<td>S no.</td>
<td>Username</td>
<td>DOB</td>
<td>Address</td>
<td>Occupation</td>
</tr>
<tr>
<td>1.</td>
<td>Ramu P.</td>
<td>12<sup>th</sup> Jan 1980</td>
<td>H no. 22/12/1, M.G Road,Vij</td>
<td>Engineer</td>
</tr>
<tr>
<td>2.</td>
<td>Mohan R.</td>
<td>23<sup>rd</sup> May 1982</td>
<td>H no. 22/12/11, Patel Road,Hyd.</td>
<td>Driver</td>
</tr>
<tr>
<td>3.</td>
<td>Pavani V.</td>
<td>27<sup>th</sup> July 1983</td>
<td>H no. 12/25, Ameerpet,Hyd.</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>4.</td>
<td>Seshu D.</td>
<td>07<sup>th</sup> Jan 1984</td>
<td>H no. 1/99, S.R Nagar,Hyd</td>
<td>DBA</td>
</tr>
<tr>
<td>5.</td>
<td>Surendra</td>
<td>29<sup>th</sup> May 1982</td>
<td>H no. 22/12/11, Bala Nagar,Hyd.</td>
<td>Professor</td>
</tr>
</table>
<a href = "home">Home</a>
</body>
</html>
Q8. CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="external.css">
<title>19BIT0285</title>
</head>
<style>
h2{
color: blue;
}
#two{
padding: 4%;
}
</style>
<body>
<img src = "img.png" alt= "owl">
<div class = "intro">
<h2 style="background-color: lightblue;">Hello World!</h2>
<p id = "one">This example contains some advanced CSS methods you
<br>
may not have learned yet. But, we will explain these<br>
methods in a later chapter in this tutorial.</p>
</div>
<br>
<p id = "two" style="padding: 2%;">This is some text in a
paragraph.</p>
</body>
</html>
CSS
*
{
padding:0;
margin:0;
box-sizing: 0;
background-color: cadetblue;
}
img{
height: 100%;
width: 20%;
margin-left: 15%;
margin-top: 12%;
}
.intro{
margin-left: 40%;
margin-right: 15%;
margin-top: -20.5%;
padding: 4%;
background-color: lightblue;
}
#one{
background-color: lightblue;
}
#two{
border-bottom-style:dashed;
border-top-style: dotted;
border-left-style: solid ;
border-right-style: solid;
margin-bottom: 0;
margin-top: 0;
margin-left: 40%;
margin-right: 15%;
padding: 2%;
}
Q9. CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href = "style.css">
<title>19BIT0285</title>
</head>
<body>
<div class="white">
<h1 style="text-align: center;">WALL-E</h1>
<p style = "font-size: large; margin-left:2%;">Walt Disney Studios
Motion|Release date:June 27,2008</p>
<br>
<br>
<ul class = "b">
<li><a href="ex-9.htm">Summary</a></li>
<li><a href = "ex-9.htm">Critic Reviews</a></li>
<li><a href = "ex-9.htm">User Reviews</a></li>
<li><a href = "ex-9.htm">Details and Credits</a></li>
<li><a href = "ex-9.htm">Trailers and videos</a></li>
</ul>
<img src = "poster.jpg", alt = "WALL-E">
<p id = "score">94</p>
<h1 id= meta>Metascore</h1>
<p id = "meta1">
Universal Acclaim<br>
based on 39 critics
</p>
<ul class ="a">
<li>Starring: Ben Burtt,Elissa Knight,Jeff Garlin</li>
<li>Summary: After hundereds of lonely years of doing what he <br>
was built for, Wall-E discovers a new purpose in life when
<br>
he meets a sleek search robot named EVE.[Walt Disney
Pictures]</li>
</ul>
</div>
</body>
</html>
CSS
body
{
background-color: gray;
padding: 30px;
}
img {
margin-left: 40px;
margin-right: 10px;
}
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: none;
}
ul.b li{
display: inline;
background-color: black;
color: white;
margin: auto;
padding-right: 5%;
padding-left: 5% ;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#score
{
background-color: darkgreen;
width: 10px;
height: 10px;
padding-bottom: 7%;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
font-size: 30px;
color: white;
margin-top: -15%;
margin-left: 15%;
}
#meta{
margin-left:27% ;
margin-top: -16%;
}
#meta1{
margin-left:27% ;
margin-top: 7%;
font-size: 20px;
}
ul.a li
{
margin:auto;
margin-left: 30%;
font-size: 20px;
}
.white{
background-color: white;
padding: 20px;
align-content: center;
Q10. CODE
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>19BIT0285</title>
</head>
<body>
<h2 style="text-align:center">BROADBAND PRICE TABLE</h2>
<div class="columns">
<ul class="price">
<li class="header">Standard</li>
<li class = grey>Unlimited Download</li>
<li>20GB Storage</li>
<li>Unlimited Speed</li>
<li>30 Domains</li>
<li style="background-color: orangered;"><a href = "Ex10.html">GET
STARTED</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:rgb(194, 79,
133)">Enhanced</li>
<li class="grey">Unlimited Download</li>
<li>20GB Storage</li>
<li>Unlimited Speed</li>
<li>30 Domains</li>
<li style="background-color: rgb(194, 79, 133);"><a href =
"Ex10.html">GET STARTED</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color: rgb(72, 156,
156);">Unlimited</li>
<li class="grey">Unlimited Download</li>
<li>20GB Storage</li>
<li>Unlimited Speed</li>
<li>30 Domains</li>
<li style="background-color: rgb(72, 156, 156);"><a href =
"Ex10.html">GET STARTED</a></li>
</ul>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
padding-left: 10%;
padding-right: 10%;
}
body{
background-image: url('bg.jpg');
}
h2 {
margin-top: 12%;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: orangered;
color: white;
font-size: 25px;
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
font-size: 20px;
.button {
background-color:rgb(194, 79, 133);
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
a {
color: white;
font-size: 24px;
text-decoration: none;
}
Q11. CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-a
wesome.min.css">
<title>19BIT0285</title>
</head>
<body>
<header>
<nav>
<ul class = "a" type = "none">
<li style="font-size: 40px;"><img src = "z.png" alt = "z",
style="height: 5%; width: 5%;"> ZORO</li>
<li style="font-size: 20px;">Travel Diaries</li>
</ul>
<ul class="b">
<li><a href = "ex-11.htm">HOME</a></li>
<li><a href = "ex-11.htm">BLOG</a></li>
<li><a href = "ex-11.htm">RESUME</a></li>
<li><a href = "ex-11.htm">CONTACT</a></li>
</ul>
</nav>
</header>
<div>
<img src="z1.jpg" style="width: 100%;, height:5%;">
<div class="text"><p style="background-color: #413d3d; color:
black;">Refelctions on my holiday to the United States...
</div>
<button class = "button-right"style="opacity: 100%; margin-left:
3%;">See Article ></button>
</div>
<section>
<article class="art">
<h2>I'm a great travellar</h2>
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequatur autem, excepturi possimus cumque molestiae aspernatur
inventore maxime eum amet, laborum minima aliquid. Porro corrupti itaque
impedit. Quis, voluptate repellendus? Eos?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
harum corrupti, dolores debitis autem itaque voluptate veniam velit
molestias nam ipsum dignissimos voluptatibus culpa fugit et iste facere.
Consectetur, blanditiis.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam
illum aliquam facilis ex vel omnis modi non. Sapiente error assumenda
pariatur debitis culpa maiores, ullam labore officia ut laudantium
temporibus?
<br>
<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam
temporibus rem beatae fuga consectetur voluptatibus! Molestias aliquid
beatae dicta assumenda, similique qui impedit corporis, veritatis dolore
magnam perferendis optio quaerat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
molestiae maxime, atque ipsum quos neque eveniet rem odit asperiores illo
autem dignissimos. Repudiandae quasi ipsum molestiae fugiat numquam.
Suscipit, quibusdam!
<br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores,
reiciendis! Odio nostrum maiores vel distinctio aliquam, veritatis minus.
Ullam commodi doloremque ipsum rerum dolor laboriosam nobis corrupti sint,
eaque minus.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus
possimus at ullam autem ut veritatis reiciendis inventore? Suscipit labore
dignissimos adipisci molestiae. Nemo repellendus quam itaque nisi laborum
possimus veniam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
repellat recusandae in ex corporis totam tenetur explicabo? Ratione
numquam eum dolore, dicta itaque eius eveniet repellat debitis quam?
Natus, quo.
</article>
<aside>
<h2>ABOUT THE AUTHOR</h2>
<img src = "z2.jpg" style="height: 20%; width: 50%;">
<br>
<div class = "aside">
Let me introduce myself: my name's Zozor. I was born on 23 Nov
2005.
<br>
<br>
A bit meager, is it not? This why I've now decided to write my
blogography to let my readers know who I really am.
<br>
<br>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-wifi"></a>
</div>
</aside>
</section>
<footer>
<div class = "tweet">
<h3>MY LAST TWEET</h3>
Hee-Haw!
<br>
<br>
<br>
12/05 23:12
</div>
<div class = "tweet1">
<h3>MY PICTURES</h3>
<img src = "z3.jpg" style="height: 8%; width: 8%;">
<img src = "z4.jpg" style="height: 8%; width: 8%;">
<img src = "z5.jpg" style="height: 10%; width: 7%;">
<img src = "z6.jpg" style="height: 11%; width: 9%;">
</div>
<div class = "tweet2">
<h3>MY FRIENDS</h3>
<ul type = "disk">
<li>Pupi the rabbit</li>
<li>My Baobab</li>
<li>Kalwali</li>
<li>PercevaLeu</li>
</ul>
<ul type = "disk">
<li>Ji</li>
<li>Super Cucumber</li>
<li>Prince</li>
<li>Mr Fan</li>
</ul>
</div>
</ul>
</footer>
</body>
</html>
CSS
*
{
background-color: rgb(207, 157, 75);
}
ul.b
{
margin-top: 1%;
margin-left:75% ;
}
nav ul.b li
{
display: inline;
font: 40px;
margin-left:3%;
}
.gsb
{
background-image: url(z1.jpg);
}
button
{
background-color: red;
}
.text{
position: absolute;
bottom: -90px;
left: -20px;
margin: 30px;
background-color: #413d3d;
border: 1px solid black;
opacity: 0.9;
width: 98%;
}
.text p{
font-weight: bold;
opacity: 100%;
}
.button-right
{
position: absolute;
bottom: -50px;
right: 20px;
}
.art
{
width: 60%;
padding: 2%;
}
aside{
width: 30%;
margin-left: 67%;
margin-top: -30%;
background-color: rgb(49, 46, 46);
color: white;
}
aside h2{
margin-left: 20%;
margin-top: -25%;
background-color: rgb(49, 46, 46);
color: white;
}
aside img{
margin-left: 25%;
}
.aside
{
padding: 10%;
background-color: rgb(49, 46, 46);
color: white;
}
.tweet
{
margin-left: 2%;
}
.tweet1
{
margin-left: 27%;
margin-top: -9.5%;
}
.tweet2
{
margin-left: 60%;
margin-top: -9%;
}
footer {
width: 100%
}
footer ul {
display: inline-table;
list-style-type: disc;
margin: 0px 25px 0px 25px;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-flickr {
background:pink;
color: white;
}
.fa-vimeo {
background: rgb(105, 105, 206);
color: white;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-wifi {
background:orange;
color: white;
}
.fa {
padding: 20px;
font-size: 30px;
width: 20px;
height: 20%;
text-align: center;
text-decoration: none;
}
