Creating An About Me Page 2. Adding CSS Stylesheet

School of Information Technology and Engineering (SITE)
ITE1002 - Web Technologies

HTML CSS (Lab Cyclesheet 1)
Name P Venkata Sai Mounish
Register Number 17BIT0229
Slot L45+L46
Faculty Name SUREKA S
1. Creating an About Me Page

2. Adding CSS Stylesheet
index.html
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-
hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<div class="card-header">
<img id="avatar" src="images/mounish-sai.jpg">
<h1 id="name">Mounish Sai</h1>
<p id="place"><i class="fas fa-map-marker-alt"></i> Vellore,
India</p>
</div>
<div class="card-body">
<p id="intro">Hello. I am a
<em>blogger/designer/freelancer/internet marketer/coffee lover</em>. I live
in a small town somewhere in the world. I am passionated about minimalistic
and flat design.</p>
<h4 id="courses-heading"><i class="fas fa-book"></i> My Courses
in current Semester</h4>
<ul>
<li class="fav-course"> Web Technologies</li>
<li>Database Management Systems</li>
<li>Software Engineering-Principles and Practices</li>
<li class="fav-course">Reasoning Skill Enhancement</li>
<li>Theory of Computation</li>
<li>Operating Systems</li>
<li>Applied Linear Algebra</li>
<li>Introduction to Innovative Projects</li>
</ul>
<h4>My Fav <i class="fas fa-heart"></i> TV Series</h4>
<ul>
<li><a target="_blank" href="https://www.hbo.com/game-of-
thrones">Game of Thrones</a></li>
<li><a target="_blank"
href="https://www.netflix.com/title/80057281">Stranger Things</a></li>
href="https://www.netflix.com/title/80117470">13 Reasons Why</a></li>
href="https://www.netflix.com/title/80025172">Narcos</a></li>
</ul>
<table>
<tr>
<td><img src="images/happy.png">
<p>When I'm <i class="fas fa-smile-beam"></i></p>
</td>
<td><img src="images/sad.png">
<p>When I'm <i class="fas fa-frown"></p></td>
</tr>
</table>
<h3 id="friend-name"><i class="fas fa-user"></i> Mohith Batchu</h3>
<p class="about-friend">My friend is kindly and
sweet-natured. We are always happy to be with each other. We enjoy
studying, playing and eating together. If I am sad he will do all he can to
make me smile and feel happy.</p>
<h3>Programing Languages</h3>
<div class="program-language">
<p>HTML/CSS/JS</p>
<progress max="100" value="100"></progress>
</div>
<p>ReactJS</p>
</div>
<p>Java</p>
</div>
<p>Python</p>
</div>
</div>
<div class="footer">
<p class="footer-text">
< Mounish Sai />
</p>
</div>
</div>
</body>
</html>
style.css
body {
font-family: 'Roboto', sans-serif;

}
.content {
max-width: 500px;
margin: auto;
background-color: #E4F1FE;
/*border: 2px solid #013243;*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card-header {
background-color: #6BB9F0;
padding: 10px;
}
.card-body {
padding: 10px;
}
#avatar {
border-radius: 50%;
height: 100px;
width: auto;
display: block;
margin: auto;
}
#name {
color: #fff;
padding-bottom: 0px;
margin-bottom: 0px;
}
#place {
color: #E4F1FE;
padding-top: 0px;
margin-top: 0px;
}
#name,
#place {
text-align: center;
}
#intro {
text-align: center;
}
#name,
#courses-heading,
#friend-name {
text-transform: uppercase;
}
.fav-course {
color: #F03434;
list-style-type: none;
}
.fav-course:before {
font-family: 'FontAwesome';
content: '\f004';
margin: 0 5px 0 -15px;
color: #F03434;
}
a {
text-decoration: none;
}
img {
width: 50%;
height: auto;
}
td {
text-align: center;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
margin-top: 0px;
padding-top: 0px;
width: 480px;
height: 10px;
}
.footer {
background-color: #34495E;
padding: 2px;
}
.footer-text {
text-align: center;
color: #fff;
}
3. Stock Prices
index.html
<!DOCTYPE html>
<html>
<head>
<title>Stock Prices</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
table td,
table th {
text-align: left;
}
table td+td,
table th+th {
text-align: center;
}
</style>
<body>
<h1 align="center">Tech Stock Prices</h1>
<table>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Current</th>
<th>High</th>
<th>Low</th>
<th>Mkt cap</th>
<th>P/E Ratio</th>
</tr>
<tr>
<td>Amazon.com, Inc.</td>
<td>AMZN</td>
<td>1,823.29</td>
<td>1,841.00</td>
<td>1,821.50</td>
<td>879.53B</td>
<td>165.60</td>
</tr>
<tr>
<td>Alphabet Inc Class A</td>
<td>GOOGL</td>
<td>1,238.16</td>
<td>1,246.52</td>
<td>1,229.42</td>
<td>852.45B</td>
<td>33.25</td>
</tr>
<tr>
<td>Apple Inc.</td>
<td>AAPL</td>
<td>207.99</td>
<td>208.74</td>
<td>205.48</td>
<td>1.01T</td>
<td>18.04</td>
</tr>
<tr>
<td>Microsoft Corporation</td>
<td>MSFT</td>
<td>108.04</td>
<td>108.05</td>
<td>106.82</td>
<td>828.53B</td>
<td>27.73</td>
</tr>
<tr>
<td>Reliance Industries Limited</td>
<td>RELIANCE</td>
<td>1,175.40</td>
<td>1,183.50</td>
<td>1,169.55</td>
<td>7.43T</td>
<td>19.11</td>
</tr>
</table>
</body>
</html>
4. Vader – Luke Conversion
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vader – Luke Conversion</title>
</head>
<body>
<div id="container">
<div id="col1">
<div class="chat">
<div class="chat-head">
Vader
</div>
<div class="chat-body">
If you only knew the power of the dark side. Obi-Wan
never told you what happened to your father.
</div>
</div>
<div class="chat">
Luke
</div>
He told me enough! It was you who killed him.
</div>
</div>
<div class="chat">
Vader
</div>
No. I am your father.
</div>
</div>
<div class="chat">
Luke
</div>
No. No. That's not true! <span style="color:
red;">That's impossible</span>
</div>
</div>
<div class="chat">
Vader
</div>
Search your feelings. <b>You know it to be true.</b>
</div>
</div>
</div>
<div id="col2">
<img style="width: 60%;height: auto;" src="images/vader.png">
</div>
</div>
</body>
</html>
style.css
#col1 {
float: left;
height: 100%;
width: 80%;
position: relative;
}
#col2 {
float: right;
height: 100%;
width: 20%;
position: relative;
}
.chat {
display: block;
}
.chat-head {
text-transform: uppercase;
font-weight: bold;
}
.chat:nth-child(odd) {
clear: right;
float: right;
text-align: right;
}
5. Pizza Order
Form
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pizza Shop 2.0</title>
</head>
<body>
<header>
<h1>Pizza Shop 2.0</h1>
</header>
<section>
<nav>
<ul>
<li><a href="form.html">Buy Pizza Online</a></li>
<li><a href="#">Our Menu</a></li>
<li><a href="#">Store Finder</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
Pizza Shop 2.0's specializes in pizzas, pastas, sandwiches,
wings, and more day and night. You can count on us for late-night food
delivery that's fast and convenient. Order online from Pizza Shop 2.0's and
get home delivery for free. Get Pizza delivery from your nearest Pizza shop
and savor delicious Pizza.
</article>
</section>
<footer>
<p>Copyright © 2018 Pizza Shop 2.0</p>
</footer>
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
<title>Buy Pizza Online</title>
</head>
<body>
<table>
<tr>
<td colspan="2" align="center"><b>Pizza Shop 2.0</b>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Pizza Topping</td>
<td>
<input type="radio" name="Supreme" value="Supreme"> Supreme
<br>
<input type="radio" name="Vegetarian" value="Vegetarian">
Vegetarian
<br>
<input type="radio" name="Hawaiian" value="Hawaiian">
Hawaiian
</td>
</tr>
<tr>
<td>Pizza Sauce</td>
<td>
<select>
<option> Tomato
</option>
<option>Chilli</option>
</select>
</td>
</tr>
<tr>
<td>Optional Extras</td>
<td>
<input type="checkbox" name="extraCheese"> Extra Cheese
<input type="checkbox" name="glutenFreeBase"> Gluten Free
Base
</td>
</tr>
<tr>
<td colspan="2">
Delivery Instructions:
<br>
<textarea>
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Send my Order</button>
</td>
</tr>
</table>
</body>
</html>
style.css
table,
td {
border: 1px solid #000;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #F7CA18;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #F4D03F;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #F5D76E;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #F7CA18;
padding: 10px;
text-align: center;
color: white;
}

Creating An About Me Page 2. Adding CSS Stylesheet

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Creating An About Me Page 2. Adding CSS Stylesheet

Hochgeladen von

Copyright:

Verfügbare Formate

School of Information Technology and Engineering (SITE)

ITE1002 - Web Technologies

1. Creating an About Me Page

font-family: 'Roboto', sans-serif;

4. Vader – Luke Conversion

Das könnte Ihnen auch gefallen