diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index a815a6d..777df56 100644 --- a/README.md +++ b/README.md @@ -3,19 +3,23 @@ In this exercise, we'll be using everything we've learned so far about the Box Model and CSS selectors. ## Instructions + Replicate the website in the screenshot below: ![Screenshot](images/screenshot.png) ## Tips + - Think about the hierarchy of the page, start by creating elements for each section, then work your way through each section until you're happy with how it looks - Use divs for containers where appropriate - Give your elements readable classes to easily identify and style them - If you have multiple of something, it's probably a list. You can always style the list to your liking though! ## Extension #1 + - Add a testimonial section after the follow us part! ## Extension #2 -- Add a second page that links to the about us, and has the same layout and styling + +- Add a second page that links to the about us, and has the same layout and styling - On this page add the about information, and after creating a section that has a row of cards with different gym locations diff --git a/index.html b/index.html new file mode 100644 index 0000000..61b041d --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + Gymtastic + + + +
+ + +
+ +
+
+

Fitness for Life!

+

+ Every gym is designed with you in mind, from the way they're laid out, + to the range of equipment available. +

+

+ Get you membership today and save a whopping 50%! +

+ + GET MEMBERSHIP +
+ +
+

Follow us on

+ Instagram + + YouTube +
+
+ + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cd6f269 --- /dev/null +++ b/styles.css @@ -0,0 +1,106 @@ +* { + font-family: sans-serif; + } + + body { + margin: 0; + padding: 0; + } + + h2, + strong { + color: #0d5f80; + } + + header { + background-color: #077caa; + padding: 20px; + } + + header * { + display: inline; + } + + header .logo { + color: white; + font-size: 20px; + font-weight: bolder; + } + + header ul { + list-style: none; + margin-left: 20px; + } + + header ul li { + margin-right: 20px; + } + + header ul a { + color: white; + text-decoration: none; + } + + main { + padding: 30px; + } + + section { + padding: 10px; + } + + .cta { + color: #f77b08; + border: solid 2px #f77b08; + padding: 10px 20px; + margin-top: 20px; + display: inline-block; + border-radius: 10px; + text-decoration: none; + } + + .instagram { + color: white; + font-weight: bold; + text-decoration: none; + padding: 9px 30px; + border-radius: 10px; + border: solid 2px rgb(154, 55, 225); + background-color: rgb(154, 55, 225); + } + + .facebook { + color: white; + font-weight: bold; + text-decoration: none; + padding: 9px 30px; + border-radius: 10px; + border: solid 2px blue; + background-color: blue; + } + + .youtube { + color: white; + font-weight: bold; + text-decoration: none; + padding: 9px 30px; + border-radius: 10px; + border: solid 2px red; + background-color: red; + } + + footer { + padding: 30px; + background-color: #077caa; + color: white; + } + + footer .list-item { + list-style-type: none; + font-weight: bold; + } + + footer ul { + list-style-type: none; + } + \ No newline at end of file