diff --git a/img/img1.jpg b/img/img1.jpg new file mode 100644 index 000000000..4e3b50e57 Binary files /dev/null and b/img/img1.jpg differ diff --git a/img/img2.jpg b/img/img2.jpg new file mode 100644 index 000000000..c38d9afba Binary files /dev/null and b/img/img2.jpg differ diff --git a/img/img3.jpg b/img/img3.jpg new file mode 100644 index 000000000..b174a2cc0 Binary files /dev/null and b/img/img3.jpg differ diff --git a/img/img4.jpg b/img/img4.jpg new file mode 100644 index 000000000..5a19bdb8d Binary files /dev/null and b/img/img4.jpg differ diff --git a/img/istockphoto-1079817466-612x612.jpg b/img/istockphoto-1079817466-612x612.jpg new file mode 100644 index 000000000..cd05a6b70 Binary files /dev/null and b/img/istockphoto-1079817466-612x612.jpg differ diff --git a/img/istockphoto-1346881405-612x612.jpg b/img/istockphoto-1346881405-612x612.jpg new file mode 100644 index 000000000..66d58472e Binary files /dev/null and b/img/istockphoto-1346881405-612x612.jpg differ diff --git a/img/istockphoto-1351933727-612x612.jpg b/img/istockphoto-1351933727-612x612.jpg new file mode 100644 index 000000000..34523be7c Binary files /dev/null and b/img/istockphoto-1351933727-612x612.jpg differ diff --git a/img/istockphoto-1365399021-612x612.jpg b/img/istockphoto-1365399021-612x612.jpg new file mode 100644 index 000000000..7609787b5 Binary files /dev/null and b/img/istockphoto-1365399021-612x612.jpg differ diff --git a/img/istockphoto-1397569076-612x612.jpg b/img/istockphoto-1397569076-612x612.jpg new file mode 100644 index 000000000..44f600164 Binary files /dev/null and b/img/istockphoto-1397569076-612x612.jpg differ diff --git a/index.html b/index.html index 60b1afe13..d82a5acbd 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,79 @@ Responsive Cake webpage + + + +
+ +

The best cakes in town
delivered to your door!

+
+
+
+
+

Welcome

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, + when an unknown printer took a galley of type and scrambled it to make a + type specimen book. It has survived not only five centuries, but also + the leap into electronic typesetting, remaining essentially + unchanged.

+
+
+
+ Cake +
+
+ 1 + 1 + 1 + 1 +
+
+ + + + \ No newline at end of file diff --git a/istockphoto-1079817466-612x612.jpg b/istockphoto-1079817466-612x612.jpg new file mode 100644 index 000000000..cd05a6b70 Binary files /dev/null and b/istockphoto-1079817466-612x612.jpg differ diff --git a/istockphoto-1346881405-612x612.jpg b/istockphoto-1346881405-612x612.jpg new file mode 100644 index 000000000..66d58472e Binary files /dev/null and b/istockphoto-1346881405-612x612.jpg differ diff --git a/istockphoto-1351933727-1024x1024.jpg b/istockphoto-1351933727-1024x1024.jpg new file mode 100644 index 000000000..dc320fc85 Binary files /dev/null and b/istockphoto-1351933727-1024x1024.jpg differ diff --git a/istockphoto-1351933727-612x612 (1).jpg b/istockphoto-1351933727-612x612 (1).jpg new file mode 100644 index 000000000..34523be7c Binary files /dev/null and b/istockphoto-1351933727-612x612 (1).jpg differ diff --git a/style.css b/style.css index 6de1b3567..e27cb4e46 100644 --- a/style.css +++ b/style.css @@ -1 +1,243 @@ -/* Add your styling here */ +/* basic CSS */ + + + +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap'); + + + +.nav-link:hover { + color: #00a911; +} + +.nav-logo { + width: 30%; + margin-top: 5rem; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +html { + font-size: 62.5%; + font-family: 'Roboto', sans-serif; +} + +li { + list-style: none; +} + +a { + text-decoration: none; +} +/* header and navbar*/ +.header { + border-bottom: 1px solid #E2E8F0; + background-image: linear-gradient(lightgreen, lightblue); + height: 30em; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + +} +/* hamburger styles */ /* +.hamburger { + display: none; +} +*/ +.bar { + + display: block; + width: 45px; + height: 4px; + border-radius: 5px; + margin: 6px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #1d1d1d; +} +/* basic styles for our other elements 11/11/22 */ + +/* +.nav-menu { + position: fixed; + left: -100%; + top: 5rem; + flex-direction: column; + background-color: #fff; + width: 100%; + border-radius: 10px; + text-align: center; + transition: 0.3s; + box-shadow: + 0 10px 27px rgba(0, 0, 0, 0.05); +} +*/ +.nav-menu.active { + left: 0; +} + +.nav-item { + margin: 2.5rem 0; +} + +.hamburger { + display: block; + cursor: pointer; + margin-top: -60px; +} + +.slogan { + font-size: 2em; + display: block; + text-align: right; + margin: 0 2.5em; + justify-self: start; +} + +footer { + background-color: lightgray; +} + +.footer { + text-align: center; +} + +img { + width: 200px; + height: 150px; +} + +.cake { + width: 100%; + height: 100%; +} + + +/*css for hamburger with added some js*/ +.hamburger.active .bar:nth-child(2) { + opacity: 0; +} + +.hamburger.active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg); +} + +.hamburger.active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); +} + + +/*-- media query--- @media (min-width:540px) {} */ + +@media (min-width:540px) { +.nav-menu { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-item { + margin-left: 5rem; + background-color: #ccf1dd; + padding: .5em; + border-radius: 5px; +} + +.nav-link { + font-size: 1.6rem; + font-weight: 400; + color: #20487f; + +} + +.nav-link:hover { + color: #00a911; +} + +.nav-logo { + width: 30%; + margin-top: 5rem; +} + + +.header { + border-bottom: 1px solid #E2E8F0; + background-image: linear-gradient(lightgreen, lightblue); + height: 30em; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; +} +.welcome { + font-size: 2rem; +} +/* hamburger styles */ +.hamburger{ + display: none; +} +} +/* +.bar { + + display: block; + width: 45px; + height: 4px; + border-radius: 5px; + margin: 6px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #1d1d1d; +} */ + +/* basic styles for our other elements 11/11/22 */ +/* +.nav-menu { + position: fixed; + left: -100%; + top: 5rem; + flex-direction: column; + background-color: #fff; + width: 100%; + border-radius: 10px; + text-align: center; + transition: 0.3s; + box-shadow: + 0 10px 27px rgba(0, 0, 0, 0.05); +} */ +/* +.nav-menu.active { + left: 0; +} + +.nav-item { + margin: 2.5rem 0; +} + +.hamburger { + display: block; + cursor: pointer; + margin-top: -60px; +} +html { + font-size: 62.5%; + font-family: 'Roboto', sans-serif; +} + +li { + list-style: none; +} + +a { + text-decoration: none; +}