Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

MIGRACODE-BCN | PRISCILLA MAC-GATUS| HTML-CSS |CAKE.CO | WEEK 2 #202

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open

MIGRACODE-BCN | PRISCILLA MAC-GATUS| HTML-CSS |CAKE.CO | WEEK 2 #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
ce820cd
Added a Roboto font style and link to css file
Priscilla-MacGatus Sep 23, 2024
3430794
Created header tags,with an image logo with a paragraph tag.
Priscilla-MacGatus Sep 23, 2024
24f23ed
Applied CSS properties to the header logo, menu icon and paragraph.
Priscilla-MacGatus Sep 23, 2024
976af15
A main section with a h1,p and img tag for the main section
Priscilla-MacGatus Sep 23, 2024
bf04c74
Change img src,width of header and added a comment in css
Priscilla-MacGatus Sep 23, 2024
7342ddf
Change the alt attribute of main image
Priscilla-MacGatus Sep 23, 2024
fd7723c
Created a collective div for main tag section 1
Priscilla-MacGatus Sep 23, 2024
902cf31
applied css font and adjusted the size of image.Deleted a div
Priscilla-MacGatus Sep 23, 2024
226e181
Added comment to divide main into 2 sections
Priscilla-MacGatus Sep 23, 2024
647990b
Inserted 4 img tags with a div in section 2
Priscilla-MacGatus Sep 23, 2024
ff6b10d
Applied css properties to section 2 alignment and positioning
Priscilla-MacGatus Sep 23, 2024
4a64010
Added a footer to the body tag with p tags
Priscilla-MacGatus Sep 23, 2024
ab95fb7
Inserted a closing tag for the footer.
Priscilla-MacGatus Sep 23, 2024
e2b3f08
Applied css style to the footer, adjust css property parameters in th…
Priscilla-MacGatus Sep 23, 2024
eaff816
Added alt attribute to section 2 images
Priscilla-MacGatus Sep 23, 2024
d13025f
Adjust css style in header and main and footer tags
Priscilla-MacGatus Sep 23, 2024
e735d05
Applied cs header styling to desktop media queries
Priscilla-MacGatus Sep 24, 2024
b9746eb
Created a nav bar list and applied display properties to default screen
Priscilla-MacGatus Sep 24, 2024
d402508
Added a div to the nav tag with a class
Priscilla-MacGatus Sep 24, 2024
f458637
Added div and class to the nav tag, section1. Applied style properti…
Priscilla-MacGatus Sep 24, 2024
d9a88c3
Applied css style to section 2.Adjusted css style to section1 and body
Priscilla-MacGatus Sep 24, 2024
4082338
Change placement of the info-contact outside the div and changed clas…
Priscilla-MacGatus Sep 24, 2024
c30b4f1
Applied css style to info-contact to default style
Priscilla-MacGatus Sep 24, 2024
00f0de1
Applied css style to the footer text
Priscilla-MacGatus Sep 24, 2024
17cd147
Adjusted margin value of section 1 text
Priscilla-MacGatus Sep 24, 2024
ded6bbe
Applied css style to nav bar
Priscilla-MacGatus Sep 24, 2024
194d229
Copied and pasted complete css style for media queries of medium scre…
Priscilla-MacGatus Sep 24, 2024
ae9f116
Adjusted the font color and size for main paragraph text in large screen
Priscilla-MacGatus Sep 24, 2024
4799a78
Adjusted css properties of the nav bar
Priscilla-MacGatus Sep 24, 2024
57dbb10
Adjusted the background color of nav, header and main tags
Priscilla-MacGatus Sep 24, 2024
b01453c
Adjusted color and size property of main heading
Priscilla-MacGatus Sep 24, 2024
8afa797
Applied css background colors to main default
Priscilla-MacGatus Sep 24, 2024
40ce80a
Adjusted margin property of images in mobile screen
Priscilla-MacGatus Sep 24, 2024
f3e3e77
Applied border radius to the images in desktop mode
Priscilla-MacGatus Sep 24, 2024
76052ac
Corrected the error in the first breakpoint
Priscilla-MacGatus Sep 24, 2024
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
133 changes: 122 additions & 11 deletions Cakes-Co/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,127 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
</head>

<body>
<!-- Add your markup here -->
</body>
<!-- Roboto link-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>

<!----------------LINK TO CSS FILE--------------->
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!----------------HEADER-------------->
<header>
<!--------------LOGO----------------->
<div class="header-logo">
<img
src="https://i.pinimg.com/564x/e4/b7/e7/e4b7e7fdac5d5e61f2d31c872efc22b6.jpg"
alt="a logo of shelby cakes"
/>
</div>
<!--------------MENU------------------->
<div class="header-img-text">
<div class="header-menu">
<img
src="https://icons.veryicon.com/png/o/miscellaneous/template-3/menu-59.png"
alt="an image of an icon menu"
/>
</div>
<!-------------HEADER TEXT----------------->
<div class="header-text">
<p>The best cakes in town delivered to your door</p>
</div>
</div>
</header>

<!--------------------MAIN TEXT---------------->

<main>
<!--------------------NAV BAR---------------->
<div class="nav-heading-text-image-box">
<div class="nav-list">
<nav>
<ul>
<li>HOME</li>
<li>CAKES</li>
<li>ORDER</li>
<li>LESSONS</li>
<li>ABOUT</li>
</ul>
</nav>
</div>


<div class="heading-text-image-box">
<!--------------------SECTION 1---------------->

<div class="heading-text">
<h1>Welcome to ShelbyCakes</h1>
<div class="main-text">
<p>
Thank you for visiting ShelbyCakes, where we craft beautiful,
custom cakes for every special occasion. From birthdays to
weddings, our delicious creations are designed to bring your cake
visions to life. Explore our flavors and designs, and let us
sweeten your celebrations with a touch of joy!
</p></div>

</div>




<div class="image-box">
<img
class="main-image"
src="https://i.pinimg.com/564x/fd/a7/71/fda771bd007cdaeefaded9552e704ae2.jpg"
alt="a beautiful cake"
/>
</div>
</div>
<!--------------------SECTION 2---------------->
<div class="image-of-four">
<img
src="https://i.pinimg.com/564x/fa/d7/ff/fad7ff682bb0aab61be7e3dfff5ade86.jpg"
alt="maroon cake with flower decorations"
/>
<img
src="https://i.pinimg.com/564x/37/41/c9/3741c93fd4fd4c2a1c3088798b8fc5a2.jpg"
alt="a cake with a wine class and flowers "
/>
<img
src="https://i.pinimg.com/564x/e4/24/99/e424993ccd01262bfedc0fa48674bcb2.jpg"
alt="blueberry glass cake"
/>
<img
src="https://i.pinimg.com/564x/3a/dc/9b/3adc9b3d7e34e8bb5e34bcdf6cca8c9c.jpg"
alt="green coloured delicious doughnuts"
/>
</div>
</main>

<hr />
<!--------------------FOOTER---------------->
<footer>

<p class="info-contact">Contact Us</p>
<div class="footer-box">

<p class="info">📞 907-657-432</p>
<p class="info">✉️ [email protected]</p>
<p class="info">📍DownTown St. 267</p>
</div>

</html>
<p class="copyright">&copy; (2024) Priscilla. All Rights Reserved.</p>
</footer>
</body>
</html>
Loading