2022-09-18
<!DOCTYPE html> <html lang="en-US">
<head>
(Edited: 2022-09-18)
<meta charset="utf-8">
<title>Smiley</title>
<style type="text/css">
#face {
border-radius: 50%;
background-color: yellow;
margin: auto;
width: 500px;
height: 500px;
}
#left-eye {
position: absolute;
margin-left: 100px;
margin-top: 125px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: black;
}
#left-eye:focus-within p{
display: block;
}
#right-eye {
position: absolute;
margin-left: 200px;
margin-top: 125px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: black;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
#mouth {
position: absolute;
margin-top: 200px;
margin-left:140px;
width: 90px;
height: 30px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
}
p {
display: none;
}
</style>
</head>
<body>
<div id="face">
<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 id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en-US">
<head>
<meta charset="utf-8">
<title>Smiley</title>
<style type="text/css">
#face {
border-radius: 50%;
background-color: yellow;
margin: auto;
width: 500px;
height: 500px;
}
#left-eye {
position: absolute;
margin-left: 100px;
margin-top: 125px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: black;
}
#left-eye:focus-within p{
display: block;
}
#right-eye {
position: absolute;
margin-left: 200px;
margin-top: 125px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: black;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
#mouth {
position: absolute;
margin-top: 200px;
margin-left:140px;
width: 90px;
height: 30px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
}
p {
display: none;
}
</style>
</head>
<body>
<div id="face">
<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 id="mouth"></div>
</div>
</body>
</html>
<Doctype !html>
<html>
<style>
.eye
{
position: absolute;
border: 10px black solid;
border-radius: 20px;
padding: 10px;
}
.mouth
{
position: absolute;
padding-top: 50px;
padding-left: 125px;
top: 150px;
left: 100px;
display: block;
border: 10px black solid;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
.text
{
position: absolute;
visibility: hidden;
top: 225px;
left: 0px;
width: fit-content;
}
.x
{
visibility: hidden;
}
.eye#left
{
top: 30px;
left: 100px;
}
.eye#right
{
top: 30px;
left: 200px;
}
.eye:active
{
visibility: hidden;
}
.eye:active > div.x, .eye:active > div.text
{
visibility: visible;
}
</style>
<head>
<title>In Class Excercise 9/14</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="eye" id="left">
<div class="x" id="left">X</div>
<div class="text" id="left">Ouch, my left eye hurts!</div>
</div>
<div class="eye" id="right">
<div class="x" id="right">X</div>
<div class="text" id="right">Ouch, my right eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
<Doctype !html>
<html>
<style>
.eye
{
position: absolute;
border: 10px black solid;
border-radius: 20px;
padding: 10px;
}
.mouth
{
position: absolute;
padding-top: 50px;
padding-left: 125px;
top: 150px;
left: 100px;
display: block;
border: 10px black solid;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
.text
{
position: absolute;
visibility: hidden;
top: 225px;
left: 0px;
width: fit-content;
}
.x
{
visibility: hidden;
}
.eye#left
{
top: 30px;
left: 100px;
}
.eye#right
{
top: 30px;
left: 200px;
}
.eye:active
{
visibility: hidden;
}
.eye:active > div.x, .eye:active > div.text
{
visibility: visible;
}
</style>
<head>
<title>In Class Excercise 9/14</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="eye" id="left">
<div class="x" id="left">X</div>
<div class="text" id="left">Ouch, my left eye hurts!</div>
</div>
<div class="eye" id="right">
<div class="x" id="right">X</div>
<div class="text" id="right">Ouch, my right eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
<! DOCTYPE html>
< html>
<head>
<title>Page 1</title>
<meta charset="utf-8" />
<style>
.border {
border: 1px solid black;
border-radius: 10px
}
.hidden-div
{
display: none;
}
.focus-test:focus-within .hidden-div
{
display:block;
}
</style>
</head>
<body>
<div class = "border">
<div class = "focus-test">
. <a href="">.</a>
<div class="hidden-div">
Ouch my left eye hurts
</div>
</div>
</div>
<div>
V
</div>
</body>
</html>
<! DOCTYPE html>
< html>
<head>
<title>Page 1</title>
<meta charset="utf-8" />
<style>
.border {
border: 1px solid black;
border-radius: 10px
}
.hidden-div
{
display: none;
}
.focus-test:focus-within .hidden-div
{
display:block;
}
</style>
</head>
<body>
<div class = "border">
<div class = "focus-test">
. <a href="">.</a>
<div class="hidden-div">
Ouch my left eye hurts
</div>
</div>
</div>
<div>
V
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<title>Smiley!</title>
<style>
.face {
position: absolute;
height: 400px;
width: 400px;
top:100px;
left:500px;
border: 5px solid blue;
border-radius: 100%;
background-color: yellow;
}
.mouth {
height: 150px;
width: 300px;
border-bottom: 20px solid red;
border-radius: 100%;
position: absolute;
top: 250px;
left: 580px;
}
#lefteye {
position: absolute;
top: 180px;
left: 600px;
}
#righteye {
position: absolute;
top: 180px;
left: 750px;
}
.eye:active .x, .eye:active .txt {
visibility: visible;
}
.x {
visibility: hidden;
font-size: 100pt;
font-family: 'Times New Roman', Times, serif;
color: green;
position: relative;
}
.txt {
visibility: hidden;
color: green;
width: 500px;
font-size: 24pt;
position: relative;
}
.eye {
height: 100px;
width: 100px;
background-color: black;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="face"></div>
<div id="lefteye" class="eye">
<div class="x">X</div>
<div class="txt">Ouch! My left eye hurts!</div>
</div>
<div id="righteye" class="eye">
<div class="x">X</div>
<div class="txt">Ouch! My right eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<title>Smiley!</title>
<style>
.face {
position: absolute;
height: 400px;
width: 400px;
top:100px;
left:500px;
border: 5px solid blue;
border-radius: 100%;
background-color: yellow;
}
.mouth {
height: 150px;
width: 300px;
border-bottom: 20px solid red;
border-radius: 100%;
position: absolute;
top: 250px;
left: 580px;
}
#lefteye {
position: absolute;
top: 180px;
left: 600px;
}
#righteye {
position: absolute;
top: 180px;
left: 750px;
}
.eye:active .x, .eye:active .txt {
visibility: visible;
}
.x {
visibility: hidden;
font-size: 100pt;
font-family: 'Times New Roman', Times, serif;
color: green;
position: relative;
}
.txt {
visibility: hidden;
color: green;
width: 500px;
font-size: 24pt;
position: relative;
}
.eye {
height: 100px;
width: 100px;
background-color: black;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="face"></div>
<div id="lefteye" class="eye">
<div class="x">X</div>
<div class="txt">Ouch! My left eye hurts!</div>
</div>
<div id="righteye" class="eye">
<div class="x">X</div>
<div class="txt">Ouch! My right eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
In Class Assignment 100% Real Copyright Andre Domingo [German Subs]
#lefteye {
position: absolute;
left: 10px;
top: 10px;
border-radius: 100%;
border: 5px solid black;
width: 25px;
height: 25px;
}
#lefteye:active > #leftx {
visibility: visible;
}
#righteye {
position: absolute;
left: 85px;
top: 10px;
border-radius: 100%;
border: 5px solid black;
width: 25px;
height: 25px;
}
#righteye:active > #rightx {
visibility: visible;
}
#leftx {
visibility: hidden;
}
#rightx {
visibility: hidden;
}
#mouth {
position: absolute;
top: 100px;
left: 10px;
border-bottom: 5px solid black;
border-left: 5px solid black;
border-right: 5px solid black;
width: 100px;
height: 25px;
}
x
Ouch! My left eye hurts!
x
Ouch! My right eye hurts!
<nowiki>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>In Class Assignment 100% Real Copyright Andre Domingo [German Subs]</title>
<meta charset="utf-8" />
<style>
#lefteye {
position: absolute;
left: 10px;
top: 10px;
border-radius: 100%;
border: 5px solid black;
width: 25px;
height: 25px;
}
#lefteye:active > #leftx {
visibility: visible;
}
#righteye {
position: absolute;
left: 85px;
top: 10px;
border-radius: 100%;
border: 5px solid black;
width: 25px;
height: 25px;
}
#righteye:active > #rightx {
visibility: visible;
}
#leftx {
visibility: hidden;
}
#rightx {
visibility: hidden;
}
#mouth {
position: absolute;
top: 100px;
left: 10px;
border-bottom: 5px solid black;
border-left: 5px solid black;
border-right: 5px solid black;
width: 100px;
height: 25px;
}
</style>
</head>
<body>
<div id="lefteye">
<div id="leftx">
x
<div>Ouch! My left eye hurts!</div>
</div>
</div>
<div id="righteye">
<div id="rightx">
x
<div>Ouch! My right eye hurts!</div>
</div>
</div>
<div id="mouth"></div>
</body>
</html>
</nowiki>
<!DOCTYPE html> <html lang="en"> <head>
<style>
.face{
position: relative;
border: 2px solid black;
height: 500px;
width: 500px;
border-radius: 60%;
margin-bottom: 55px;
}
.leftEye{
text-align: center;
font-size: 0px;
position: absolute;
top: 90px;
height: 90px;
width: 110px;
border: 2px solid black;
border-radius: 60%;
}
.leftEye{
left: 110px;
}
.rightEye{
text-align: center;
font-size: 0px;
position: absolute;
top: 90px;
height: 90px;
width: 110px;
border: 2px solid black;
border-radius: 60%;
}
.rightEye{
right: 110px;
}
.leftEye:active, .rightEye:active{
border: 0px;
font-size: 90px;
}
.mouth{
position: absolute;
top: 300px;
left: 90px;
height: 60px;
width: 280px;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head> <body>
<div class="face">
<div class="leftEye">X<p style="position: fixed; bottom: 0px; left:0px;">Ouch! My left eye hurts!</p>
</div>
<div class="rightEye">X<p style="position: fixed; bottom: 0px; left: 0px;">Ouch! My right eye hurts!</p>
</div>
<div class="mouth"></div>
</div>
</body> </html>
<!DOCTYPE html> <html lang="en"> <head>
<style>
.face{
position: relative;
border: 2px solid black;
height: 500px;
width: 500px;
border-radius: 60%;
margin-bottom: 55px;
}
.leftEye{
text-align: center;
font-size: 0px;
position: absolute;
top: 90px;
height: 90px;
width: 110px;
border: 2px solid black;
border-radius: 60%;
}
.leftEye{
left: 110px;
}
.rightEye{
text-align: center;
font-size: 0px;
position: absolute;
top: 90px;
height: 90px;
width: 110px;
border: 2px solid black;
border-radius: 60%;
}
.rightEye{
right: 110px;
}
.leftEye:active, .rightEye:active{
border: 0px;
font-size: 90px;
}
.mouth{
position: absolute;
top: 300px;
left: 90px;
height: 60px;
width: 280px;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head> <body>
<div class="face">
<div class="leftEye">X<p style="position: fixed; bottom: 0px; left:0px;">Ouch! My left eye hurts!</p>
</div>
<div class="rightEye">X<p style="position: fixed; bottom: 0px; left: 0px;">Ouch! My right eye hurts!</p>
</div>
<div class="mouth"></div>
</div>
</body> </html>
2022-09-19
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Smiley Face</title>
<style type="text/css">
#face {
margin: auto;
width: 500px;
height: 450px;
border-radius: 50%;
border-color: black;
background-color: yellow;
}
#left-eye {
position: fixed;
margin-left: 100px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#right-eye {
position: fixed;
margin-left: 350px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#mouth {
position: fixed;
margin-top: 300px;
margin-left:150px;
width: 200px;
height: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
}
p {
display: none;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="face">
<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 id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Smiley Face</title>
<style type="text/css">
#face {
margin: auto;
width: 500px;
height: 450px;
border-radius: 50%;
border-color: black;
background-color: yellow;
}
#left-eye {
position: fixed;
margin-left: 100px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#right-eye {
position: fixed;
margin-left: 350px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#mouth {
position: fixed;
margin-top: 300px;
margin-left:150px;
width: 200px;
height: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: black;
}
p {
display: none;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="face">
<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 id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>In-Class Exercise - Smiley</title>
<meta charset="utf-8" />
<style>
div#face {
align-items: center;
background: #000;
width: 200px;
height: 200px;
margin: auto;
border-radius: 50%;
}
div#lefteye {
position: relative;
right: 40px;
top: 30px;
background: #fff;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
div#righteye {
position: relative;
left: 40px;
bottom: 20px;
background: #fff;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
div#mouth {
position: relative;
left: 75px;
top: 10px;
background: #fff;
border-radius: 0 0 50px 50px;
border-width: 10px;
width: 50px;
height: 50px;
}
p#infoleft {
position: absolute;
margin: 0 auto;
top: 200px;
width: 500px;
visibility: hidden;
}
p#inforight {
position: absolute;
margin: 0 auto;
top: 200px;
width: 500px;
visibility: hidden;
}
p {
font-size: 40px;
visibility: hidden;
}
a#left:active p {
visibility: visible;
}
a#right:active p {
visibility: visible;
}
</style>
</head>
<body>
<div id="face">
<a id="left">
<div id="lefteye">
<p>X</p>
<p id="infoleft">Ouch! My left eye hurts!</p>
</div>
</a>
<a id="right">
<div id="righteye">
<p>X</p>
<p id="inforight">Ouch! My right eye hurts!</p>
</div>
</a>
<div id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>In-Class Exercise - Smiley</title>
<meta charset="utf-8" />
<style>
div#face {
align-items: center;
background: #000;
width: 200px;
height: 200px;
margin: auto;
border-radius: 50%;
}
div#lefteye {
position: relative;
right: 40px;
top: 30px;
background: #fff;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
div#righteye {
position: relative;
left: 40px;
bottom: 20px;
background: #fff;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
div#mouth {
position: relative;
left: 75px;
top: 10px;
background: #fff;
border-radius: 0 0 50px 50px;
border-width: 10px;
width: 50px;
height: 50px;
}
p#infoleft {
position: absolute;
margin: 0 auto;
top: 200px;
width: 500px;
visibility: hidden;
}
p#inforight {
position: absolute;
margin: 0 auto;
top: 200px;
width: 500px;
visibility: hidden;
}
p {
font-size: 40px;
visibility: hidden;
}
a#left:active p {
visibility: visible;
}
a#right:active p {
visibility: visible;
}
</style>
</head>
<body>
<div id="face">
<a id="left">
<div id="lefteye">
<p>X</p>
<p id="infoleft">Ouch! My left eye hurts!</p>
</div>
</a>
<a id="right">
<div id="righteye">
<p>X</p>
<p id="inforight">Ouch! My right eye hurts!</p>
</div>
</a>
<div id="mouth"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sept.14 In-Class Exercise</title>
<style>
#left{
height:50px;
width:50px;
border-radius: 50%;
background-color: black;
}
#white-eye{
height: 50%;
width:50%;
border-radius: 50%;
background-color: white;
position:relative;
top:10px;
left:12px;
}
#right{
height:50px;
width:50px;
border-radius: 50%;
background-color: black;
position: absolute;
top:10px;
left:90px;
}
#X{
position: relative;
top:2px;
left:5px;
font-size: x-large;
color: red;
display: none;
}
.hurt-txt{
display: none;
}
#left:focus-within .hurt-txt {
display: block;
}
#left:focus-within #X {
display: block;
}
#right:focus-within .hurt-txt{
display: block;
}
#right:focus-within #X{
display: block;
}
</style>
</head>
<body>
<div class ="eyes">
<div id = "left">
<div id="white-eye">
<a style="font-size:small" href="#">Click</a>
<span id ="X">X</span>
</div>
<p class="hurt-txt">Ouch! My left eye hurt</p>
</div>
<div id="right">
<div id="white-eye">
<a style="font-size:small" href="#">Click</a>
<span id="X">X</span>
</div>
<p class="hurt-txt">Ouch! My right eye hurt</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sept.14 In-Class Exercise</title>
<style>
#left{
height:50px;
width:50px;
border-radius: 50%;
background-color: black;
}
#white-eye{
height: 50%;
width:50%;
border-radius: 50%;
background-color: white;
position:relative;
top:10px;
left:12px;
}
#right{
height:50px;
width:50px;
border-radius: 50%;
background-color: black;
position: absolute;
top:10px;
left:90px;
}
#X{
position: relative;
top:2px;
left:5px;
font-size: x-large;
color: red;
display: none;
}
.hurt-txt{
display: none;
}
#left:focus-within .hurt-txt {
display: block;
}
#left:focus-within #X {
display: block;
}
#right:focus-within .hurt-txt{
display: block;
}
#right:focus-within #X{
display: block;
}
</style>
</head>
<body>
<div class ="eyes">
<div id = "left">
<div id="white-eye">
<a style="font-size:small" href="#">Click</a>
<span id ="X">X</span>
</div>
<br>
<p class="hurt-txt">Ouch! My left eye hurt</p>
</div>
<div id="right">
<div id="white-eye">
<a style="font-size:small" href="#">Click</a>
<span id="X">X</span>
</div>
<br>
<p class="hurt-txt">Ouch! My right eye hurt</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smiley Face</title>
<style>
.face {
width: 500px;
height: 500px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
}
#left-eye {
left: 120px;
}
#right-eye {
left: 350px;
}
.eye {
width:50px;
height:50px;
top: 150px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
}
.x {
visibility: hidden;
font-size: 120pt;
font-family: Arial, sans-serif;
color: black;
position: relative;
top: -80px;
left: -15px;
}
.eye:active .x, .eye:active .text {
visibility: visible;
}
.text {
visibility: hidden;
position: absolute;
top: 400px;
font-size: 50pt;
display: inline;
}
.mouth {
width: 200px;
height: 50px;
border: 1px solid black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 350px;
left: 165px;
}
</style>
</head>
<body>
<div class="face"></div>
<div class="eye" id="right-eye">
<div class="x">x</div>
<div class="text">Ouch! My right eye hurts!</div>
</div>
<div class="eye" id="left-eye">
<div class="x">x</div>
<div class="text">Ouch! My left eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smiley Face</title>
<style>
.face {
width: 500px;
height: 500px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
}
#left-eye {
left: 120px;
}
#right-eye {
left: 350px;
}
.eye {
width:50px;
height:50px;
top: 150px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
}
.x {
visibility: hidden;
font-size: 120pt;
font-family: Arial, sans-serif;
color: black;
position: relative;
top: -80px;
left: -15px;
}
.eye:active .x, .eye:active .text {
visibility: visible;
}
.text {
visibility: hidden;
position: absolute;
top: 400px;
font-size: 50pt;
display: inline;
}
.mouth {
width: 200px;
height: 50px;
border: 1px solid black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
top: 350px;
left: 165px;
}
</style>
</head>
<body>
<div class="face"></div>
<div class="eye" id="right-eye">
<div class="x">x</div>
<div class="text">Ouch! My right eye hurts!</div>
</div>
<div class="eye" id="left-eye">
<div class="x">x</div>
<div class="text">Ouch! My left eye hurts!</div>
</div>
<div class="mouth"></div>
</body>
</html>
(c) 2024 Yioop - PHP Search Engine