Website #1
HTML
<!DOCTYPE html>
<body>
<div id="navdiv">
<!--top nav bar-->
<ul id="navBar">
<li class="nav">
<a href="" class= "navtext">Home</a>
</li>
<li class="nav">
<a href="" class= "navtext">About</a>
</li>
<li class="nav">
<a href="" class= "navtext">Contact</a>
</li>
</ul>
</div>
<div id="imgdiv"> <img id="pageimg1" src="https://www.caminodesantiago.me/wp-content/uploads/medical-care.jpg"/> </div> <!--IMG div-->
<div id="article1"> <!--grey translucent box-->
<div id="intBoxDiv">
<p>We are amazing</p>
</div>
</div>
</body>
CSS
#navdiv { /*Navigation bar at the top of page*/
width: 100%;
height: 4.3em;
background-color: #232023;
padding: auto;
display: block;
position: fixed;
opacity: 0.9;
z-index: 4;
}
.nav {
display: inline;
margin-right: 10%;
}
#navBar {
text-align: center;
font-size: 1.15em;
padding-top: 0.3em;
}
.navtext {
text-decoration: none;
color: #ffffff;
opacity: 1;
}
#article1 { /*translucent box*/
width: 100%;
height: 20%;
background-color: #000000;
z-index: 3;
padding-bottom: 10em;
opacity: 0.5;
display: inline-block;
position: absolute;
margin-top: 60%;
}
.navtext:hover {
color: #dbdbdb;
}
#imgdiv {
margin-left: 20%;
z-index: 1;
padding-top: 10em;
position: fixed;
width: 60%;
background-position: center center;
margin-bottom: 10%;
}
#pageimg1 {
width: 100%;
z-index: 1;
}
#intBoxDiv {
z-index: 5;
}
JAVASCRIPT
confirm('WARNING! viruses detected! Your computer has been infected!');
var greeting = 'howdy';
var name ='pardner';
var welcome = greeting + name;
1 Response