Buatlah Menu seperti gambar di atas
Jawab :
<html>
<head>
<title> Tugas Ustadz Alfin </title>
<style type="text/css">
/* COLOR BLACK */
body{
font-family:Sans Serif;
}
#header1{
display:inline-block;
margin-top:20px;
margin-left:300px;
}
#header1 ul{
display:block;
border-radius:10px;
background-image :linear-gradient(#686B6F,#43484C);
padding-bottom: 40px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
height:auto;
width:auto;
font-weight:bold;
border: 2px solid ;
border-color:#4D5152;
}
#header1 ul li{
display:block;
float:left;
padding:5px 10px;
}
#header1 ul li a{
display:inline-block;
color:white;
text-transform:uppercase;
text-decoration:none;
padding:5px ;
width: 110px;
text-align:center;
}
#header1 ul li a:hover{
display:block;
color:black;
background-color:white;
}
/* COLOR BLUE */
body{
font-family:Sans Serif;
}
#header2{
display:inline-block;
margin-top:20px;
margin-left:300px;
}
#header2 ul{
display:block;
border-radius:10px;
background-image :linear-gradient(#137CC2,#055E98);
padding-bottom: 40px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
height:auto;
width:auto;
font-weight:bold;
border: 2px solid ;
border-color:#16628E;
}
#header2 ul li{
display:block;
float:left;
padding:5px 10px;
}
#header2 ul li a{
display:inline-block;
color:white;
text-transform:uppercase;
text-decoration:none;
padding:5px ;
width: 110px;
text-align:center;
}
#header2 ul li a:hover{
display:block;
color:black;
background-color:white;
}
/* COLOR RED */
body{
font-family:Sans Serif;
}
#header3{
display:inline-block;
margin-top:20px;
margin-left:300px;
}
#header3 ul{
display:block;
border-radius:10px;
background-image :linear-gradient(#CB0003,#5B0C10);
padding-bottom: 40px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
height:auto;
width:auto;
font-weight:bold;
border: 2px solid ;
border-color:#91131D;
}
#header3 ul li{
display:block;
float:left;
padding:5px 10px;
}
#header3 ul li a{
display:inline-block;
color:white;
text-transform:uppercase;
text-decoration:none;
padding:5px ;
width: 110px;
text-align:center;
}
#header3 ul li a:hover{
display:block;
color:black;
background-color:white;
}
/* COLOR GREEN */
body{
font-family:Sans Serif;
}
#header4{
display:inline-block;
margin-top:20px;
margin-left:300px;
}
#header4 ul{
display:block;
border-radius:10px;
background-image :linear-gradient(#83C715,#3F700E);
padding-bottom: 40px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
height:auto;
width:auto;
font-weight:bold;
border: 2px solid ;
border-color:#305111;
}
#header4 ul li{
display:block;
float:left;
padding:5px 10px;
}
#header4 ul li a{
display:inline-block;
color:white;
text-transform:uppercase;
text-decoration:none;
padding:5px ;
width: 110px;
text-align:center;
}
#header4 ul li a:hover{
display:block;
color:black;
background-color:white;
}
</style>
</head>
<body>
<div id ="header1">
<ul>
<li><a href="./=">home</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="services.html">services</a></li>
<li><a href="solutions.html">solutions</a></li>
<li><a href="portfolio.html">portfolio</a></li>
</ul>
</div>
<div id ="header2">
<ul>
<li><a href="./=">home</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="services.html">services</a></li>
<li><a href="solutions.html">solutions</a></li>
<li><a href="portfolio.html">portfolio</a></li>
</ul>
</div>
<div id ="header3">
<ul>
<li><a href="./=">home</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="services.html">services</a></li>
<li><a href="solutions.html">solutions</a></li>
<li><a href="portfolio.html">portfolio</a></li>
</ul>
</div>
<div id ="header4">
<ul>
<li><a href="./=">home</a></li>
<li><a href="aboutus.html">about us</a></li>
<li><a href="services.html">services</a></li>
<li><a href="solutions.html">solutions</a></li>
<li><a href="portfolio.html">portfolio</a></li>
</ul>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar