Codecademy About You Exercises 18 to 20

<!-- sample solutions to Padding-->
<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bigger, Better Input -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bright Buttons! -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
input[type="submit"] {
    background: limegreen;
    color: black;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

Codecademy About You Exercises 13 to 17

<!-- sample solutions to Logo Image-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Image -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Check -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Font sizes -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Remove Default Styles -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

Codecademy About You Exercises 10 to 12

<!-- sample solutions to Latest and Greatest-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>
</html>

<!-- sample solutions to Changing Color -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>

<!-- sample solutions to Fonts -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>

Codecademy About You Exercises 5 to 9

<!-- sample solutions to Adding Style-->

<style>

</style>

<!-- sample solutions to Center your Heading-->

<style>
h1 {
    text-align: center;
}
</style>

<!-- sample solutions to Center your Paragraph-->

<style>
h1, p {
    text-align: center;
}
</style>

<!-- sample solutions to Work Your Body-->

<style>
body {
    text-align: center;
}
</style>
<body>
   
</body>

<!-- sample solutions to Good Head on your Shoulders-->

<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>

Codecademy: Sun, Earth, and Code List of Sample Solutions

This page serves as a quick way to access all the sample solutions to Codecademy's Sun, Earth, and Code exercises. I hope it will help you out. If you have any questions, suggestions, or comments, just fill out the form at the end.

• Sun, Earth, and Code: Add the Earth! 
• Sun, Earth, and Code: Position the Sun and the Earth
• Sun, Earth, and Code: Sun and Earth Styles
• Sun, Earth, and Code: Prepare to orbit the sun
• Sun, Earth, and Code: Orbit with style!
• Sun, Earth, and Code: Spin please

Codecademy - Sun, Earth, and Code: Spin please

// Sample solution to style.css

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
   
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
   
    border-color: orange;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    border-shadow: 0 0 64px yellow;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 7%;
    left: 25%;
   
    height: 50px;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

#earth-orbit {
    /* For Section #2 */
    position: absolute;
    top: 50%;
    left: 50%;
   
    height: 500px;
    width: 500px;
    margin-left: -250px;
    margin-top: -250px;
   
    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
   
    -webkit-animation: spin-right 10s linear infinite;
    -moz-animation: spin-right 10s linear infinite;
    -ms-animation: spin-right 10s linear infinite;
    -o-animation: spin-right 10s linear infinite;
    animation: spin-right 10s linear infinite;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Back to list of sample solutions for Sun, Earth, and Code

Codecademy - Sun, Earth, and Code: Orbit with style!

// Sample solution to style.css

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
   
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
   
    border-color: orange;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    border-shadow: 0 0 64px yellow;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
   
    height: 50px;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

#earth-orbit {
    /* For Section #2 */
    position: absolute;
    top: 50%;
    left: 50%;
   
    height: 500px;
    width: 500px;
    margin-left: -250px;
    margin-top: -250px;
   
    border-width: 2px;
    border-style: dotted;
    border-color: white;

    border-radius: 50%;


}

Back to list of sample solutions for Sun, Earth, and Code

Codecademy - Sun, Earth, and Code: Sun and Earth Styles

//Sample solution to style.css

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
   
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
   
    border-color: orange;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    border-shadow: 0 0 64px yellow;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
}

#earth-orbit {
    /* For Section #2 */
}

Back to list of sample solutions for Sun, Earth, and Code

Codecademy - Sun, Earth, and Code: Position the Sun and the Earth

//Sample solution to style.css

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
   
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
}

#earth-orbit {
    /* For Section #2 */
}

Back to list of sample solutions for Sun, Earth, and Code

#Codeschool CSS Level 1 Sample Solution Columns

//sample solution to style.css


article {
  float: left;
  width: 120px;
}
aside {
  float: right;
  width: 120px;
}

#Codeschool CSS Level 1 Sample Solution Floats

//sample solution to style.css


aside {
  width: 120px;
  float: right;
  margin: 0px 0px 10px 10px;
}

#Codeschool CSS Level 1 Sample Solution Style Specificity

<!-- Sample solution to index.html-->


<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
 
  <body>
    <section class="content home">
      <header>
        <h1>Sven's Snowshoe Emporium</h1>
        <h2>"For the Snow-Savvy Shoe-Shopper"</h2>
      </header>
    </section>
  </body>
</html>

//Sample solution to style.css


header {
  background: #e0e2e6;
}

#Codeschool CSS Level 1 Sample Solution Compound Selector

//Sample solution to style.css


.content {
  border: 2px solid #ccc;
}
.content.home {
  border: 0px;
}

#Codeschool CSS Level 1 Sample Solution ID Selector

//Solution to style.css


#slogan {
  text-align: center;
  font-style: italic
}

#Codeschool CSS Level 1 Sample Solution External Stylesheets

<!--Solution for index.html-->

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
 
  <body>
    <section class="content">
      <header>
        <h1>Sven's Snowshoe Emporium</h1>
      </header>
    </section>
  </body>
</html>

//Solution for style.css


body {
        color: #4b4648;
        font-family: tahoma, arial, sans-serif;
        font-size: 14px;
      }
.content {
        border: 1px solid #cac3c6;
        margin: 0 auto;
        padding: 20px;
        width: 260px;
}
h1 {
        color: #6d9fac;
        font-size: 22px;
        text-align: center;
}

Codecademy Sample Solution: Projects Style It!

/* sample solution to stylesheet.css */

* {
    font-family: Calibri;
    font-size: 16px;
}  

#returning {
    margin-left: 22px;
}

#returning, #departing {
    background-color: tan;
    color: white;
    font-size: 14px;
    text-align: center;
    width: 80px;
}

Codecademy Sample Solution: Projects Drop Shadow Like It's Hot

/* sample solution to stylesheet.css */

div {
    height: 80px;
    width: 150px;
    border: 4px solid black;
    border-radius: 15px;
    background-color: yellow;
    color: black;
    font-family: impact;
    font-size: 30px;
    text-align: center;
    padding: 10px;
    box-shadow: 10px 10px 10px #888;
}

Codecademy Sample Solution: Projects Color It In

div {
    height: 80px;
    width: 150px;
    border: 4px solid black;
    border-radius: 15px;
    background-color: yellow;
    color: black;
    font-family: impact;
    font-size: 30px;
    text-align: center;
    padding: 10px;
}

Codecademy Sample Solution: Codeyear First But Not Least

/* sample solution to style.css */

/* code exists prior to this point */


dl dd:first-of-type {
    font-weight: bold;
    font-size: 1.1em;
}

Codecademy Sample Solution: Codeyear Making It Look Pretty

/* sample solution to style.css */

* {
    font-family: Calibri;
}  

.post{
    background-color: red;
    border: solid 2px red;
}

.header{
    background-color: yellow;
    border: solid 1px black;
    padding: 5px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-align: center;
}

.content{
    background-color: orange;
    border: solid black 1px;
    height: 50px;
    padding: 5px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}