Skip to content

Finish html and css #10

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

Finish html and css #10

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
96 changes: 35 additions & 61 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,96 @@
/*======= Create a new universal selector that changes the font color to: #3C373B */


* {
color: #3C373B;
margin: 0;
padding: 0;
}
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 {
font-family: 'Gaegu', cursive;
margin-bottom: 0;
padding: 0 10px;
/*======= Update the font size to 30px */
font-size: 10px;
}

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

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:

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

*/

}
.content-row {
display: flex;
}

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

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

.container header nav a {
margin: 0 10px;
border: 1px solid lightgray;
padding: 20px;
display: inline-block;
border-radius: 20px;
color: white;
background-color: #F87B99;
text-decoration: none;
margin-bottom: 20px;
/*======= create a background property. Set the value to #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. */
background-color: white;
color: pink;
}

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

}
.contact-section {
border-top: 1px dashed black;
padding: 20px 0;
}

.contact-section h2 {
padding: 0;
margin: 0 0 10px 0;
}

/*======= 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;
border-top: 1px dashed white;
}

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

footer .footer-content {
margin: 0 auto;
width: 600px;
}

footer .footer-content h3 {
padding: 0;
margin: 20px 0;
}

footer nav {
display: flex;
}

/*======= Create a selector for the anchor tag in the footer to have the following styles:
footer a {
margin: 10px;
color: black;
text-decoration: underline;
*/


}
footer nav a:first-child {
margin-left: 0;
}

/*======= Create a hover state for the anchor tag in the footer nav to have the following styles:
footer a:hover {
color: white;
*/

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

<head>
<head>
<meta charset="UTF-8">
<!-- import your css file -->
<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>

<!-- company name -->
Sweet Eats Bakery

<!-- 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

<!-- footer -->
Sweet Eats Bakery

About
Cookies
Celebrations
Catering
Contact

Copyright Sweet Eats 2018
</body>

</head>
<body class="container">
<h1>Sweet Eats Bakery</h1>
<header>
<nav>
<div class="links">
<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>
</div>
</nav>
</header>
<img src="https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png">
<section id="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>
<section id="cookies" class="content-row">
<div>
<img src="https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png" alt="Chocolate chip cookies">
</div>
<div>
<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>
</section>
<section id="celebrations" class="content-row">
<div>
<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>
<div>
<img src="https://tk-assets.lambdaschool.com/297378d6-9c89-430f-9d2e-46ae3d5edce8_ui-i-bakery-cupcake-i.png">
</div>
</section>
<section id="catering" class="content-row">
<div>
<img src="https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png">
</div>
<div>
<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>
</section>
<section id="contact" class="contact-section">
<h2>Contact Us</h2>
<address>
[email protected]<br/>
202-555-0144<br/>
4209 Bobcat Drive<br/>
Madison, WI, 48219<br/>
</address>
</section>
</body>
<footer>
<div class="footer-content">
<h3>Sweet Eats Bakery</h3>
<nav>
<div class="links">
<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>
</div>
</nav>
<div class="copyright">Copyright Sweet Eats 2022</div>
</div>
</footer>
</html>