<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h4>DreamsforSchools: Saddleback CFK</h4>
<h6>Summer 2024</h6>
</header>
<!----------- Begin coding below! ----------->
<h1>All About Me</h1>
<div id="about-me">
<!-- Introduce Yourself:
In the <h2> tag, write a short phrase to welcome people to your website.
-- EMOJIS --
You can even add an emoji by writing its "unicode." Check out the file "emoji-codes.pdf" to the left. -->
<h2>Hi I'm ____! 🍡</h2>
<p>
<!-- Write some sentences about the school you go to, what grade you are in, and your favorite subject in class! -->
</p>
<h3>Facts about me:</h3>
<!-- Below is a bullet point list in HTML.
Each bullet is wrapped with the <li> tag. List 3 or more facts about yourself. -->
<ul>
<li>FACT ONE</li>
<li>FACT TWO</li>
<li>FACT THREE</li>
</ul>
</div>
<!-- Share your favorite movie/show -->
<div id="favorite-media">
<!-- In <h2> give a title for this section about your favorite media: -->
<h2>FAVORITE SHOW/MOVIE</h2>
<p>
<!-- Write a few sentences on why this movie/show is so good! -->
</p>
<!-- Adding an Image -->
<!-- <img src="_____"> -->
<!-- Adding a Link -->
<!-- <a href="______" target="_blank">NAME OF LINK</a> -->
</div>
<!-- Share something you like to do! -->
<div id="my-hobbies">
<!-- In <h2> give a title for this activity: -->
<h2>ACTIVITY NAME</h2>
<p>
<!--Inside <p>, tell us a little more about this activty -->
</p>
<!-- Adding an Image: -->
<!-- <img src="______"> -->
<!-- Adding a Link: -->
<!-- <a href="______" target="_blank">NAME OF LINK</a> -->
</div>
<div id="mySection">
<h2>PUT YOUR TITLE HERE</h2>
<!-- In <h3> write who you want to showcase on your website: -->
<h3>FAMOUS FIGURE'S NAME</h3>
<!-- In the src attribute, paste the image address-->
<img src="FILE_LINK">
<p>
<!-- Write the description here -->
</p>
<p>
<!-- Write your thoughts here -->
</p>
</div>
<!-- Added external JavaScript -->
<script src="script.js"></script>
<!-- *** DO NOT CHANGE CODE BELOW *** -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#F2F5FF" fill-opacity="1"
d="M0,64L26.7,64C53.3,64,107,64,160,69.3C213.3,75,267,85,320,90.7C373.3,96,427,96,480,96C533.3,96,587,96,640,106.7C693.3,117,747,139,800,149.3C853.3,160,907,160,960,149.3C1013.3,139,1067,117,1120,128C1173.3,139,1227,181,1280,181.3C1333.3,181,1387,139,1413,117.3L1440,96L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z">
</path>
</svg>
<footer>
<a href="https://www.dreamsforschools.org/" target="_blank">
<img src="https://www.dreamsforschools.org/wp-content/uploads/2018/11/DFS_Logo_Full-Color_Horizontal.svg"
class="DFSlogo">
</a>
<p>This workshop was hosted by
<a href="https://www.dreamsforschools.org/" target="_blank">Dreams for Schools</a>
</p>
<p>If you enjoyed the workshop, check out the programs we offer:</p>
<a href="https://www.dreamsforschools.org/programs/" class="button" target="_blank">our programs</a>
</footer>
</body>
</html>
/* This is your CSS file where we can customize the color and font all we want! */
/* Changes here affect your whole website */
body {
/* Pick a background image: */
background-image: url("backgrounds/_IMAGE_NAME");
/* This is the font of your entire website */
font-size: 18px;
font-family: "Arial Rounded MT Bold", "serif";
}
/* Customize the titles and text of your website:
You can change color, font-size, and font-family:
color: COLOR;
font-size: NUMBERpx;
font-family: "FONT-FAMILY NAME";
*/
h1 {
color: black;
font-size: 45px;
}
h2 {
color: black;
font-size: 35px;
}
h3 {
color: black;
font-size: 25px;
}
/* Customize the colors of your sections! */
#about-me {
background-color: white;
border-style: solid;
border-color: #ffdab8;
}
#favorite-media {
background-color: white;
border-style: solid;
border-color: darkturquoise;
}
#my-hobbies {
background-color: white;
border-style: solid;
border-color: mediumseagreen;
}
#mySection {
background-color: white;
border-style: solid;
border-color: plum;
}
/* CSS for the challenge */
#randomPictureContainer {
background-color: white;
border-style: solid;
border-color: #d6644b; /* Hex Numbers! */
}
button {
/* Style the size, font, and color of the button! */
background-color: floralwhite;
/* button font */
color: darkslategray;
font-size: 20px;
font-weight: bold;
/* button border */
border-color: darkslategray;
border-style: solid;
border-radius: 8px;
/* button spacing */
padding: 8px 15px;
}
button:hover {
/* You can change how the button looks when you hover over it */
opacity: 0.6;
}
/* -- Don't change the code below -- */
body {
margin: 0;
text-align: center;
list-style-position: inside;
background-attachment: fixed;
}
a:hover {
opacity: 0.6;
}
/* for heading on top left */
header h4,
h6 {
margin: 5px;
}
header {
background-color: white;
border-color: #d2d2d2;
border-width: 10px;
border-radius: 20px;
border-style: double;
width: fit-content;
padding: 10px;
margin: 20px 0px 20px 20px;
}
/* for all sections except for challenge */
div:not(#animalImage) {
margin: auto;
margin-bottom: 35px;
padding: 15px 40px 20px 40px;
width: 70%;
border-radius: 20px;
border-width: 6px;
box-shadow: 3px 3px 10px #b8b8b8;
max-width: 900px;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
/* all images will be responsive already. No need to specify height or width */
img:not(#randompic):not(.DFSlogo) {
height: auto;
max-width: 100%;
max-height: 500px;
margin: 8px;
border-radius: 10px;
}
/* CSS specific to challenge */
#animalImage {
margin: 20px 20px 5px 20px;
max-height: 500px;
max-width: 500px;
overflow: hidden;
}
#randompic {
max-width: 100%;
max-height: 100%;
}
/* CSS for footer */
.DFSlogo {
max-width: 700px;
}
svg {
margin-bottom: -90px;
}
footer {
text-align: center;
font-size: 20px;
color: #525252;
background-color: #f2f5ff;
padding: 20px 20px 60px 20px;
}
.button {
background-color: #f7b64c;
border-radius: 50px;
padding: 15px 32px;
color: white;
font-size: 20px;
display: inline-block;
text-decoration: none;
}
.button:hover {
opacity: 0.65;
}
/* Some background patterns from Toptal Subtle Patterns */
