Web Page Template Using Languages HTML, CSS and Bootstrap

Template for a responsive web page which can be edited as per user convenience. This page is created using three front end languages that are HTML 5, CSS 3 and Bootstrap.

Basic Webpage Template using HTML, CSS and Bootstrap

Bootstrap links with meta tags which contain author details, keywords associated with template and viewport are wrapped around the head tag.

In this template, Heading is created through jumbotron class of bootstrap with a height of 60% of window screen. After that three sections were created using a card-column class of bootstrap having text center with sub-heading each. Each sub-heading is wrapped around card-title class and content with card-text class. At the end, footer is created where mail address and author name with copyright (with copyright symbol using predefined “&copy”) is mentioned.

Here is the code:



<!DOCTYPE html>
<html>
<head><title>iLearn</title>

<!-- Bootstrap cdn file is attached to the file to use class of bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

          
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Richa Tripathi">
<meta name="keywords" content="template">
    
</head>
    
<body>
        
<heading>
                 
<div class="jumbotron text-center" style="background-color: #bfc3c1">       
<h1 align="center" style="margin: auto; height: 60%; font-size: 600%;font-weight: 600">HEADING</h1>       
</div>
        
</heading>
        
<main>             
        
<section class="card-columns">
        
<section class="card card-body text-center" style="background-color: #edeae6">        
<h4 class="card-title"><u>Sub-Heading</u></h4>        
<p class="card-text">Content or Images or both</p>      
</section>
        
<section class="card card-body text-center">       
<h4 class="card-title"><u>Sub-Heading</u></h4>      
<p class="card-text">Content or Images or both</p> 
</section>
        
<section class="card card-body text-center" style="background-color: #edeae6">
<h4 class="card-title"><u>Sub-Heading</u></h4>
<p class="card-text">Content or Images or both</p>
</section>
        
</section>  
        
</main>
        
<hr>

<footer style="text-align: center"><i>Last Update : 20th feb 2019<br>        
Webmaster :Richa Tripathi <a href="mailto:[email protected]">[email protected]</a> <br>
&copy;copyright 2019 Richa Tripathi</i></footer>
    
</body>

</html>

Meta tags: This content is used by the browser, search engine or other web services. Metadata will not be displayed but the machine can parse it.

Note: For Better Outcome, an internet connection must be there since I have used bootstrap files which can be loaded.

For Output and Source code, You can Click Here

Check out other blogs as well:
What is Div Tag and How nested Div Tag work in HTML and using CSS.
What is CSS and difference between CSS and CSS3
How to create a Tab Image Gallery – HTML, CSS, and JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *