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>

    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="mouth"></div>
    <div class="son"></div>

</div> </body> </html>

Resource Description for WeChatbf2bdccd97ce25e0bc6c1898b3e90f45.png

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

  <div class="face">
    <div class="eye"> 
    </div>
    <div class="eye">
    </div>
    <div class="line">
    </div>
  </div>

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

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

.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; }

(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

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

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

[ Next ]