Design a webpage with bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="wiidth-device-width, initial-scale-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse" style="background:black;">
<div class="container-fluid">
<div class="navbar-header" >
<button type="button" class="navbaar toogle" data-toogle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Shop</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="row" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4); transition: 0.3s;">
<div class="col-sm-4">
<div align="center" style="margin-top: 10px;">
<img class="img-circle" alt="" src="C:\\Users\\user\\OneDrive\\Pictures\\arman.jpeg" width="200" height="200">
</div>
<div align="center">
<hr>
<p style="font-size: large; margin-top: 10px;">Armaan Ali</p>
<hr>
<p>armanalirahul@gmail.com</p>
<p>java & Android</p>
<p>Ducat India pvt.Ltd.</p>
</div>
</div>
<div class="col-sm-8">
<div class="form-group" style="margin-top: 10px;">
<label for="name">Full Name:</label> <input type="text" class="form-control" id="name" placeholder="Enter Full Name">
</div>
<div class="form-group">
<label for="email">Email address:</label> <input type="email"
class="form-control" id="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="sel1">Select list:</label><select class = "form-control" id="sel1">
<option>Select Course</option>
<option>java</option>
<option>php</option>
<option>Android</option>
</select>
</div>
<div class="form-group">
<label for="sel1">Select Gender:</label>
<div>
<label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
</div>
</div>
<div class="col-sm-8">
<button type="button" class="btn btn-danger btn-block">Success</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-danger btn-block">Reset</button>
</div>
<br>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</html>
Comments
Post a Comment