Bootstrap Notes for Students

Card Layout
Hobbies
Blockquote
Pure CSS Dropdown Menu HTML

<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>
Drop Down Menu CSS
#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: ”; }
DWT
PHP Email Code
<?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>

Bootstrap Notes for Students

Thank you