Responsive Cake webpage

diff --git a/index.html b/index.html index 60b1afe13..2cbbd919f 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,70 @@ Responsive Cake webpage + + +

LOGO

CONTACT

+ + +

+ +
+
+ + + +
+
+

HELLO +

INFORMATION

+ +

IMAGE CAROUSEL +
+
+

IMG1

IMG2

IMG3

IMG4

+
+
+ +

+ +
+
+ + +

CAKE1

CAKE2

CAKE3

CAKE4

+ +

+ +
+
+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 000000000..50515ec2d --- /dev/null +++ b/index.js @@ -0,0 +1,10 @@ +function participant(students, mentors) { + let percentageOfStudent = students / (students + mentors)*100; + let percentageOfMentors = mentors / (students + mentors)*100; + return percentageOfStudent; + +} +console.log("The percentage of student participant is" + " " + Math.round(participant(15, 8)) + "%"); + + + diff --git a/readme.md b/readme.md index d5b3314a8..112253f8f 100644 --- a/readme.md +++ b/readme.md @@ -1,21 +1,22 @@ Create a responsive webpage showcasing your cake business ## Set up -1) Fork this repository (so you have a copy of it in your own Github account) -2) Clone the repository to your computer (so you can access it locally and can add code to it!) --- -3) Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently. -4) When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work. +1. Fork this repository (so you have a copy of it in your own Github account) +2. ## Clone the repository to your computer (so you can access it locally and can add code to it!) +3. Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently. +4. When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work. ## Exercise ### Start with your mobile design + - Draw a wireframe of how the website will look like on mobile - Write the HTML following this mobile design - Then write your CSS for everything to look great on mobile ### Then adapt the page to look good on desktop + - Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen ![Wireframe for inspiration:](./images/mums-w-frame.jpg) diff --git a/style.css b/style.css index 6de1b3567..0ab1dcc12 100644 --- a/style.css +++ b/style.css @@ -1 +1,75 @@ /* Add your styling here */ + +.flex-container { + display: flex; + background-color: #d3d3d3; + justify-content: space-around; +} + +.flex-container > div { + background-color: #a9a9a9; + margin: 0.627em; + padding: 1.255em; + font-size: 1.882em; +} + +.nav-bar { + display: flex; + background-color: #d3d3d3; + justify-content: space-around; + flex-direction: row-reverse; +} + +.nav-bar > div { + background-color: #0a0101; + margin: 0.627em; + padding: 0.1em; + font-size: 1.882em; + color: white; + margin-top: 3.764em; +} + +.main-content { + display: flex; + background-color: #a9a9a9; +} + +.main-content > div { + background-color: #d3d3d3; + margin: 0.627em; + padding: 3.137em; + font-size: 1.875em; +} + +.main-content div:nth-child(2) > p { + display: inline-block; +} + +.order-list { + display: flex; + background-color: #a9a9a9; +} + +.order-list > div { + background-color: #d3d3d3; + margin: 0.627em; + padding: 1.509em; + font-size: 1.882em; +} + +.extra-info { + display: flex; + background-color: #a9a9a9; +} + +.extra-info > div { + background-color: #f1f1f1; + margin: 0.627em; + padding: 0.937em; + font-size: 1.875; +} + +@media only screen and (max-width: 100%) { + body { + } +}