Assignment: 2 Bootstrap
Set A: 1. Create following Bootstrap Web Layout Design. There are 9 blocks of the region in the arrangement. You can either place the images in them or the contents.
Set B
1. Create following layout using bootstrap
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background: #f5f6fa;
}
.wrapper .sidebar{
background: rgb(5, 68, 104);
position: fixed;
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
}
.wrapper .sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
.wrapper .sidebar ul li a{
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.wrapper .sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
color: #0c7db1;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<!--Top Menu & Menu button-->
<div class="sidebar">
<div class="profile">
<!--Profile Image-->
<!--Profile Title & Descruption-->
</div>
<ul>
<li>
<a href="#">
<span class="icon"><i class="fas fa-qrcode"></i></span>
<span class="item">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-link"></i></span>
<span class="item">Shortcuts</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-stream"></i></span>
<span class="item">Overview</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-calendar-week"></i></span>
<span class="item">Events</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-question-circle"></i></span>
<span class="item">About</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-sliders-h"></i></span>
<span class="item">Services</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-envelope"></i></span>
<span class="item">Contact</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-cog"></i></span>
<span class="item">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
2. Create following News Template Layout using Bootstrap. At the top bar, you can include a climate gadget and helpful links like part login and information exchange. Like in all other free news site formats, mega menu choices are present to give you a chance to sort out the links.
Set C:
1. Create following one page website layout using bootstrap
No comments:
Post a Comment