Skip to content

first commit #15

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 5 commits into
base: main
Choose a base branch
from
Open

first commit #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
491d55d
first commit
Christopher-Martinez-422 Dec 21, 2022
8435347
update 1
Christopher-Martinez-422 Dec 22, 2022
51d70c4
hopefully the last one
Christopher-Martinez-422 Dec 22, 2022
2a59c64
actual last one
Christopher-Martinez-422 Dec 22, 2022
5ed8740
for real this time
Christopher-Martinez-422 Dec 22, 2022
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: 54 additions & 9 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
/*======= Create a new universal selector that changes the font color to: #3C373B */

*{
color:#3C373B;
/* border: 2px solid red; */
}
body{
width:50%;
text-align: center;
margin: auto
}

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;
font-size: 30px;

}

/*======= Create a selector for ALL p tags in the site to have the following styles:
Expand All @@ -24,28 +34,38 @@ 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;

*/

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 */
width: 605px;
margin: 0 auto;
}

.container header nav a {
header nav a {
margin: 0 10px;
border: 1px solid lightgray;
padding: 20px;
Expand All @@ -55,20 +75,28 @@ line-height: 1.4;
text-decoration: none;
margin-bottom: 20px;
/*======= create a background property. Set the value to #F87B99 */
background: #F87B99;

}

.container header nav a:hover {
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: white;
color: pink;
}

/*======= 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;
padding: 20px 0;
text-align: left;
}

.contact-section h2 {
Expand All @@ -80,16 +108,21 @@ line-height: 1.4;
line-height: 2;
*/

address{
line-height: 2;
}

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

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

width: 600px;
text-align: left;
}

footer .footer-content h3 {
Expand All @@ -106,6 +139,13 @@ footer nav {
color: black;
text-decoration: underline;
*/
footer a{
margin: 10px;
color: black;
text-decoration: underline;
display: inline-block;
margin: 0 10px;
}


footer nav a:first-child {
Expand All @@ -116,7 +156,12 @@ footer nav a:first-child {
color: white;
*/

footer a:hover{
color: white;
}

footer .footer-content .copyright {
padding: 20px 0;
/*======= center the text here */
text-align: center;
}
132 changes: 79 additions & 53 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,95 @@
<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
<!-- <div class="container"> -->
<!-- company name -->
<h1>Sweet Eats Bakery</h1>
<header>
<!-- Navigation -->
<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>

<!-- Image https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png -->
<!-- Image https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png -->
<img src="https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png" alt="Bakery Header">
<!-- Marketing header -->
<section class="about">
<h2>About Sweet Eats Bakery</h2>

<!-- 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.
<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>
</header>

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

<section class="content-row">
<!-- Image https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png -->
<div class="img-container">
<img src="https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png" alt="Cookies">
</div>
<div class="container">
<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 class="content-row">
<div class="container">
<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>
<!-- Image https://tk-assets.lambdaschool.com/297378d6-9c89-430f-9d2e-46ae3d5edce8_ui-i-bakery-cupcake-i.png -->
<div class="img-containter">
<img src="https://tk-assets.lambdaschool.com/297378d6-9c89-430f-9d2e-46ae3d5edce8_ui-i-bakery-cupcake-i.png" alt="cupcake">
</div>
</section>
<section class="content-row">
<!-- Image https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png -->
<div class="img-container">
<img src="https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png" alt="celebrate">
</div>
<div class="container">
<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 class="contact-section">
<h2>Contact Us</h2>

<a href="mailto:[email protected]"> [email protected]</a> <br>
<a href="tel:202-555-0144">202-555-0144</a>
<address>4209 Bobcat Drive<br>Madison, WI, 48219
</address>
</section>
<!-- footer -->
Sweet Eats Bakery

About
Cookies
Celebrations
Catering
Contact

Copyright Sweet Eats 2018
<footer>
<div class="footer-content">
<h3>Sweet Eats Bakery</h3>

<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>
</div>
<div class="copyright">
<p>Copyright Sweet Eats 2018</p>
</div>

</footer>
<!-- </div> -->
</body>

</html>