Live JavaScript practice tutorials-Create an Art-Board with HTML and CSS
***Welcome to our JavaScript Tutorial***
In the first
lesson, we will create an art-board for JavaScript practice. To make an art-board, we
use HTML & CSS. So, here is the code of HTML & CSS. And we will provide
source code link.
HTML Code is
here………………
So create a
HTML file and paste the HTML tag………………..
<!DOCTYPE
HTML>
<html
lang="en-US">
<head>
<meta
charset="UTF-8">
<link
rel="stylesheet" href="style.css" />
<title></title>
</head>
<body>
<div
class="full_part">
<header
class="header_part">
<div
class="logo_title">
<img
src="dotlogo.png" alt="" />
<h2><script>document.write("Java
Script Training for Beginner")</script></h2>
</div>
</header>
<section
class="content_part">
<script>
document.write("JavaScript
Practice Board ");
</script>
</section>
<footer
class="footer_part">
<h2><script>document.write("©
Dot IT School")</script></h2>
</footer>
</div>
</body>
</html>
Create a CSS
file, select file name style.css and paste the code.
CSS Code is
here……………
*{margin:0;
padding:0; outline:0 }
body{
background:#fff;
}
.full_part{
margin: 30px auto;
width:960px;
background:#E8E8FF;
border:1px solid #688EB4
}
.header_part{
background:#4d4dff;
min-height:52px;
width:960px;
}
img {
float: left;
width: 66px;
background: #fff;
margin: 3px auto;
border-radius: 7px;
}
.logo_title
{
padding-left: 220px;
}
.header_part
h2{
text-align: center;
padding-top: 8px;
color: #fff;
font-weight: bold;
font-size: 30px;
float: left;
margin-left: 20px;
}
.content_part{
min-height:450px;
background:#ddd;
padding:20px;
font-size:20px;
}
.footer_part{
background:#4d4dff;
min-height:50px;
}
.footer_part
h2{
text-align:center;
padding-top:8px;
color:#f00;
font-weight:bold;
font-size:30px;
}
No comments