2022-09-19
<!DOCTYPE html>
<html>
<head>
<title>Smiley Face</title>
<meta charset="utf-8"/>
<style>
.face {
background: #FF7A59;
width: 200px;
height: 200px;
border-radius: 50%;
}
.lEye{
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
top: 60px;
left: 50px;
}
.rEye{
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
top: 60px;
left: 135px;
}
.leftText{
position: absolute;
top: 50px;
left: 175px;
visibility: hidden;
}
.rightText{
position: absolute;
top: 50px;
left: 100px;
visibility: hidden;
}
.leftX{
position: absolute;
top: 5px;
left: 5px;
visibility: hidden;
}
.rightX{
position: absolute;
top: 5px;
left: 10px;
visibility: hidden;
}
.lEye:active{
visibility: hidden;
}
.lEye:active > .leftText{
visibility: visible;
}
.lEye:active > .leftX{
visibility: visible;
}
.rEye:active{
visibility: hidden;
}
.rEye:active > .rightText{
visibility: visible;
}
.rEye:active > .rightX{
visibility: visible;
}
.mouth{
position: absolute;
top: 125px;
left: 50px;
width: 112px;
height: 47px;
border-bottom: 1px solid black;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head>
<body>
<div class="face">
<div class="lEye">
<div class="leftText">Ouch! My left eye hurts!</div>
<div class="leftX">X</div>
</div>
<div class="rEye">
<div class="rightText">Ouch! My right eye hurts!</div>
<div class="rightX">X</div>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Smiley Face</title>
<meta charset="utf-8"/>
<style>
.face {
background: #FF7A59;
width: 200px;
height: 200px;
border-radius: 50%;
}
.lEye{
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
top: 60px;
left: 50px;
}
.rEye{
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
top: 60px;
left: 135px;
}
.leftText{
position: absolute;
top: 50px;
left: 175px;
visibility: hidden;
}
.rightText{
position: absolute;
top: 50px;
left: 100px;
visibility: hidden;
}
.leftX{
position: absolute;
top: 5px;
left: 5px;
visibility: hidden;
}
.rightX{
position: absolute;
top: 5px;
left: 10px;
visibility: hidden;
}
.lEye:active{
visibility: hidden;
}
.lEye:active > .leftText{
visibility: visible;
}
.lEye:active > .leftX{
visibility: visible;
}
.rEye:active{
visibility: hidden;
}
.rEye:active > .rightText{
visibility: visible;
}
.rEye:active > .rightX{
visibility: visible;
}
.mouth{
position: absolute;
top: 125px;
left: 50px;
width: 112px;
height: 47px;
border-bottom: 1px solid black;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head>
<body>
<div class="face">
<div class="lEye">
<div class="leftText">Ouch! My left eye hurts!</div>
<div class="leftX">X</div>
</div>
<div class="rEye">
<div class="rightText">Ouch! My right eye hurts!</div>
<div class="rightX">X</div>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
(Edited: 2022-09-19)
<head>
<title>Smiley Face :)</title>
<meta charset="utf-8" />
<style>
#face {
top: 50px;
left: 50px;
position: absolute;
border-radius: 50%;
border: 5px solid yellow;
width: 300px;
height: 300px;
}
#leye {
left: 120px;
top: 125px;
position: absolute;
border-radius: 50%;
border: 3px solid black;
width: 35px;
height: 35px;
}
#leye:active > #rtext {
visibility: visible;
}
#leye:active > #leftx {
visibility: visible;
}
#reye {
position: absolute;
left: 220px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 35px;
height: 35px;
}
#reye:active > #ltext {
visibility: visible;
}
#reye:active > #rightx {
visibility: visible;
}
#rtext {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#ltext {
left: 10px;
top: 50px;
position: absolute;
visibility: hidden;
}
#leftx {
left: 7.5px;
top: 5px;
position: absolute;
font-size: 30px;
visibility: hidden;
}
#rightx {
left: 7.5px;
top: 5px;
position: absolute;
font-size: 30px;
visibility: hidden;
}
#mouth {
top: 240px;
left: 120px;
position: absolute;
width: 150px;
height: 30px;
border-radius: 50%;
border-bottom: 15px solid rgb(212, 103, 121);
}
</style>
</head>
<body>
<div id="face"></div>
<div id="leye">
<div id="rtext">Ouch! My left eye hurts!</div>
<div id="leftx">X</div>
</div>
<div id="reye">
<div id="ltext">Ouch! My right eye hurts!</div>
<div id="rightx">X</div>
</div>
<div id="mouth"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Smiley Face :)</title>
<meta charset="utf-8" />
<style>
#face {
top: 50px;
left: 50px;
position: absolute;
border-radius: 50%;
border: 5px solid yellow;
width: 300px;
height: 300px;
}
#leye {
left: 120px;
top: 125px;
position: absolute;
border-radius: 50%;
border: 3px solid black;
width: 35px;
height: 35px;
}
#leye:active > #rtext {
visibility: visible;
}
#leye:active > #leftx {
visibility: visible;
}
#reye {
position: absolute;
left: 220px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 35px;
height: 35px;
}
#reye:active > #ltext {
visibility: visible;
}
#reye:active > #rightx {
visibility: visible;
}
#rtext {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#ltext {
left: 10px;
top: 50px;
position: absolute;
visibility: hidden;
}
#leftx {
left: 7.5px;
top: 5px;
position: absolute;
font-size: 30px;
visibility: hidden;
}
#rightx {
left: 7.5px;
top: 5px;
position: absolute;
font-size: 30px;
visibility: hidden;
}
#mouth {
top: 240px;
left: 120px;
position: absolute;
width: 150px;
height: 30px;
border-radius: 50%;
border-bottom: 15px solid rgb(212, 103, 121);
}
</style>
</head>
<body>
<div id="face"></div>
<div id="leye">
<div id="rtext">Ouch! My left eye hurts!</div>
<div id="leftx">X</div>
</div>
<div id="reye">
<div id="ltext">Ouch! My right eye hurts!</div>
<div id="rightx">X</div>
</div>
<div id="mouth"></div>
</body>
</html>
Smiley Face
#face {
position: absolute;
border-radius: 200px;
border: 2px solid #000000;
padding: 20px;
width: 200px;
height: 200px;
margin: auto;
}
#mouth {
border-bottom-right-radius: 110px;
border-bottom-left-radius: 110px;
border: 2px solid #000000;
width: 100px;
padding: 5px;
height: 50px;
margin: auto;
margin-top: 60%;
}
#lefteye {
position: relative;
border-radius: 30px;
border: 2px solid #000000;
padding: 20px;
width: 5px;
height: 5px;
float: left;
margin-left: 15%;
margin-top: 15%;
}
#lefteye:active{
visibility: hidden;
}
#lefteye:active > #leftx {
visibility: visible;
}
#lefteye:active > #lefttext {
visibility: visible;
}
#righteye {
position: relative;
border-radius: 30px;
border: 2px solid #000000;
padding: 20px;
width: 5px;
height: 5px;
float: right;
margin-right: 15%;
margin-top: 15%;
}
#righteye:active {
visibility: hidden;
}
#righteye:active > #rightx {
visibility: visible;
}
#righteye:active > #righttext {
visibility: visible;
}
#leftx {
position: absolute;
top: 0px;
left: 8px;
width: 5px;
height: 5px;
font-size: 32pt;
visibility: hidden;
}
#rightx {
position: absolute;
top: 0px;
right: 32px;
width: 5px;
height: 5px;
font-size: 32pt;
visibility: hidden;
}
#lefttext {
position: absolute;
top: 50px;
left: 0px;
font-size: 14pt;
visibility: hidden;
}
#righttext {
position: absolute;
top: 50px;
right: 0px;
font-size: 14pt;
visibility: hidden;
}
X
Ouch! My left eye hurts!
X
Ouch! My right eye hurts!
<nowiki><!DOCTYPE html>
<html lang="en">
<head>
<title>Smiley Face</title>
<style>
#face {
position: absolute;
border-radius: 200px;
border: 2px solid #000000;
padding: 20px;
width: 200px;
height: 200px;
margin: auto;
}
#mouth {
border-bottom-right-radius: 110px;
border-bottom-left-radius: 110px;
border: 2px solid #000000;
width: 100px;
padding: 5px;
height: 50px;
margin: auto;
margin-top: 60%;
}
#lefteye {
position: relative;
border-radius: 30px;
border: 2px solid #000000;
padding: 20px;
width: 5px;
height: 5px;
float: left;
margin-left: 15%;
margin-top: 15%;
}
#lefteye:active{
visibility: hidden;
}
#lefteye:active > #leftx {
visibility: visible;
}
#lefteye:active > #lefttext {
visibility: visible;
}
#righteye {
position: relative;
border-radius: 30px;
border: 2px solid #000000;
padding: 20px;
width: 5px;
height: 5px;
float: right;
margin-right: 15%;
margin-top: 15%;
}
#righteye:active {
visibility: hidden;
}
#righteye:active > #rightx {
visibility: visible;
}
#righteye:active > #righttext {
visibility: visible;
}
#leftx {
position: absolute;
top: 0px;
left: 8px;
width: 5px;
height: 5px;
font-size: 32pt;
visibility: hidden;
}
#rightx {
position: absolute;
top: 0px;
right: 32px;
width: 5px;
height: 5px;
font-size: 32pt;
visibility: hidden;
}
#lefttext {
position: absolute;
top: 50px;
left: 0px;
font-size: 14pt;
visibility: hidden;
}
#righttext {
position: absolute;
top: 50px;
right: 0px;
font-size: 14pt;
visibility: hidden;
}
</style>
</head>
<body>
<div id="face">
<div id="lefteye">
<div id="leftx">X</div>
<div id="lefttext">Ouch! My left eye hurts!</div>
</div>
<div id="righteye">
<div id="rightx">X</div>
<div id="righttext">Ouch! My right eye hurts!</div>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
</nowiki>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smiley Face</title>
<meta charset="utf-8">
<style type="text/css">
#left_eye {
width: 40px;
height: 40px;
background-color: black;
border: 30px;
border-radius: 50%;
margin: 30px;
}
#right_eye {
width: 40px;
height: 40px;
background-color: black;
border: 30px;
border-radius: 50%;
margin: 30px;
}
#eyes {
display: inline-flex;
}
a:focus-within p {
display: block;
color: turquoise;
font-family:Arial, Helvetica, sans-serif;
}
#mouth {
width: 70px;
height: 15px;
border: 5px solid transparent;
border-radius: 50%;
border-bottom-color: black;
margin-left: 60px;
}
#face {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 50%;
margin: 30px;
}
p {
display: none;
}
</style>
</head>
<body>
<div id="face">
<div id="eyes">
<a href="">
<div id="left_eye">
<p>x</p>
<p>Ouch! My left eye hurts!</p>
</div>
</a>
<a href="">
<div id="right_eye">
<p>x</p>
<p>Ouch! My right eye hurts!</p>
</div>
</a>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smiley Face</title>
<meta charset="utf-8">
<style type="text/css">
#left_eye {
width: 40px;
height: 40px;
background-color: black;
border: 30px;
border-radius: 50%;
margin: 30px;
}
#right_eye {
width: 40px;
height: 40px;
background-color: black;
border: 30px;
border-radius: 50%;
margin: 30px;
}
#eyes {
display: inline-flex;
}
a:focus-within p {
display: block;
color: turquoise;
font-family:Arial, Helvetica, sans-serif;
}
#mouth {
width: 70px;
height: 15px;
border: 5px solid transparent;
border-radius: 50%;
border-bottom-color: black;
margin-left: 60px;
}
#face {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 50%;
margin: 30px;
}
p {
display: none;
}
</style>
</head>
<body>
<div id="face">
<div id="eyes">
<a href="">
<div id="left_eye">
<p>x</p>
<p>Ouch! My left eye hurts!</p>
</div>
</a>
<a href="">
<div id="right_eye">
<p>x</p>
<p>Ouch! My right eye hurts!</p>
</div>
</a>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smiley face</title>
<style>
.head1 {
position: absolute;
width: 500px;
height: 500px;
border: 3px solid black;
border-radius: 100%;
top: 150px;
right: 785px;
}
.eye1 {
position: absolute;
width: 150px;
height: 150px;
right:850px;
top: 300px;
background-color: black;
border-radius: 100%;
}
.eye1:active {
visibility: hidden;
}
.eye2 {
position: absolute;
width: 150px;
height: 150px;
left: 750px;
top: 300px;
background-color: black;
border-radius: 100%;
}
.eye2:active {
visibility: hidden;
}
.mouth {
position: absolute;
width: 300px;
height: 100px;
border: 3px solid black;
border-radius: 100%;
top: 470px;
right: 885px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.x1 {
position: absolute;
left: 800px;
top: 320px;
font-size: 30px;
}
.ouch1 {
position: absolute;
left: 750px;
top: 375px;
font-size: 13px;
}
.x2 {
position: absolute;
right: 900px;
top: 320px;
font-size: 30px;
}
.ouch2 {
position: absolute;
right: 850px;
top: 375px;
font-size: 13px;
}
</style></head> <body>
<div class="head1"></div>
<div class="eye1" id="left"></div>
<div class="x1">
X
</div>
<div class="ouch1">
Ouch! My left eye hurts!
</div>
<div class="eye2" id="right"></div>
<div class="x2">
X
</div>
<div class="ouch2">
Ouch! My right eye hurts!
</div>
<div class="mouth"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smiley face</title>
<style>
.head1 {
position: absolute;
width: 500px;
height: 500px;
border: 3px solid black;
border-radius: 100%;
top: 150px;
right: 785px;
}
.eye1 {
position: absolute;
width: 150px;
height: 150px;
right:850px;
top: 300px;
background-color: black;
border-radius: 100%;
}
.eye1:active {
visibility: hidden;
}
.eye2 {
position: absolute;
width: 150px;
height: 150px;
left: 750px;
top: 300px;
background-color: black;
border-radius: 100%;
}
.eye2:active {
visibility: hidden;
}
.mouth {
position: absolute;
width: 300px;
height: 100px;
border: 3px solid black;
border-radius: 100%;
top: 470px;
right: 885px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.x1 {
position: absolute;
left: 800px;
top: 320px;
font-size: 30px;
}
.ouch1 {
position: absolute;
left: 750px;
top: 375px;
font-size: 13px;
}
.x2 {
position: absolute;
right: 900px;
top: 320px;
font-size: 30px;
}
.ouch2 {
position: absolute;
right: 850px;
top: 375px;
font-size: 13px;
}
</style>
</head>
<body>
<div class="head1"></div>
<div class="eye1" id="left"></div>
<div class="x1">
X
</div>
<div class="ouch1">
Ouch! My left eye hurts!
</div>
<div class="eye2" id="right"></div>
<div class="x2">
X
</div>
<div class="ouch2">
Ouch! My right eye hurts!
</div>
<div class="mouth"></div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head>
(Edited: 2022-09-20)
<meta charset="UTF-8" />
<title>In Class Exercise</title>
</head>
<style type = "text/css">
#face {
width: 500px;
height: 500px;
border-color:black;
border-radius: 50%;
margin: auto;
background-color: yellow;
}
#left-eye {
width: 100px;
height: 100px;
border-color: black;
border-radius: 50%;
margin-top: 50px;
margin-left: 100px;
background-color: black;
position: fixed;
}
#right-eye {
width: 100px;
height: 100px;
border-color: black;
border-radius: 50%;
margin-top: 100px;
margin-left: 300px;
background-color: black;
position: fixed;
}
#smile {
width: 100px;
height: 60px;
border-color: black;
border-radius: 50%;
border-bottom: 20px;
margin-top: 350px;
margin-left: 200px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
position: fixed;
}
p{
display: none;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight:bold;
color:pink;
}
</style>
</head>
<body>
<div id="face">
<a href ="left">
<div id="left-eye">
<p>X</p>
<p> Ouch! My left eye hurts!</p>
</div>
</a>
<a href ="rightClick">
<div id="right-eye">
<p>X</p>
<p> Ouch! My right eye hurts! </p>
</div>
</a>
<div id="smile"> </div>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8" />
<title>In Class Exercise</title>
</head>
<style type = "text/css">
#face {
width: 500px;
height: 500px;
border-color:black;
border-radius: 50%;
margin: auto;
background-color: yellow;
}
#left-eye {
width: 100px;
height: 100px;
border-color: black;
border-radius: 50%;
margin-top: 50px;
margin-left: 100px;
background-color: black;
position: fixed;
}
#right-eye {
width: 100px;
height: 100px;
border-color: black;
border-radius: 50%;
margin-top: 100px;
margin-left: 300px;
background-color: black;
position: fixed;
}
#smile {
width: 100px;
height: 60px;
border-color: black;
border-radius: 50%;
border-bottom: 20px;
margin-top: 350px;
margin-left: 200px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
position: fixed;
}
p{
display: none;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight:bold;
color:pink;
}
</style>
</head>
<body>
<div id="face">
<a href ="left">
<div id="left-eye">
<p>X</p>
<p> Ouch! My left eye hurts!</p>
</div>
</a>
<a href ="rightClick">
<div id="right-eye">
<p>X</p>
<p> Ouch! My right eye hurts! </p>
</div>
</a>
<div id="smile"> </div>
</div>
</body>
</html>
2022-09-25
<!DOCTYPE html>
<html>
<head>
<title>SMILE</title>
<style>
.face{
border: 2px solid;
border-radius: 50%;
height: 750px;
width: 750px;
}
.left-eye{
text-align: center;
position: relative;
left: 175px;
top:150px;
border: 2px solid;
border-radius: 50%;
height: 20%;
width: 20%;
}
.right-eye{
text-align: center;
position: relative;
left: 400px;
border: 2px solid;
border-radius: 50%;
height: 20%;
width: 20%;
}
.mouth{
height:30%;
width: 50%;
position: relative;
top:15%;
left: 25%;
border-radius:100%;
border-bottom:solid 3px #000;
}
.left-eye:active, .right-eye:active{
border: 0px;
font-size: 20px;
}
p{
visibility: hidden;
}
.x{
visibility: hidden;
font-size: 100px;
}
.left-eye:active p, .right-eye:active p{
visibility: visible;
}
.left-eye:active .x, .right-eye:active .x{
visibility: visible;
}
</style>
</head>
<body>
<div class="face">
<div class="left-eye">
<div class = "x">X</div>
<p>Ouch! My left eye hurts!</p>
</div>
<div class = "right-eye">
<div class = "x">X</div>
<p>Ouch! My left eye hurts!</p>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>SMILE</title>
<style>
.face{
border: 2px solid;
border-radius: 50%;
height: 750px;
width: 750px;
}
.left-eye{
text-align: center;
position: relative;
left: 175px;
top:150px;
border: 2px solid;
border-radius: 50%;
height: 20%;
width: 20%;
}
.right-eye{
text-align: center;
position: relative;
left: 400px;
border: 2px solid;
border-radius: 50%;
height: 20%;
width: 20%;
}
.mouth{
height:30%;
width: 50%;
position: relative;
top:15%;
left: 25%;
border-radius:100%;
border-bottom:solid 3px #000;
}
.left-eye:active, .right-eye:active{
border: 0px;
font-size: 20px;
}
p{
visibility: hidden;
}
.x{
visibility: hidden;
font-size: 100px;
}
.left-eye:active p, .right-eye:active p{
visibility: visible;
}
.left-eye:active .x, .right-eye:active .x{
visibility: visible;
}
</style>
</head>
<body>
<div class="face">
<div class="left-eye">
<div class = "x">X</div>
<p>Ouch! My left eye hurts!</p>
</div>
<div class = "right-eye">
<div class = "x">X</div>
<p>Ouch! My left eye hurts!</p>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
(c) 2024 Yioop - PHP Search Engine