Assignment 2

https://www.tutorialspoint.
com/artificial_intelligence/artificial_intellig
ence_fuzzy_logic_systems.htm
Create the following layyot which is given below and Add hover
effects on the menu bar. Also create a dropdown in services as
described below (when you click on services, service 1 and service 2
should be opened similarly when you click on service 2, service 3 and
service 4 should be opened)
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size:40px;
color:black;
text-align: center;
font-weight:bold;
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
body {
margin: 0 auto;
background-size: contain;
.menu {
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
overflow: hidden;
.menu a {
float: right;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
.menu a:hover{
color: red;
footer {
width: 100%;
bottom: 0px;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body {
margin-left:20px;
.sidenav {
height: 80%;
width: 260px;
position: fixed;
top: 50;
display: table-cell;
.topnav {
overflow: hidden;
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
.topnav a:hover {
background-color: #ddd;
color: black;
.topnav a.active {
background-color: #4CAF50;
color: white;
.topnav-right {
float: right;
.dropdown {
float: left;
overflow: hidden;
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: left;
.dropdown-content a:hover {
.dropdown:hover .dropdown-content {
display: block;
.dropdown2 {
float: left;
overflow: hidden;
.dropdown2 .dropbtn2 {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown2:hover .dropbtn2 {
background-color: red;
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content2 a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: left;
.dropdown-content2 a:hover {
.dropdown2:hover .dropdown-content2 {
display: block;
</style>
</head>
<body>
<header class="head1">Header</header>
<div class="topnav">
<div class="topnav-right">
<a href="#">HOME</a>
<a href="#news">ABOUT</a>
<div class="dropdown">
<button class="dropbtn">SERVICES
</button>
<div class="dropdown-content">
<a href="#">Service 1</a>
<div class="dropdown2">
<a href="#" class="dropbtn2">Services 2
</a>
<div class="dropdown-content2">
</div>
</div>
</div>
</div>
<a href="#search">CONTACT</a>
</div>
</div>
<div class="sidenav">
</div>
<div class = "body">
<section id="Content">
<h3>Content section</h3>
</section>
</div>
<footer>Footer Section</footer>
</body>
</html>
Output:

Assignment 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment 2

Uploaded by

Copyright:

Available Formats

https://www.tutorialspoint.

padding:10px 0px 10px 0px;

padding: 14px 16px;

padding: 14px 16px;

padding: 14px 16px;

.navbar a:hover, .dropdown:hover .dropbtn {

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

padding: 14px 16px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

<a href="#">Service 1</a>

<a href="#" class="dropbtn2">Services 2

<a href="#">Service 3</a>

<a href="#">Service 4</a>

<div class = "body">

You might also like