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..6679de9c 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # 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 diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..8c451f54 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..e708e67e 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..b32cb6ed 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..96eb2ef1 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..d3f243fd 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..660d6542 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,142 @@ - + 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 our 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..79814c9e 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,253 @@ /* 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>ul { + 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; +} +/* 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: #fff; +} +.header-textbox>h1 { + border-bottom: #9A6C4D 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: 500; + 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: rgba(149, 94, 57, 0.36); + 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; +} + +/* 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; + align-items: center; + gap: 10px 25px; +} +.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.3rem; + color: #9A6C4D; + margin: 30px 0 10px; + padding: 0; +} +.radioboxes { + width: 80%; + padding: 12px 0; + display: flex; + justify-content: flex-start; + flex-direction: column; +} +#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: rgba(149, 94, 57, 0.36); + 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; +} +.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; + } } \ No newline at end of file