diff --git a/images/Carousel1.jpeg b/images/Carousel1.jpeg new file mode 100644 index 000000000..e275bcc29 Binary files /dev/null and b/images/Carousel1.jpeg differ diff --git a/images/Carousel2.jpeg b/images/Carousel2.jpeg new file mode 100644 index 000000000..99b8ed5d5 Binary files /dev/null and b/images/Carousel2.jpeg differ diff --git a/images/Carousel3.jpeg b/images/Carousel3.jpeg new file mode 100644 index 000000000..b9ee0916f Binary files /dev/null and b/images/Carousel3.jpeg differ diff --git a/images/Carousel4.jpg b/images/Carousel4.jpg new file mode 100644 index 000000000..1077f59a2 Binary files /dev/null and b/images/Carousel4.jpg differ diff --git a/images/bakery-logo.jpg b/images/bakery-logo.jpg new file mode 100644 index 000000000..df39f4070 Binary files /dev/null and b/images/bakery-logo.jpg differ diff --git a/images/cake1.jpeg b/images/cake1.jpeg new file mode 100644 index 000000000..5c27d7b82 Binary files /dev/null and b/images/cake1.jpeg differ diff --git a/images/cake2.jpeg b/images/cake2.jpeg new file mode 100644 index 000000000..3c08021ea Binary files /dev/null and b/images/cake2.jpeg differ diff --git a/images/cake3.jpeg b/images/cake3.jpeg new file mode 100644 index 000000000..ee828b1a1 Binary files /dev/null and b/images/cake3.jpeg differ diff --git a/images/cake4.jpeg b/images/cake4.jpeg new file mode 100644 index 000000000..ab15f978f Binary files /dev/null and b/images/cake4.jpeg differ diff --git a/images/logo.jpeg b/images/logo.jpeg new file mode 100644 index 000000000..e0366e8fd Binary files /dev/null and b/images/logo.jpeg differ diff --git a/images/pexels-photo-1854652.jpeg b/images/pexels-photo-1854652.jpeg new file mode 100644 index 000000000..3c053327b Binary files /dev/null and b/images/pexels-photo-1854652.jpeg differ diff --git a/images/pexels-photo-2062883.jpeg b/images/pexels-photo-2062883.jpeg new file mode 100644 index 000000000..20ceb74fe Binary files /dev/null and b/images/pexels-photo-2062883.jpeg differ diff --git a/images/pexels-photo-4099127.jpeg b/images/pexels-photo-4099127.jpeg new file mode 100644 index 000000000..aa5adcdd5 Binary files /dev/null and b/images/pexels-photo-4099127.jpeg differ diff --git a/images/pexels-photo-4110012.jpeg b/images/pexels-photo-4110012.jpeg new file mode 100644 index 000000000..1f76a74bb Binary files /dev/null and b/images/pexels-photo-4110012.jpeg differ diff --git a/index.html b/index.html index 60b1afe13..5669285fc 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,146 @@ + Responsive Cake webpage + + + + + + + +
+
+
+ +
+
+

Contact US

+

Country: United Kingdom

+

City: XXXXXXXX

+

Street: XXXXXXXX

+

Post Code: XXXXXX

+

Tel: XXXX XXX XXX

+

+
+
+ +
+ +
+
+ +
+
+
+

The Hottest Bakery

+

Welcome!

+

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum."

+
+ +
+
+

Carousel Example

+ +
+ +
+ +
+ +
+
+
+ +
Stawbery Cake
+
+
+
+
+ +
Pink Cakes
+
+
+
+
+ +
Browne
+
+
+
+
+ +
Birthday Cake
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..b3482fc35 100644 --- a/style.css +++ b/style.css @@ -1 +1,329 @@ /* Add your styling here */ + +/* Total reset from mayerweb.com */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, a { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} + +body { + background-color: #f0cda0; +} + +/************** Header START **************/ +.header { + display: flex; + flex-direction: column; + text-align: center; +} + +.div-header1, .div-header2 { + display: flex; + flex-direction: column; + border-bottom: 1px solid gray; +} + +/************** first header div start **************/ +.logo { + width: 100%; + border-bottom: 1px solid gray; +} + +.contact { + display: flex; + flex-direction: column; + padding-top: 1em; +} + +.contact h2 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.7em; + padding-bottom: 0.5em; +} + +.contact p { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.2em; +} + + +/************** first header div end **************/ +/* hr { + width: 95%; + height: 1px; + padding: 0; + margin: 0.5em; + color: 1px solid black; + +} */ +/*************** second header div start **************/ +.menu-list { + display: flex; + flex-direction: column; + /* justify-content: center; + align-items: flex-end; */ + /* margin: auto; */ +} + +.menu-list li{ + height: 4em; + width: 99%; + display: flex; + border-bottom: 1px solid gray; +} + +.menu-list a { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.2em; + margin: auto; + color: black; + +} + + +/************** second header div end **************/ +/************** Header END **************/ + +/************** Main Section Start **************/ +/* First Columns Start */ +main { + margin-top: 0.5em; + +} + +.first-column h1 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.9em; + padding-bottom: 0.5em; + text-align: center; + font-weight: bold; +} + +.first-column h2 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.7em; + padding-bottom: 0.5em; + text-align: center; + font-weight: bold; + +} + +.first-column p { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.2em; + text-align: center; + width: 90%; + margin: auto; + +} + +/************* * First Columnd End **************/ +/************** second column Start **************/ +article{ + display: flex; + flex-direction: column; +} + +.second-column{ + margin-bottom: 0.5em; +} +.container h2{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.7em; + padding-bottom: 0.5em; + padding-top: 0.5em; + text-align: center; +} + + +/************* * second column :end **************/ +/* galery of pictures start */ +.galerry-of-pictures { + display: flex; + flex-direction: column; +} + +.first-article { + display: flex; + flex-direction: column; +} + +.cake-list-foto { + margin: auto; + width: 95%; + border: 1px solid black; + margin-top: 1em; + +} +.cake { + /* margin: auto; */ + text-align: center; +} + +.cake-img{ + width: 95%; + padding-top: 0.5em; +} + +.cake figcaption{ + text-align: center; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.5em; +} + +/************** galery of pictures end *************/ +/************** Footer section start **************/ +.page-footer { + padding-top: 1em; + display: flex; + flex-direction: column; + +} + +.footer-list { + display: flex; + flex-direction: column; + /* justify-content: center; + align-items: flex-end; */ + /* margin: auto; */ +} + +.footer-list li{ + height: 4em; + width: 99%; + display: flex; + border-bottom: 1px solid gray; + background-color: #b0684c; + width: 100%; +} + +.footer-list a { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.2em; + margin: auto; + color: black; + +} + +.footer-list li:first-child { + border-top: 1px solid gray; + +} +/************** footer section end **************/ + + +/************** Main Section end **************/ + + +/* MEDIA QUERIES */ + +/* bootstrap tips: +xs (for phones - screens less than 768px wide) +sm (for tablets - screens equal to or greater than 768px wide) +md (for small laptops - screens equal to or greater than 992px wide) +lg (for laptops and desktops - screens equal to or greater than 1200px wide) */ + +@media screen and (min-width: 768px){ + + + .div-header1 { + flex-direction: row; + background-color: #b0684c; + justify-content: space-between; + } + + .menu-list { + flex-direction: row; + } + + .logo-container { + margin-left: 0em; + margin-top: 1em; + } + + .logo { + width: 50%; + + } + + .contact { + padding-bottom: 1em; + margin-right: 3.5em; + width: 30%; + } + + .galerry-of-pictures { + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: flex-end; + + } + + .cake-list-foto { + /* width: 49%; */ + /* justify-content: flex-end; */ + /* align-items: flex-end; */ + border: none; + } + .cake { + justify-content: flex-end; + align-items: flex-end; + } + + .footer-list { + flex-direction: row; + } + +} +@media screen and (min-width: 992px) { + + .div-header2 { + width:80%; + margin: auto; + } + + + .first-article{ + width:80%; + margin: auto; + justify-content: center; + align-items: center; + } + + .container{ + width:80%; + margin: auto; + + } + + + .galerry-of-pictures{ + width:80%; + margin: auto; + } + + .page-footer{ + background-color: #b0684c; + margin-top: 1em; + padding-top: 0; + } + .footer-list { + width: 80%; + margin: auto; + } +} \ No newline at end of file