2022-09-14
Sep 14 In-Class Exercise Thread.
Please post your solutions to the Sep 14 In-Class Exercise to this thread.
Best,
Chris
Please post your solutions to the Sep 14 In-Class Exercise to this thread.
Best,
Chris
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smiley Faces</title>
</head>
<style>
#lefteye{
position:absolute;
left:50px;
top:25px;
height: 25px;
width: 25px;
background-color: #000;
border-radius: 50%;
display: inline-block;
}
#lefteye:active{
visibility: hidden;
}
#righteye{
position:absolute;
left:230px;
top:25px;
height: 25px;
width: 25px;
background-color: #000;
border-radius: 50%;
display: inline-block;
}
#righteye:active{
visibility: hidden;
}
#righteye:active > #right-text{
visibility: visible;
}
#lefteye:active > #left-text{
visibility: visible;
}
#mouth{
height:150px;
width: 75px;
border-radius: 150px 20px 20px 160px ;
border-top: 20px solid #000;
border-left: 20px solid #000;
border-bottom: 20px solid #000;
transform: translate(100px) rotate(-90deg);
}
#leftx{
position:absolute;
left:50px;
top:30px;
font-size: 15px;
}
#rightx{
position:absolute;
left:230px;
top:30px;
font-size: 15px;
}
#right-text{
position: absolute;
top: 150px;
left: -120px;
visibility: hidden;
display: inline;
}
#left-text{
position: absolute;
top: 150px;
left: 50px;
visibility: hidden;
display: inline
}
</style>
<body>
<div id="lefteye">
<div id="left-text">"Ouch! My left eye hurts!".</div>
</div>
<div id="righteye">
<div id="right-text">"Ouch! My right eye hurts!".</div>
</div>
<div id="mouth"></div>
<div id="leftx">X</div>
<div id="rightx">X</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smiley Faces</title>
</head>
<style>
#lefteye{
position:absolute;
left:50px;
top:25px;
height: 25px;
width: 25px;
background-color: #000;
border-radius: 50%;
display: inline-block;
}
#lefteye:active{
visibility: hidden;
}
#righteye{
position:absolute;
left:230px;
top:25px;
height: 25px;
width: 25px;
background-color: #000;
border-radius: 50%;
display: inline-block;
}
#righteye:active{
visibility: hidden;
}
#righteye:active > #right-text{
visibility: visible;
}
#lefteye:active > #left-text{
visibility: visible;
}
#mouth{
height:150px;
width: 75px;
border-radius: 150px 20px 20px 160px ;
border-top: 20px solid #000;
border-left: 20px solid #000;
border-bottom: 20px solid #000;
transform: translate(100px) rotate(-90deg);
}
#leftx{
position:absolute;
left:50px;
top:30px;
font-size: 15px;
}
#rightx{
position:absolute;
left:230px;
top:30px;
font-size: 15px;
}
#right-text{
position: absolute;
top: 150px;
left: -120px;
visibility: hidden;
display: inline;
}
#left-text{
position: absolute;
top: 150px;
left: 50px;
visibility: hidden;
display: inline
}
</style>
<body>
<div id="lefteye">
<div id="left-text">"Ouch! My left eye hurts!".</div>
</div>
<div id="righteye">
<div id="right-text">"Ouch! My right eye hurts!".</div>
</div>
<div id="mouth"></div>
<div id="leftx">X</div>
<div id="rightx">X</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: 500px;
border-radius: 50%;
background-color: yellow;
}
#left-eye {
position: fixed;
margin-left: 100px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#left-eye:focus-within p{
display: block;
}
#right-eye {
position: fixed;
margin-left: 350px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
#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;
}
</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: 500px;
border-radius: 50%;
background-color: yellow;
}
#left-eye {
position: fixed;
margin-left: 100px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
#left-eye:focus-within p{
display: block;
}
#right-eye {
position: fixed;
margin-left: 350px;
margin-top: 125px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: black;
}
a:focus-within p{
display: block;
padding-left: 15px;
font-weight: bold;
color: red;
}
#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;
}
</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">
<head>
<meta charset="UTF-8" />
<title>In Class Exercise</title>
<style>
.outer-circle {
width: 500px;
height: 500px;
border: 1px solid black;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.inner-eyes {
height: 20%;
width: 80%;
margin-top: 100px;
display: flex;
align-items: center;
}
.inner-eye {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
margin: auto;
}
.left-eye-text,
.right-eye-text {
position: absolute;
left: 200px;
top: 520px;
}
.inner-left-eye-wrap,
.inner-right-eye-wrap,
.left-eye-text,
.right-eye-text {
display: none;
}
.left-eye:active .inner-left-eye-wrap,
.left-eye:active .left-eye-text {
display: block;
}
.right-eye:active .inner-right-eye-wrap,
.right-eye:active .right-eye-text {
display: block;
}
.inner-eye-cross-one {
width: 100%;
border-top: 1px solid black;
margin-top: 50%;
transform: rotate(45deg);
}
.inner-eye-cross-two {
width: 100%;
border-top: 1px solid black;
transform: rotate(-45deg);
}
.inner-smile {
width: 300px;
height: 100px;
border-bottom: 2px solid black;
margin-top: 100px;
border-radius: 40%;
}
</style>
</head>
<body>
<div class="outer-circle">
<div class="inner-eyes">
<div class="inner-eye left-eye">
<div class="inner-left-eye-wrap">
<div class="inner-eye-cross-one"></div>
<div class="inner-eye-cross-two"></div>
</div>
<div class="left-eye-text">Ouch! My left eye hurts!</div>
</div>
<div class="inner-eye right-eye">
<div class="inner-right-eye-wrap">
<div class="inner-eye-cross-one"></div>
<div class="inner-eye-cross-two"></div>
</div>
<div class="right-eye-text">Ouch! My right eye hurts!</div>
</div>
</div>
<div class="inner-smile"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>In Class Exercise</title>
<style>
.outer-circle {
width: 500px;
height: 500px;
border: 1px solid black;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.inner-eyes {
height: 20%;
width: 80%;
margin-top: 100px;
display: flex;
align-items: center;
}
.inner-eye {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
margin: auto;
}
.left-eye-text,
.right-eye-text {
position: absolute;
left: 200px;
top: 520px;
}
.inner-left-eye-wrap,
.inner-right-eye-wrap,
.left-eye-text,
.right-eye-text {
display: none;
}
.left-eye:active .inner-left-eye-wrap,
.left-eye:active .left-eye-text {
display: block;
}
.right-eye:active .inner-right-eye-wrap,
.right-eye:active .right-eye-text {
display: block;
}
.inner-eye-cross-one {
width: 100%;
border-top: 1px solid black;
margin-top: 50%;
transform: rotate(45deg);
}
.inner-eye-cross-two {
width: 100%;
border-top: 1px solid black;
transform: rotate(-45deg);
}
.inner-smile {
width: 300px;
height: 100px;
border-bottom: 2px solid black;
margin-top: 100px;
border-radius: 40%;
}
</style>
</head>
<body>
<div class="outer-circle">
<div class="inner-eyes">
<div class="inner-eye left-eye">
<div class="inner-left-eye-wrap">
<div class="inner-eye-cross-one"></div>
<div class="inner-eye-cross-two"></div>
</div>
<div class="left-eye-text">Ouch! My left eye hurts!</div>
</div>
<div class="inner-eye right-eye">
<div class="inner-right-eye-wrap">
<div class="inner-eye-cross-one"></div>
<div class="inner-eye-cross-two"></div>
</div>
<div class="right-eye-text">Ouch! My right eye hurts!</div>
</div>
</div>
<div class="inner-smile"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Smiley</title>
<meta charset="utf-8" />
<style>
#face {
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
border: 5px solid black;
width: 250px;
height: 250px;
}
#eye1 {
position: absolute;
left: 100px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 25px;
height: 25px;
}
#eye1:active > #text1 {
visibility: visible;
}
#eye1:active > #leftx {
visibility: visible;
}
#eye2 {
position: absolute;
left: 200px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 25px;
height: 25px;
}
#eye2:active > #text2 {
visibility: visible;
}
#eye2:active > #rightx {
visibility: visible;
}
#text1 {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#text2 {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#leftx {
position: absolute;
left: 7.5px;
top: 5px;
font-size: 20px;
visibility: hidden;
}
#rightx {
position: absolute;
left: 7.5px;
top: 5px;
font-size: 20px;
visibility: hidden;
}
#mouth {
position: absolute;
top: 200px;
left: 130px;
border-radius: 100%;
border-bottom: 5px solid black;
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div id="face"></div>
<div id="eye1">
<div id="text1">Ouch! My left eye hurts!</div>
<div id="leftx">X</div>
</div>
<div id="eye2">
<div id="text2">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</title>
<meta charset="utf-8" />
<style>
#face {
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
border: 5px solid black;
width: 250px;
height: 250px;
}
#eye1 {
position: absolute;
left: 100px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 25px;
height: 25px;
}
#eye1:active > #text1 {
visibility: visible;
}
#eye1:active > #leftx {
visibility: visible;
}
#eye2 {
position: absolute;
left: 200px;
top: 125px;
border-radius: 50%;
border: 3px solid black;
width: 25px;
height: 25px;
}
#eye2:active > #text2 {
visibility: visible;
}
#eye2:active > #rightx {
visibility: visible;
}
#text1 {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#text2 {
position: absolute;
left: 10px;
top: 50px;
visibility: hidden;
}
#leftx {
position: absolute;
left: 7.5px;
top: 5px;
font-size: 20px;
visibility: hidden;
}
#rightx {
position: absolute;
left: 7.5px;
top: 5px;
font-size: 20px;
visibility: hidden;
}
#mouth {
position: absolute;
top: 200px;
left: 130px;
border-radius: 100%;
border-bottom: 5px solid black;
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div id="face"></div>
<div id="eye1">
<div id="text1">Ouch! My left eye hurts!</div>
<div id="leftx">X</div>
</div>
<div id="eye2">
<div id="text2">Ouch! My right eye hurts!</div>
<div id="rightx">X</div>
</div>
<div id="mouth"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>Smile Face</title>
</head>
<style>
#face{
width: 500px;
height: 500px;
background-color: bisque;
border-radius: 50%;
margin:auto;
}
#twoeyes{
display: inline-flex;
}
#eye{
width: 80px;
height: 80px;
background-color: black;
border:50px;
border-radius: 50%;
margin: 150px 84px 100px 84px;
}
#mouth{
width: 200px;
height: 60px;
border-radius: 0 0 50px 50px;
background-color: red;
margin: auto;
}
a:focus-within p{
font-weight: bold;
color:white;
display: block;
}
P{
display:none;
}
</style>
<body>
<div id="face">
<div id="twoeyes">
<a href="">
<div id="eye">
<p>X</p>
<p>Ouch! My left eye hurts!</p>
</div>
</a>
<a href="">
<div id="eye">
<P>X</P>
<p>Ouch! My right eye hurts!</p>
</div>
</a>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>Smile Face</title>
</head>
<style>
#face{
width: 500px;
height: 500px;
background-color: bisque;
border-radius: 50%;
margin:auto;
}
#twoeyes{
display: inline-flex;
}
#eye{
width: 80px;
height: 80px;
background-color: black;
border:50px;
border-radius: 50%;
margin: 150px 84px 100px 84px;
}
#mouth{
width: 200px;
height: 60px;
border-radius: 0 0 50px 50px;
background-color: red;
margin: auto;
}
a:focus-within p{
font-weight: bold;
color:white;
display: block;
}
P{
display:none;
}
</style>
<body>
<div id="face">
<div id="twoeyes">
<a href="">
<div id="eye">
<p>X</p>
<p>Ouch! My left eye hurts!</p>
</div>
</a>
<a href="">
<div id="eye">
<P>X</P>
<p>Ouch! My right eye hurts!</p>
</div>
</a>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
2022-09-15
<!DOCTYPE html>
<html>
<head>
<title>CSS Smiley Face</title>
<meta charset="utf-8" />
<style>
#face {
height: 500px;
width: 500px;
border: 3px solid orange;
border-radius: 100%;
position: absolute;
}
#left-eye {
position: relative;
top: 105px;
left: 280px;
}
#right-eye {
position: relative;
top: 0;
left: 120px;
}
.eye:active .x, .eye:active .text {
visibility: visible;
}
.x {
visibility: hidden;
font-size: 150pt;
font-family: Arial, Helvetica, sans-serif;
color: red;
position: relative;
top: -120px;
}
.text {
color: red;
visibility: hidden;
width: 500px;
font-size: 24pt;
position: relative;
top: 150px;
}
.left {
left: -180px;
}
.right {
left: -20px;
}
#smile {
height: 150px;
width: 300px;
border-bottom: 3px solid black;
border-radius: 100%;
position: absolute;
top: 260px;
left: 115px;
}
.eye {
height: 100px;
width: 100px;
border: 3px solid blue;
/* background-color: blue; */
border-radius: 100%;
}
.pupil {
position: relative;
height: 50px;
width: 50px;
/* border: 3px solid black; */
background-color: black;
border-radius: 100%;
top: 50px;
left: 30px;
}
</style>
</head>
<body>
<div id="face" class="face"></div>
<div id="left-eye" class="eye">
<div id="left-pupil" class="pupil"></div>
<div class="x">x</div>
<div class="text left">Ouch! My left eye hurts!</div>
</div>
<div id="right-eye" class="eye">
<div id="right-pupil" class="pupil"></div>
<div class="x">x</div>
<div class="text right">Ouch! My right eye hurts!</div>
</div>
<div id="smile" class="smile"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSS Smiley Face</title>
<meta charset="utf-8" />
<style>
#face {
height: 500px;
width: 500px;
border: 3px solid orange;
border-radius: 100%;
position: absolute;
}
#left-eye {
position: relative;
top: 105px;
left: 280px;
}
#right-eye {
position: relative;
top: 0;
left: 120px;
}
.eye:active .x, .eye:active .text {
visibility: visible;
}
.x {
visibility: hidden;
font-size: 150pt;
font-family: Arial, Helvetica, sans-serif;
color: red;
position: relative;
top: -120px;
}
.text {
color: red;
visibility: hidden;
width: 500px;
font-size: 24pt;
position: relative;
top: 150px;
}
.left {
left: -180px;
}
.right {
left: -20px;
}
#smile {
height: 150px;
width: 300px;
border-bottom: 3px solid black;
border-radius: 100%;
position: absolute;
top: 260px;
left: 115px;
}
.eye {
height: 100px;
width: 100px;
border: 3px solid blue;
/* background-color: blue; */
border-radius: 100%;
}
.pupil {
position: relative;
height: 50px;
width: 50px;
/* border: 3px solid black; */
background-color: black;
border-radius: 100%;
top: 50px;
left: 30px;
}
</style>
</head>
<body>
<div id="face" class="face"></div>
<div id="left-eye" class="eye">
<div id="left-pupil" class="pupil"></div>
<div class="x">x</div>
<div class="text left">Ouch! My left eye hurts!</div>
</div>
<div id="right-eye" class="eye">
<div id="right-pupil" class="pupil"></div>
<div class="x">x</div>
<div class="text right">Ouch! My right eye hurts!</div>
</div>
<div id="smile" class="smile"></div>
</body>
</html>
<!DOCTYPE html> <html lang="en-US">
<head>
<title>Smiley Face</title>
<meta charset="utf-8">
<style>
#face {
margin: auto;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: white;
}
#lefteye {
position:absolute;
left:75px;
top:75px;
background-color: black;
border-radius: 50%;
width: 50px;
height: 50px;
}
#lefteye:active {
visibility: hidden;
}
#lefteye:active > #left-text {
visibility: visible;
}
#righteye {
position:absolute;
left:75px;
top:75px;
background-color: black;
border-radius: 50%;
width: 50px;
height: 50px;
}
#righteye:active {
visibility: hidden;
}
#righteye:active > #right-text {
visibility: visible;
}
#mouth {
position: absolute;
left: 150px;
top: 200px;
border-radius: 100%;
border-bottom: 20px solid black;
height: 50x;
width: 100px;
}
#left-text {
position: absolute;
left: 50px;
top: 150px;
visibility: hidden;
display: inline
}
#right-text {
position: absolute;
left: -150px;
top: 150px;
visibility: hidden;
display: inline;
}
#leftx {
position: absolute;
left: 10px;
top: 20px;
font-size: 10px;
}
#rightx {
position: absolute;
left: 10px;
top: 20px;
font-size: 10px;
}
</style>
<body>
<div id="face"></div>
<div id="lefteye">
<div id="left-text">"Ouch! My left eye hurts!".</div>
</div>
<div id="righteye">
<div id="right-text">"Ouch! My right eye hurts!".</div>
</div>
<div id="mouth"></div>
<div id="leftx">X</div>
<div id="rightx">X</div>
</body>
</html>
<!DOCTYPE html> <html lang="en-US">
<head>
<title>Smiley Face</title>
<meta charset="utf-8">
<style>
#face {
margin: auto;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: white;
}
#lefteye {
position:absolute;
left:75px;
top:75px;
background-color: black;
border-radius: 50%;
width: 50px;
height: 50px;
}
#lefteye:active {
visibility: hidden;
}
#lefteye:active > #left-text {
visibility: visible;
}
#righteye {
position:absolute;
left:75px;
top:75px;
background-color: black;
border-radius: 50%;
width: 50px;
height: 50px;
}
#righteye:active {
visibility: hidden;
}
#righteye:active > #right-text {
visibility: visible;
}
#mouth {
position: absolute;
left: 150px;
top: 200px;
border-radius: 100%;
border-bottom: 20px solid black;
height: 50x;
width: 100px;
}
#left-text {
position: absolute;
left: 50px;
top: 150px;
visibility: hidden;
display: inline
}
#right-text {
position: absolute;
left: -150px;
top: 150px;
visibility: hidden;
display: inline;
}
#leftx {
position: absolute;
left: 10px;
top: 20px;
font-size: 10px;
}
#rightx {
position: absolute;
left: 10px;
top: 20px;
font-size: 10px;
}
</style>
<body>
<div id="face"></div>
<div id="lefteye">
<div id="left-text">"Ouch! My left eye hurts!".</div>
</div>
<div id="righteye">
<div id="right-text">"Ouch! My right eye hurts!".</div>
</div>
<div id="mouth"></div>
<div id="leftx">X</div>
<div id="rightx">X</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> In class activity 9/14</title>
</head>
<style type="text/css">
.circle {
border-radius: 100px;
background-color: red;
height: 200px;
width: 200px;
position: relative;
}
.leftEye {
font-size:.6in;
left:40px;
top:30px;
position: absolute;
}
.leftEye:focus-within .leftEyeX{
display:block;
top:30px;
position: absolute;
}
.leftEye:focus-within .leftEyeText{
display:block;
top:100px;
position: absolute;
}
.leftEyeX {
display: none;
}
.rightEye {
font-size:.6in;
left:130px;
top:30px;
position: absolute;
}
.rightEye:focus-within .rightEyeX{
display:block;
top:30px;
position: absolute;
}
.rightEye:focus-within .rightEyeText{
display:block;
top:100px;
position: absolute;
}
.rightEyeX {
display: none;
}
.leftEyeText {
display: none;
}
.rightEyeText {
display: none;
}
.mouth {
top:150px;
left: 70px;
position: absolute;
}
a {
text-decoration: none;
}
</style>
<body>
<div class="circle">
<div class="leftEye">
<a href="">.</a>
<div class="leftEyeX">
X
</div>
<p class="leftEyeText">Ouch! My left eye hurts!</p>
</div>
<div class="rightEye">
<a href="">.</a>
<div class="rightEyeX">
X
</div>
<p class="rightEyeText">Ouch! My right eye hurts!</p>
</div>
<div class="mouth">
\---------/
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> In class activity 9/14</title>
</head>
<style type="text/css">
.circle {
border-radius: 100px;
background-color: red;
height: 200px;
width: 200px;
position: relative;
}
.leftEye {
font-size:.6in;
left:40px;
top:30px;
position: absolute;
}
.leftEye:focus-within .leftEyeX{
display:block;
top:30px;
position: absolute;
}
.leftEye:focus-within .leftEyeText{
display:block;
top:100px;
position: absolute;
}
.leftEyeX {
display: none;
}
.rightEye {
font-size:.6in;
left:130px;
top:30px;
position: absolute;
}
.rightEye:focus-within .rightEyeX{
display:block;
top:30px;
position: absolute;
}
.rightEye:focus-within .rightEyeText{
display:block;
top:100px;
position: absolute;
}
.rightEyeX {
display: none;
}
.leftEyeText {
display: none;
}
.rightEyeText {
display: none;
}
.mouth {
top:150px;
left: 70px;
position: absolute;
}
a {
text-decoration: none;
}
</style>
<body>
<div class="circle">
<div class="leftEye">
<a href="">.</a>
<div class="leftEyeX">
X
</div>
<p class="leftEyeText">Ouch! My left eye hurts!</p>
</div>
<div class="rightEye">
<a href="">.</a>
<div class="rightEyeX">
X
</div>
<p class="rightEyeText">Ouch! My right eye hurts!</p>
</div>
<div class="mouth">
\---------/
</div>
</div>
</body>
</html>
2022-09-16
<!DOCTYPE html>
<html lang="en">
<head>
(Edited: 2022-09-16)
<meta charset="UTF-8">
<title>Smiley Face</title>
<style>
.face{
position: relative;
border: 2px solid black;
height: 500px;
width: 500px;
border-radius: 50%;
margin-bottom: 50px;
}
.left-eye, .right-eye{
text-align: center;
font-size: 0px;
position: absolute;
top: 100px;
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 50%;
}
.left-eye{
left: 100px;
}
.right-eye{
right: 100px;
}
.left-eye:active, .right-eye:active{
border: 0px;
font-size: 100px;
}
.mouth{
position: absolute;
top: 350px;
left: 100px;
height: 50px;
width: 300px;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head>
<body>
<div class="face">
<div class="left-eye">
X
<p style="position: fixed; bottom: 0px; left:0px;">Ouch! My left eye hurts!</p>
</div>
<div class="right-eye">
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>
<meta charset="UTF-8">
<title>Smiley Face</title>
<style>
.face{
position: relative;
border: 2px solid black;
height: 500px;
width: 500px;
border-radius: 50%;
margin-bottom: 50px;
}
.left-eye, .right-eye{
text-align: center;
font-size: 0px;
position: absolute;
top: 100px;
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 50%;
}
.left-eye{
left: 100px;
}
.right-eye{
right: 100px;
}
.left-eye:active, .right-eye:active{
border: 0px;
font-size: 100px;
}
.mouth{
position: absolute;
top: 350px;
left: 100px;
height: 50px;
width: 300px;
border: 2px solid black;
border-radius: 10px 10px 200px 200px;
}
</style>
</head>
<body>
<div class="face">
<div class="left-eye">
X
<p style="position: fixed; bottom: 0px; left:0px;">Ouch! My left eye hurts!</p>
</div>
<div class="right-eye">
X
<p style="position: fixed; bottom: 0px; left: 0px;">Ouch! My right eye hurts!</p>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
(c) 2024 Yioop - PHP Search Engine