diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..34012253 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d59a798a..1573b2d8 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # Business Site -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +For this assignment, I decided to create a one-page website for a tennis training business. The site contains a hero header/image, a contact form, and the site is responsive. ## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +When I first developed the page I found it challenging to adapt it from desktop to mobile. So I decided to start over and build the site with a mobile-first approach. Afterwards I used mediaqueries to make sure that the layout worked well on larger screens like iPads and desktops. I struggled quite a bit with the hero image, figuring out how to style it in CSS so it looked good on all devices, which took a lot of time. Despite the challenges it was a fun learning experience and from now on I feel that I will likely stick with the mobile-first approach moving forward. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://sherrys-project-business-site.netlify.app/ diff --git a/code/index.html b/code/index.html index 85fe8e53..09b14729 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,67 @@ - - - - Business Site - - - -

Business name 🌻

- + + + + + - - - + + + Business Site + + + + + + + +
+ +
+

Pro Tennis Training Club

+
+ +
+

Improve your game with personalized tennis lessons

+
+ +
+

Wether you are a beginner or looking to refine your skills, our coaches are here to help you

+
+ + + +
+
+ +
Sign up here
+ +
+
+ +
+
+
+
+ + + + +
+
+ + +
+
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 529ed755..331dff98 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,120 @@ -/* After you've linked the CSS file in the HTML, -this should turn the background blue ;) */ +/* This webpage is coded in mobilfirst style - This styling is for the header*/ + body { - background: blue; + background-color: #FFF8E8; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.container { + width: 100%; + max-width: 800px; + padding: 15px; + box-sizing: border-box; +} + +.hero { + background-image: url("https://images.unsplash.com/photo-1622163642998-1ea32b0bbc67?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLWxpa2VkfDF8fHxlbnwwfHx8fHw%3D"); + height: 30vh; + width: 50%; + background-size: cover; + background-repeat: no-repeat; + margin-bottom: 10px; + align-items: center; + border-radius: 5px; + +} + +.hero h3 { + color: #FFF8E8; + text-transform: uppercase; + font-size: 20px; + font-family: sans-serif; + text-align: center; +} + + +/*Code for text-area and section*/ +.text-area { + display: flex; + background-color: #F7EED3; + color: #674636; + text-transform: uppercase; +} + +.text-area h4 { + font-family: sans-serif; + font-size: 20px; +} + +.text-section { + display: flex; + background-color: #F7EED3; + color: #674636; + text-transform: uppercase; + font-family: sans-serif; + font-size: 15px; + font-weight: bold; +} + +/*Code for form*/ +.box { + background-color: #F7EED3 +} + +h5 { + font-family: sans-serif; + font-size: 15px; + font-weight: bold; + color: #674636; + text-transform: uppercase; + text-decoration: underline; +} + +input { + margin-right: 10px; + border: 2px solid #674636; + padding: 10px; + background-color: #FFF8E8; +} + +button { + width: 22%; + padding: 7px; + border: 3px solid #674636; + cursor: pointer; + background-color: #FFF8E8; +} + +button:hover { + background-color: #F7EED3 +} + + +/* Media query for screens wider than 420px*/ +@media(min-width: 445px)and (max-width: 667px) { + .hero { + height: 60vh; + width: 60%; + } + +} + + +/*Media query for screens wider than 667px*/ +@media(min-width: 668px) { + .hero { + + background-size: contain; + height: 70vh; + margin-bottom: 0px; + } + + .text-area { + margin-top: 0px; + } } \ No newline at end of file