My html coding with CSS
<!DOCTYPE html>
<html>
<head>
<title>learn it</title>
<link rel="stylesheet" type="text/css" href="user.css">
<style type="text/css">
body{ background-color:rgb(255,255,255);
font-family: Arial, Helvetica, Sans-Serif;
font-size:18px;
font-weight: normal;
line-height: 1.6em;
}
.box-1 h1{font-family: tahoma;
font-size:18px;
font-weight: normal;
color: yellow;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
p{
color: rgb(123,033,255);
}
.container{
width: 75% ;
margin: auto;
}
.button{
background-color: #333;
color: #fff;
padding: 10px 15px;
border: none;
}
button:hover{
background-color: red;
}
.clr{
clear: both;
}
.box-1{
background-color:#333;
color: #fff;
border: 5px gray solid;
}
.box-2{
background-color:brown;
color: #fff;
border: 3px grey dotted ;
margin: 20px 0;
}
.box-2 h2{
font-family: Arial;
font-size:18px;
font-weight: bold;
color: orange;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
.catagories{
background-color:#3333;
color: #ffff;
border: 3px yellow solid;
padding: 20px 0;
}
.catagories h2{ text-align: center;
color: red;
text-decoration: underline;
}
.catagories ul{
padding: 10;
list-style:square;
list-style: none;
}
a:hover{ color: red;
}
a:active{
color:green;
}
a:visited{
}
.catagories li{
border-bottom:6px ;
padding-bottom: dotted 1px #333;
list-style-image: url('../images/checkmark.png');
}
.my-form{
padding: 20px;
}.my-form. form-group{
padding-bottom: 15px;
}
.my-form label{
display: block;
}
.my-form input[type="text"],my-form textarea{
padding:8px ;
width: 100%;
}
.block{
float: left;
width: 33.3%;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
#main-block{
float: left;
width: 70%;
}
#sidebar{
float: right;
width: 30%;
background-color: #333;
color:#fff;
padding: 15px;
box-sizing: border-box;
}
.p-box{
width: 800px;
height: 500px;
border: 1px solid #000;
margin-top: 30px;
position: relative;
}
.p-box h1{
position: absolute;
top: 100px;
left: 200px;
}
.p-box h2{
position: absolute;
bottom: : 40px;
right: : 100px;
}
.fix-me{
position: fixed;
top: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1">
<h1>Welcome</h1>
<p>Welcome to the LearnJavaOnline.org Interactive Java Tutorial.Whether you are an experienced programmer or not, this website is intended for everyone who wishes to learn the Java programming language.Just click on the chapter you wish to begin from, and follow the instructions. Good luck!</p>
<a class="button" href="https://www.youtube.com/watch?v=yfoY53QXEnI&t=905s" >read more</a>
</div>
<div class="box-2">
<h2>from sublime itself</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="catagories">
<h2>Catagories</h2>
<ul>
<li><a href="#">Catagory 1</a>
</li>
<li><a href="#">Catagory 2</a>
</li>
<li><a href="#">Catagory 3</a>
</li>
<li><a href="#">Catagory 4</a>
</li>
<li><a href="htmlOne.html">Catagory 5</a>
</li>
</ul>
</div>
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name">
</div>
<div class="form-group">
<label>Email: </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message: </label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="clr"></div>
<div id="main-block"></div>
<div id="sidebar">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="clr"></div>
<div class="p-box">
<h1>Hello</h1>
<h2>GoodBye</h2>
</div>
</div>
<a class=" fix-me button" href="https://support.microsoft.com/en-gb/help/17588/fix-problems-that-block-programs-from-being-installed-or-removed">fix me</a>
<div style="margin-top: 500px;"></div>
</body>
</html>
<html>
<head>
<title>learn it</title>
<link rel="stylesheet" type="text/css" href="user.css">
<style type="text/css">
body{ background-color:rgb(255,255,255);
font-family: Arial, Helvetica, Sans-Serif;
font-size:18px;
font-weight: normal;
line-height: 1.6em;
}
.box-1 h1{font-family: tahoma;
font-size:18px;
font-weight: normal;
color: yellow;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
p{
color: rgb(123,033,255);
}
.container{
width: 75% ;
margin: auto;
}
.button{
background-color: #333;
color: #fff;
padding: 10px 15px;
border: none;
}
button:hover{
background-color: red;
}
.clr{
clear: both;
}
.box-1{
background-color:#333;
color: #fff;
border: 5px gray solid;
}
.box-2{
background-color:brown;
color: #fff;
border: 3px grey dotted ;
margin: 20px 0;
}
.box-2 h2{
font-family: Arial;
font-size:18px;
font-weight: bold;
color: orange;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
.catagories{
background-color:#3333;
color: #ffff;
border: 3px yellow solid;
padding: 20px 0;
}
.catagories h2{ text-align: center;
color: red;
text-decoration: underline;
}
.catagories ul{
padding: 10;
list-style:square;
list-style: none;
}
a:hover{ color: red;
}
a:active{
color:green;
}
a:visited{
}
.catagories li{
border-bottom:6px ;
padding-bottom: dotted 1px #333;
list-style-image: url('../images/checkmark.png');
}
.my-form{
padding: 20px;
}.my-form. form-group{
padding-bottom: 15px;
}
.my-form label{
display: block;
}
.my-form input[type="text"],my-form textarea{
padding:8px ;
width: 100%;
}
.block{
float: left;
width: 33.3%;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
#main-block{
float: left;
width: 70%;
}
#sidebar{
float: right;
width: 30%;
background-color: #333;
color:#fff;
padding: 15px;
box-sizing: border-box;
}
.p-box{
width: 800px;
height: 500px;
border: 1px solid #000;
margin-top: 30px;
position: relative;
}
.p-box h1{
position: absolute;
top: 100px;
left: 200px;
}
.p-box h2{
position: absolute;
bottom: : 40px;
right: : 100px;
}
.fix-me{
position: fixed;
top: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1">
<h1>Welcome</h1>
<p>Welcome to the LearnJavaOnline.org Interactive Java Tutorial.Whether you are an experienced programmer or not, this website is intended for everyone who wishes to learn the Java programming language.Just click on the chapter you wish to begin from, and follow the instructions. Good luck!</p>
<a class="button" href="https://www.youtube.com/watch?v=yfoY53QXEnI&t=905s" >read more</a>
</div>
<div class="box-2">
<h2>from sublime itself</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="catagories">
<h2>Catagories</h2>
<ul>
<li><a href="#">Catagory 1</a>
</li>
<li><a href="#">Catagory 2</a>
</li>
<li><a href="#">Catagory 3</a>
</li>
<li><a href="#">Catagory 4</a>
</li>
<li><a href="htmlOne.html">Catagory 5</a>
</li>
</ul>
</div>
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name">
</div>
<div class="form-group">
<label>Email: </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message: </label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="block">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="clr"></div>
<div id="main-block"></div>
<div id="sidebar">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="clr"></div>
<div class="p-box">
<h1>Hello</h1>
<h2>GoodBye</h2>
</div>
</div>
<a class=" fix-me button" href="https://support.microsoft.com/en-gb/help/17588/fix-problems-that-block-programs-from-being-installed-or-removed">fix me</a>
<div style="margin-top: 500px;"></div>
</body>
</html>
Comments
Post a Comment