Answer Happy

* { box-sizing: border-box;}
body { background-color: #5280C5;
color: #003366;
font-family: Verdana, Arial, sans-serif;
margin: 0;
}
#wrapper { background-color: #F0F0F0;
}
header { background-color: #000066;
background-image: url(../images/lilfish.gif);
background-position: center;
background-repeat: no-repeat;
color: #F0F0F0;
font-family: Georgia, "Times New Roman", serif;
padding: 1em;
text-align: center;
}
header a { text-decoration: none; }
header a:link { color: #F0F0F0; }
header a:visited { color: #F0F0F0; }
header a:hover { color: #AEC3E3; }
h1 { font-size: 2em;
padding: 0.2em;
text-shadow: 3px 3px 3px #CCC; }
h2 { font-size: 1.2em;
text-shadow: 1px 1px 1px #777; }
nav { text-align: center;
}
nav ul { display: flex;
flex-direction: column;
font-size: 1.5em;
list-style-type: none;
margin: 0;
padding: 0;
}
nav li { border-bottom: 1px solid #AEC3E3;
padding-bottom: .5em;
padding-top: .5em;
width: 100%;
}
nav a { text-decoration: none; }
nav a:link { color: #000066; }
nav a:visited { color: #5280C5; }
nav a:hover { color: #3262A3; }
main { background-color: #FFF;
border: 1px solid #AEC3E3;
display: block;
overflow: auto;
padding-left: 2em;
padding-right: 2em;
}
dt { color: #5280C5;
font-size: 1.1em;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
}
section { background-color: #EAEAEA;
margin-bottom: 1em;
margin-right: 1em;
padding: 0;
}
section h3 { background-color: #AEC3E3;
font-size: 110%;
margin-bottom: 0;
margin-top: 0;
padding: .25em;
}
section p { padding: 0 .25em .25em .25em; }
.category { color: #5380C5;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
}
.address { clear: left; }
#mobile { display: inline; }
#desktop { display: none; }
footer { background-color: #AEC3E3;
font-size: .70em;
font-style: italic;
padding: 1em;
text-align: center;
}
table { margin: 1em;
border: 2px solid #000033;
border-collapse: collapse;
}
td, th { padding: 0.5em;
border: 1px solid #000033;
}
form { display: flex;
flex-direction: column;
padding-left: 1em; width: 80%; }
input, textarea { margin-bottom: .5em; }

@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
h1 { animation: fadein 5s ease-out;
animation-fill-mode: forwards; }
@media (min-width: 600px) {
header { background-image: url(../images/bigfish.gif); }
h1 { font-size: 3em; }
nav ul { flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around; }
nav li { border-bottom: none; }
#flow { display: flex;
flex-flow: row wrap; }
section { flex: 1;
min-width: 30%; }
dl { flex: 2; }
article { flex: 2; }
img { flex: 1; }
#mobile { display: none; }
#desktop { display: inline; }
form { width: 40%;
display: grid;
grid-gap: 1em; gap: 1em;
grid-template-columns: 6em 1fr; }
input[type="submit"] { grid-column: 2 / 3;
width: 9em; }
label { text-align: right; }
}
@media (min-width: 1024px) {
@supports (display: grid) {
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
#wrapper { display: grid;
grid-template:
"header header"
"nav main"
"footer footer"
/ 180px ; }
nav ul { flex-direction: column;
font-weight: bold;
font-size: 1.25em; }
}
}The example above creates a website about s fish creek clinic. Use the same format to create a website about Serena Williams the tennis player