How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nitro site</title>
<link href="css/main.css" rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img class="logo" src="assets/logobeans.png"/>
<h2 class="headertitle">nitro</h2>
<nav>
<ul>
<li><a href="index.html" target="_parent">About</a></li>
<li><a href="/html/menu.html" target="_blank">Menu</a></li>
<li><a href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section class="headerContainer">
<h1 class="heading">Nitro Coffee</h1>
<p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>
<img class="imgHero" src="assets/coffeebeans-hero.png"/>
<section class="button"></section>
<button class="shopnowButton">SHOP NOW</button>
</section>
</section>
</header>
<section class="productsContainer">
<section class="products">
<h2 class="productDesc">Our Products</h2>
</section>
<section class="cards">
<section class="card">
<img class="imgCoffeebeans" src="assets/coffeebeans.png"/>
<section class="container">
<h3 class="productsTitle">Coffee Beans</h3>
<p class="itemPrice">$18.99</p>
</section>
</section>
<section class="card">
<img class="imgColdbrew" src="assets/coldbrew.png"/>
<section class="container">
<h3 class="productsTitle">Cold Brew</h3>
<p class="itemPrice">$4.99</p>
</section>
</section>
<section class="card">
<img class="imgInhouse" src="assets/inhousebrew.png"/>
<section class="container">
<h3 class="productsTitle">In-house Brew</h3>
<p class="itemPrice">$2.99</p>
</section>
</section>
</section>
<section class="button">
<button class="viewAll">VIEW ALL</button>
</section>
</section>
<section class="discount">
<p class="bannerDiscount">"Get 20% off your first order with code:<strong>FirstNitro</strong>"</p>
</section>
<footer class="footer">
<section class="sectionAddress">
<h3 class="address">Address</h3>
<p class="textAddress">503 Broadway Penthouse</p>
<p class="textAddress">NewYork</p>
</section>
<section class="sectionHours">
<h3 class="hours">Hours</h3>
<p class="textHours"><strong>Monday-Friday:</strong> 9am-7pm</p>
<p class="textHours"><strong>Saturday-Sunday:</strong> 10am-5pm</p>
</section>
<section class="sectionSocial">
<h3 class="social">Social</h3>
<a href="facebook." target="_blank">
<img class="iconFB" src="assets/facebook.png"/>
</a>
<a href="instagram" target="_blank">
<img class="iconInsta" src="assets/instagram.png"/>
</a>
<a href="yelp" target="_blank">
<img class="iconYelp" src="assets/yelp.png"/>
</a>
</section>
</footer>
</body>
</html>
CSS:
.navlist{
position: sticky;
top:0;
width:100%;
display:flex;
flex-direction: row;
justify-content: left;
}
.header{
width:100%;
height:80%;
background-color: #fff0ed;
justify-content: center;
}
.logo{
height: 750%;
box-sizing: border-box;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
position: relative;
margin-top: 1%;
padding-left: 5%;
}
ul{
list-style-type:none;
}
li{
display:inline-flex;
flex-direction: row;
padding:0 1rem 0 1rem;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:131%;
}
.heading{
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
text-align:left;
}
.productsContainer{
background-color: #f7f7f7;
}
.productDesc{
font-family: Arial, Helvetica, sans-serif;
font-size:33px;
text-align: left;
}
.imgHero{
}
.cards{
display:inline-flex;
flex-flow:row;
justify-content:space-evenly;
}
.card{
box-shadow:0 5px 9px 1px rgba(0,0,0,0.25);
border:1px solid rgba(0,0,0,0.25);
display:inline-block;
width: 435px;
height:443px;
border-radius:5px;
padding:1rem;
margin:2rem;
background-color: #fff;
}
.card:hover{
box-shadow:0 10px 18px 2px rgba(0,0,0,0.25);
}
.imgCoffeebeans{
height:238px;
object-position: center;
}
.imgColdbrew{
height:238px;
}
.imgInhouse{
height:238px;
}
.productsTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 206.25%;
text-align: center;
}
.itemPrice{
font-family: Arial, Helvetica, sans-serif;
font-size: 206.25%;;
color:#5BACC3;
text-align: center;
}
button{
font-family: Arial, Helvetica, sans-serif;
font-size: 131.25%;
width: 180px;
height:55px;
border-width: 2px;
offset:5px;
background-color:#5BACC3;
color:#fff;
justify-content: center;
object-position: center;
}
.discount{
width:1137px;
height:190px;
background-color:rgba(0,0,0,0.85);
}
.bannerDiscount{
font-size: 45px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
text-align: center;
padding:70px 0 50px 0;
}
.footer{
width:100%;
height:80%;
background-color: #fff0ed;
}
.address{
font-family: Arial, Helvetica, sans-serif;
font-size: 33px;
}
.textAddress{
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
}
.hours{
font-family: Arial, Helvetica, sans-serif;
font-size: 33px;
}
.textHours{
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
}
.social{
font-family: Arial, Helvetica, sans-serif;
font-size: 33px;
}
.iconFB,
.iconInsta,
.iconYelp {
height:50px;
}
Homework Answers
Working code implemented in HTML & CSS and appropriate comments provided for better understanding:
note: put images in assets folder
Here I am attaching code for these files:
- index.html
- menu.html (pages folder)
- main.css (scss folder)
- menu.css (scss folder)
Source code for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="./scss/main.css">
<title>Nitro Coffee</title>
</head>
<body>
<header>
<nav class="nav">
<a href="#" class="nav__logo"><img
src="./assets/logobeans.png" alt="beans-logo"></a>
<a href="#" class="nav__brand"><h2
class="nav__brand">nitro</h2></a>
<div class="nav__link-section">
<ul>
<li class="nav__link"><a href="#"
class="nav__tag">ABOUT</a></li>
<li class="nav__link"><a href="./pages/menu.html"
class="nav__tag">MENU</a></li>
<li class="nav__link"><a href="./pages/menu.html"
class="nav__tag nav__tag--blue">SHOP
NOW</a></li>
</ul>
</div>
</nav>
<div class="hero">
<div class="hero__content">
<h1 class="hero__title">Nitro Coffee</h1>
<p class="hero__text small-text">Coffee is a brewed drink
prepared from roasted coffee beans, the seeds of berries from
certain Coffea species.</p>
<form action="./pages/menu.html">
<button class="button hero__button">SHOP
NOW</button>
</form>
</div>
<div class="hero__image">
<img src="./assets/coffeebeans-hero.png" alt="large-coffee-bag"
class="hero__beans">
</div>
</div>
</header>
<main>
<section class="products">
<h2 class="text">Our Products</h2>
<div class="product">
<img src="./assets/coffeebeans.png" alt="coffee-bag"
class="product__image">
<div class="product__text">
<div class="product__text--description">
<h3>Coffee Beans</h3>
<p>Pack of 3</p>
</div>
<div class="product__text--price">
<p class="text">$19</p>
</div>
</div>
</div>
<div class="product">
<img src="./assets/coldbrew.png" alt="cold-brew-can"
class="product__image">
<div class="product__text">
<div class="product__text--description">
<h3>Cold Brew</h3>
<p>Pack of 3</p>
</div>
<div class="product__text--price">
<p class="text">$5</p>
</div>
</div>
</div>
<div class="product">
<img src="./assets/inhousebrew.png" alt="in-house-brew-cup"
class="product__image">
<div class="product__text">
<div class="product__text--description">
<h3>In-house Brew</h3>
<p>Pack of 3</p>
</div>
<div class="product__text--price">
<p class="text">$3</p>
</div>
</div>
</div>
<form action="./pages/menu.html">
<button class="button products__button">VIEW
ALL</button></a>
</form>
</section>
<section class="learn-more">
<div class="learn-more__text">
<h2 class="text">We're Different</h2>
<p class="learn-more__smaller-text">We grow and roast our own
beans. Every bean, every cup, every step of the way, we strive for
excellence.</p>
<div class="learn-more__icons">
<img src="./assets/planting-icon.png" alt="planting-icon"
class="icon">
<img src="./assets/2-coffee-beans-icon.png"
alt="2-coffee-beans-icon" class="icon">
<img src="./assets/coffee-cup-icon.png" alt="coffee-cup-icon"
class="icon">
</div>
<form>
<button class="learn-more__button button">Learn
More</button>
</form>
</div>
<div class="learn-more__image">
<img src="./assets/tiltedcan.png" alt="tilted-can"
class="learn-more__tiltedcan">
<div class="learn-more__image--detail"></div>
</div>
</section>
<section class="discount">
<p class="discount__text">Get 20% off your first order with
code: <span
class="text-bold">FirstNitro</span></p>
</section>
<footer class="footer">
<div class="footer__beans"><img
src="./assets/logobeans.png" alt="coffeebeans"
class="footer__beans--image"></div>
<div class="footer__address">
<h3 class="small-text">Address</h3>
<p class="footer__smaller-text">503 Broadway
Penthouse</p>
<p class="footer__smaller-text">New York</p>
</div>
<div class="footer__hours">
<h3 class="small-text">Hours</h3>
<p class="footer__smaller-text"><span
class="text-bold">Monday - Friday:</span> 9am -
7pm</p>
<p class="footer__smaller-text"><span
class="text-bold">Saturday - Sunday:</span> 10am -
5pm</p>
</div>
<div class="footer__social">
<h3 class="small-text">Social</h3>
<a href="https://www.url.com"><img
src="./assets/facebook.png" alt="facebook-logo"
class="footer__icon icon"></a>
<a href="https://www.url.com"><img src="./assets/yelp.png"
alt="yelp-logo" class="footer__icon icon"></a>
<a href="https://www.url.com"><img
src="./assets/instagram.png" alt="instagram-logo"
class="footer__icon icon"></a>
</div>
<div class="footer__beans--bottom"><img
src="./assets/logobeans.png" alt="coffeebeans"
class="footer__beans--image"></div>
</footer>
</main>
</body>
</html>
Source code for menu.html (pages folder):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="../scss/menu.css">
<title>Nitro Coffee Menu</title>
</head>
<body>
<header>
<nav class="nav">
<a href="#" class="nav__logo"><a
href="../index.html"><img src="../assets/logobeans.png"
alt="beans-logo"></a></a>
<a href="../index.html" class="nav__brand">
<h2 class="nav__brand">nitro</h2>
</a>
<div class="nav__link-section">
<ul>
<li class="nav__link"><a href="../index.html"
class="nav__tag">ABOUT</a></li>
<li class="nav__link"><a href="#"
class="nav__tag">MENU</a></li>
<li class="nav__link"><a href="#" class="nav__tag
nav__tag--blue">SHOP NOW</a></li>
</ul>
</div>
</nav>
<main>
<div class="box">
<div class="box__container">
<h1 class="box__text">MENU</h1>
</div>
<div class="box--detail"></div>
</div>
<ul class="sub-navigation">
<li class="sub-navigation__link"><a
class="sub-navigation__tag" href="#hot-drinks"><span
class="sub-navigation__divider">|</span>HOT
DRINKS</a></li>
<li class="sub-navigation__link"><a
class="sub-navigation__tag" href="#cold-drinks"><span
class="sub-navigation__divider">|</span>COLD
DRINKS</a></li>
<li class="sub-navigation__link"><a
class="sub-navigation__tag" href="#pastries"><span
class="sub-navigation__divider">|</span>PASTRIES</a></li>
</ul>
<section id="hot-drinks" class="menu-section">
<h2 class="menu-section__title">Hot Drinks</h2>
<h3 class="menu-section__item">In-house Brew</h3>
<p class="menu-section__description">Our in-house medium
roast is a classic balance between sweet
vanilla, nutty hazelnut, and a smooth low
acidity to bring everything together.</p>
<p class="menu-section__price">$2.99</p>
<h3 class="menu-section__item">Espresso</h3>
<p class="menu-section__description">A balance between bold
and smooth, powerful and sweet, our
signature espresso blend is a complex flavor
profile. It features strong notes of semi-sweet chocolate and
caramel, with mild acidity and a
bright
floral finish.</p>
<p class="menu-section__price">$4.99</p>
</section>
<section id="cold-drinks" class="menu-section
menu-section--blue">
<h2 class="menu-section__title">Cold Drinks</h2>
<h3 class="menu-section__item">Cold Brew</h3>
<p class="menu-section__description">Our bright and delicious
coffee blend, brewed over ice to give you
a cold coffee freshness with all the
flavor of our amazing in-house coffee.</p>
<p class="menu-section__price">$3.99</p>
<h3 class="menu-section__item">Iced Chai
Latte</h3>
<p class="menu-section__description">A creamy drink with a
kick, this drink features spicy chai tea
blended with your choice of milk and
poured over ice.</p>
<p class="menu-section__price">$6.99</p>
</section>
<section id="pastries" class="menu-section">
<h2 class="menu-section__title">Pastries</h2>
<h3 class="menu-section__item">Bacon Oatmeal Raisin
Cookie</h3>
<p class="menu-section__description">An infused bacon, sugar
and egg mixture is folded into a perfect
blend of oats, flour, raisins and
cinnamon to create a soft and chewy textured
cookie.</p>
<p class="menu-section__price">$3.50</p>
<h3 class="menu-section__item">Blueberry, Lemon and Thyme
Muffin</h3>
<p class="menu-section__description">Tart and sweet, this
classic blueberry and lemon combination comes
with an earthy twist.</p>
<p class="menu-section__price">$2.50</p>
</section>
</main>
</header>
</body>
</html>
Source code for main.css (scss folder):
/* Global */
body {
font-family: Arial, Helvetica, sans-serif;
/* I added Arial to be able to see on Windows */
margin: 0;
}
h1,
h2 {
font-size: 3.75rem;
font-weight: 100;
}
h3 {
font-size: 2.0625rem;
font-weight: 100;
}
.text {
font-size: 2.0625rem;
}
.small-text {
font-size: 1.3125rem;
}
.text-bold {
font-weight: bold;
}
.learn-more__smaller-text {
font-size: 1.125rem;
}
.discount__text {
font-size: 2rem;
color: #fff;
line-height: 50px;
}
.footer__smaller-text {
font-size: 1rem;
font-weight: 100;
line-height: 0.3;
}
.icon {
height: 30px;
}
.button {
width: 180px;
height: 55px;
background-color: #5bacc4;
color: #fff;
padding: 0;
font-size: 1.3125rem;
border: 2px solid rgba(0, 0, 0, 0.25);
position: relative;
}
.button:before {
content: "";
width: 177px;
height: 53px;
border-width: 2px;
border: solid #000;
position: absolute;
offset: 5px;
bottom: 1px;
right: 0.8px;
}
.button:active:before {
width: 100%;
height: 100%;
bottom: -2px;
right: -2px;
}
.learn-more__button {
margin-top: 20px;
display: block;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.learn-more__image:hover .learn-more__tiltedcan {
-webkit-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
@-webkit-keyframes color-change {
from {
background-color: #000000;
}
to {
background-color: #5bacc4;
}
}
@keyframes color-change {
from {
background-color: #000000;
}
to {
background-color: #5bacc4;
}
}
.discount {
-webkit-animation: color-change 2.5s infinite linear
alternate;
animation: color-change 2.5s infinite linear alternate;
}
/* Header */
header {
background-color: #FFF0ED;
}
main {
width: 100%;
}
/* navbar */
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 30px;
padding-top: 20px;
}
.nav__logo {
display: inline;
}
.nav__brand {
font-size: 3.125rem;
font-weight: 100;
display: inline;
margin: 2px;
text-decoration: none;
color: #000;
}
.nav__brand:hover {
opacity: 80%;
}
.nav__link {
list-style-type: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
line-height: 50px;
}
.nav__link-section {
padding-right: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.nav__tag {
text-decoration: none;
color: #393939;
margin-right: 10px;
}
.nav__tag:hover {
opacity: 80%;
}
.nav__tag--blue {
color: #5BACC3;
}
/* Hero Banner */
.hero {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 2% 5% 2% 8%;
}
.hero__content {
display: inline;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hero__image {
display: inline;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hero__beans {
height: 70%;
}
.hero__text {
width: 55%;
margin-bottom: 5%;
}
/* Products */
.products {
text-align: center;
background-color: #f0efef;
}
.products h2 {
margin-top: 0;
padding-top: 2%;
}
.products__button {
margin-bottom: 7vw;
}
.product {
background-color: #fff;
width: 350px;
height: 40%;
border-radius: 10px;
-webkit-box-shadow: 0 5px 9px -1px rgba(0, 0, 0, 0.25);
box-shadow: 0 5px 9px -1px rgba(0, 0, 0, 0.25);
text-align: center;
margin-bottom: 2.5rem;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 50px;
padding: 1% 0 0 0;
}
.product__image {
height: 30vh;
padding-bottom: 2%;
}
.product__text {
background-color: #fff0ed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: left;
padding-left: 4%;
height: 145px;
}
.product__text--description {
width: 70%;
}
.product__text--description h3 {
margin-bottom: 0;
}
.product__text--description p {
margin-top: 5px;
}
.product__text--price {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-left: 20px;
color: #5bacc4;
font-weight: bold;
}
/* Learn More Section */
.learn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin: 5% 0 5% 0;
}
.learn-more__text {
max-width: 350px;
}
.learn-more__icons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.learn-more__image {
background-image: url("../assets/coldbrewbackground.png");
background-repeat: round;
margin-left: 50px;
width: 435px;
height: 435px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.learn-more__image--detail {
position: absolute;
width: 435px;
height: 435px;
border: 4px solid #5BACC3;
bottom: 20px;
right: 20px;
}
.learn-more__tiltedcan {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
/* Discout */
.discount {
min-width: 400px;
max-width: 60%;
background-color: #000;
text-align: center;
margin: auto;
padding: 10px 0;
margin-bottom: 7vw;
}
/* Footer */
.footer {
background-color: #fff0ed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3%;
position: relative;
}
.footer__beans {
position: absolute;
left: 100px;
bottom: 55px;
}
.footer__beans--bottom {
position: absolute;
bottom: 10px;
right: 0px;
width: 100px;
overflow: hidden;
}
.footer__beans--image {
height: 120px;
}
.footer__icon {
display: inline-block;
}
.footer__address, .footer__hours, .footer__social {
margin-right: 8%;
}
/*# sourceMappingURL=main.css.map */
Source code for menu.css (scss folder):
/* Global Section */
body {
font-family: Arial, Helvetica, sans-serif;
/* I added Arial to be able to see on Windows */
margin: 0;
}
h1,
h2 {
font-size: 3.75rem;
font-weight: 100;
}
h3 {
font-size: 2.0625rem;
font-weight: 100;
}
.text {
font-size: 2.0625rem;
}
.small-text {
font-size: 1.3125rem;
}
.text-bold {
font-weight: bold;
}
.learn-more__smaller-text {
font-size: 1.125rem;
}
.discount__text {
font-size: 2rem;
color: #fff;
line-height: 50px;
}
.footer__smaller-text {
font-size: 1rem;
font-weight: 100;
line-height: 0.3;
}
.icon {
height: 30px;
}
/* Header Section */
header {
background-color: #FFF0ED;
}
main {
width: 100%;
}
/* Navbar */
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 30px;
padding-top: 20px;
}
.nav__logo {
display: inline;
}
.nav__brand {
font-size: 3.125rem;
font-weight: 100;
display: inline;
margin: 2px;
text-decoration: none;
color: #000;
}
.nav__brand:hover {
opacity: 80%;
}
.nav__link {
list-style-type: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
line-height: 50px;
}
.nav__link-section {
padding-right: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.nav__tag {
text-decoration: none;
color: #393939;
margin-right: 10px;
}
.nav__tag:hover {
opacity: 80%;
}
.nav__tag--blue {
color: #5BACC3;
}
/* Box */
.box {
background-image: url("../assets/coffee-circle.jpg");
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.box__container {
border: 1px solid black;
width: 285px;
height: 185px;
background-color: rgba(0, 0, 0, 0.95);
color: #fff;
text-align: center;
line-height: 2px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
}
.box--detail {
width: 285px;
height: 185px;
border: 4px solid #5BACC3;
offset: 15px;
position: relative;
bottom: 15px;
right: 15px;
}
.box__text {
font-size: 3.75em;
}
/* Sub-navigation */
.sub-navigation {
height: auto;
background-color: #393939;
text-align: center;
margin: 0;
padding: 1.5%;
}
.sub-navigation__tag {
color: #fff;
text-decoration: none;
width: 4px;
}
.sub-navigation__link {
list-style-type: none;
display: inline;
margin: 2% 2% 2% 0;
}
.sub-navigation__divider {
width: 4px;
color: #5BACC3;
padding-right: 5px;
font-weight: bolder;
}
/* Menu Sections */
.menu-section {
background-color: #FFF0ED;
}
.menu-section--blue {
background-color: #F7F7F7;
}
.menu-section__title, .menu-section__item, .menu-section__price
{
text-align: center;
margin: 0;
}
.menu-section__title {
padding-top: 2%;
color: #464646;
}
.menu-section__item {
margin: 2vh;
}
.menu-section__description {
font-size: 1.125rem;
font-style: italic;
width: 50%;
height: 18%;
border: 4px;
offset: 15px;
text-align: center;
margin: auto;
}
.menu-section__price {
color: #5BACC3;
margin-bottom: 0;
padding-bottom: 1%;
padding-top: 2%;
}
/*# sourceMappingURL=menu.css.map */
Output Screenshots:
Hope it helps, if you like the answer give it a thumbs up. Thank you.
Add Answer to:
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...
Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...
Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
In my HTML and CSS pages I want to make this aside output in 2 even...
In my HTML and CSS pages I want to make this aside output in 2 even columns rather than the way it is (do I need a column layout?), below is my code for the html AND the CSS: HTML: <aside> <h3>Surfer Slang</h3> <dl> <dt>barney</dt> <dd>A new and inexperienced surfer</dd> <dt>boost</dt> <dd>To take off from a wave into an aerial</dd> <dt>cutback</dt> <dd>To change direction when streaking ahead of the curl</dd> <dt>gandalf</dt>...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head tag --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title> </head> <!-- body tag --> <body> <style> .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; ...
given below are the project description and their Html and css files i need javascript according...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Create a webpage in which the user is allowed to select the page's background and color...
Create a webpage in which the user is allowed to select the page's background and color whether the page uses serif or sans serif fonts. The change the body element's style attribute accordingly. If the user onclicks any of the options, the webpage will turn into that format. For example, if the user clicks "Gray background", the background color of the webpage will be Gray. If the user clicks Serif-text, the text in the web page will be in Serif...
Let 𝑉 be the vector space of symmetric 2×2 matrices and 𝑊 be the subspace 𝑊=span{[4−5−50],[−2−5−51]}. a. Find a nonzero element 𝑋 in 𝑊.
Let 𝑉V be the vector space of symmetric 2×22×2 matrices and 𝑊W be the subspace𝑊=span{[4−5−50],[−2−5−51]}.a. Find a nonzero element 𝑋X in 𝑊W.
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Most questions answered within 3 hours.
-
SQL help:
Design a database diagram for a database that stores information
about the Downloads that...
asked 4 minutes ago -
In 1970s and 1980s, molecular biologists discovered that the
hormone testosterone, binds a receptor protein that...
asked 2 hours ago -
january 1 2010 road catering service purchase a piece of
equipment for 58000 which is expected...
asked 2 hours ago -
Explain Mertons concept of anomie is and what the
modes of adaptation to it are?
asked 3 hours ago -
Jamie is doing a survey at her school about whether the students
feel the cafeteria food...
asked 4 hours ago -
How many liters of 0.669 M KOH will be needed to raise the pH of
0.339...
asked 7 hours ago -
A liquid of density 1270 kg/m 3 flows steadily through a pipe of
varying diameter and...
asked 7 hours ago -
Questions: What should the American executive do?
'A visiting American executive finds that a foreign subsidiary...
asked 7 hours ago -
Activity based costing was introduced as an alternative to
absorption costing.
1. Discuss using illustration the...
asked 7 hours ago -
1. You own shares of Crane DVD Company and are interested in
selling them. With so...
asked 7 hours ago -
How many grams of He are necessary to fill a balloon having a
volume of 4.5E3...
asked 7 hours ago -
The 2 patients, still in the hospital, were interviewed by a
MoH epidemiologist. The interviews revealed...
asked 7 hours ago