Макет меню #CodePenChallenge (HTML код)
<div class="container">
<div class="title">
<h1>The Cascade Cafe</h1>
<nav class="nav">
<ul class="nav--flex">
<li>about</li>
<li>menu</li>
<li>news & events</li>
</ul>
</nav>
</div>
<div class="contact">
<div class="contact--address">
<address>
<div class="location">
<svg viewBox="0 0 384 512" width="15" title="map-marker-alt">
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
</svg>
<p>123 Main Street · Smalltown, PA
<a href="#">(MAP)</a>
</p>
</div>
<div class="phone">
<svg viewBox="0 0 512 512" width="15" title="phone-alt">
<path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" />
</svg>
<a href="4125550100">412-555-0100</a>
</div>
</address>
</div>
<div class="contact--hours">
<table class="hours">
<thead>
<tr>
<th colspan="2">open seven days a week</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mon. - Thurs.</td>
<td>6 a.m. - 9 p.m.</td>
</tr>
<tr>
<td>Fri. - Sat.</td>
<td>6 a.m. - 11 p.m.</td>
</tr>
<tr>
<td>Sunday</td>
<td>8 a.m. - 2 p.m.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="menu">
<div class="coffee">
<h2>Coffee</h2>
<p class="prices"><span>Small: $2.00</span> <span>Large: $4.00</span></p>
<dl class="coffee--table">
<dt class="coffee--type">House Blend</dt>
<dd class="coffee--description">
<p>Smoky, strong, and assertive, just like us.</p>
</dd>
<dt class="coffee--type">Organic French Roast</dt>
<dd class="coffee--description">
<p>Smooth and mellow with hints of molasses.</p>
</dd>
<dt class="coffee--type">Organic Decaf</dt>
<dd class="coffee--description">
<p>Full bodied and rich, we promise you won't miss the caffiene.</p>
</dd>
</dl>
</div>
<div class="espresso">
<h2>Espresso Drinks</h2>
<p class="prices"><span>Small: $3.00</span> <span>Large: $5.00</span></p>
<dl class="espresso--table">
<dt class="espresso--type">Machiatto </dt>
<dd class="espresso--description">
<p>Espressso and steamed milk, served in a demitasse cup. <span class="note">(Size Small Only)</span></p>
</dd>
<dt class="espresso--type">Latte</dt>
<dd class="espresso--description">
<p>Espresso with steamed milk, and sometimes a little art on top. </p>
</dd>
<dt class="espresso--type">Mocha</dt>
<dd class="espresso--description">
<p>Espresso with steamed chocolate milk and whipped cream. Also available with white chocolate milk.</p>
</dd>
<dt class="espresso--type">Americano</dt>
<dd class="espresso--description">
<p>1 shot espresso, two shots hot water.</p>
</dd>
</dl>
</div>
<div class="tea">
<h2>Tea</h2>
<p class="tea--brief">Served to brave people in our notorious antique tea cups.</p>
<p class="prices"><span>Per Cup: $2.00</span><span class="note">$200 if you break the cup</span></p>
<dl class="tea--table">
<dt class="tea--type">Earl Grey </dt>
<dd class="tea--description">
<p>Black tea fragranced with bergamot.</p>
</dd>
<dt class="tea--type">Ginger Hibiscus</dt>
<dd class="tea--description">
<p>Floral, tart, and spicy. Caffeine free.</p>
</dd>
<dt class="tea--type">Cascade Green</dt>
<dd class="tea--description">
<p>A blend of green teas hand selected by our master teamaker.</p>
</dd>
<dt class="tea--type">Chamomile</dt>
<dd class="tea--description">
<p>Soothing and slightly sweet. Try it with honey! Caffeine free.</p>
</dd>
</dl>
</div>
<div class="bakery">
<h2>From the Bakery</h2>
<p class="prices"><span>Cookies: $2.00</span> <span>Muffins & Pastries: $3.00</span></p>
<dl class="bakery--table">
<dt class="bakery--type">Mallory's Famous Snickerdoodles </dt>
<dd class="bakery--description">
<p>Creamy cinnamony goodness made from scratch with our founder Mallory's prizewinning recipe.</p>
</dd>
<dt class="bakery--type">Oatmeal Cookie</dt>
<dd class="bakery--description">
<p>Packed with rolled oats, raisins, and cranberries, these monster cookies are (almost) good for ya!</p>
</dd>
<dt class="bakery--type">Mixed Berry Muffins</dt>
<dd class="bakery--description">
<p>Filled with the best berries of the season and topped with a crumb crust. </p>
</dd>
<dt class="bakery--type">Croissant</dt>
<dd class="bakery--description">
<p>Our oversized croissants are buttery, flaky, and usually all sold out by 7 a.m.</p>
</dd>
</dl>
</div>
</div>
<div class="news">
<h2>NEWS & EVENTS</h2>
<img src="https://assets.codepen.io/t-1/nathan-dumlao-6VhPY27jdps-unsplash.jpg" alt="three hands toasting with coffee drinks">
<p class="news--date">15 JUN 2021</p>
<p class="news--txt">This week we are going to have a book reading by the great New York Times Best Seller Author, Jane Austen. She will be presenting her latest release: "Pride & Justice". A romantic novel that presents the life of a middle class family in the 18th, in England.</p>
</div>
</div>
Макет меню #CodePenChallenge (CSS код)
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@100;400;900&display=swap");
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
background: #001f2d;
color: #f0f0f0;
font-family: "Overpass", sans-serif;
padding: 1rem 0;
}
h1,
h2,
p,
ul,
li,
dl,
dt,
dd {
margin: 0;
padding: 0;
}
.container {
width: 100%;
overflow: hidden;
margin: 0 auto;
border-left: 2px solid #f0f0f0;
border-right: 2px solid #f0f0f0;
border-top: 2px solid #f0f0f0;
border-bottom: 2px solid #f0f0f0;
}
@media only screen and (min-width: 375px) {
.container {
width: 375px;
}
}
@media only screen and (min-width: 850px) {
.container {
padding: 0;
display: grid;
min-width: 830px;
grid-template-columns: auto 375px;
grid-template-rows: minmax(350px, auto) minmax(350px, auto) auto;
}
}
@media only screen and (min-width: 1260px) {
.container {
min-width: 1200px;
}
}
@media only screen and (min-width: 1560px) {
.container {
min-width: 1500px;
grid-template-columns: auto 375px 375px;
}
}
.title {
padding: 2rem 30px;
border-bottom: 2px solid #f0f0f0;
}
.title h1 {
text-transform: uppercase;
font-size: 50px;
text-align: center;
}
@media only screen and (min-width: 850px) {
.title {
grid-column: 2/3;
grid-row: 1;
padding: 2.5rem 30px;
}
}
@media only screen and (min-width: 1560px) {
.title {
grid-column: 3/4;
}
}
.nav {
margin: 2rem 0;
padding: 0 30px;
}
.nav--flex {
list-style-type: none;
text-align: center;
text-transform: uppercase;
font-weight: 100;
}
.nav--flex li {
cursor: pointer;
}
.nav--flex li + li {
margin-top: 0.4rem;
}
.contact {
padding: 2.5rem 30px;
border-bottom: 2px solid #f0f0f0;
}
.contact--address .location,
.contact--address .phone {
width: 90%;
max-width: 230px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contact--address .location {
margin-bottom: 0.6rem;
text-transform: uppercase;
}
.contact--address .location p {
text-align: right;
}
.contact--address .location p a {
font-size: 12px;
color: #f0f0f0;
text-decoration: none;
}
.contact--address .phone a {
color: #f0f0f0;
text-decoration: none;
}
.contact--hours {
text-transform: uppercase;
margin-top: 3.5rem;
}
.contact--hours .hours {
margin: 0 auto;
}
.contact--hours .hours thead tr th {
padding-bottom: 1em;
font-size: 15px;
font-weight: 100;
}
.contact svg {
fill: #f0f0f0;
}
@media only screen and (min-width: 850px) {
.contact {
grid-column: 2/3;
grid-row: 2;
border: none;
align-self: center;
}
}
@media only screen and (min-width: 1560px) {
.contact {
grid-column: 3/4;
}
}
.menu {
padding: 2.5rem 30px;
border-bottom: 2px solid #f0f0f0;
}
.menu h2 {
text-transform: uppercase;
text-align: center;
margin-bottom: 0.8rem;
}
.menu .prices {
text-transform: uppercase;
display: flex;
justify-content: space-around;
font-weight: 100;
font-size: 14px;
letter-spacing: 2px;
}
@media only screen and (min-width: 850px) {
.menu {
grid-column: 1/2;
grid-row: 1/span 3;
border-bottom: 0;
border-right: 2px solid #f0f0f0;
padding-bottom: 0;
}
}
@media only screen and (min-width: 1260px) {
.menu {
padding: 2.5rem 120px;
}
}
.coffee,
.espresso,
.tea,
.bakery {
padding-bottom: 1.8rem;
}
.coffee--table,
.espresso--table,
.tea--table,
.bakery--table {
margin: 1rem 0;
}
.coffee--table :nth-child(2n+3),
.espresso--table :nth-child(2n+3),
.tea--table :nth-child(2n+3),
.bakery--table :nth-child(2n+3) {
margin-top: 1rem;
}
.coffee--type,
.espresso--type,
.tea--type,
.bakery--type {
text-transform: uppercase;
letter-spacing: 1.5px;
}
.coffee--description, .coffee--brief,
.espresso--description,
.espresso--brief,
.tea--description,
.tea--brief,
.bakery--description,
.bakery--brief {
text-transform: uppercase;
font-weight: 100;
padding-top: 0.3rem;
font-size: 14px;
}
.coffee--brief,
.espresso--brief,
.tea--brief,
.bakery--brief {
text-align: center;
padding-top: 0;
padding-bottom: 0.8rem;
}
@media only screen and (min-width: 1260px) {
.coffee,
.espresso,
.tea,
.bakery {
padding-bottom: 2.2rem;
}
}
.tea .prices,
.bakery .prices {
flex-direction: column;
}
.bakery {
padding-bottom: 0;
}
.news {
padding: 2.5rem 30px;
}
.news h2 {
text-align: center;
}
.news img {
width: 100%;
margin: 0.8rem 0;
}
.news--date, .news--txt {
text-transform: uppercase;
font-weight: 100;
text-align: center;
font-size: 15px;
}
.news--date {
font-size: 12px;
letter-spacing: 1.5px;
margin-bottom: 0.8rem;
}
@media only screen and (min-width: 850px) {
.news {
border-top: 2px solid #f0f0f0;
grid-column: 2/3;
grid-row: 3;
}
}
@media only screen and (min-width: 1560px) {
.news {
grid-column: 2/3;
grid-row: 1/span 3;
border-top: none;
border-right: 2px solid #f0f0f0;
}
}
Макет меню #CodePenChallenge (JS код)
/* SITE INSPIRATIONS */
/*
https://www.siteinspire.com/websites/5414-cow-co-cafe
http://cafefrida.ca/
http://cafe.monocle.com/
https://www.tttrestaurant.com/menu/drinks
*/
//# sourceURL=pen.js
Макет меню #CodePenChallenge (Результат кода)
Comments