xavi-/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="intro">
            <h1>My Favorites</h1>
            <p>This webapge has some of my <em>most favorite</em> things in the <strong>world</strong>!</p>
        </div>
        <div id="favorites">
            <div id="fav-tv" class="favorite">
                <h2>Favorite TV/Movies</h2>
                <ol>
                    <li>Avatar</li>
                    <li>Rick and Morty</li>
                    <li>Captain America</li>
                </ol>
            </div>
            <div id="fav-food" class="favorite">
                <h2>Favorite Food</h2>
                <ol>
                    <li>Shwarma</li>
                    <li>Bibimbap</li>
                    <li>Pizza</li>
                </ol>
            </div>
            <div id="fav-animals" class="favorite">
                <h2>Favorite Animals</h2>
                <ol>
                    <li>Zoey</li>
                    <li>Zozo</li>
                    <li>Tiny Z</li>
                </ol>
            </div>
        </div>
    </body>
</html>

## styles.css
body {  background: #daede2; font-family: arial; }
h1, h2 { text-align: center; padding: 0; margin: 0px; }
h2 { font-size: 16px; }

#intro {
    background: white;
    padding: 25px;
    border-radius: 5px;
}
#favorites { display: flex; }
.favorite {
    border-radius: 5px;
    padding: 15px;
    margin: 5px;
    flex-grow: 1;
}
.favorite:first-child { margin-left: 0; }
.favorite:last-child { margin-right: 0; }

.favorite ol { margin: 0px; padding: 10px 15px; }

.favorite li:first-child { font-size: 24px; }
.favorite li:last-child { font-size: 12px; }

#fav-tv { background: #ddddff; }
#fav-food { background: #ddffff; }
#fav-animals { background: #ffdddd; }

#fav-tv li { font-family: "Times New Roman"; }
#fav-food li { font-family: "Comic Sans MS"; }
#fav-animals li { font-family: "Impact"; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div id="intro">
	<h1>My Favorites</h1>
	<p>This webapge has some of my <em>most favorite</em> things in the <strong>world</strong>!</p>
	</div>
	<div id="favorites">
	<div id="fav-tv" class="favorite">
	<h2>Favorite TV/Movies</h2>
	<ol>
	<li>Avatar</li>
	<li>Rick and Morty</li>
	<li>Captain America</li>
	</ol>
	</div>
	<div id="fav-food" class="favorite">
	<h2>Favorite Food</h2>
	<ol>
	<li>Shwarma</li>
	<li>Bibimbap</li>
	<li>Pizza</li>
	</ol>
	</div>
	<div id="fav-animals" class="favorite">
	<h2>Favorite Animals</h2>
	<ol>
	<li>Zoey</li>
	<li>Zozo</li>
	<li>Tiny Z</li>
	</ol>
	</div>
	</div>
	</body>
	</html>
	body { background: #daede2; font-family: arial; }
	h1, h2 { text-align: center; padding: 0; margin: 0px; }
	h2 { font-size: 16px; }

	#intro {
	background: white;
	padding: 25px;
	border-radius: 5px;
	}
	#favorites { display: flex; }
	.favorite {
	border-radius: 5px;
	padding: 15px;
	margin: 5px;
	flex-grow: 1;
	}
	.favorite:first-child { margin-left: 0; }
	.favorite:last-child { margin-right: 0; }

	.favorite ol { margin: 0px; padding: 10px 15px; }

	.favorite li:first-child { font-size: 24px; }
	.favorite li:last-child { font-size: 12px; }

	#fav-tv { background: #ddddff; }
	#fav-food { background: #ddffff; }
	#fav-animals { background: #ffdddd; }

	#fav-tv li { font-family: "Times New Roman"; }
	#fav-food li { font-family: "Comic Sans MS"; }
	#fav-animals li { font-family: "Impact"; }