<!doctype html>
<html lang="en-us">
<head>
<title>Day 2 | </title>
<meta charset="utf-8">
<link rel="shortcut icon" href="bee.ico"/>
<meta name="description" content="Learning to engage into web development will take actual practice in order to maintain knowledge and develope skill set necessary to form a high end employable skill set.">
<meta name="keywords" content="Sir Robert B. Casey">
<meta name="author" content="Sir Robert B. Casey">
<meta name="copyright" content="© June 5, 2020 by Sir Robert B. Casey">
<meta name="robots" content="follow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: red;
color:#62f5bf;
}
img {
width: 100px;
height: 100px;
display:inline;
}
#button {
background-color:red;
border:none;
border:0;
text-decoration:none;
width: 150px;
height:75px;
margin-right: 15px;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
footer {
color:white;
font-size:11px;
text-align:center;
position:absolute;
bottom:0;
width:100%;
}
h2, #no, #correct{
margin: 0, 15px;
background-color:red;
padding-right:25px;
}
a {
text-decoration:none;
}
a:visited a:hover a:link, a:active h2{
text-decoration:none;
text-shadow: 2px 2px #800080;
color:#62f5bf;
}
#correct {
animation: blinker 7s linear infinite;
text-decoration:none;
color: #62f5bf;
}
@keyframes blinker {
70% {
opacity: 0;
80% {
opacity: 90;
}
}
.fas fa-hand-point-right {
margin: auto;
line-height: 50px;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="exitbtn.css">
</head>
<body>
<main>
<a href="playground.html"><button class="exitbutton">Exit</button></a>
<h1 >Where is the Bear?</h1>
<div >
<h2 id="no"></h2>
<button type="button" onclick='document.getElementById("no").innerHTML = "Ant"'><img src="ant.gif"/></button>
</div>
<br />
<!--The id of "no" will stay affixed and visible after id "correct" has been clicked. Confusing visually & needs and if else thing to reset to nothing."-->
<div>
<a href="day3.html"><h2 id="correct"></h2></a>
<button type="button" onclick='document.getElementById("correct").innerHTML = "That is Right. This is a Bear"'><img src="bear.png"/></button>
</div>
<br/>
<div>
<h2 id="close"></h2>
<button type="button" onclick='document.getElementById("close").innerHTML = "This is an apple"'><img src="apple.gif"/></button>
</div>
<br/>
<a href="day3.html"><i class="fas fa-hand-point-right"></i></a>
</main>
<footer>© 2022 by Sir Robert B. Casey</footer>
</body>
</html>