<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>