-Flexbox-L4-
-HTML-
<body> <div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Information</a></li> <li><a href="#">Map</a></li> </ul> </nav> <p><img src="../images/Pex416118.jpg" alt=""></p> </div> </body>
-CSS-
* { margin: 0; padding: 0; } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } body { background: powderblue url(../images/Pattern1.png); background-size: 30px; } div { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; margin: 20px auto 0; } /* nav */ nav { flex-basis: 210px; } ul { width: 200px; padding: 10px 0 10px 10px; background: lightgray; list-style: none; } li:not(:last-of-type) { margin-bottom: 5px; } a { display: block; background: lavender; line-height: 70px; text-align: center; text-decoration: none; color: darkslategray; } a:hover { background: midnightblue; color: lavender; } /* photo */ p { flex-basis: 540px; border-left: solid 20px midnightblue; }