diff --git a/Cakes/images (1).jpg b/Cakes/images (1).jpg new file mode 100644 index 000000000..108bf54f1 Binary files /dev/null and b/Cakes/images (1).jpg differ diff --git a/Cakes/images (2).jpg b/Cakes/images (2).jpg new file mode 100644 index 000000000..51e12bf5f Binary files /dev/null and b/Cakes/images (2).jpg differ diff --git a/Cakes/images (3).jpg b/Cakes/images (3).jpg new file mode 100644 index 000000000..b12b68ba3 Binary files /dev/null and b/Cakes/images (3).jpg differ diff --git a/Cakes/images (4).jpg b/Cakes/images (4).jpg new file mode 100644 index 000000000..2252c2165 Binary files /dev/null and b/Cakes/images (4).jpg differ diff --git a/Cakes/images (5).jpg b/Cakes/images (5).jpg new file mode 100644 index 000000000..f9c5fb594 Binary files /dev/null and b/Cakes/images (5).jpg differ diff --git a/Cakes/images (7).jpg b/Cakes/images (7).jpg new file mode 100644 index 000000000..38213f54a Binary files /dev/null and b/Cakes/images (7).jpg differ diff --git a/Cakes/images.jpg b/Cakes/images.jpg new file mode 100644 index 000000000..99e5c2013 Binary files /dev/null and b/Cakes/images.jpg differ diff --git a/index.html b/index.html index 60b1afe13..26b3354c0 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,80 @@ - + - + Responsive Cake webpage - - + + - - - + + + + + + + + + + Responsive Cake Webpage + + +
+ Brand logo +
+ + +

The best cakes in town delivered to your door

- \ No newline at end of file + + +
+
+ +
+
+
+

Welcome

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias + officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis? + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias + officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis?

+
+ +
+ Chocolate with fruit party Cake +
+
+
+
+ Butterscotch wedding cake + White chocolate wedding cake + Mint cream birthday cake + Buttermilk chocolate cake +
+
+
+ +
+
+ instagram + Pinterest + Facebook +
+
+ + + \ No newline at end of file diff --git a/practice.js b/practice.js new file mode 100644 index 000000000..58e84b97f --- /dev/null +++ b/practice.js @@ -0,0 +1,79 @@ +// + +// let kitten = { +// furColour: "orange", +// age: "23", +// }; + +// let laptop ={ +// brand: "Lenovo", +// ram: "5GB", +// }; + +// let phone = { +// operatingSystem: "iOS", +// hasStylus: true, +// megapixels: 12, +// "batteryLife": "24 hours", +// } + +// console.log(phone.hasStylus); + +// let laptop = { +// brand: "Lenovo", +// screenSize: 13, +// isTouchscreen: true, +// }; +// console.log(laptop.brand); + +// let kitten = { +// ageMonths: 3, +// isFemale: true, +// furColour: "brown", +// }; + +// console.log(kitten.ageMonths); +// console.log(kitten.isFemale); +// console.log(kitten.furColour); + +// let phone = { +// brand:'iPhone', +// model: 'iPhone X', +// launchYear: 2017, +// isUnlocked: true, +// }; + +// let phoneBrand = phone.brand; +// let phoneLaunchYear = phone["launchYear"]; + +// console.log(phoneBrand); +// console.log(phoneLaunchYear); + +// WRITE CODE BELOW THIS +// let cow = { +// name: "Rex", +// eatGrass: "true", +// }; +// // WRITE CODE ABOVE THIS + +// console.log(cow.name); +// console.log(cow.eatGrass); + +// let house = { +// address: "1 Kinning Park", +// previousOwners: ["Claire M.", "John A."], +// currentOwner: { +// firstName: "Margaret", +// lastName: "Conway", +// }, +// }; + let house = { + address: '51 Berkley Road', + previousOwners: ["Brian M.", "Fiona S."], + currentOwner: { + firstName: "Montgomery", + } + } + console.log(house.address); + console.log(house.previousOwners); + console.log(house.currentOwner.firstName); \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..b6ba77f88 100644 --- a/style.css +++ b/style.css @@ -1 +1,135 @@ /* Add your styling here */ + +/* General*/ +* { + margin: 0; + padding: 0; +} + +body { + font-family: Arial, Helvetica, sans-serif; + background-color: bisque; +} + +/* header */ +.header-container { + display: flex; + position: relative; + justify-content: space-between; + margin-bottom: auto; + justify-items: left; + image-resolution: 15%; +} + +.header-container img { + width: 50vw; + padding: 20px; + position: absolute; +} +@media screen and (min-width: 600px) { + .header-container img { + width: 300px; + } +} +@media screen and (min-width: 1000px) { + .header-container img { + width: 350px; + } +} +@media screen and (min-width: 2000px) { + .header-container img { + width: 400px; + } +} + +.toggle-title { + display: flex; + flex-direction: column; + padding: 20px; + align-items: flex-end; + width: 100vw; +} + +.toggle-title h1 { + font-size: 15px; + text-align: right; + width: 138px; + margin: 43px 0; + color: #3C372C; +} +@media screen and (min-width: 540px) { + .toggle-title h1 { + font-size: 18px; + } +} +@media screen and (min-width: 800px) { + .toggle-title h1 { + font-size: 20px; + width: 400px; + } +} +@media screen and (min-width: 1000px) { + .toggle-title h1 { + font-size: 30px; + width: 600px; + } +} +@media screen and (min-width: 1400px) { + .toggle-title h1 { + font-size: 50px; + width: 1000px; + } +} + +.toggle-title ul { + margin-left: auto; + margin: auto; + width: 90vw; + padding-top: 20px; +} + +.toggle-title li { + list-style: none; + line-height: 70px; + border-bottom: 4px line #f29191; +} + +.toggle-title a { + text-decoration: none; + padding: 10px; + color: #fff; +} +/*Nav bar*/ +.nav-link { + background-color: #809eff5e; + box-shadow: 4px 5px #FFCCAA; + border-radius: 20px; +} + +.nav-link:hover { + background-color: #91f2dd; +} + +/* turns toggle on and off */ +input[type=checkbox] { + display: none; +} + +ul { + display: none; +} + +input[type=checkbox]:checked ~ ul { + display: block; +} +@media screen and (min-width: 540px) { + label { + display: none; + } +} +@media screen and (min-width: 540px) { + .toggle-title ul { + display: flex; + justify-content: flex-end; + } +} \ No newline at end of file diff --git a/week4.js b/week4.js new file mode 100644 index 000000000..23b3a14ea --- /dev/null +++ b/week4.js @@ -0,0 +1,31 @@ +//let years = [1964, 2008, 1999, 2005, 1978, 1985, 1919] +//years.forEach(function(num)){ +//let x = num - 7 +//console.log(x) + +let array = [ + 100, + "iSMael", + 55, + 45, + "sANyiA", + 66, + "JaMEs", + "eLAmIn", + 23, + "IsMael", + 67, + 19, + "ElaMIN", + ]; + + function removeNumbers(element) { + if(typeof element === "string") { + return element; + } + } + + function upperCase(name) { + return name.toUpperCase() + "!" ; + + } \ No newline at end of file