Skip to content

homeowrk intro html #5

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

homeowrk intro html #5

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


*{
color:#3C373B
}
body{
width:50%;
text-align: center;
border: 1px solid red;
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,25 +32,35 @@ 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 */
margin: 0 auto;
width: 605px;
}

.container header nav a {
Expand All @@ -55,17 +73,21 @@ 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 {
/*======= 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;
*/

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

footer {
width: 100%;
Expand All @@ -89,7 +114,7 @@ footer {
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;
*/

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

footer nav a:first-child {
margin-left: 0;
Expand All @@ -115,8 +144,11 @@ 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:white;
}
footer .footer-content .copyright {
padding: 20px 0;
/*======= center the text here */
}
text-align:center;
}
114 changes: 61 additions & 53 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,78 @@

<head>
<meta charset="UTF-8">
<!-- import your css file -->
<link href="index.css" rel="stylesheet">
<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
<section>
<header>
<div class="container">
<h1>Sweet Eats Bakery</h1>
<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>
<img src="https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png" alt="">
</section>
<section class="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>
</header>
<section class="content-row">
<div>
<img src="https://tk-assets.lambdaschool.com/7393a8fd-c8e5-4003-921f-79e0d546d02c_ui-i-bakery-cookies.png" alt="">

<!-- 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.
<h2>Cookies</h2>

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

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

Candy apple pie lemon drops sweet roll danish. Tiramisu candy canes jelly-o jelly beans cotton candy pastry pudding
<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.

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

[email protected]
202-555-0144
4209 Bobcat Drive
Madison, WI, 48219

gingerbread pudding.</p>

<h2>Catering</h2>
<img src="https://tk-assets.lambdaschool.com/ab0cb095-5900-476c-b042-aea065d3dbbf_ui-i-bakery-celebrate.png" alt="">
<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>
<h2>Contact Us</h2>

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

About
Cookies
Celebrations
Catering
Contact

Copyright Sweet Eats 2018
<section>
<footer>
<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>
<P>Copyright Sweet Eats 2018</p>
</nav>
</footer>
</section>
</body>

</html>