web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Bootstrap Example</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> | |
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> | |
</head> | |
<body> | |
<style> | |
body{ | |
background-color: rgb(238, 247, 247); | |
fill-opacity: unset; | |
} | |
h2{ | |
color: purple; | |
font-size: 40px; | |
text-align: center; | |
} | |
h3{ | |
font-size: medium; | |
} | |
ul { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
background-color:purple; | |
} | |
li { | |
float: left; | |
} | |
li a { | |
display: block; | |
color: white; | |
text-align: center; | |
padding: 14px 16px; | |
text-decoration: none; | |
} | |
li a:hover { | |
background-color:darkblue; | |
} | |
</style> | |
</body> | |
<body> | |
<div class="container mt-3"> | |
<h2>WEB DESIGNING</h2> | |
<br> | |
<!--Nav tabs--> | |
<ul class="nav nav-tabs"> | |
<li class="nav-item"> | |
<a class="nav-link active" data-toggle="tab" href="#Java">Java</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" data-toggle="tab" href="#HTML">HTML</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" data-toggle="tab" href="#CSS">CSS</a> | |
</li> | |
</ul> | |
<!--tab panes--> | |
<div class="tab-content"> | |
<div id="Java" class="container tab-pane active"><br> | |
<h3>Java</h3> | |
<p>Java is a popular programming language, created in 1995. It is owned by Oracle, and more than 3 billion devices run Java. | |
It is used for: | |
Mobile applications (specially Android apps) | |
Desktop applications | |
Web applications | |
Web servers and application servers | |
Games | |
Database connection | |
And much, much more!</p> | |
</div> | |
<div id="BOOTSTRAP" class="container tab-pane fade"><br> | |
<h3>BOOTSTRAP</h3> | |
<p>Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs</p> | |
</div> | |
<div id="HTML" class="container tab-pane fade"><br> | |
<h3>HTML</h3> | |
<p>HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages.HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.</p> | |
</div> | |
<div id="CSS" class="container tab-pane fade"><br> | |
<h3>CSS</h3> | |
<p>CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files</p> | |
</div> | |
</div> | |
</div> | |
</body> |