1. Open bakery-styles.css in a text editor and start by making the ul ele- ment in the nav element as neutral as possible: nav ul { margin: e; padding: e; list-style-type: none;} Turn that ul element into a flexbox by setting its display to flex. As a result, all of the li elements become flex items. Because we want rows and no wrapping, the default values for flex-direction and flex-wrap are fine, so the properties can be omitted: nav ul { - display: flex;} Save the document and look at it in a browser. You should see that the links are lined up tightly in a row, which is an improvement, but we have more work to do. 2. Now we can work on the appearance of the links. Start by making the a elements in the nav list items đisplay as block elements instead of inline. Give them 1px rounded borders, padding within the borders (.5em top and bottom, 1em left and right), and .5em margins to give them space and to open up the brown navigation bar. nav ul li a { display: block; border: 1px solid; border-r 3. We want the navigation menu to be centered in the width of the nav sec- tion. I'm getting a litte ahead here because we haven't seen alignment properties yet, but this one is fairly intuitive. Consider it a preview of what's coming up in the next section. Add the following declaration for the nav ul element: nav ul { display: flex; justify-content: center;}
@charset "UTF-8";
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
margin: 0;
}
/* link styles */
a:link, a:visited { color: #DC6903; }
a:focus, a:hover, a:active { color: #F9AB33; }
a {
text-decoration: none;
border-bottom: 1px dotted;
padding-bottom: .2em;
}
/* header styles */
header {
color: white;
background: url(images/croissants_banner.jpg) no-repeat center center;
background-size: cover;
text-align: center;
height: 15em;
}
header p {
font-style: italic;
font-size: 1.2em;
margin-top: -12px;
}
header h1 {
margin-top: 1.5em;
}
/* nav styles */
nav, footer {
font-family: verdana, sans-serif;
background-color: #783F27;
}
nav ul li a:link, nav ul li a:visited {
color: #F9AB33;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
color: #fff;
}
nav ul {
margin: 0;
}
nav ul li {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .2em;
}
/* main "products" styles */
main {
font-family: 'Stint Ultra Expanded', Georgia, serif;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
border: double 4px #EADDC4;
border-radius: 25px;
margin: 2.5%;
}
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
border-left: 3px solid;
padding-left: 1em;
margin-top: 2.5em;
}
p.more {
font-family: verdana, sans-serif;
text-transform: uppercase;
font-size: .8em;
clear: left;
}
main img {
float: left;
margin: 0 1em 1em 0;
}
img[src*="bread"] {
-webkit-shape-outside: ellipse(130px 95px at 50% 50%);
shape-outside: ellipse(130px 95px at 50% 50%);
}
img[src*="muffin"] {
margin-left: 50px;
-webkit-shape-outside: circle(125px);
shape-outside: circle(125px);
-webkit-shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);
shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);
}
/* aside "hours" styles */
aside {
background: url(images/scallop.png) repeat-y left top;
background-color: #F6F3ED;
padding: 1em;
padding-left: 45px;
border-top-right-radius: 25px;
margin: 1em 2.5% 0 10%;
}
/* misc styles */
footer {
color: #EADDC4;
text-align: center;
font-size: .8em;
padding: 1em;
}
#award {
position: fixed;
top: 30px;
left: 50px;
}
h2 {
font-family: 'Stint Ultra Expanded', Georgia, serif;
}
.day {
color: #783F27;
font-family: verdana, sans-serif;
font-size: .8em;
text-transform: uppercase;
}
/* CSS Document */
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
