* { box-sizing: border-box;} body { background-color: #5280C5; color: #003366; font-family: Verdana, Arial, san

Business, Finance, Economics, Accounting, Operations Management, Computer Science, Electrical Engineering, Mechanical Engineering, Civil Engineering, Chemical Engineering, Algebra, Precalculus, Statistics and Probabilty, Advanced Math, Physics, Chemistry, Biology, Nursing, Psychology, Certifications, Tests, Prep, and more.
Post Reply
answerhappygod
Site Admin
Posts: 899603
Joined: Mon Aug 02, 2021 8:13 am

* { box-sizing: border-box;} body { background-color: #5280C5; color: #003366; font-family: Verdana, Arial, san

Post by answerhappygod »

* { 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
Join a community of subject matter experts. Register for FREE to view solutions, replies, and use search function. Request answer by replying!
Post Reply