118 lines
1.8 KiB
CSS
118 lines
1.8 KiB
CSS
:root {
|
|
--blue: #00f;
|
|
--bun: #eba44a;
|
|
--brown: #4d1c13;
|
|
--salat: #4ca673;
|
|
--tomato: #ea5b58;
|
|
--cheese: #fbe292;
|
|
--meat: #863330;
|
|
--mint: #00ff78;
|
|
}
|
|
|
|
*,
|
|
html,
|
|
body {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: 80px 1fr;
|
|
background: var(--blue);
|
|
font: normal 16px/1 sans-serif;
|
|
height: 100vh;
|
|
place-items: center;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--cheese);
|
|
}
|
|
|
|
i {
|
|
color: var(--mint);
|
|
font-style: normal;
|
|
text-transform: capitalize;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.burgerGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 5vh 10vw;
|
|
padding: 0 0 40px;
|
|
}
|
|
|
|
.burger {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100px;
|
|
}
|
|
|
|
.burger span {
|
|
display: block;
|
|
width: 50px;
|
|
}
|
|
|
|
.bunHead {
|
|
background: var(--bun);
|
|
border: 2px solid var(--brown);
|
|
border-radius: 13px 13px 3px 3px;
|
|
height: 14px;
|
|
}
|
|
|
|
.salat {
|
|
background: var(--salat);
|
|
border-radius: 2px;
|
|
height: 6px;
|
|
}
|
|
|
|
.salat::after {
|
|
border-bottom: 6px dotted var(--tomato);
|
|
content: "";
|
|
display: block;
|
|
height: 4px;
|
|
}
|
|
|
|
.tomato {
|
|
background: var(--tomato);
|
|
border-radius: 1px;
|
|
height: 4px;
|
|
}
|
|
|
|
.cheese {
|
|
background: var(--cheese);
|
|
border-radius: 2px;
|
|
height: 2px;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
.cheese::after {
|
|
border: 10px solid transparent;
|
|
border-top-color: var(--cheese);
|
|
content: "";
|
|
display: block;
|
|
height: 0;
|
|
transform: scaleY(1);
|
|
width: 0;
|
|
}
|
|
|
|
.meat {
|
|
background: var(--meat);
|
|
border: 2px solid var(--brown);
|
|
border-radius: 5px;
|
|
height: 10px;
|
|
}
|
|
|
|
.bunBottom {
|
|
background: var(--bun);
|
|
border: 2px solid var(--brown);
|
|
border-radius: 3px 3px 9px 9px;
|
|
height: 12px;
|
|
}
|
|
|
|
.uuuuuuuu {
|
|
gap: 1px;
|
|
} |