Rob
2.
<html>
<head>
<title>Webpage With Style</title>
</head>
<body>
<p style="color:blue;font-size:200%">The quick brown fox jumped over the lazy dog.</p>
<h1 style="color:green;font-size:250%">CSS is cool!</h1>
</body>
</html>
3.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
p {
color:red;
font-size: 200%;
}
h1 {
color:pink;
}
</style>
</head>
<body>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
<h1>CSS is cool!</h1>
</body>
</html>
4.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="red large">The quick brown fox jumped over the lazy dog.</p>
<p class="large">Wow, I love internal CSS!</p>
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</body>
</html>
5.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:blue;
background-color: pink;
width:100px;
}
#second-section {
background-color: yellow;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
</body>
</html>
6.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:#4285F4;
background-color: #CEF6CE;
width:100px;
}
#second-section {
background-color: #8AB4F7;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
</body>
</html>
7.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:#4285F4;
background-color: #CEF6CE;
width:200px;
float:left;
}
#second-section {
background-color: #8AB4F7;
width:200px;
float: right;
}
.clear-float {
clear:both;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
<div class="clear-float"></div>
<p>This paragraph is not floated!</p>
</body>
</html>
8.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:#4285F4;
background-color: #CEF6CE;
width:200px;
position:fixed;
}
#second-section {
background-color: #8AB4F7;
width:400px;
height:5000px;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
<p>This paragraph is not floated!</p>
</body>
</html>
9.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:#4285F4;
background-color: #CEF6CE;
width:200px;
margin-left:150px;
}
#second-section {
background-color: #8AB4F7;
width:400px;
margin: 50px 20px 50px 20px;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
<p>This paragraph is not floated!</p>
</body>
</html>
10.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:#4285F4;
background-color: #CEF6CE;
width:200px;
margin-left:150px;
}
#second-section {
background-color: #8AB4F7;
width:400px;
padding:5px 10px 15px 20px;
}
body {
margin:0;
padding:0;
}
p {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
<p>This paragraph is not floated!</p>
</body>
</html>
11.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
#square-red {
background-color:red;
border: 10px yellow solid;
}
#square-blue {
background-color:blue;
border-style: ridge solid dotted dashed;
border-color: green beige pink palegoldenrod;
border-width: 10px 5px 2px 1px;
}
#square-green {
background-color:green;
border-radius:50%;
}
.square {
width:400px;
height:400px;
margin:40px;
float:left;
}
</style>
</head>
<body>
<div id="square-red" class="square"></div>
<div id="square-blue" class="square"></div>
<div id="square-green" class="square"></div>
</body>
</html>
12.
<html>
<head>
<title>Webpage With Style</title>
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<style type="text/css">
p {
font-family: 'Shadows Into Light', cursive;
}
</style>
</head>
<body>
<p>This is some text!</p>
</body>
</html>
13.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.bold {
font-weight: bold;
}
.italic {
font-style:italic;
}
.underlined {
text-decoration: underline;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:green;
}
.big {
font-size: 200%
}
</style>
</head>
<body>
<p class="bold">This is some bold text!</p>
<p class="italic">This is some italic text! <span class="bold">And this is bold and italic.</span></p>
<p class="underlined">This text is underlined!</p>
<a href="">This is a non-underlined link</a>
<p class="big">This text is BIG!</p>
</body>
</html>
14.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
p {
text-align:right;
}
div {
width:300px;
background-color:green;
}
.centered {
text-align: center;
}
.justified {
text-align: justify;
}
</style>
</head>
<body>
<div>
<p>This is some right aligned text!</p>
<p class="centered">This text is centered.</p>
<p class="justified">Lorem ipsum dolor sit amet, scripta adversarium definitiones duo an, sed minim facilisi ei. Appareat dissentias honestatis ut duo. Recusabo deseruisse ex sea, ne veri saperet placerat mea. Rebum offendit id mel, affert nonumes has cu, iudico veritus vituperatoribus no mea. Ut has scaevola singulis, percipitur liberavisse sed ut. Idque copiosae sea ea. Elit tritani percipit ut mei, ne eros rationibus eam, et cum congue malorum partiendo. </p>
</div>
</body>
</html>
15.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color:green;
}
</style>
</head>
<body>
<div>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.google.se" target="_blank">Google in a new tab</a></p>
</div>
</body>
</html>
16.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color:green;
}
</style>
</head>
<body>
<div>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.google.se" target="_blank">Google in a new tab</a></p>
</div>
</body>
</html>
17. bbc.css
#topbar {
width:1000px;
margin:0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top:8px;
width:100px;
float:left;
margin-right:8px;
}
.topbar-section {
float:left;
border-left: 1px #CCCCCC solid;
height:100%;
}
#signin-image {
width:25px;
margin:11px 15px ;
float:left;
}
#signin-text {
font-weight: bold;
font-size:90%;
position:relative;
top:14px;
padding-right:50px;
}
#wigglyline {
float:left;
height:40px;
}
#bell {
height: 25px;
margin: 9px 8px 0 8px;
}
#bell-div {
float:left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height:27px;
}
#more-arrow {
width:16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border:none;
font-weight: bold;
font-size: 14px;
padding:5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height:27px;
margin-top:5px;
}
.clear {
clear:both;
}
#menu-bar-container {
border-top: 1px solid #CCCCCC;
background-color: #BB1919;
width:100%;
height:70px;
}
#menu-bar {
width:1000px;
margin:0 auto;
}
h1 {
padding:0;
margin:0;
color:white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float:left;
}
#local-news {
border: 1px #BB4545 solid;
float:right;
width:250px;
padding: 5px 5px 0 10px;
margin: 5px 10px 0 0;
}
#local-news a {
color:white;
text-decoration: none;
font-size:30px;
position:relative;
top:-8px;
}
#local-news a:hover {
text-decoration: underline;
}
#local-news img {
height:40px;
}
#menu-bar-2-container {
background-color: #A91717;
width: 100%;
}
#menu-bar-2 {
width:1000px;
margin:0 auto;
height:40px;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid #BB4545;
font-size:14px;
position: relative;
top: 10px;
}
#menu-bar-2 a:hover {
text-decoration: underline;
}
.no-border {
border:none !important;
}
#down-arrow {
height:10px;
position:relative;
top:10px;
}
#page-container {
width:1000px;
margin: 0 auto;
}
h2 {
font-weight: normal;
margin-top:40px;
font-size:20px;
border-bottom: 2px solid #a91717;
width:105px;
}
h3 a {
color:black;
font-size: 30px;
text-decoration: none;
}
h3 a:hover {
color:#1167a8;
}
#article-summary {
color: #5a5a5a;
width:250px;
float:left;
}
.clock {
height:15px;
position: relative;
top:2px;
}
.topic-link {
text-decoration: none;
color:#a91717;
border-left: 1px solid #CCCCCC;
padding-left: 10px;
}
#article-summary a:hover {
color:#1167a8;
}
.date {
padding-right:10px;
color: #5a5a5a;
}
#article-container {
float:left;
width:670px;
border-right: 1px solid #CCCCCC;
padding-right: 20px;
}
#main-article-image {
width:400px;
margin-left:20px;
}
#article-hr {
border-top:1px solid #a91717;
width:50px;
}
.article-link {
color:black;
text-decoration:none;
}
#watch-listen {
margin-left:20px;
width:280px;
float:right;
}
h4 {
font-weight: normal;
font-size:20px;
}
.article-side-image {
float:left;
width:90px;
margin-right:10px;
}
.watch-listen-link {
text-decoration: none;
color:black;
font-weight:bold;
font-size:18px;
}
.watch-listen-link:hover {
color:#1167a8;
}
.side-article {
float:right;
width:180px;
position:relative;
top:-18px;
}
.no-border {
border-left:none;
padding:0;
}
.border-right {
border-right: 1px solid #CCCCCC;
}
18. bbc.html
<html>
<head>
<title>Technology - BBC News</title>
<link rel="stylesheet" type="text/css" href="bbc.css">
</head>
<body>
<div id="topbar">
<img id="logo" src="images/bbc-logo.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
<a href="">Find local news</a>
<img src="images/pointer.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-2-container">
<div id="menu-bar-2">
<a href="">Home</a>
<a href="">UK</a>
<a href="">World</a>
<a href="">Business</a>
<a href="">Politics</a>
<a href="">Tech</a>
<a href="">Science</a>
<a href="">Health</a>
<a href="">Education</a>
<a href="">Entertainment & Arts</a>
<a href="">Video & Audio</a>
<a href="" class="no-border">More</a>
<img id="down-arrow" src="images/down-arrow.png">
</div>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
<div id="article-container">
<h3><a href="">Asda bug exposed payment details</a></h3>
<div id="article-summary">
<p>Security vulnerabilities that put customers at risk have affected Asda's website for a couple of years, a security expert has revealed.</p>
<p><img class="clock" src="images/clock.png"> <span class="date">19 January 2016</span><a class="topic-link" href="">Technology</a></p>
<hr id="article-hr" align="left">
<p><a class="article-link" href="">Surveillance firm hit in hack attack</a></p>
<p><a class="article-link" href="">eBay flaw has existed for months</a></p>
</div>
<img id="main-article-image" src="images/main-article-image.png">
</div>
</div>
<div id="watch-listen">
<h4>Watch/Listen</h4>
<img class="article-side-image" src="images/article1.png">
<div class="side-article">
<p><a class="watch-listen-link" href="">UK science chief backs blockchains</a></p>
<p><img class="clock" src="images/clock.png"> <span class="date">19 January 2016</span></p>
</div>
<div class="clear"></div>
<img class="article-side-image" src="images/article2.png">
<div class="side-article">
<p><a class="watch-listen-link" href="">
Drone register gives 'accountability'</a></p>
<p><img class="clock" src="images/clock.png"> <span class="date border-right">19 January 2016</span><br><a class="topic-link no-border" href="">Technology</a></p>
</div>
<div class="clear"></div>
<img class="article-side-image" src="images/article3.png">
<div class="side-article">
<p><a class="watch-listen-link" href="">SpaceX rocket explodes during landing</a></p>
<p><img class="clock" src="images/clock.png"> <span class="date border-right">19 January 2016</span><br><a class="topic-link no-border" href="">Science & Environment</a></p>
</div>
</div>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)
No comments:
Post a Comment