PHP Search Engine

Sep 16 In-Class Exercise Thread .

Please post your solutions to the Sep 16 In-Class Exercise to this thread.

Best,

Chris

Please post your solutions to the Sep 16 In-Class Exercise to this thread. Best, Chris

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A happy face</title> <style> .face{ height:400px; width:400px; border:3px solid black; border-radius:50%; background: #FFF2E6; position:absolute; left:50%; top:50%; margin-top:-203px; margin-left:-203px; } .eye1{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; left:70px; top:100px; } .eye2{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; right:70px; top:100px; } .mouth{ height:80px; width:100px; border:3px solid black; border-radius:50%; position:absolute; right:150px; bottom:60px; } .son{ height:160px; width:260px; background:#FFF2E6; position:absolute; bottom:100px; left:70px; }

</style>

</head> <body>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A happy face</title> <style> .face{ height:400px; width:400px; border:3px solid black; border-radius:50%; background: #FFF2E6; position:absolute; left:50%; top:50%; margin-top:-203px; margin-left:-203px; } .eye1{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; left:70px; top:100px; } .eye2{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; right:70px; top:100px; } .mouth{ height:80px; width:100px; border:3px solid black; border-radius:50%; position:absolute; right:150px; bottom:60px; } .son{ height:160px; width:260px; background:#FFF2E6; position:absolute; bottom:100px; left:70px; } </style> </head> <body> <div class="face"> <div class="eye1"></div> <div class="eye2"></div> <div class="mouth"></div> <div class="son"></div> </div> </body> </html> ((resource:WeChatbf2bdccd97ce25e0bc6c1898b3e90f45.png|Resource Description for WeChatbf2bdccd97ce25e0bc6c1898b3e90f45.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html>

<head> <title>Test</title> <style type="text/css"> div.face { float: left; background-color: sandybrown; border: 1px solid darkgoldenrod; padding: 50px; margin: 50px; box-sizing: border-box;

}

div.eye {
  display: inline;
  margin: 25px; 
  border: 25px solid brown; 
  border-radius: 50px;
  background-color: brown;  
}

div.line {
  border-bottom: 1px solid brown;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding-top: 50px;

  }
}

</style>

</head>

<body>

</body>

<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> div.face { float: left; background-color: sandybrown; border: 1px solid darkgoldenrod; padding: 50px; margin: 50px; box-sizing: border-box; } div.eye { display: inline; margin: 25px; border: 25px solid brown; border-radius: 50px; background-color: brown; } div.line { border-bottom: 1px solid brown; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; padding-top: 50px; } } </style> </head> <body> <div class="face"> <div class="eye"> </div> <div class="eye"> </div> <div class="line"> </div> </div> </body>

-- Sep 16 In-Class Exercise Thread

[[/Users/razaghulam/Documents/Screen Shot 2020-09-16 at 4.04.48 PM.png]]

-- Sep 16 In-Class Exercise Thread

This is more a neutral face than smiley but hey I rushed this.

<head> <style> face{ font-style: italic; background-color: tan; display: inline-block; border-width: 100px; border-style:hidden; width: 100pt; height: 100pt; border-radius: 30000px; } reye{ position: absolute; top: 40px; left:40px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px; } leye{ position: absolute; top: 40px; left:80px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px; } mouth{ position: absolute; top: 100px; left:60px; font-style: italic; background-color: red; display: inline-block; border-width: 100px; border-style:hidden; width: 30pt; height: 10pt; border-radius: 30000px; } </style> </head> <body> <face></face> <reye></reye> <leye> </leye> </body> <mouth> </mouth>

This is more a neutral face than smiley but hey I rushed this. <head> <style> face{ font-style: italic; background-color: tan; display: inline-block; border-width: 100px; border-style:hidden; width: 100pt; height: 100pt; border-radius: 30000px; } reye{ position: absolute; top: 40px; left:40px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px; } leye{ position: absolute; top: 40px; left:80px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px; } mouth{ position: absolute; top: 100px; left:60px; font-style: italic; background-color: red; display: inline-block; border-width: 100px; border-style:hidden; width: 30pt; height: 10pt; border-radius: 30000px; } </style> </head> <body> <face></face> <reye></reye> <leye> </leye> </body> <mouth> </mouth>

-- Sep 16 In-Class Exercise Thread

<!doctype> <html> <head><title>face</title> <style> div.face{ border-radius:150%; background: plum; height:400px; width:300px; border:1px ;

} div.eye1{ position: absolute; top: 100px; left:60px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%; } div.eye2{ position: absolute; top: 100px; left:180px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%; } div.nose{ position: absolute; top: 200px; left:120px; font-style: italic; background-color: beige; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%;}

div.mouth{
position: absolute; top: 270px; left:90px; font-style: italic; background-color: beige; display: inline-block; width: 100pt; height: 30pt; border-radius: 50%;} </style> </head>
<body> <div class="face"> <div class="eye1"></div> <div class="eye2"></div> <div class="nose"></div> <div class="mouth"></div> </div>

</body> </html>

(Edited: 2020-09-16)

<!doctype> <html> <head><title>face</title> <style> div.face{ border-radius:150%; background: plum; height:400px; width:300px; border:1px ; } div.eye1{ position: absolute; top: 100px; left:60px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%; } div.eye2{ position: absolute; top: 100px; left:180px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%; } div.nose{ position: absolute; top: 200px; left:120px; font-style: italic; background-color: beige; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%;} div.mouth{ position: absolute; top: 270px; left:90px; font-style: italic; background-color: beige; display: inline-block; width: 100pt; height: 30pt; border-radius: 50%;} </style> </head> <body> <div class="face"> <div class="eye1"></div> <div class="eye2"></div> <div class="nose"></div> <div class="mouth"></div> </div> </body> </html>

-- Sep 16 In-Class Exercise Thread

<nowiki><!DOCTYPE html> <html> <head> <style> .face{ position: fixed; top: 100px; left: 100px; background-color:#fff; border:1px solid red; height:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:100px; }

.right-eye{ position: relative; top: 20px; left: 20px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:10px; }

.left-eye{ position: relative; left: 50px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:10px; }

/* .nose{ position: relative; top: 40px; left: 40px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:5px; } */

.mouse{ position: relative; top: 10px; left: 40px; background-color:#fff; border:1px solid red; height:30px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; border-top-color: transparent; border-left-color: transparent; width:50px; }

</style> </head> <body> <div class="face"> <div class="right-eye"> </div> <div class="left-eye"> </div> <div class="nose"> </div> <div class="mouse"> </div"> </div>

</body> </html> </nowiki>

(Edited: 2020-09-16)

<nowiki><!DOCTYPE html> <html> <head> <style> .face{ position: fixed; top: 100px; left: 100px; background-color:#fff; border:1px solid red; height:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:100px; } .right-eye{ position: relative; top: 20px; left: 20px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:10px; } .left-eye{ position: relative; left: 50px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:10px; } /* .nose{ position: relative; top: 40px; left: 40px; background-color:#fff; border:1px solid red; height:10px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:5px; } */ .mouse{ position: relative; top: 10px; left: 40px; background-color:#fff; border:1px solid red; height:30px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; border-top-color: transparent; border-left-color: transparent; width:50px; } </style> </head> <body> <div class="face"> <div class="right-eye"> </div> <div class="left-eye"> </div> <div class="nose"> </div> <div class="mouse"> </div"> </div> </body> </html> </nowiki>

-- Sep 16 In-Class Exercise Thread

<html> <style> .head{ height:400px; width:400px; border:1px solid black; border-radius:50%; } .lefteye{ display:inline-block ; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; margin-top:90px; } .righteye{ display:inline-block; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; } .mouth{ height:80px; width:100px; margin-left:150px; border:1px solid black; border-radius:50%; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }

</style>

</head> <body>

<html> <style> .head{ height:400px; width:400px; border:1px solid black; border-radius:50%; } .lefteye{ display:inline-block ; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; margin-top:90px; } .righteye{ display:inline-block; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; } .mouth{ height:80px; width:100px; margin-left:150px; border:1px solid black; border-radius:50%; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } </style> </head> <body> <div class="head"> <div class="lefteye"></div> <div class="righteye"></div> <div class="mouth"></div> </div> </body> </html>

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smiley Face</title> <style> .face { height: 500px; width: 500px; border-radius: 50%; border: solid 1px; background-color: #d2b48c; position: relative; } .right-eye { position: absolute; left: 150px; top: 100px; height: 75px; width: 50px; border-radius: 50%; border: solid 1px; background-color: blue; } .left-eye { position: absolute; left: 300px; top: 100px; height: 75px; width: 50px; border-radius: 50%; border: solid 1px; background-color: blue; } .mouth { width: 200px; height: 100px; /* as the half of the width */ background-color: pink; border-bottom-left-radius: 110px; border-bottom-right-radius: 110px; border: 1px solid black; border-bottom: 0; position: absolute; left: 150px; top: 300px; } </style> </head> <body> <div class="face"> <div class="right-eye"></div> <div class="left-eye"></div> <div class="mouth"></div> </div> </body> </html>

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html> <head> <title>Happy Face</title> <meta charset="utf-8" /> <style> .face { height: 500px; width: 500px; border: 5px solid black; border-radius: 100%; background: yellow; } .right-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:25%; margin-top: 25%; } .left-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:65%; margin-top: -12%; } .mouth{ border-bottom:8px solid black; margin-left:25%; margin-top: 20%; height: 100px; width: 250px; border-radius:100%; } </style> </head> <body> <div class = "face"> <div class = "right-eye"> </div> <div class = left-eye> </div> <div class = "mouth"> </div> </div> </body> </html>

<!DOCTYPE html> <html> <head> <title>Happy Face</title> <meta charset="utf-8" /> <style> .face { height: 500px; width: 500px; border: 5px solid black; border-radius: 100%; background: yellow; } .right-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:25%; margin-top: 25%; } .left-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:65%; margin-top: -12%; } .mouth{ border-bottom:8px solid black; margin-left:25%; margin-top: 20%; height: 100px; width: 250px; border-radius:100%; } </style> </head> <body> <div class = "face"> <div class = "right-eye"> </div> <div class = left-eye> </div> <div class = "mouth"> </div> </div> </body> </html> ((resource:Capture.PNG|Resource Description for Capture.PNG))