diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..389dde4e Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d59a798a..4df3ae79 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,16 @@ # 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 project i chose to build a business landing page for guided bus tours in Scotland. I designed a page with a hero image, 3 info-elements and one form to if you want to book a guided tour. ## 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? +I started of by making a design in figma. I started by watching/googling how to make a hero image to start with. And it was more tricky then I imagined - but I managed to do it! I did the landing page in general and did the form last of all. I didn't want the input of the form to be to big of a size - and therefor I used flexbox to put the label and input next to each other. And did the same for the other element in the form as well. For the form I used input type: number, text and email. + +I felt I could have worked much longer with the styling and fonts in general for the landing page. But also tried out more attributes for the form. ## 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. +Business site: https://business-site-guided-trip-scotland.netlify.app + + +## View it live with "Accessibility" +Business site: https://project-8-accessibility--business-site-guided-trip-scotland.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..efa62cc6 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/images/.DS_Store b/code/images/.DS_Store new file mode 100644 index 00000000..4380f754 Binary files /dev/null and b/code/images/.DS_Store differ diff --git a/code/images/harry-potter-train-new.jpg b/code/images/harry-potter-train-new.jpg new file mode 100644 index 00000000..aa482f34 Binary files /dev/null and b/code/images/harry-potter-train-new.jpg differ diff --git a/code/images/harry-potter-train.jpg b/code/images/harry-potter-train.jpg new file mode 100644 index 00000000..4652e571 Binary files /dev/null and b/code/images/harry-potter-train.jpg differ diff --git a/code/images/header-scotland-new.jpg b/code/images/header-scotland-new.jpg new file mode 100644 index 00000000..99e5a732 Binary files /dev/null and b/code/images/header-scotland-new.jpg differ diff --git a/code/images/header-scotland.jpg b/code/images/header-scotland.jpg new file mode 100644 index 00000000..3e45b321 Binary files /dev/null and b/code/images/header-scotland.jpg differ diff --git a/code/images/loch-ness-new.jpg b/code/images/loch-ness-new.jpg new file mode 100644 index 00000000..78f55ab6 Binary files /dev/null and b/code/images/loch-ness-new.jpg differ diff --git a/code/images/loch-ness.jpg b/code/images/loch-ness.jpg new file mode 100644 index 00000000..6e5fe0c8 Binary files /dev/null and b/code/images/loch-ness.jpg differ diff --git a/code/images/logo-bc.png b/code/images/logo-bc.png new file mode 100644 index 00000000..e42a3975 Binary files /dev/null and b/code/images/logo-bc.png differ diff --git a/code/images/the-highlands-new.jpg b/code/images/the-highlands-new.jpg new file mode 100644 index 00000000..6d339831 Binary files /dev/null and b/code/images/the-highlands-new.jpg differ diff --git a/code/images/the-highlands.jpg b/code/images/the-highlands.jpg new file mode 100644 index 00000000..33a5f657 Binary files /dev/null and b/code/images/the-highlands.jpg differ diff --git a/code/index.html b/code/index.html index 85fe8e53..0339322f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,161 @@ - + Business Site + -

Business name 🌻

+ +
+
+ + + + +
+ +
+

EXPLORE SCOTLAND WITH US

+

Book a ticket for a bus seat today and join us for an amazing guided two weeks in Scotlands great dunes! Food, culture, nature and more - we won’t let you miss anything. Not even the windy great cliffs!

+
+
+ Read more + Book a ticket +
+
+
+ + + +
+ +

Read more about the different guided tours you can book with us down below

+ +
+ +
+

2-day trip

+

The Harry Potter train!

+
+ Guided tours: Harry Potter train +
+
+ Tour details +
+
+ +
+

4-day trip

+

The monster of Loch Ness!

+
+ Guided tours: Loch Ness +
+
+ Tour details +
+
+ +
+

8-day trip

+

Glorious Inverness!

+
+ Guided tours: The Highlands +
+
+ Tour details +
+
+ +
+ + +

Sign up on a trip below - and we will contact you further!

+ +
+ +
+ + +
+ + +
+

Choose a month of your arrival in Scotland:

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ +
+ Your information: + +

+ + +

+ +

+ + +

+ +

+ + +

+
+ +

+ +

+ +
+ +
+ + diff --git a/code/style.css b/code/style.css index 529ed755..79571ddd 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,308 @@ -/* After you've linked the CSS file in the HTML, -this should turn the background blue ;) */ + body { - background: blue; + background: #F3EAE1; + padding: 0; + margin: 0; +} +header { + background-image: url('./images/header-scotland-new.jpg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + height: 600px; +} +p, +form { + font-family: system-ui; +} +.header-content-width { + max-width: 1200px; + margin: 0 auto; + padding: 20px 40px; + display: flex; + justify-content: space-between; + align-items: center; +} +.nav-small-screen { + display: flex; + align-items: center; +} +.nav-small-screen-icon { + list-style: none; + text-decoration: none; + display: flex; + flex-direction: column; + row-gap: 10px; + cursor: pointer; +} +.nav-menu-item-small-screen { + width: 30px; + border-bottom: #fff 3px solid; +} +.nav-small-screen-links { + list-style: none; + text-decoration: none; + display: none; + cursor: pointer; + max-width: 480px; +} +.nav-menu-links { + padding: 14px 7px; + font-size: 17px; + color: #000; +} +.nav-menu-links>a { + text-decoration: none; + color: #000; +} +/* textbox header */ +.header-textbox { + background-color: rgb(255, 255, 255, .5); + width: 40%; + min-height: 200px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 10px; + padding: 30px; + color: #000; +} +.header-textbox>h1 { + border-bottom: #000 solid 2px; + padding-bottom: 10px; +} +.button-header-flex { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.button-header { + background-color: #9A6C4D; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: 600; + box-shadow: 1px 1px 2px #4f4646; + margin-top: 30px; +} + +/* main conatiner */ +.main-container { + max-width: 1200px; + margin: 0 auto; + padding: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +/* h2 main section */ +.section-tour-example-h2 { + font-size: 2.5rem; + color: #9A6C4D; + margin: 60px 0 30px; + width: 65%; + text-align: center; +} + +/* tour examples */ +.section-tour-example { + display: grid; + align-items: center; + gap: 20px; + grid-template-columns: repeat(3, 1fr); +} +.tour-example { + background-color: #464f49c2; + padding: 20px; + color: #fff; + border-radius: 15px; +} +.small-text-tour-example { + font-size: 0.9rem; + margin-bottom: 0; + padding-bottom: 10px; +} +.tour-example>h3 { + font-size: 1.4rem; + margin-top: 0; + padding-top: 0; +} +.tour-example-img { + width: 100%; + height: 250px; + object-fit: cover; +} +.div-button-tour-example { + padding: 30px 15px; + text-align: center; +} +.button-tour-example { + background-color: #F3EAE1; + color: #000; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: 600; + box-shadow: 1px 1px 2px #525252; + margin-top: 30px; +} + +/* form */ +.form-book-a-tour { + border-radius: 10px; + border: solid 2px rgba(149, 94, 57, 0.36); + margin: 10px 0 60px; + padding: 50px; + width: 70%; + box-sizing: border-box; +} +.label-input-radio { + display: flex; + justify-content: flex-start; + gap: 15px 25px; + margin: 20px 0 +} +.label-input-flex { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px 25px; +} +fieldset { + margin: 40px 0; + border: none; + padding: 0; +} +legend { + font-size: 1.5rem; + color: #9A6C4D; + margin: 30px 0 10px; + padding: 0; +} +.radioboxes { + width: 80%; + padding: 0 0 12px; + display: flex; + justify-content: flex-start; + flex-direction: column; + list-style: none; +} +.radioboxes>li { + align-items: center; + display: flex; + gap: 0 10px; +} +.radioboxes>li>input { + border: 0px; + width: 24px; + height: 2em; +} +#guided-trip, +input[type=text], +input[type=email], +input[type=number] { + width: 80%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + background-color: #464f49c2; + border: none; + color: #fff; + font-size: 1.1rem; +} +.label-for-radio, +label[for=guided-trip], +label[for=name], +label[for=email], +label[for=number] { + width: 30%; +} +input[type=submit] { + width: 40%; + background-color: #9A6C4D; + color: white; + padding: 14px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} +input:focus { + outline: 2px solid #000; + box-shadow: 1px 1px 8px 1px #000; +} +.button-submit-flex { + display: flex; + justify-content: center; +} + +@media screen and (max-width: 776px) { + /* main container */ + .main-container { + padding: 10px; + align-items: normal; + } + /* header */ + header { + height: 650px; + } + .button-header { + width: 100%; + text-align: center; + margin-top: 0; + } + .header-textbox { + width: 65%; + min-height: 150px; + top: 60%; + } + /* tour guides */ + .section-tour-example { + gap: 20px; + grid-template-columns: repeat(1, 1fr); + } + .section-tour-example-h2 { + width: 90%; + } + /* form */ + .label-for-radio, + label[for=guided-trip], + label[for=name], + label[for=email], + label[for=number] { + width: 100%; + } + #guided-trip, + input[type=submit], + input[type=text], + input[type=email], + input[type=number] { + width: 100%; + } + .label-input-flex, + .label-input-radio { + flex-wrap: wrap; + } + .form-book-a-tour { + width: 100%; + padding: 40px 20px; + } +} + +@media screen and (max-width: 500px) { + .nav-small-screen-links { + background-color: #ffffffc7; + top: 60px; + left: 20px; + max-width: 300px; + margin: 0 auto; + } + .nav-small-screen-links>li { + text-align: center; + width: 60px + } } \ No newline at end of file