Homework SourseDesign single web page using bootstrap that follows the same
Solution
<!DOCTYPE html>
<html lang=\"en\">
<head>
<title>Hello World</title>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>
<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>
<style type=\"text/css\">
.panel{
border:0;
box-shadow: none;
}
.panel-footer{
background-color:#fff;
}
</style>
</head>
<body>
<!-- Header part-->
<div class=\"jumbotron text-left\">
<div class=\"container\">
<h1>Hello, world!</h1>
<p>Welcome to my great web page! There\'s lots of cool stuff here, look around!</p>
<a href=\"#\" class=\"btn btn-primary\" role=\"button\">Learn More » </a>
</div>
</div>
<!-- Content of your site. Currently i have added with sample text, you can modify it later-->
<div class=\"container panel panel-default\">
<div class=\"row\">
<div class=\"col-sm-6 text-center\">
<h3>Personal info</h3>
<p>you can write your own text</p>
<p>Sample test, test... text. Sample test, test... text</p>
<a href=\"#\" class=\"btn btn-default\" role=\"button\">Click View » </a>
</div>
<div class=\"col-sm-6 text-center\">
<h3>Career</h3>
<p>you can write your own text here. Sample test, test... text. Sample test, test... text.</p>
<p>Sample test, test... text. Sample test, test... text</p>
<a href=\"#\" class=\"btn btn-default\" role=\"button\">Click View » </a>
</div>
</div>
<div class=\"row\">
<div class=\"col-sm-12 text-center\">
<h3>Hobbies</h3>
<p>you can write your own text. sample test text sample test textsample test text</p>
<p>Sample test, test... text. Sample test, test... text</p>
<a href=\"#\" class=\"btn btn-default\" role=\"button\">Click View » </a>
</div>
</div>
</div>
<!-- Footer part: you can add or modify footer here and the text will be replaced in setFooerContent method (javascript)-->
<div class=\"container panel panel-default\">
<div class=\"panel-footer footer\"></div>
</div>
</body>
<script type=\"text/javascript\">
$( document ).ready(function() {
setFooerContent();
});
function setFooerContent() {
var d = new Date();
var y = d.getFullYear();
$(\'.footer\').html(\'© \'+y+\'your site name\');
}
</script>
</html>
