Yioop - PHP Search Engine

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en-US"> <head> <title>Watchmen Button (kinda) Face</title> </head> <style>

    .face {
    height: 50%;
    width: 50%;
    background-color: #ff0;
    border-radius: 50%;
    position: absolute;
    }
    
    .eyeL {
        height: 20%;
        width: 5%;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
        left: 190px;
        top: 150px;
    }
    
    .eyeR {
        height: 20%;
        width: 5%;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
        left: 410px;
        top: 150px;
    }
    
    .smile {
        height: 35%;
        width: 35%;
        border: 10px solid black;
        border-radius: 50%;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
        position: absolute;
        left: 190px;
        top: 300px;
    }

</style> <body>

    <div class = "face">
        <div class = "eyeL"></div>
        <div class = "eyeR"></div>
        <div class = "smile"></div>
    </div>

</body> </html>

<!DOCTYPE html> <html lang="en-US"> <head> <title>Watchmen Button (kinda) Face</title> </head> <style> .face { height: 50%; width: 50%; background-color: #ff0; border-radius: 50%; position: absolute; } .eyeL { height: 20%; width: 5%; background-color: #000; border-radius: 50%; position: absolute; left: 190px; top: 150px; } .eyeR { height: 20%; width: 5%; background-color: #000; border-radius: 50%; position: absolute; left: 410px; top: 150px; } .smile { height: 35%; width: 35%; border: 10px solid black; border-radius: 50%; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); position: absolute; left: 190px; top: 300px; } </style> <body> <div class = "face"> <div class = "eyeL"></div> <div class = "eyeR"></div> <div class = "smile"></div> </div> </body> </html>

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html> <head> <style> .face{

			float: left;
            height:300px;
            width:350px;
            border:1px yellow;
            border-radius:60%;
            background: #f0d29e;
            position:absolute;
     }

.eyeleft{

            height:60px;;
            border:3px solid;
            border-color: #4DC3FF;
            position:absolute;
            left:125px;
            top:150px;
        }

.eyeright{

            height:60px;
            border:3px solid;
            border-color: #4DC3FF;
            position:absolute;
            left:225px;
            top:150px;
 		}

.mouth{

            height:60px;
            width:100px;
            border:3px solid;
            border-color: #d91616;
            background: #d91616;
            border-radius:50%;
        	border-bottom-left-radius: 100px;
       		border-bottom-right-radius: 100px;
        	border-bottom: 10px;
            position:absolute;
            left:125px;
            top: 270px;
        }

</style> </head> <body>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .face{ float: left; height:300px; width:350px; border:1px yellow; border-radius:60%; background: #f0d29e; position:absolute; } .eyeleft{ height:60px;; border:3px solid; border-color: #4DC3FF; position:absolute; left:125px; top:150px; } .eyeright{ height:60px; border:3px solid; border-color: #4DC3FF; position:absolute; left:225px; top:150px; } .mouth{ height:60px; width:100px; border:3px solid; border-color: #d91616; background: #d91616; border-radius:50%; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; border-bottom: 10px; position:absolute; left:125px; top: 270px; } </style> </head> <body> <h1>face</h1> <div class="face"></div> <div class="eyeleft"></div> <div class="eyeright"></div> <div class="mouth"></div> </body> </html>

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html> <head>

    <style>
        .body {
            background: #EFF8FE;
        }
        .face {
            width: 400px;
            height: 400px;
            background: yellow;
            position: relative;

/* border: 5px solid green;*/

            border-radius: 50%;
            display: block;
            margin: 100px 100px;
        }
        .right-eye {
            width: 20px;
            height: 50px;
            border: 8px solid black;
            border-radius: 40%;
            float: right;
            margin: 105px 80px; 
            background: black;
        }
        .left-eye {
            width: 20px;
            height: 50px;
            border: 8px solid black;
            border-radius: 40%;
            float: left;
            margin: 105px 80px; 
            background: black;
        }
        .nose {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 170px;
            border-radius: 50%;
            margin: 210px 20px;
            background: orange;
        }
        .mouth {
            width: 150px;
            height: 65px;
            border: 10px solid red;
            border-top: 0;
            background: red;
            border-radius: 0 0 120px 120px;
            position: absolute;
            bottom: 50px;
            left: 120px;
        }
    </style>

</head>

<body>

    <div class="face">
        <div class="right-eye">
        </div>
        <div class="left-eye">
        </div>
        <div class="nose">
        </div>
        <div class="mouth">
        </div>
    </div>

</body> </html>

Resource Description for Screen Shot 2020-09-17 at 8.35.51 AM.png

<!DOCTYPE html> <html> <head> <style> .body { background: #EFF8FE; } .face { width: 400px; height: 400px; background: yellow; position: relative; /* border: 5px solid green;*/ border-radius: 50%; display: block; margin: 100px 100px; } .right-eye { width: 20px; height: 50px; border: 8px solid black; border-radius: 40%; float: right; margin: 105px 80px; background: black; } .left-eye { width: 20px; height: 50px; border: 8px solid black; border-radius: 40%; float: left; margin: 105px 80px; background: black; } .nose { width: 20px; height: 20px; position: absolute; left: 170px; border-radius: 50%; margin: 210px 20px; background: orange; } .mouth { width: 150px; height: 65px; border: 10px solid red; border-top: 0; background: red; border-radius: 0 0 120px 120px; position: absolute; bottom: 50px; left: 120px; } </style> </head> <body> <div class="face"> <div class="right-eye"> </div> <div class="left-eye"> </div> <div class="nose"> </div> <div class="mouth"> </div> </div> </body> </html> ((resource:Screen Shot 2020-09-17 at 8.35.51 AM.png|Resource Description for Screen Shot 2020-09-17 at 8.35.51 AM.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en"> <head> <meta charset="ISO-8859-1"> <title>Assignment 3</title>

	
	<style>
	.face{
	border: .05in solid black;
	width: 6in;
	height: 6in;
	background: #ecbcb4;
	border-radius: 3in;
	float: none;
	}
	.left-eye{
	width: .7in;
	height: 1in;
	border: .05in solid black; 
	background: blue;
	border-radius: 0.5in;
	margin-top: 1in;
	margin-left: 1.2in;	
	}	
	.right-eye{
	width: .7in;
	height: 1in;
	border: .05in solid black;
	background: blue;
	border-radius: 0.5in;
	float: right;
	margin-top: -1.1in;
	margin-right: 1.2in;
	}	
	.nose{
	width: .5in;
	height: .5in;
	border: .05in solid black;
	background: none;
	border-radius: 0.5in;
	margin-top: .5in;
	margin-left: 2.7in;
	}	
	.mouth{
	width: 2.5in;
	height: 1in;
	border: .05in solid black;
	background: white;
	border-radius: 0 0 2in 2in;
	margin-top: .8in;
	margin-left: 1.7in;
	}
	</style>

</head> <body>

	
	<div class="face">
		<div class="left-eye"></div>
		<div class="right-eye"></div>
		<div class="nose"></div>
		<div class="mouth"></div>
	</div>

</body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="ISO-8859-1"> <title>Assignment 3</title> <style> .face{ border: .05in solid black; width: 6in; height: 6in; background: #ecbcb4; border-radius: 3in; float: none; } .left-eye{ width: .7in; height: 1in; border: .05in solid black; background: blue; border-radius: 0.5in; margin-top: 1in; margin-left: 1.2in; } .right-eye{ width: .7in; height: 1in; border: .05in solid black; background: blue; border-radius: 0.5in; float: right; margin-top: -1.1in; margin-right: 1.2in; } .nose{ width: .5in; height: .5in; border: .05in solid black; background: none; border-radius: 0.5in; margin-top: .5in; margin-left: 2.7in; } .mouth{ width: 2.5in; height: 1in; border: .05in solid black; background: white; border-radius: 0 0 2in 2in; margin-top: .8in; margin-left: 1.7in; } </style> </head> <body> <div class="face"> <div class="left-eye"></div> <div class="right-eye"></div> <div class="nose"></div> <div class="mouth"></div> </div> </body> </html>((resource:Happy Face.png|Resource Description for Happy Face.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html> <head>

  <meta charset="utf-8">
  <title>sep 16, 2020</title>
  <style>

  .face {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: lightyellow;
    position: absolute;
    border:5px solid black;
  }
  .lefteye {
    width: 20px;
    height: 40px;
    border-radius: 50%;
    background: black;
    float: left;
    position: absolute;
    top: 150px;
    left: 150px;
  }
  .righteye {
    width: 20px;
    height: 40px;
    border-radius: 50%;
    background: black;
    float: left;
    position: absolute;
    top: 150px;
    left: 300px;
  }
  .lip {
    width: 250px;
    height: 100px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border: 10px solid lightpink;
    border-top: 10px solid lightyellow;
    position: absolute;
    top: 300px;
    left: 125px;
  }
  </style>

</head> <body>

  <div class = "face">
    <div class = "lip"></div>
    <div class = "righteye"></div>
    <div class = "lefteye"></div>
  </div>

</body> </html>

Resource Description for Screen Shot 2020-09-16 at 4.43.45 PM.png

(Edited: 2020-09-16)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sep 16, 2020</title> <style> .face { width: 500px; height: 500px; border-radius: 50%; background: lightyellow; position: absolute; border:5px solid black; } .lefteye { width: 20px; height: 40px; border-radius: 50%; background: black; float: left; position: absolute; top: 150px; left: 150px; } .righteye { width: 20px; height: 40px; border-radius: 50%; background: black; float: left; position: absolute; top: 150px; left: 300px; } .lip { width: 250px; height: 100px; border-bottom-left-radius: 110px; border-bottom-right-radius: 110px; border: 10px solid lightpink; border-top: 10px solid lightyellow; position: absolute; top: 300px; left: 125px; } </style> </head> <body> <div class = "face"> <div class = "lip"></div> <div class = "righteye"></div> <div class = "lefteye"></div> </div> </body> </html> ((resource:Screen Shot 2020-09-16 at 4.43.45 PM.png|Resource Description for Screen Shot 2020-09-16 at 4.43.45 PM.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html>

    <head>
        <title>Happy Face</title>
        <meta charset="UTF-8">
        <style>
            .face{
                height:300px;
                width:300px;
                background-color:burlywood;
                border:1px;
                border-radius:150%;
                position:absolute;
            }
            .left-eye{
               left:50px;
               top:50px;
               height:50px;
               width:50px;
               background-color:black;
               border: 1px;
               border-radius:150%;
               position: absolute;
            }
            .right-eye{
               left:200px;
               top:50px;
               height:50px;
               width:50px;
               background-color:black;
               border: 1px;
               border-radius:150%;
               position: absolute;
            }
            .mouth{
                
                height:50px;
                width:100px;
                left:100px;
                top:200px;
                border-bottom-left-radius: 50px;
                border-bottom-right-radius: 50px;
                background-color:black;
                position:absolute
            }
        </style>
    </head>
    <body>
        <div class = "face">
            <div class ="left-eye"></div>
            <div class ="right-eye"></div>
            <div class ="mouth"></div>
        </div>
    </body>

</html>

Resource Description for Screen Shot 2020-09-16 at 4.57.07 PM.png

(Edited: 2020-09-16)

<!DOCTYPE html> <html> <head> <title>Happy Face</title> <meta charset="UTF-8"> <style> .face{ height:300px; width:300px; background-color:burlywood; border:1px; border-radius:150%; position:absolute; } .left-eye{ left:50px; top:50px; height:50px; width:50px; background-color:black; border: 1px; border-radius:150%; position: absolute; } .right-eye{ left:200px; top:50px; height:50px; width:50px; background-color:black; border: 1px; border-radius:150%; position: absolute; } .mouth{ height:50px; width:100px; left:100px; top:200px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color:black; position:absolute } </style> </head> <body> <div class = "face"> <div class ="left-eye"></div> <div class ="right-eye"></div> <div class ="mouth"></div> </div> </body> </html> ((resource:Screen Shot 2020-09-16 at 4.57.07 PM.png|Resource Description for Screen Shot 2020-09-16 at 4.57.07 PM.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html>

<head>

  <title>Happy Face</title>
  <style>
    .face {
      height: 100px;
      width: 100px;
      background-color: #FEE3D4;
      border-radius: 50px;
      border: solid #000 2px;
    }

    .right-eye {
      height: 20px;
      width: 20px;
      background-color: green;
      margin-left: 20%;
      margin-top: 20%;
      border-radius: 80px;
      border: solid #FFF 3px;
    }

    .left-eye {
      height: 20px;
      width: 20px;
      background-color: green;
      margin-left: 60%;
      margin-top: -25%;
      border-radius: 80px;
      border: solid #FFF 3px;

    .nose {
      height: 5px;
      width: 5px;
      background-color: black;
      margin-left: 50%;
      margin-top: 10%;
      border-radius: 20px;
    }

    .mouth {
      height: 15px;
      width: 25px;
      background-color: lightsalmon;
      margin-left: 40%;
      margin-top: 10%;
      border-bottom-left-radius: 130px;
      border-bottom-right-radius: 100px;
      border: solid #000 1px;

    }
  </style>

</head>

<body>

  <div class="face">
    <div class="right-eye">
    </div>
    <div class="left-eye">
    </div>
    <div class="nose">
    </div>
    <div class="mouth">
    </div>
  </div>

</body>

</html>

<!DOCTYPE html> <html> <head> <title>Happy Face</title> <style> .face { height: 100px; width: 100px; background-color: #FEE3D4; border-radius: 50px; border: solid #000 2px; } .right-eye { height: 20px; width: 20px; background-color: green; margin-left: 20%; margin-top: 20%; border-radius: 80px; border: solid #FFF 3px; } .left-eye { height: 20px; width: 20px; background-color: green; margin-left: 60%; margin-top: -25%; border-radius: 80px; border: solid #FFF 3px; } .nose { height: 5px; width: 5px; background-color: black; margin-left: 50%; margin-top: 10%; border-radius: 20px; } .mouth { height: 15px; width: 25px; background-color: lightsalmon; margin-left: 40%; margin-top: 10%; border-bottom-left-radius: 130px; border-bottom-right-radius: 100px; border: solid #000 1px; } </style> </head> <body> <div class="face"> <div class="right-eye"> </div> <div class="left-eye"> </div> <div class="nose"> </div> <div class="mouth"> </div> </div> </body> </html>((resource:0Q35N2Y.png|Resource Description for 0Q35N2Y.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html> <head>

  <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:-200px;
    margin-left:-200px;
  }
  
  .left-eye{
    height:50px;
    width:100px;
    border:3px solid;
    border-color: #000;
    border-radius:50%;
    position:absolute;
    left:70px;
    top:100px;
  }
  
  .left-iris{
    height: 35px;
    width: 35px;
    border: 10px solid brown;
    border-radius: 50%;
    background: black;
    position: absolute;
    left: 95px;
    top: 100px;
  }
  
  .right-eye{
    height:50px;
    width:100px;
    border:3px solid;
    border-color: #000;
    border-radius:50%;
    position:absolute;
    right:70px;
    top:100px;
  }
  
  .right-iris{
    height: 35px;
    width: 35px;
    border: 10px solid brown;
    border-radius: 50%;
    background: black;
    position: absolute;
    right: 95px;
    top: 100px;
  }
  
  .mouth{
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    border-bottom: 30px solid brown;
    height: 250px;
    width: 150px;
    position: absolute;
    left: 130px;
    right: 100px;
    top: 50px;
  }
  
  .nose{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #000;
    border-radius: 50%;
    position: absolute;
    left: 160px;
    right: 100px;
    top: 180px;
  }
  
  .shape-nose{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #FFF2E6;
    border-radius: 60%;
    position: absolute;
    left: 170px;
    right: 100px;
    top: 174px;
  }

</style> </head> <body>

  
  <div class="face">
    <div class="mouth"></div>
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="left-iris"></div>
    <div class="right-iris"></div>
    <div class="nose"></div>
    <div class="shape-nose"></div>
  </div>

</body> </html>

Resource Description for Screen Shot 2020-09-16 at 5.45.52 PM.png

(Edited: 2020-09-16)

<!DOCTYPE html> <html> <head> <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:-200px; margin-left:-200px; } .left-eye{ height:50px; width:100px; border:3px solid; border-color: #000; border-radius:50%; position:absolute; left:70px; top:100px; } .left-iris{ height: 35px; width: 35px; border: 10px solid brown; border-radius: 50%; background: black; position: absolute; left: 95px; top: 100px; } .right-eye{ height:50px; width:100px; border:3px solid; border-color: #000; border-radius:50%; position:absolute; right:70px; top:100px; } .right-iris{ height: 35px; width: 35px; border: 10px solid brown; border-radius: 50%; background: black; position: absolute; right: 95px; top: 100px; } .mouth{ border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; border-bottom: 30px solid brown; height: 250px; width: 150px; position: absolute; left: 130px; right: 100px; top: 50px; } .nose{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 50px solid #000; border-radius: 50%; position: absolute; left: 160px; right: 100px; top: 180px; } .shape-nose{ width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid #FFF2E6; border-radius: 60%; position: absolute; left: 170px; right: 100px; top: 174px; } </style> </head> <body> <div class="face"> <div class="mouth"></div> <div class="left-eye"></div> <div class="right-eye"></div> <div class="left-iris"></div> <div class="right-iris"></div> <div class="nose"></div> <div class="shape-nose"></div> </div> </body> </html> ((resource:Screen Shot 2020-09-16 at 5.45.52 PM.png|Resource Description for Screen Shot 2020-09-16 at 5.45.52 PM.png))

-- Sep 16 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Human Face</title>
    <style media="screen">
      .head {
        background-color: #EBCCAB;
        border: 1px solid black;
        border-radius: 50%;
        width: 400px;
        height: 400px;
        margin: 50px;
      }
      .left-eye {
        background-color: blue;
        border: 10px solid white;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        margin-left: 30%;
        margin-top: 30%;

      }
      .right-eye {
        background-color: blue;
        border: 10px solid white;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        margin-left: 60%;
        margin-top: -12%;
      }
      .mouth {
        border: 3px solid black;
        border-top: none;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        height: 100px;
        margin-left: 25%;
        margin-top: 10%;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="head">
      <div class="left-eye">
      </div>
      <div class="right-eye">
      </div>
      <div class="mouth">
      </div>
    </div>
  </body>

</html>

(Edited: 2020-09-16)

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Human Face</title> <style media="screen"> .head { background-color: #EBCCAB; border: 1px solid black; border-radius: 50%; width: 400px; height: 400px; margin: 50px; } .left-eye { background-color: blue; border: 10px solid white; border-radius: 50%; height: 30px; width: 30px; margin-left: 30%; margin-top: 30%; } .right-eye { background-color: blue; border: 10px solid white; border-radius: 50%; height: 30px; width: 30px; margin-left: 60%; margin-top: -12%; } .mouth { border: 3px solid black; border-top: none; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; height: 100px; margin-left: 25%; margin-top: 10%; width: 200px; } </style> </head> <body> <div class="head"> <div class="left-eye"> </div> <div class="right-eye"> </div> <div class="mouth"> </div> </div> </body> </html> ((resource:hooman.png|Resource Description for hooman.png))

-- Sep 16 In-Class Exercise Thread

  <head>
    <meta charset="utf-8" />
    <title>Week 5</title>
    <style type="text/css">
      .head {
        display: block;
        float: left;
        background-size: 500px;
        background-color: bisque;
        border: 10px solid salmon;
        padding: 50px;
        border-radius: 50%;
      }
      .eyes {
        display: block;
        margin: 20px 10px 0px;
        padding-left: 10%;
      }

      .eye-left {
        display: inline;
        background-color: black;
        padding: 10px;
        border: 40px solid white;
        border-radius: 50%;
      }
      .eye-right {
        display: inline;
        background-color: black;
        padding: 10px;
        border: 40px solid white;
        border-radius: 50%;
      }
      .mouth {
        display: block;
        margin: 60px 10px 0px;
        border: 1px solid black;
        background: red;
        border-radius: 0 0 120px 120px;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="head">
      <div class="eyes">
        <div class="eye-left"></div>

        <div class="eye-right"></div>
      </div>

      <div class="mouth"></div>
    </div>
  </body>

</html> <pre>

Resource Description for Screenshot 2020-09-16 231727.png

<pre> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Week 5</title> <style type="text/css"> .head { display: block; float: left; background-size: 500px; background-color: bisque; border: 10px solid salmon; padding: 50px; border-radius: 50%; } .eyes { display: block; margin: 20px 10px 0px; padding-left: 10%; } .eye-left { display: inline; background-color: black; padding: 10px; border: 40px solid white; border-radius: 50%; } .eye-right { display: inline; background-color: black; padding: 10px; border: 40px solid white; border-radius: 50%; } .mouth { display: block; margin: 60px 10px 0px; border: 1px solid black; background: red; border-radius: 0 0 120px 120px; height: 100px; width: 100px; } </style> </head> <body> <div class="head"> <div class="eyes"> <div class="eye-left"></div> <div class="eye-right"></div> </div> <div class="mouth"></div> </div> </body> </html> <pre> ((resource:Screenshot 2020-09-16 231727.png|Resource Description for Screenshot 2020-09-16 231727.png))