Bootstrap Notes for Students
<div class=”card shadow”>
<img alt=”hi” class=”card-img-top” src=”images/0002-shah-rukh-khan.jpg”>
<div class=”card-body”>
<h2 class=”card-title text-center display-6″>Principal</h2>
<p class=”card-body”>This is our Respected Princiapl</p>
</div>
</div><div class=”col-md-4″>
<figure class=”figure border”>
<img src=”images/0002-shah-rukh-khan.jpg” alt=”Sharukh Khan” class=”figure-img rounded-top img-fluid”>
<p class=”figure-caption text-center”>This is the description</p>
</figure>
</div><div class=”text-center col-md-10 rounded border offset-1 p-4″>
<blockquote class=”blockquote”>All round development is education</blockquote>
<p class=”blockquote-footer text-end “>Amol Mirje</p>
</div>
<div id=”container”>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>WordPress</a>
<!– First Tier Drop Down –>
<ul>
<li><a href=”#”>Themes</a></li>
<li><a href=”#”>Plugins</a></li>
<li><a href=”#”>Tutorials</a></li>
</ul>
</li>
<li><a href=”#”>Web Design</a>
<!– First Tier Drop Down –>
<ul>
<li><a href=”#”>Resources</a></li>
<li><a href=”#”>Links</a></li>
<li><a href=”#”>Tutorials</a>
<!– Second Tier Drop Down –>
<ul>
<li><a href=”#”>HTML/CSS</a></li>
<li><a href=”#”>jQuery</a></li>
<li><a href=”#”>Other</a>
<!– Third Tier Drop Down –>
<ul>
<li><a href=”#”>Stuff</a></li>
<li><a href=”#”>Things</a></li>
<li><a href=”#”>Other Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>Graphic Design</a></li>
<li><a href=”#”>Inspiration</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>About</a></li>
</ul>
</nav>
<h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
</div>#container {
margin: 0 auto;
}nav {
margin: 50px 0;
background-color: #E64A19;
}nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}nav a:hover {
background-color: #000000;
}/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ‘ +’; }
li > a:only-child:after { content: ”; }<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js” integrity=”sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa” crossorigin=”anonymous”></script>
<?php
if(isset($_POST[‘submit’])) {
$fname = $_POST[‘txtFirstName’];
$lname = $_POST[‘txtLastName’];
$mobile = $_POST[‘txtMobile’];
$details = $_POST[‘details’];
$to = “email@amolmirje.com”;
$subject = “Enquiry”;
$message = “Hi, You have got enquiry details as below <br/>
Name : $fname $lname <br/>
Mobile : $mobile <br/>
Details : $details <br/>
“;
$headers = “MIME-Version : 1.0” . “/r/n”;
$headers .= “Content-type:text/html;charset=UTF-8” . “/r/n”;
$headers .= “FROM <” . ’email@amolmirje.com’ . “>” . “/r/n”;
$mail = mail($to, $subject, $message, $headers);
}
?><!DOCTYPE html>
<html><head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>
<title>Untitled 1</title>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css”>
</head><body>
<div class=”container”>
<div class=”row align-items-center”>
<div class=”col-md-8″>
<form action=”” method=”post”>
<div>
<label id=”lblFirstName” for=”txtFirstName” class=”form-label”>First Name</label>
<input id=”txtFirstName” name=”txtFirstName” type=”text” value=”Mr. ” / class=”form-control”></div>
<br />
<label id=”lblLastName” for=”txtLastName”>Last Name</label>
<input id=”txtLastName” name=”txtLastName” type=”text” /> <br />
<label id=”lblMobile” for=”txtMobile”>Mobile</label>
<input id=”txtMobile” maxlength=”10″ name=”txtMobile” type=”text” />
<textarea name=”details”></textarea>
<input type=”submit” name=”submit”>
</form>
<label id=”Label1″></label>
</div>
</div>
</div>
</body></html>