Skip to content

MVP #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

MVP #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 48 additions & 15 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
/*======= Create a new universal selector that changes the font color to: #3C373B */

* {
color: #3c373b;
}

h1 {
font-family: 'Gaegu', cursive;
margin: 20px 0;
/*======= Update the font size to 60px and center the text */
font-size: 10px;
font-size: 60px;
text-align: center;
}

h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
font-family: 'Gaegu', cursive;
margin-bottom: 0;
padding: 0 10px;
/*======= Update the font size to 30px */
font-size: 10px;
font-size: 30px;
}

/*======= Create a selector for ALL p tags in the site to have the following styles:
Expand All @@ -24,24 +31,34 @@ padding: 10px;
line-height: 1.4;

*/

p {
font-size: 16px;
font-family: roboto;
padding: 10px;
line-height: 1.4;
}

/*======= Create a selector for ALL images in the site to have the following styles:

border-radius: 10px;

*/
.images {
border-radius: 10px;
}

.content-row {
display: flex;
}

.content-row div {
.content-row {
/*======= create a margin propery. Set the value to 20px */
margin: 20px;
}

.container {
/*======= create a width property. Set the value to 605px */
width: 605px;
margin: 0 auto;
}

Expand All @@ -54,17 +71,22 @@ line-height: 1.4;
color: white;
text-decoration: none;
margin-bottom: 20px;
/*======= create a background property. Set the value to #F87B99 */

/*======= create a background property. Set the value to #F87B99 */
background-color: #f87b99;
}

.container header nav a:hover {
/*======= create a background property and set it to white. Then create a color property and set it's value to pink. */
/*======= create a background property and set it to white. Then create a color property and set it's value to pink. */
background-color: #fff;
color: #ffc0cb;
}

/*======= Create a selector for the about section to have the following styles:
margin-top: 20px;
*/
#about {
margin-top: 20px;
}

.contact-section {
border-top: 1px dashed black;
Expand All @@ -79,17 +101,20 @@ line-height: 1.4;
/*======= Create a selector for the address tag in the contact-section class to have the following styles:
line-height: 2;
*/
address {
line-height: 2;
}

footer {
width: 100%;
background: #F87B99;
background: #f87b99;
border-top: 1px dashed white;
}

footer .footer-content {
margin: 0 auto;
footer .footer-content {
margin: 0 auto;
/*======= create a width property. Set the value to 600px */

width: 600px;
}

footer .footer-content h3 {
Expand All @@ -106,7 +131,11 @@ footer nav {
color: black;
text-decoration: underline;
*/

a {
margin: 10px;
color: black;
text-decoration: underline;
}

footer nav a:first-child {
margin-left: 0;
Expand All @@ -115,8 +144,12 @@ footer nav a:first-child {
/*======= Create a hover state for the anchor tag in the footer nav to have the following styles:
color: white;
*/
footer a:hover {
color: #fff;
}

footer .footer-content .copyright {
padding: 20px 0;
/*======= center the text here */
/*======= center the text here */
text-align: center;
}
180 changes: 118 additions & 62 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,128 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<!-- import your css file -->
<link href="https://fonts.googleapis.com/css?family=Gaegu|Roboto" rel="stylesheet">
<link rel="stylesheet" href="/index.css" />
<link
href="https://fonts.googleapis.com/css?family=Gaegu|Roboto"
rel="stylesheet"
/>
<title>Sweet Eats Bakery</title>
</head>

<body>
</head>

<body>
<!-- company name -->
Sweet Eats Bakery
<h1>Sweet Eats Bakery</h1>

<!-- Navigation -->
About
Cookies
Celebrations
Catering
Contact

<!-- Image https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png -->

<!-- Marketing header -->
About Sweet Eats Bakery

Marzipan jelly-o macaroon I love macaroon jujubes. Candy candy canes jujubes I love ice cream croissant. Lollipop
donut icing I love liquorice gummi bears marzipan. Dragée jelly beans apple pie cotton candy lemon drops pastry candy
powder.

<!-- content -->

<!-- Image https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png -->
Cookies

Cookie soufflé dessert carrot cake fruitcake halvah pudding cake. Marzipan topping bear claw soufflé gingerbread
biscuit. Tiramisu gummi bears chocolate bar sugar plum icing muffin cake jelly-o icing.

<!-- Image https://tk-assets.lambdaschool.com/297378d6-9c89-430f-9d2e-46ae3d5edce8_ui-i-bakery-cupcake-i.png -->
Celebrations

Candy apple pie lemon drops sweet roll danish. Tiramisu candy canes jelly-o jelly beans cotton candy pastry pudding
tootsie roll carrot cake. Dessert sesame snaps brownie lemon drops cookie donut dragée. Toffee pie fruitcake powder
gingerbread pudding.

<!-- Image https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png -->
Catering

Sweet jelly-o apple pie powder jelly beans. Pastry sweet roll cake jujubes halvah soufflé brownie. Toffee cookie
lemondrops jelly beans chocolate bar. Wafer muffin jujubes danish tart danish chocolate wafer.

Contact Us

[email protected]
202-555-0144
4209 Bobcat Drive
Madison, WI, 48219
<div class="container">
<header>
<nav>
<a href="#about"> About </a>
<a href="#cookies"> Cookies </a>
<a href="#celebrations"> Celebrations </a>
<a href="#catering"> Catering </a>
<a href="#contact"> Contact </a>
</nav>
</header>
<img
class="images"
src="https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png"
alt="Cupcakes"
/>

<!-- Marketing header -->
<section #="about">
<h2>About Sweet Eats Bakery</h2>
<p>
Marzipan jelly-o macaroon I love macaroon jujubes. Candy candy canes
jujubes I love ice cream croissant. Lollipop donut icing I love
liquorice gummi bears marzipan. Dragée jelly beans apple pie cotton
candy lemon drops pastry candy powder.
</p>
</section>
<!-- content -->
<section class="content-section">
<div class="content-row">
<img
src="https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png"
alt="Cookes"
/>
<div class="text-content">
<h2>Cookies</h2>
<p>
Cookie soufflé dessert carrot cake fruitcake halvah pudding cake.
Marzipan topping bear claw soufflé gingerbread biscuit. Tiramisu
gummi bears chocolate bar sugar plum icing muffin cake jelly-o
icing.
</p>
</div>
</div>
</section>

<section class="content-section">
<div class="content-row">
<div class="text-content">
<h2>Celebrations</h2>
<p>
Candy apple pie lemon drops sweet roll danish. Tiramisu candy
canes jelly-o jelly beans cotton candy pastry pudding tootsie roll
carrot cake. Dessert sesame snaps brownie lemon drops cookie donut
dragée. Toffee pie fruitcake powder gingerbread pudding.
</p>
</div>
<img
class="images"
src="https://tk-assets.lambdaschool.com/297378d6-9c89-430f-9d2e-46ae3d5edce8_ui-i-bakery-cupcake-i.png"
alt="Celebrations"
/>
</div>
</section>
<section class="content-section">
<div class="content-row">
<img
class="images"
src="https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png"
alt="Catering"
/>
<div class="text-content">
<h2>Catering</h2>
<p>
Sweet jelly-o apple pie powder jelly beans. Pastry sweet roll cake
jujubes halvah soufflé brownie. Toffee cookie lemondrops jelly
beans chocolate bar. Wafer muffin jujubes danish tart danish
chocolate wafer.
</p>
</div>
</div>
</section>
<section>
<h2>Contact Us</h2>
<a href="mailto:[email protected]">[email protected]</a
><br /><br />
<a href="tel:202-555-0144 4209">202-555-0144 4209</a><br />
<address>
Bobcat Drive<br />
Madison, WI, 48219
</address>
</section>
</div>

<!-- footer -->
Sweet Eats Bakery

About
Cookies
Celebrations
Catering
Contact

Copyright Sweet Eats 2018
</body>

</html>
<footer>
<div class="footer-content">
<h3>Sweet Eats Bakery</h3>
Contact Copyright
<nav>
<a href="#about"> About </a>
<a href="#cookies"> Cookies </a>
<a href="#celebrations"> Celebrations </a>
<a href="#catering"> Catering </a>
<a href="#contact"> Contact </a>
</nav>
<p class="copyright">Sweet Eats 2018</p>
</div>
</footer>
</body>
</html>