From a1ed981a5aa3be2228e9a7b142c3061d5fe6204a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Wed, 24 May 2023 01:00:12 +0300 Subject: [PATCH 01/40] Checked off completed tasks in README.md --- .history/ReadMe_20230524001002.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005929.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005930.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005933.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005936.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005938.md | 73 +++++++++++++++++++++++++++++++ .history/ReadMe_20230524005941.md | 73 +++++++++++++++++++++++++++++++ ReadMe.md | 10 ++--- 8 files changed, 516 insertions(+), 5 deletions(-) create mode 100644 .history/ReadMe_20230524001002.md create mode 100644 .history/ReadMe_20230524005929.md create mode 100644 .history/ReadMe_20230524005930.md create mode 100644 .history/ReadMe_20230524005933.md create mode 100644 .history/ReadMe_20230524005936.md create mode 100644 .history/ReadMe_20230524005938.md create mode 100644 .history/ReadMe_20230524005941.md diff --git a/.history/ReadMe_20230524001002.md b/.history/ReadMe_20230524001002.md new file mode 100644 index 000000000..81b445e03 --- /dev/null +++ b/.history/ReadMe_20230524001002.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [ ] Fork and clone this repository. +- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [ ] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005929.md b/.history/ReadMe_20230524005929.md new file mode 100644 index 000000000..f3da4f692 --- /dev/null +++ b/.history/ReadMe_20230524005929.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [] Fork and clone this repository. +- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [ ] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005930.md b/.history/ReadMe_20230524005930.md new file mode 100644 index 000000000..122daa129 --- /dev/null +++ b/.history/ReadMe_20230524005930.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [ ] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005933.md b/.history/ReadMe_20230524005933.md new file mode 100644 index 000000000..207061490 --- /dev/null +++ b/.history/ReadMe_20230524005933.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [ ] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005936.md b/.history/ReadMe_20230524005936.md new file mode 100644 index 000000000..b00188ea7 --- /dev/null +++ b/.history/ReadMe_20230524005936.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [X] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [ ] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005938.md b/.history/ReadMe_20230524005938.md new file mode 100644 index 000000000..e9e6ab2a7 --- /dev/null +++ b/.history/ReadMe_20230524005938.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [X] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [X] cd into your repository on the command line and use code . to open VS Code. +- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/ReadMe_20230524005941.md b/.history/ReadMe_20230524005941.md new file mode 100644 index 000000000..042ae678f --- /dev/null +++ b/.history/ReadMe_20230524005941.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [X] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [X] cd into your repository on the command line and use code . to open VS Code. +- [X] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/ReadMe.md b/ReadMe.md index 81b445e03..042ae678f 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -23,11 +23,11 @@ Portfolio websites are a great way to show off your work to friends, family, and Follow these steps to set up and work on your project: -- [ ] Fork and clone this repository. -- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. -- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today. -- [ ] cd into your repository on the command line and use code . to open VS Code. -- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [X] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [X] cd into your repository on the command line and use code . to open VS Code. +- [X] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. - [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. ### Task 2: Minimum Viable Product From 5547c99ff1287affa5bc04b860cb01192ba99d29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sat, 27 May 2023 14:27:05 +0300 Subject: [PATCH 02/40] Added title to site. Header links with buttons and nav bar. --- .history/index_20230524001002.html | 11 +++++++++++ .history/index_20230527132905.html | 11 +++++++++++ .history/index_20230527132909.html | 11 +++++++++++ .history/index_20230527141011.html | 11 +++++++++++ .history/index_20230527141015.html | 11 +++++++++++ .history/index_20230527141016.html | 11 +++++++++++ .history/index_20230527141017.html | 13 +++++++++++++ .history/index_20230527141024.html | 13 +++++++++++++ .history/index_20230527141027.html | 13 +++++++++++++ .history/index_20230527141329.html | 15 +++++++++++++++ .history/index_20230527141348.html | 15 +++++++++++++++ .history/index_20230527141357.html | 15 +++++++++++++++ .history/index_20230527141400.html | 15 +++++++++++++++ .history/index_20230527141403.html | 15 +++++++++++++++ .history/index_20230527141404.html | 15 +++++++++++++++ .history/index_20230527141423.html | 15 +++++++++++++++ .history/index_20230527141434.html | 18 ++++++++++++++++++ .history/index_20230527141437.html | 15 +++++++++++++++ .history/index_20230527141438.html | 18 ++++++++++++++++++ .history/index_20230527142108.html | 19 +++++++++++++++++++ .history/index_20230527142109.html | 19 +++++++++++++++++++ .history/index_20230527142112.html | 20 ++++++++++++++++++++ .history/index_20230527142117.html | 21 +++++++++++++++++++++ .history/index_20230527142119.html | 21 +++++++++++++++++++++ .history/index_20230527142138.html | 21 +++++++++++++++++++++ .history/index_20230527142139.html | 21 +++++++++++++++++++++ .history/index_20230527142142.html | 21 +++++++++++++++++++++ .history/index_20230527142143.html | 21 +++++++++++++++++++++ .history/index_20230527142148.html | 21 +++++++++++++++++++++ .history/index_20230527142149.html | 21 +++++++++++++++++++++ .history/index_20230527142159.html | 21 +++++++++++++++++++++ .history/index_20230527142208.html | 21 +++++++++++++++++++++ .history/index_20230527142210.html | 21 +++++++++++++++++++++ .history/index_20230527142213.html | 21 +++++++++++++++++++++ .history/index_20230527142216.html | 21 +++++++++++++++++++++ .history/index_20230527142219.html | 21 +++++++++++++++++++++ .history/index_20230527142221.html | 21 +++++++++++++++++++++ .history/index_20230527142230.html | 21 +++++++++++++++++++++ .history/index_20230527142253.html | 22 ++++++++++++++++++++++ .history/index_20230527142255.html | 22 ++++++++++++++++++++++ .history/index_20230527142258.html | 24 ++++++++++++++++++++++++ .history/index_20230527142305.html | 24 ++++++++++++++++++++++++ .history/index_20230527142314.html | 24 ++++++++++++++++++++++++ .history/index_20230527142321.html | 24 ++++++++++++++++++++++++ .history/index_20230527142329.html | 24 ++++++++++++++++++++++++ .history/index_20230527142334.html | 24 ++++++++++++++++++++++++ .history/index_20230527142345.html | 24 ++++++++++++++++++++++++ .history/index_20230527142350.html | 24 ++++++++++++++++++++++++ .history/index_20230527142351.html | 24 ++++++++++++++++++++++++ .history/index_20230527142607.html | 24 ++++++++++++++++++++++++ .history/index_20230527142610.html | 24 ++++++++++++++++++++++++ index.html | 17 +++++++++++++++-- 52 files changed, 978 insertions(+), 2 deletions(-) create mode 100644 .history/index_20230524001002.html create mode 100644 .history/index_20230527132905.html create mode 100644 .history/index_20230527132909.html create mode 100644 .history/index_20230527141011.html create mode 100644 .history/index_20230527141015.html create mode 100644 .history/index_20230527141016.html create mode 100644 .history/index_20230527141017.html create mode 100644 .history/index_20230527141024.html create mode 100644 .history/index_20230527141027.html create mode 100644 .history/index_20230527141329.html create mode 100644 .history/index_20230527141348.html create mode 100644 .history/index_20230527141357.html create mode 100644 .history/index_20230527141400.html create mode 100644 .history/index_20230527141403.html create mode 100644 .history/index_20230527141404.html create mode 100644 .history/index_20230527141423.html create mode 100644 .history/index_20230527141434.html create mode 100644 .history/index_20230527141437.html create mode 100644 .history/index_20230527141438.html create mode 100644 .history/index_20230527142108.html create mode 100644 .history/index_20230527142109.html create mode 100644 .history/index_20230527142112.html create mode 100644 .history/index_20230527142117.html create mode 100644 .history/index_20230527142119.html create mode 100644 .history/index_20230527142138.html create mode 100644 .history/index_20230527142139.html create mode 100644 .history/index_20230527142142.html create mode 100644 .history/index_20230527142143.html create mode 100644 .history/index_20230527142148.html create mode 100644 .history/index_20230527142149.html create mode 100644 .history/index_20230527142159.html create mode 100644 .history/index_20230527142208.html create mode 100644 .history/index_20230527142210.html create mode 100644 .history/index_20230527142213.html create mode 100644 .history/index_20230527142216.html create mode 100644 .history/index_20230527142219.html create mode 100644 .history/index_20230527142221.html create mode 100644 .history/index_20230527142230.html create mode 100644 .history/index_20230527142253.html create mode 100644 .history/index_20230527142255.html create mode 100644 .history/index_20230527142258.html create mode 100644 .history/index_20230527142305.html create mode 100644 .history/index_20230527142314.html create mode 100644 .history/index_20230527142321.html create mode 100644 .history/index_20230527142329.html create mode 100644 .history/index_20230527142334.html create mode 100644 .history/index_20230527142345.html create mode 100644 .history/index_20230527142350.html create mode 100644 .history/index_20230527142351.html create mode 100644 .history/index_20230527142607.html create mode 100644 .history/index_20230527142610.html diff --git a/.history/index_20230524001002.html b/.history/index_20230524001002.html new file mode 100644 index 000000000..d01f779ff --- /dev/null +++ b/.history/index_20230524001002.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/.history/index_20230527132905.html b/.history/index_20230527132905.html new file mode 100644 index 000000000..6cea297b8 --- /dev/null +++ b/.history/index_20230527132905.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + + + + + + Document + + + + + \ No newline at end of file diff --git a/.history/index_20230527141011.html b/.history/index_20230527141011.html new file mode 100644 index 000000000..d01f779ff --- /dev/null +++ b/.history/index_20230527141011.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/.history/index_20230527141015.html b/.history/index_20230527141015.html new file mode 100644 index 000000000..ce32a1695 --- /dev/null +++ b/.history/index_20230527141015.html @@ -0,0 +1,11 @@ + + + + + + Document + + +
+ \ No newline at end of file diff --git a/.history/index_20230527141016.html b/.history/index_20230527141016.html new file mode 100644 index 000000000..69812f23e --- /dev/null +++ b/.history/index_20230527141016.html @@ -0,0 +1,11 @@ + + + + + + Document + + +
+ + \ No newline at end of file diff --git a/.history/index_20230527141017.html b/.history/index_20230527141017.html new file mode 100644 index 000000000..0c833edcc --- /dev/null +++ b/.history/index_20230527141017.html @@ -0,0 +1,13 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141024.html b/.history/index_20230527141024.html new file mode 100644 index 000000000..0c833edcc --- /dev/null +++ b/.history/index_20230527141024.html @@ -0,0 +1,13 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141027.html b/.history/index_20230527141027.html new file mode 100644 index 000000000..f21101311 --- /dev/null +++ b/.history/index_20230527141027.html @@ -0,0 +1,13 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141329.html b/.history/index_20230527141329.html new file mode 100644 index 000000000..ef07c4041 --- /dev/null +++ b/.history/index_20230527141329.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141348.html b/.history/index_20230527141348.html new file mode 100644 index 000000000..5c9312083 --- /dev/null +++ b/.history/index_20230527141348.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141357.html b/.history/index_20230527141357.html new file mode 100644 index 000000000..7a2eb5738 --- /dev/null +++ b/.history/index_20230527141357.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141400.html b/.history/index_20230527141400.html new file mode 100644 index 000000000..507c66454 --- /dev/null +++ b/.history/index_20230527141400.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141403.html b/.history/index_20230527141403.html new file mode 100644 index 000000000..1b4ae41ce --- /dev/null +++ b/.history/index_20230527141403.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141404.html b/.history/index_20230527141404.html new file mode 100644 index 000000000..32aa34529 --- /dev/null +++ b/.history/index_20230527141404.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141423.html b/.history/index_20230527141423.html new file mode 100644 index 000000000..c5b8f3e30 --- /dev/null +++ b/.history/index_20230527141423.html @@ -0,0 +1,15 @@ + + + + + + M + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141434.html b/.history/index_20230527141434.html new file mode 100644 index 000000000..113470188 --- /dev/null +++ b/.history/index_20230527141434.html @@ -0,0 +1,18 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527141437.html b/.history/index_20230527141437.html new file mode 100644 index 000000000..9f5b84c19 --- /dev/null +++ b/.history/index_20230527141437.html @@ -0,0 +1,15 @@ + + + + + + Sean Kipinä Portfolio + + +
+ +
+ + \ No newline at end of file diff --git a/.history/index_20230527141438.html b/.history/index_20230527141438.html new file mode 100644 index 000000000..113470188 --- /dev/null +++ b/.history/index_20230527141438.html @@ -0,0 +1,18 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142108.html b/.history/index_20230527142108.html new file mode 100644 index 000000000..7933a5d3c --- /dev/null +++ b/.history/index_20230527142108.html @@ -0,0 +1,19 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+
+ + + \ No newline at end of file diff --git a/.history/index_20230527142109.html b/.history/index_20230527142109.html new file mode 100644 index 000000000..efd6c64ee --- /dev/null +++ b/.history/index_20230527142109.html @@ -0,0 +1,19 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+
+ + + \ No newline at end of file diff --git a/.history/index_20230527142112.html b/.history/index_20230527142112.html new file mode 100644 index 000000000..b366a0641 --- /dev/null +++ b/.history/index_20230527142112.html @@ -0,0 +1,20 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142117.html b/.history/index_20230527142117.html new file mode 100644 index 000000000..9f7663725 --- /dev/null +++ b/.history/index_20230527142117.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142119.html b/.history/index_20230527142119.html new file mode 100644 index 000000000..4201e594c --- /dev/null +++ b/.history/index_20230527142119.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142138.html b/.history/index_20230527142138.html new file mode 100644 index 000000000..2b6ce3abd --- /dev/null +++ b/.history/index_20230527142138.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142139.html b/.history/index_20230527142139.html new file mode 100644 index 000000000..4201e594c --- /dev/null +++ b/.history/index_20230527142139.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142142.html b/.history/index_20230527142142.html new file mode 100644 index 000000000..9eaf6d4d6 --- /dev/null +++ b/.history/index_20230527142142.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142143.html b/.history/index_20230527142143.html new file mode 100644 index 000000000..23d9ebcdb --- /dev/null +++ b/.history/index_20230527142143.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142148.html b/.history/index_20230527142148.html new file mode 100644 index 000000000..67d3b2bcb --- /dev/null +++ b/.history/index_20230527142148.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142149.html b/.history/index_20230527142149.html new file mode 100644 index 000000000..62be04b9f --- /dev/null +++ b/.history/index_20230527142149.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142159.html b/.history/index_20230527142159.html new file mode 100644 index 000000000..67d3b2bcb --- /dev/null +++ b/.history/index_20230527142159.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142208.html b/.history/index_20230527142208.html new file mode 100644 index 000000000..dad349115 --- /dev/null +++ b/.history/index_20230527142208.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142210.html b/.history/index_20230527142210.html new file mode 100644 index 000000000..497c8b880 --- /dev/null +++ b/.history/index_20230527142210.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142213.html b/.history/index_20230527142213.html new file mode 100644 index 000000000..bc2c56437 --- /dev/null +++ b/.history/index_20230527142213.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142216.html b/.history/index_20230527142216.html new file mode 100644 index 000000000..b3af572bd --- /dev/null +++ b/.history/index_20230527142216.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142219.html b/.history/index_20230527142219.html new file mode 100644 index 000000000..891919eb6 --- /dev/null +++ b/.history/index_20230527142219.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142221.html b/.history/index_20230527142221.html new file mode 100644 index 000000000..1b6653dc1 --- /dev/null +++ b/.history/index_20230527142221.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142230.html b/.history/index_20230527142230.html new file mode 100644 index 000000000..c2370863d --- /dev/null +++ b/.history/index_20230527142230.html @@ -0,0 +1,21 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142253.html b/.history/index_20230527142253.html new file mode 100644 index 000000000..89b006d5e --- /dev/null +++ b/.history/index_20230527142253.html @@ -0,0 +1,22 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142255.html b/.history/index_20230527142255.html new file mode 100644 index 000000000..a51d3a6a5 --- /dev/null +++ b/.history/index_20230527142255.html @@ -0,0 +1,22 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142258.html b/.history/index_20230527142258.html new file mode 100644 index 000000000..9bd5bd024 --- /dev/null +++ b/.history/index_20230527142258.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142305.html b/.history/index_20230527142305.html new file mode 100644 index 000000000..88ce4906f --- /dev/null +++ b/.history/index_20230527142305.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142314.html b/.history/index_20230527142314.html new file mode 100644 index 000000000..1c491339d --- /dev/null +++ b/.history/index_20230527142314.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142321.html b/.history/index_20230527142321.html new file mode 100644 index 000000000..69df99657 --- /dev/null +++ b/.history/index_20230527142321.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142329.html b/.history/index_20230527142329.html new file mode 100644 index 000000000..e56eba8cc --- /dev/null +++ b/.history/index_20230527142329.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142334.html b/.history/index_20230527142334.html new file mode 100644 index 000000000..7623af0e7 --- /dev/null +++ b/.history/index_20230527142334.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142345.html b/.history/index_20230527142345.html new file mode 100644 index 000000000..b69a1f369 --- /dev/null +++ b/.history/index_20230527142345.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142350.html b/.history/index_20230527142350.html new file mode 100644 index 000000000..d03962f87 --- /dev/null +++ b/.history/index_20230527142350.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142351.html b/.history/index_20230527142351.html new file mode 100644 index 000000000..6a4e05334 --- /dev/null +++ b/.history/index_20230527142351.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142607.html b/.history/index_20230527142607.html new file mode 100644 index 000000000..c8448d0ab --- /dev/null +++ b/.history/index_20230527142607.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527142610.html b/.history/index_20230527142610.html new file mode 100644 index 000000000..6a4e05334 --- /dev/null +++ b/.history/index_20230527142610.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..6a4e05334 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,24 @@ + - Document + Sean Kipinä Portfolio + - +
+ +
+ \ No newline at end of file From 0c1de56b57797e09147e1441c5d3ed521d050071 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sat, 27 May 2023 15:15:48 +0300 Subject: [PATCH 03/40] Added footer tag as well as linking style sheet. Adjusted first nav with a flex box model to allow for changes. --- .history/ReadMe_20230527143000.md | 73 +++++++++++++++++++++++++ .history/index_20230527142741.html | 25 +++++++++ .history/index_20230527142743.html | 24 ++++++++ .history/index_20230527150819.html | 25 +++++++++ .history/index_20230527150822.html | 25 +++++++++ .history/index_20230527150831.html | 26 +++++++++ .history/index_20230527150848.html | 26 +++++++++ .history/index_20230527150900.html | 26 +++++++++ .history/index_20230527150902.html | 26 +++++++++ .history/index_20230527150904.html | 26 +++++++++ .history/index_20230527150906.html | 26 +++++++++ .history/index_20230527150923.html | 26 +++++++++ .history/index_20230527151009.html | 27 +++++++++ .history/index_20230527151013.html | 29 ++++++++++ .history/style/index_20230524001002.css | 1 + .history/style/index_20230527150946.css | 1 + .history/style/index_20230527150949.css | 0 .history/style/index_20230527150951.css | 1 + .history/style/index_20230527151024.css | 1 + .history/style/index_20230527151025.css | 0 .history/style/index_20230527151027.css | 1 + .history/style/index_20230527151029.css | 1 + .history/style/index_20230527151031.css | 1 + .history/style/index_20230527151033.css | 0 .history/style/index_20230527151036.css | 1 + .history/style/index_20230527151039.css | 3 + .history/style/index_20230527151043.css | 3 + .history/style/index_20230527151049.css | 4 ++ .history/style/index_20230527151050.css | 4 ++ ReadMe.md | 2 +- index.html | 5 ++ style/index.css | 5 +- 32 files changed, 442 insertions(+), 2 deletions(-) create mode 100644 .history/ReadMe_20230527143000.md create mode 100644 .history/index_20230527142741.html create mode 100644 .history/index_20230527142743.html create mode 100644 .history/index_20230527150819.html create mode 100644 .history/index_20230527150822.html create mode 100644 .history/index_20230527150831.html create mode 100644 .history/index_20230527150848.html create mode 100644 .history/index_20230527150900.html create mode 100644 .history/index_20230527150902.html create mode 100644 .history/index_20230527150904.html create mode 100644 .history/index_20230527150906.html create mode 100644 .history/index_20230527150923.html create mode 100644 .history/index_20230527151009.html create mode 100644 .history/index_20230527151013.html create mode 100644 .history/style/index_20230524001002.css create mode 100644 .history/style/index_20230527150946.css create mode 100644 .history/style/index_20230527150949.css create mode 100644 .history/style/index_20230527150951.css create mode 100644 .history/style/index_20230527151024.css create mode 100644 .history/style/index_20230527151025.css create mode 100644 .history/style/index_20230527151027.css create mode 100644 .history/style/index_20230527151029.css create mode 100644 .history/style/index_20230527151031.css create mode 100644 .history/style/index_20230527151033.css create mode 100644 .history/style/index_20230527151036.css create mode 100644 .history/style/index_20230527151039.css create mode 100644 .history/style/index_20230527151043.css create mode 100644 .history/style/index_20230527151049.css create mode 100644 .history/style/index_20230527151050.css diff --git a/.history/ReadMe_20230527143000.md b/.history/ReadMe_20230527143000.md new file mode 100644 index 000000000..e8aa3b9e0 --- /dev/null +++ b/.history/ReadMe_20230527143000.md @@ -0,0 +1,73 @@ +# Flexbox Module Challenge + +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. + +## User Interface and Git + +## Objectives + +- implement a CSS reset and understand why it’s important for cross-browser development +- identify and explain all properties in the box model +- describe and understand that flexbox is a module +- demonstrate understanding of flex container properties in flex box + +## Introduction + +In this challenge you will be building a simple portfolio website based on a wireframe of your choosing using the CSS principles covered today. + +Portfolio websites are a great way to show off your work to friends, family, and future employers. As you progress through BloomTech you can update this site with projects you're proud of. Similarly, you can change the style, add a blog page, the possibilites are really endless. + +## Instructions + +### Task 1: Set Up The Project With Git + +Follow these steps to set up and work on your project: + +- [X] Fork and clone this repository. +- [X] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot. +- [X] DO NOT MAKE A BRANCH! You will be pushing to main/master today. +- [X] cd into your repository on the command line and use code . to open VS Code. +- [X] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file. +- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work. + +### Task 2: Minimum Viable Product + +Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: + +- [X] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you +- [ ] Information about you in place of the given placeholder +- [ ] A `My Projects` button that links to the projects page +- [ ] A `Contact Me` button that links to the contact page +- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page + +### Task 3: Stretch Goals + +The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. + +- [ ] Make your webpage work at different browser widths, including mobile +- [ ] Add CSS animations +- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages +- [ ] Host your website on Netlify.com + +## FAQs + +**What is a wireframe? How do I use one?** + +*Wireframes are used to outline webpage styles, content, and functionality. UX designers will often use wireframes to explain their ideas to web developers. These wireframes, hand drawn or mocked up on software, are a cheap and easy way to iterate over designs. In this assignment you will chose a wireframe like the one below and create the elements with HTML and CSS.* + +![Screen Shot 2020-02-27 at 5.23.20 PM](https://i.imgur.com/b3riE65.png) + +## Resources + +👋 [Assignment help: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +👀 [Explore a Curated Gallery of Professional Portfolios](https://wpamelia.com/portfolio-websites/#webdev) + +🌼 [From Wireframes to Code](https://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.php) + +## Submission format + +- [ ] Connect your repository by copy-pasting its Github URL into the submission slot. +- [ ] Your submitted URL will always reflect your most recent work pushed to Github. + diff --git a/.history/index_20230527142741.html b/.history/index_20230527142741.html new file mode 100644 index 000000000..dd48795cd --- /dev/null +++ b/.history/index_20230527142741.html @@ -0,0 +1,25 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527142743.html b/.history/index_20230527142743.html new file mode 100644 index 000000000..b9e6f3064 --- /dev/null +++ b/.history/index_20230527142743.html @@ -0,0 +1,24 @@ + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527150819.html b/.history/index_20230527150819.html new file mode 100644 index 000000000..77a5f177e --- /dev/null +++ b/.history/index_20230527150819.html @@ -0,0 +1,25 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527150822.html b/.history/index_20230527150822.html new file mode 100644 index 000000000..f39379c7b --- /dev/null +++ b/.history/index_20230527150822.html @@ -0,0 +1,25 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527150831.html b/.history/index_20230527150831.html new file mode 100644 index 000000000..b5e9324dd --- /dev/null +++ b/.history/index_20230527150831.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150848.html b/.history/index_20230527150848.html new file mode 100644 index 000000000..12417ee6e --- /dev/null +++ b/.history/index_20230527150848.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150900.html b/.history/index_20230527150900.html new file mode 100644 index 000000000..6649f0bf1 --- /dev/null +++ b/.history/index_20230527150900.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150902.html b/.history/index_20230527150902.html new file mode 100644 index 000000000..9b2c427fc --- /dev/null +++ b/.history/index_20230527150902.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150904.html b/.history/index_20230527150904.html new file mode 100644 index 000000000..8ad039958 --- /dev/null +++ b/.history/index_20230527150904.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150906.html b/.history/index_20230527150906.html new file mode 100644 index 000000000..f09d3d298 --- /dev/null +++ b/.history/index_20230527150906.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527150923.html b/.history/index_20230527150923.html new file mode 100644 index 000000000..0260fdae8 --- /dev/null +++ b/.history/index_20230527150923.html @@ -0,0 +1,26 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230527151009.html b/.history/index_20230527151009.html new file mode 100644 index 000000000..afd4f7dcc --- /dev/null +++ b/.history/index_20230527151009.html @@ -0,0 +1,27 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230527151013.html b/.history/index_20230527151013.html new file mode 100644 index 000000000..947c6bd15 --- /dev/null +++ b/.history/index_20230527151013.html @@ -0,0 +1,29 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/style/index_20230524001002.css b/.history/style/index_20230524001002.css new file mode 100644 index 000000000..440e53514 --- /dev/null +++ b/.history/style/index_20230524001002.css @@ -0,0 +1 @@ +/* Add CSS styling here */ \ No newline at end of file diff --git a/.history/style/index_20230527150946.css b/.history/style/index_20230527150946.css new file mode 100644 index 000000000..1c06c413d --- /dev/null +++ b/.history/style/index_20230527150946.css @@ -0,0 +1 @@ +nav \ No newline at end of file diff --git a/.history/style/index_20230527150949.css b/.history/style/index_20230527150949.css new file mode 100644 index 000000000..e69de29bb diff --git a/.history/style/index_20230527150951.css b/.history/style/index_20230527150951.css new file mode 100644 index 000000000..1c06c413d --- /dev/null +++ b/.history/style/index_20230527150951.css @@ -0,0 +1 @@ +nav \ No newline at end of file diff --git a/.history/style/index_20230527151024.css b/.history/style/index_20230527151024.css new file mode 100644 index 000000000..0817502b1 --- /dev/null +++ b/.history/style/index_20230527151024.css @@ -0,0 +1 @@ +> \ No newline at end of file diff --git a/.history/style/index_20230527151025.css b/.history/style/index_20230527151025.css new file mode 100644 index 000000000..e69de29bb diff --git a/.history/style/index_20230527151027.css b/.history/style/index_20230527151027.css new file mode 100644 index 000000000..ec321f7fa --- /dev/null +++ b/.history/style/index_20230527151027.css @@ -0,0 +1 @@ +:"" \ No newline at end of file diff --git a/.history/style/index_20230527151029.css b/.history/style/index_20230527151029.css new file mode 100644 index 000000000..b12e37b54 --- /dev/null +++ b/.history/style/index_20230527151029.css @@ -0,0 +1 @@ +:"|" \ No newline at end of file diff --git a/.history/style/index_20230527151031.css b/.history/style/index_20230527151031.css new file mode 100644 index 000000000..454329036 --- /dev/null +++ b/.history/style/index_20230527151031.css @@ -0,0 +1 @@ +:"|P{}" \ No newline at end of file diff --git a/.history/style/index_20230527151033.css b/.history/style/index_20230527151033.css new file mode 100644 index 000000000..e69de29bb diff --git a/.history/style/index_20230527151036.css b/.history/style/index_20230527151036.css new file mode 100644 index 000000000..1c06c413d --- /dev/null +++ b/.history/style/index_20230527151036.css @@ -0,0 +1 @@ +nav \ No newline at end of file diff --git a/.history/style/index_20230527151039.css b/.history/style/index_20230527151039.css new file mode 100644 index 000000000..4a995f6fc --- /dev/null +++ b/.history/style/index_20230527151039.css @@ -0,0 +1,3 @@ +nav{ + +} \ No newline at end of file diff --git a/.history/style/index_20230527151043.css b/.history/style/index_20230527151043.css new file mode 100644 index 000000000..6aa121ef6 --- /dev/null +++ b/.history/style/index_20230527151043.css @@ -0,0 +1,3 @@ +nav{ + display: flex; +} \ No newline at end of file diff --git a/.history/style/index_20230527151049.css b/.history/style/index_20230527151049.css new file mode 100644 index 000000000..76a2a13cf --- /dev/null +++ b/.history/style/index_20230527151049.css @@ -0,0 +1,4 @@ +nav{ + display: flex; + justify-content: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527151050.css b/.history/style/index_20230527151050.css new file mode 100644 index 000000000..03c525801 --- /dev/null +++ b/.history/style/index_20230527151050.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/ReadMe.md b/ReadMe.md index 042ae678f..e8aa3b9e0 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -34,7 +34,7 @@ Follow these steps to set up and work on your project: Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [X] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages - [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you - [ ] Information about you in place of the given placeholder - [ ] A `My Projects` button that links to the projects page diff --git a/index.html b/index.html index 6a4e05334..947c6bd15 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Sean Kipinä Portfolio + @@ -19,6 +20,10 @@

SEAN KIPINÄ

+ +
+ +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..03c525801 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,4 @@ -/* Add CSS styling here */ \ No newline at end of file +nav { + display: flex; + justify-content: space-between; +} \ No newline at end of file From 91264230abb901c9d04edd51c222725f25c627b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sat, 27 May 2023 15:34:30 +0300 Subject: [PATCH 04/40] Added a uppersection to project and button. --- .history/index_20230527152720.html | 31 +++++++++++++++++++++++++ .history/index_20230527152733.html | 31 +++++++++++++++++++++++++ .history/index_20230527152736.html | 31 +++++++++++++++++++++++++ .history/index_20230527152741.html | 31 +++++++++++++++++++++++++ .history/index_20230527152824.html | 31 +++++++++++++++++++++++++ .history/index_20230527152827.html | 32 ++++++++++++++++++++++++++ .history/index_20230527152828.html | 33 +++++++++++++++++++++++++++ .history/index_20230527152835.html | 32 ++++++++++++++++++++++++++ .history/index_20230527152900.html | 32 ++++++++++++++++++++++++++ .history/index_20230527152902.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152907.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152919.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152921.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152923.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152924.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152927.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152931.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152936.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152939.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152941.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152943.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152944.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527152948.html | 35 +++++++++++++++++++++++++++++ .history/index_20230527153031.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153034.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153036.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153038.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153235.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153338.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153340.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153346.html | 36 ++++++++++++++++++++++++++++++ .history/index_20230527153351.html | 36 ++++++++++++++++++++++++++++++ index.html | 9 +++++++- 33 files changed, 1106 insertions(+), 1 deletion(-) create mode 100644 .history/index_20230527152720.html create mode 100644 .history/index_20230527152733.html create mode 100644 .history/index_20230527152736.html create mode 100644 .history/index_20230527152741.html create mode 100644 .history/index_20230527152824.html create mode 100644 .history/index_20230527152827.html create mode 100644 .history/index_20230527152828.html create mode 100644 .history/index_20230527152835.html create mode 100644 .history/index_20230527152900.html create mode 100644 .history/index_20230527152902.html create mode 100644 .history/index_20230527152907.html create mode 100644 .history/index_20230527152919.html create mode 100644 .history/index_20230527152921.html create mode 100644 .history/index_20230527152923.html create mode 100644 .history/index_20230527152924.html create mode 100644 .history/index_20230527152927.html create mode 100644 .history/index_20230527152931.html create mode 100644 .history/index_20230527152936.html create mode 100644 .history/index_20230527152939.html create mode 100644 .history/index_20230527152941.html create mode 100644 .history/index_20230527152943.html create mode 100644 .history/index_20230527152944.html create mode 100644 .history/index_20230527152948.html create mode 100644 .history/index_20230527153031.html create mode 100644 .history/index_20230527153034.html create mode 100644 .history/index_20230527153036.html create mode 100644 .history/index_20230527153038.html create mode 100644 .history/index_20230527153235.html create mode 100644 .history/index_20230527153338.html create mode 100644 .history/index_20230527153340.html create mode 100644 .history/index_20230527153346.html create mode 100644 .history/index_20230527153351.html diff --git a/.history/index_20230527152720.html b/.history/index_20230527152720.html new file mode 100644 index 000000000..25813b1a7 --- /dev/null +++ b/.history/index_20230527152720.html @@ -0,0 +1,31 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152733.html b/.history/index_20230527152733.html new file mode 100644 index 000000000..727a9fe4f --- /dev/null +++ b/.history/index_20230527152733.html @@ -0,0 +1,31 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152736.html b/.history/index_20230527152736.html new file mode 100644 index 000000000..84ac8998a --- /dev/null +++ b/.history/index_20230527152736.html @@ -0,0 +1,31 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152741.html b/.history/index_20230527152741.html new file mode 100644 index 000000000..7a511c467 --- /dev/null +++ b/.history/index_20230527152741.html @@ -0,0 +1,31 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152824.html b/.history/index_20230527152824.html new file mode 100644 index 000000000..df501b56b --- /dev/null +++ b/.history/index_20230527152824.html @@ -0,0 +1,31 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+
+ + + + + + + + +
+ + + + + + + + +
+ + + + + + + + +
+ + + + + + + + +
+ + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152902.html b/.history/index_20230527152902.html new file mode 100644 index 000000000..73cdf7703 --- /dev/null +++ b/.history/index_20230527152902.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152907.html b/.history/index_20230527152907.html new file mode 100644 index 000000000..53075844a --- /dev/null +++ b/.history/index_20230527152907.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152919.html b/.history/index_20230527152919.html new file mode 100644 index 000000000..d3c4d6788 --- /dev/null +++ b/.history/index_20230527152919.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152921.html b/.history/index_20230527152921.html new file mode 100644 index 000000000..0659d5195 --- /dev/null +++ b/.history/index_20230527152921.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152923.html b/.history/index_20230527152923.html new file mode 100644 index 000000000..591bec29c --- /dev/null +++ b/.history/index_20230527152923.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152924.html b/.history/index_20230527152924.html new file mode 100644 index 000000000..effc44a89 --- /dev/null +++ b/.history/index_20230527152924.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152927.html b/.history/index_20230527152927.html new file mode 100644 index 000000000..be70b93df --- /dev/null +++ b/.history/index_20230527152927.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152931.html b/.history/index_20230527152931.html new file mode 100644 index 000000000..c9afef397 --- /dev/null +++ b/.history/index_20230527152931.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152936.html b/.history/index_20230527152936.html new file mode 100644 index 000000000..8dd504b1e --- /dev/null +++ b/.history/index_20230527152936.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152939.html b/.history/index_20230527152939.html new file mode 100644 index 000000000..1600f66a1 --- /dev/null +++ b/.history/index_20230527152939.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152941.html b/.history/index_20230527152941.html new file mode 100644 index 000000000..b772746b8 --- /dev/null +++ b/.history/index_20230527152941.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152943.html b/.history/index_20230527152943.html new file mode 100644 index 000000000..acf3d27e6 --- /dev/null +++ b/.history/index_20230527152943.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152944.html b/.history/index_20230527152944.html new file mode 100644 index 000000000..5669e48de --- /dev/null +++ b/.history/index_20230527152944.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527152948.html b/.history/index_20230527152948.html new file mode 100644 index 000000000..c92fce526 --- /dev/null +++ b/.history/index_20230527152948.html @@ -0,0 +1,35 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153031.html b/.history/index_20230527153031.html new file mode 100644 index 000000000..b8e30ee16 --- /dev/null +++ b/.history/index_20230527153031.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153034.html b/.history/index_20230527153034.html new file mode 100644 index 000000000..4415e5f18 --- /dev/null +++ b/.history/index_20230527153034.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153036.html b/.history/index_20230527153036.html new file mode 100644 index 000000000..de30bcd5b --- /dev/null +++ b/.history/index_20230527153036.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153038.html b/.history/index_20230527153038.html new file mode 100644 index 000000000..082db4711 --- /dev/null +++ b/.history/index_20230527153038.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153235.html b/.history/index_20230527153235.html new file mode 100644 index 000000000..aeb28bf48 --- /dev/null +++ b/.history/index_20230527153235.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153338.html b/.history/index_20230527153338.html new file mode 100644 index 000000000..e0f15f185 --- /dev/null +++ b/.history/index_20230527153338.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153340.html b/.history/index_20230527153340.html new file mode 100644 index 000000000..f939082e4 --- /dev/null +++ b/.history/index_20230527153340.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153346.html b/.history/index_20230527153346.html new file mode 100644 index 000000000..fadf4de6e --- /dev/null +++ b/.history/index_20230527153346.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230527153351.html b/.history/index_20230527153351.html new file mode 100644 index 000000000..fadf4de6e --- /dev/null +++ b/.history/index_20230527153351.html @@ -0,0 +1,36 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 947c6bd15..fadf4de6e 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,15 @@

SEAN KIPINÄ

+
+ +
+
- +
From 9ee095963b9712d57b501d931b92e9a170e5715e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sat, 27 May 2023 15:44:33 +0300 Subject: [PATCH 05/40] Adjusted background img_button properties and used picsum website --- .history/style/index_20230527153515.css | 4 ++++ .history/style/index_20230527153518.css | 4 ++++ .history/style/index_20230527153522.css | 5 +++++ .history/style/index_20230527153528.css | 5 +++++ .history/style/index_20230527153530.css | 7 +++++++ .history/style/index_20230527153533.css | 7 +++++++ .history/style/index_20230527153534.css | 7 +++++++ .history/style/index_20230527153535.css | 7 +++++++ .history/style/index_20230527153538.css | 8 ++++++++ .history/style/index_20230527153540.css | 8 ++++++++ .history/style/index_20230527153543.css | 8 ++++++++ .history/style/index_20230527153608.css | 9 +++++++++ .history/style/index_20230527153611.css | 10 ++++++++++ .history/style/index_20230527153615.css | 11 +++++++++++ .history/style/index_20230527153617.css | 11 +++++++++++ .history/style/index_20230527153619.css | 11 +++++++++++ .history/style/index_20230527153621.css | 12 ++++++++++++ .history/style/index_20230527153622.css | 11 +++++++++++ .history/style/index_20230527153623.css | 11 +++++++++++ .history/style/index_20230527153625.css | 13 +++++++++++++ .history/style/index_20230527153637.css | 13 +++++++++++++ .history/style/index_20230527153710.css | 13 +++++++++++++ .history/style/index_20230527153712.css | 13 +++++++++++++ .history/style/index_20230527153714.css | 13 +++++++++++++ .history/style/index_20230527153715.css | 13 +++++++++++++ .history/style/index_20230527153718.css | 13 +++++++++++++ .history/style/index_20230527153719.css | 13 +++++++++++++ .history/style/index_20230527153732.css | 13 +++++++++++++ .history/style/index_20230527153737.css | 13 +++++++++++++ .history/style/index_20230527153739.css | 13 +++++++++++++ .history/style/index_20230527153742.css | 13 +++++++++++++ .history/style/index_20230527153744.css | 13 +++++++++++++ .history/style/index_20230527153751.css | 13 +++++++++++++ .history/style/index_20230527153758.css | 14 ++++++++++++++ .history/style/index_20230527153801.css | 14 ++++++++++++++ .history/style/index_20230527153803.css | 14 ++++++++++++++ .history/style/index_20230527153810.css | 15 +++++++++++++++ .history/style/index_20230527153812.css | 15 +++++++++++++++ .history/style/index_20230527153813.css | 15 +++++++++++++++ .history/style/index_20230527153819.css | 16 ++++++++++++++++ .history/style/index_20230527153824.css | 16 ++++++++++++++++ .history/style/index_20230527153827.css | 16 ++++++++++++++++ .history/style/index_20230527153830.css | 16 ++++++++++++++++ .history/style/index_20230527153836.css | 17 +++++++++++++++++ .history/style/index_20230527153842.css | 17 +++++++++++++++++ .history/style/index_20230527153847.css | 17 +++++++++++++++++ .history/style/index_20230527153849.css | 17 +++++++++++++++++ .history/style/index_20230527153851.css | 17 +++++++++++++++++ .history/style/index_20230527153852.css | 17 +++++++++++++++++ .history/style/index_20230527153859.css | 18 ++++++++++++++++++ .history/style/index_20230527153901.css | 18 ++++++++++++++++++ .history/style/index_20230527153904.css | 18 ++++++++++++++++++ .history/style/index_20230527153910.css | 19 +++++++++++++++++++ .history/style/index_20230527153913.css | 19 +++++++++++++++++++ .history/style/index_20230527153917.css | 19 +++++++++++++++++++ .history/style/index_20230527153918.css | 19 +++++++++++++++++++ .history/style/index_20230527153942.css | 19 +++++++++++++++++++ .history/style/index_20230527153948.css | 19 +++++++++++++++++++ .history/style/index_20230527153957.css | 19 +++++++++++++++++++ .history/style/index_20230527153959.css | 19 +++++++++++++++++++ .history/style/index_20230527154003.css | 19 +++++++++++++++++++ .history/style/index_20230527154028.css | 19 +++++++++++++++++++ .history/style/index_20230527154031.css | 19 +++++++++++++++++++ .history/style/index_20230527154053.css | 19 +++++++++++++++++++ .history/style/index_20230527154056.css | 19 +++++++++++++++++++ .history/style/index_20230527154302.css | 19 +++++++++++++++++++ .history/style/index_20230527154303.css | 19 +++++++++++++++++++ .history/style/index_20230527154309.css | 19 +++++++++++++++++++ .history/style/index_20230527154326.css | 19 +++++++++++++++++++ .history/style/index_20230527154333.css | 19 +++++++++++++++++++ .history/style/index_20230527154336.css | 19 +++++++++++++++++++ .history/style/index_20230527154339.css | 19 +++++++++++++++++++ .history/style/index_20230527154342.css | 19 +++++++++++++++++++ style/index.css | 15 +++++++++++++++ 74 files changed, 1059 insertions(+) create mode 100644 .history/style/index_20230527153515.css create mode 100644 .history/style/index_20230527153518.css create mode 100644 .history/style/index_20230527153522.css create mode 100644 .history/style/index_20230527153528.css create mode 100644 .history/style/index_20230527153530.css create mode 100644 .history/style/index_20230527153533.css create mode 100644 .history/style/index_20230527153534.css create mode 100644 .history/style/index_20230527153535.css create mode 100644 .history/style/index_20230527153538.css create mode 100644 .history/style/index_20230527153540.css create mode 100644 .history/style/index_20230527153543.css create mode 100644 .history/style/index_20230527153608.css create mode 100644 .history/style/index_20230527153611.css create mode 100644 .history/style/index_20230527153615.css create mode 100644 .history/style/index_20230527153617.css create mode 100644 .history/style/index_20230527153619.css create mode 100644 .history/style/index_20230527153621.css create mode 100644 .history/style/index_20230527153622.css create mode 100644 .history/style/index_20230527153623.css create mode 100644 .history/style/index_20230527153625.css create mode 100644 .history/style/index_20230527153637.css create mode 100644 .history/style/index_20230527153710.css create mode 100644 .history/style/index_20230527153712.css create mode 100644 .history/style/index_20230527153714.css create mode 100644 .history/style/index_20230527153715.css create mode 100644 .history/style/index_20230527153718.css create mode 100644 .history/style/index_20230527153719.css create mode 100644 .history/style/index_20230527153732.css create mode 100644 .history/style/index_20230527153737.css create mode 100644 .history/style/index_20230527153739.css create mode 100644 .history/style/index_20230527153742.css create mode 100644 .history/style/index_20230527153744.css create mode 100644 .history/style/index_20230527153751.css create mode 100644 .history/style/index_20230527153758.css create mode 100644 .history/style/index_20230527153801.css create mode 100644 .history/style/index_20230527153803.css create mode 100644 .history/style/index_20230527153810.css create mode 100644 .history/style/index_20230527153812.css create mode 100644 .history/style/index_20230527153813.css create mode 100644 .history/style/index_20230527153819.css create mode 100644 .history/style/index_20230527153824.css create mode 100644 .history/style/index_20230527153827.css create mode 100644 .history/style/index_20230527153830.css create mode 100644 .history/style/index_20230527153836.css create mode 100644 .history/style/index_20230527153842.css create mode 100644 .history/style/index_20230527153847.css create mode 100644 .history/style/index_20230527153849.css create mode 100644 .history/style/index_20230527153851.css create mode 100644 .history/style/index_20230527153852.css create mode 100644 .history/style/index_20230527153859.css create mode 100644 .history/style/index_20230527153901.css create mode 100644 .history/style/index_20230527153904.css create mode 100644 .history/style/index_20230527153910.css create mode 100644 .history/style/index_20230527153913.css create mode 100644 .history/style/index_20230527153917.css create mode 100644 .history/style/index_20230527153918.css create mode 100644 .history/style/index_20230527153942.css create mode 100644 .history/style/index_20230527153948.css create mode 100644 .history/style/index_20230527153957.css create mode 100644 .history/style/index_20230527153959.css create mode 100644 .history/style/index_20230527154003.css create mode 100644 .history/style/index_20230527154028.css create mode 100644 .history/style/index_20230527154031.css create mode 100644 .history/style/index_20230527154053.css create mode 100644 .history/style/index_20230527154056.css create mode 100644 .history/style/index_20230527154302.css create mode 100644 .history/style/index_20230527154303.css create mode 100644 .history/style/index_20230527154309.css create mode 100644 .history/style/index_20230527154326.css create mode 100644 .history/style/index_20230527154333.css create mode 100644 .history/style/index_20230527154336.css create mode 100644 .history/style/index_20230527154339.css create mode 100644 .history/style/index_20230527154342.css diff --git a/.history/style/index_20230527153515.css b/.history/style/index_20230527153515.css new file mode 100644 index 000000000..170b9bce0 --- /dev/null +++ b/.history/style/index_20230527153515.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} diff --git a/.history/style/index_20230527153518.css b/.history/style/index_20230527153518.css new file mode 100644 index 000000000..170b9bce0 --- /dev/null +++ b/.history/style/index_20230527153518.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} diff --git a/.history/style/index_20230527153522.css b/.history/style/index_20230527153522.css new file mode 100644 index 000000000..2cbde0391 --- /dev/null +++ b/.history/style/index_20230527153522.css @@ -0,0 +1,5 @@ +nav { + display: flex; + justify-content: space-between; +} +.top \ No newline at end of file diff --git a/.history/style/index_20230527153528.css b/.history/style/index_20230527153528.css new file mode 100644 index 000000000..903e76868 --- /dev/null +++ b/.history/style/index_20230527153528.css @@ -0,0 +1,5 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection \ No newline at end of file diff --git a/.history/style/index_20230527153530.css b/.history/style/index_20230527153530.css new file mode 100644 index 000000000..8de7eb651 --- /dev/null +++ b/.history/style/index_20230527153530.css @@ -0,0 +1,7 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + +} \ No newline at end of file diff --git a/.history/style/index_20230527153533.css b/.history/style/index_20230527153533.css new file mode 100644 index 000000000..0fd5d58f0 --- /dev/null +++ b/.history/style/index_20230527153533.css @@ -0,0 +1,7 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153534.css b/.history/style/index_20230527153534.css new file mode 100644 index 000000000..c9f8f8958 --- /dev/null +++ b/.history/style/index_20230527153534.css @@ -0,0 +1,7 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: f; +} \ No newline at end of file diff --git a/.history/style/index_20230527153535.css b/.history/style/index_20230527153535.css new file mode 100644 index 000000000..e10c1e79b --- /dev/null +++ b/.history/style/index_20230527153535.css @@ -0,0 +1,7 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: flex; +} \ No newline at end of file diff --git a/.history/style/index_20230527153538.css b/.history/style/index_20230527153538.css new file mode 100644 index 000000000..76f22c6a7 --- /dev/null +++ b/.history/style/index_20230527153538.css @@ -0,0 +1,8 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: flex; + justify-content: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153540.css b/.history/style/index_20230527153540.css new file mode 100644 index 000000000..d8bf7dc25 --- /dev/null +++ b/.history/style/index_20230527153540.css @@ -0,0 +1,8 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/.history/style/index_20230527153543.css b/.history/style/index_20230527153543.css new file mode 100644 index 000000000..fe6fd2d2e --- /dev/null +++ b/.history/style/index_20230527153543.css @@ -0,0 +1,8 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: flex; + justify-content: center; +} diff --git a/.history/style/index_20230527153608.css b/.history/style/index_20230527153608.css new file mode 100644 index 000000000..783cc5fbd --- /dev/null +++ b/.history/style/index_20230527153608.css @@ -0,0 +1,9 @@ +nav { + display: flex; + justify-content: space-between; +} +.uppersection{ + display: flex; + justify-content: center; +} + diff --git a/.history/style/index_20230527153611.css b/.history/style/index_20230527153611.css new file mode 100644 index 000000000..220e7e789 --- /dev/null +++ b/.history/style/index_20230527153611.css @@ -0,0 +1,10 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + diff --git a/.history/style/index_20230527153615.css b/.history/style/index_20230527153615.css new file mode 100644 index 000000000..5e610fd3e --- /dev/null +++ b/.history/style/index_20230527153615.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img \ No newline at end of file diff --git a/.history/style/index_20230527153617.css b/.history/style/index_20230527153617.css new file mode 100644 index 000000000..ed29eae46 --- /dev/null +++ b/.history/style/index_20230527153617.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_ \ No newline at end of file diff --git a/.history/style/index_20230527153619.css b/.history/style/index_20230527153619.css new file mode 100644 index 000000000..7ee5bb553 --- /dev/null +++ b/.history/style/index_20230527153619.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_button { \ No newline at end of file diff --git a/.history/style/index_20230527153621.css b/.history/style/index_20230527153621.css new file mode 100644 index 000000000..95f07723c --- /dev/null +++ b/.history/style/index_20230527153621.css @@ -0,0 +1,12 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_button { + \ No newline at end of file diff --git a/.history/style/index_20230527153622.css b/.history/style/index_20230527153622.css new file mode 100644 index 000000000..7ee5bb553 --- /dev/null +++ b/.history/style/index_20230527153622.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_button { \ No newline at end of file diff --git a/.history/style/index_20230527153623.css b/.history/style/index_20230527153623.css new file mode 100644 index 000000000..e39131ba8 --- /dev/null +++ b/.history/style/index_20230527153623.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_button \ No newline at end of file diff --git a/.history/style/index_20230527153625.css b/.history/style/index_20230527153625.css new file mode 100644 index 000000000..3a7d5bf92 --- /dev/null +++ b/.history/style/index_20230527153625.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +img_button { + +} \ No newline at end of file diff --git a/.history/style/index_20230527153637.css b/.history/style/index_20230527153637.css new file mode 100644 index 000000000..7ab87efc3 --- /dev/null +++ b/.history/style/index_20230527153637.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { + +} \ No newline at end of file diff --git a/.history/style/index_20230527153710.css b/.history/style/index_20230527153710.css new file mode 100644 index 000000000..25f2b05b9 --- /dev/null +++ b/.history/style/index_20230527153710.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +backg +} \ No newline at end of file diff --git a/.history/style/index_20230527153712.css b/.history/style/index_20230527153712.css new file mode 100644 index 000000000..545d2c2c4 --- /dev/null +++ b/.history/style/index_20230527153712.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153714.css b/.history/style/index_20230527153714.css new file mode 100644 index 000000000..c42a936a6 --- /dev/null +++ b/.history/style/index_20230527153714.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url; +} \ No newline at end of file diff --git a/.history/style/index_20230527153715.css b/.history/style/index_20230527153715.css new file mode 100644 index 000000000..74e9f94bb --- /dev/null +++ b/.history/style/index_20230527153715.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url(); +} \ No newline at end of file diff --git a/.history/style/index_20230527153718.css b/.history/style/index_20230527153718.css new file mode 100644 index 000000000..f0b1d9815 --- /dev/null +++ b/.history/style/index_20230527153718.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url(""); +} \ No newline at end of file diff --git a/.history/style/index_20230527153719.css b/.history/style/index_20230527153719.css new file mode 100644 index 000000000..1301f8d0e --- /dev/null +++ b/.history/style/index_20230527153719.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153732.css b/.history/style/index_20230527153732.css new file mode 100644 index 000000000..b0af8f081 --- /dev/null +++ b/.history/style/index_20230527153732.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/600"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153737.css b/.history/style/index_20230527153737.css new file mode 100644 index 000000000..ea5ea5a6e --- /dev/null +++ b/.history/style/index_20230527153737.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/600/"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153739.css b/.history/style/index_20230527153739.css new file mode 100644 index 000000000..943e30015 --- /dev/null +++ b/.history/style/index_20230527153739.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/600/400"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153742.css b/.history/style/index_20230527153742.css new file mode 100644 index 000000000..1f8271d65 --- /dev/null +++ b/.history/style/index_20230527153742.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/500/400"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153744.css b/.history/style/index_20230527153744.css new file mode 100644 index 000000000..e3a154027 --- /dev/null +++ b/.history/style/index_20230527153744.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/400"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153751.css b/.history/style/index_20230527153751.css new file mode 100644 index 000000000..617472d9f --- /dev/null +++ b/.history/style/index_20230527153751.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +} \ No newline at end of file diff --git a/.history/style/index_20230527153758.css b/.history/style/index_20230527153758.css new file mode 100644 index 000000000..682a0247d --- /dev/null +++ b/.history/style/index_20230527153758.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +backg +} \ No newline at end of file diff --git a/.history/style/index_20230527153801.css b/.history/style/index_20230527153801.css new file mode 100644 index 000000000..931313d67 --- /dev/null +++ b/.history/style/index_20230527153801.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153803.css b/.history/style/index_20230527153803.css new file mode 100644 index 000000000..c711f62e3 --- /dev/null +++ b/.history/style/index_20230527153803.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +} \ No newline at end of file diff --git a/.history/style/index_20230527153810.css b/.history/style/index_20230527153810.css new file mode 100644 index 000000000..aa920d9a9 --- /dev/null +++ b/.history/style/index_20230527153810.css @@ -0,0 +1,15 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +backgrou +} \ No newline at end of file diff --git a/.history/style/index_20230527153812.css b/.history/style/index_20230527153812.css new file mode 100644 index 000000000..3faffe843 --- /dev/null +++ b/.history/style/index_20230527153812.css @@ -0,0 +1,15 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153813.css b/.history/style/index_20230527153813.css new file mode 100644 index 000000000..10fb19da8 --- /dev/null +++ b/.history/style/index_20230527153813.css @@ -0,0 +1,15 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +} \ No newline at end of file diff --git a/.history/style/index_20230527153819.css b/.history/style/index_20230527153819.css new file mode 100644 index 000000000..cd62e6e2f --- /dev/null +++ b/.history/style/index_20230527153819.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +back +} \ No newline at end of file diff --git a/.history/style/index_20230527153824.css b/.history/style/index_20230527153824.css new file mode 100644 index 000000000..12adb1d4a --- /dev/null +++ b/.history/style/index_20230527153824.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +co +} \ No newline at end of file diff --git a/.history/style/index_20230527153827.css b/.history/style/index_20230527153827.css new file mode 100644 index 000000000..ae49cc72e --- /dev/null +++ b/.history/style/index_20230527153827.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color +} \ No newline at end of file diff --git a/.history/style/index_20230527153830.css b/.history/style/index_20230527153830.css new file mode 100644 index 000000000..41f4f9079 --- /dev/null +++ b/.history/style/index_20230527153830.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; +} \ No newline at end of file diff --git a/.history/style/index_20230527153836.css b/.history/style/index_20230527153836.css new file mode 100644 index 000000000..39b387649 --- /dev/null +++ b/.history/style/index_20230527153836.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; + +} \ No newline at end of file diff --git a/.history/style/index_20230527153842.css b/.history/style/index_20230527153842.css new file mode 100644 index 000000000..18518528d --- /dev/null +++ b/.history/style/index_20230527153842.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; +font-si +} \ No newline at end of file diff --git a/.history/style/index_20230527153847.css b/.history/style/index_20230527153847.css new file mode 100644 index 000000000..a06f417a1 --- /dev/null +++ b/.history/style/index_20230527153847.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; +font-size +} \ No newline at end of file diff --git a/.history/style/index_20230527153849.css b/.history/style/index_20230527153849.css new file mode 100644 index 000000000..a06f417a1 --- /dev/null +++ b/.history/style/index_20230527153849.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; +font-size +} \ No newline at end of file diff --git a/.history/style/index_20230527153851.css b/.history/style/index_20230527153851.css new file mode 100644 index 000000000..b4ac7751a --- /dev/null +++ b/.history/style/index_20230527153851.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection{ + display: flex; + justify-content: center; +} + +.img_button { +background-image: url("https://picsum.photos/550/450"); +background-size: cover; +background-repeat: no-repeat; +color: white; +font-size: 1.5em; +} \ No newline at end of file diff --git a/.history/style/index_20230527153852.css b/.history/style/index_20230527153852.css new file mode 100644 index 000000000..68a45ff54 --- /dev/null +++ b/.history/style/index_20230527153852.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; +} \ No newline at end of file diff --git a/.history/style/index_20230527153859.css b/.history/style/index_20230527153859.css new file mode 100644 index 000000000..e99285530 --- /dev/null +++ b/.history/style/index_20230527153859.css @@ -0,0 +1,18 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width +} \ No newline at end of file diff --git a/.history/style/index_20230527153901.css b/.history/style/index_20230527153901.css new file mode 100644 index 000000000..5748a7f33 --- /dev/null +++ b/.history/style/index_20230527153901.css @@ -0,0 +1,18 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width : 100%; +} \ No newline at end of file diff --git a/.history/style/index_20230527153904.css b/.history/style/index_20230527153904.css new file mode 100644 index 000000000..1c31ab2f5 --- /dev/null +++ b/.history/style/index_20230527153904.css @@ -0,0 +1,18 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: +} \ No newline at end of file diff --git a/.history/style/index_20230527153910.css b/.history/style/index_20230527153910.css new file mode 100644 index 000000000..04f8eacdb --- /dev/null +++ b/.history/style/index_20230527153910.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 550px; + +} \ No newline at end of file diff --git a/.history/style/index_20230527153913.css b/.history/style/index_20230527153913.css new file mode 100644 index 000000000..98b807d60 --- /dev/null +++ b/.history/style/index_20230527153913.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 550px; + height: ; +} \ No newline at end of file diff --git a/.history/style/index_20230527153917.css b/.history/style/index_20230527153917.css new file mode 100644 index 000000000..bc657b1e4 --- /dev/null +++ b/.history/style/index_20230527153917.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 550px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527153918.css b/.history/style/index_20230527153918.css new file mode 100644 index 000000000..bc657b1e4 --- /dev/null +++ b/.history/style/index_20230527153918.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 550px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527153942.css b/.history/style/index_20230527153942.css new file mode 100644 index 000000000..acea7ff5f --- /dev/null +++ b/.history/style/index_20230527153942.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/550/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527153948.css b/.history/style/index_20230527153948.css new file mode 100644 index 000000000..536897de2 --- /dev/null +++ b/.history/style/index_20230527153948.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527153957.css b/.history/style/index_20230527153957.css new file mode 100644 index 000000000..87e8b63a5 --- /dev/null +++ b/.history/style/index_20230527153957.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 0px; +} \ No newline at end of file diff --git a/.history/style/index_20230527153959.css b/.history/style/index_20230527153959.css new file mode 100644 index 000000000..814070025 --- /dev/null +++ b/.history/style/index_20230527153959.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 4500px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154003.css b/.history/style/index_20230527154003.css new file mode 100644 index 000000000..536897de2 --- /dev/null +++ b/.history/style/index_20230527154003.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154028.css b/.history/style/index_20230527154028.css new file mode 100644 index 000000000..6b711ffc9 --- /dev/null +++ b/.history/style/index_20230527154028.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 40px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154031.css b/.history/style/index_20230527154031.css new file mode 100644 index 000000000..8303dfd9b --- /dev/null +++ b/.history/style/index_20230527154031.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 380px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154053.css b/.history/style/index_20230527154053.css new file mode 100644 index 000000000..085223c2c --- /dev/null +++ b/.history/style/index_20230527154053.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 480px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154056.css b/.history/style/index_20230527154056.css new file mode 100644 index 000000000..536897de2 --- /dev/null +++ b/.history/style/index_20230527154056.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 650px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154302.css b/.history/style/index_20230527154302.css new file mode 100644 index 000000000..2f9549f2b --- /dev/null +++ b/.history/style/index_20230527154302.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154303.css b/.history/style/index_20230527154303.css new file mode 100644 index 000000000..f9653869a --- /dev/null +++ b/.history/style/index_20230527154303.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 450px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154309.css b/.history/style/index_20230527154309.css new file mode 100644 index 000000000..3786604e3 --- /dev/null +++ b/.history/style/index_20230527154309.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 500px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154326.css b/.history/style/index_20230527154326.css new file mode 100644 index 000000000..2c0a917be --- /dev/null +++ b/.history/style/index_20230527154326.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/650/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154333.css b/.history/style/index_20230527154333.css new file mode 100644 index 000000000..20f1525a8 --- /dev/null +++ b/.history/style/index_20230527154333.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154336.css b/.history/style/index_20230527154336.css new file mode 100644 index 000000000..b9abd68ac --- /dev/null +++ b/.history/style/index_20230527154336.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos//450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154339.css b/.history/style/index_20230527154339.css new file mode 100644 index 000000000..554974eb6 --- /dev/null +++ b/.history/style/index_20230527154339.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/450"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} \ No newline at end of file diff --git a/.history/style/index_20230527154342.css b/.history/style/index_20230527154342.css new file mode 100644 index 000000000..05289f660 --- /dev/null +++ b/.history/style/index_20230527154342.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 03c525801..05289f660 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,19 @@ nav { display: flex; justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; } \ No newline at end of file From f3c4929490c68c186b8a90caef2aae4abb1ed60b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sun, 28 May 2023 14:26:18 +0300 Subject: [PATCH 06/40] Added footer text and a button for contact me --- .history/index_20230528133359.html | 38 +++++++++++++++++++++++++ .history/index_20230528133416.html | 38 +++++++++++++++++++++++++ .history/index_20230528133417.html | 38 +++++++++++++++++++++++++ .history/index_20230528133449.html | 38 +++++++++++++++++++++++++ .history/index_20230528133454.html | 38 +++++++++++++++++++++++++ .history/index_20230528133457.html | 38 +++++++++++++++++++++++++ .history/index_20230528133459.html | 38 +++++++++++++++++++++++++ .history/index_20230528133508.html | 38 +++++++++++++++++++++++++ .history/index_20230528133509.html | 38 +++++++++++++++++++++++++ .history/index_20230528133512.html | 38 +++++++++++++++++++++++++ .history/index_20230528133518.html | 38 +++++++++++++++++++++++++ .history/index_20230528133520.html | 38 +++++++++++++++++++++++++ .history/index_20230528133522.html | 38 +++++++++++++++++++++++++ .history/index_20230528133533.html | 38 +++++++++++++++++++++++++ .history/style/index_20230528140424.css | 19 +++++++++++++ .history/style/index_20230528140425.css | 20 +++++++++++++ .history/style/index_20230528140432.css | 20 +++++++++++++ .history/style/index_20230528140433.css | 20 +++++++++++++ .history/style/index_20230528140434.css | 22 ++++++++++++++ .history/style/index_20230528140445.css | 22 ++++++++++++++ .history/style/index_20230528140449.css | 22 ++++++++++++++ .history/style/index_20230528140457.css | 23 +++++++++++++++ .history/style/index_20230528140502.css | 23 +++++++++++++++ .history/style/index_20230528140507.css | 23 +++++++++++++++ .history/style/index_20230528140509.css | 24 ++++++++++++++++ .history/style/index_20230528140516.css | 24 ++++++++++++++++ .history/style/index_20230528140517.css | 25 ++++++++++++++++ .history/style/index_20230528140519.css | 25 ++++++++++++++++ .history/style/index_20230528140541.css | 25 ++++++++++++++++ .history/style/index_20230528140542.css | 25 ++++++++++++++++ .history/style/index_20230528140555.css | 25 ++++++++++++++++ index.html | 4 ++- style/index.css | 6 ++++ 33 files changed, 928 insertions(+), 1 deletion(-) create mode 100644 .history/index_20230528133359.html create mode 100644 .history/index_20230528133416.html create mode 100644 .history/index_20230528133417.html create mode 100644 .history/index_20230528133449.html create mode 100644 .history/index_20230528133454.html create mode 100644 .history/index_20230528133457.html create mode 100644 .history/index_20230528133459.html create mode 100644 .history/index_20230528133508.html create mode 100644 .history/index_20230528133509.html create mode 100644 .history/index_20230528133512.html create mode 100644 .history/index_20230528133518.html create mode 100644 .history/index_20230528133520.html create mode 100644 .history/index_20230528133522.html create mode 100644 .history/index_20230528133533.html create mode 100644 .history/style/index_20230528140424.css create mode 100644 .history/style/index_20230528140425.css create mode 100644 .history/style/index_20230528140432.css create mode 100644 .history/style/index_20230528140433.css create mode 100644 .history/style/index_20230528140434.css create mode 100644 .history/style/index_20230528140445.css create mode 100644 .history/style/index_20230528140449.css create mode 100644 .history/style/index_20230528140457.css create mode 100644 .history/style/index_20230528140502.css create mode 100644 .history/style/index_20230528140507.css create mode 100644 .history/style/index_20230528140509.css create mode 100644 .history/style/index_20230528140516.css create mode 100644 .history/style/index_20230528140517.css create mode 100644 .history/style/index_20230528140519.css create mode 100644 .history/style/index_20230528140541.css create mode 100644 .history/style/index_20230528140542.css create mode 100644 .history/style/index_20230528140555.css diff --git a/.history/index_20230528133359.html b/.history/index_20230528133359.html new file mode 100644 index 000000000..bfa49b5bf --- /dev/null +++ b/.history/index_20230528133359.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230528133416.html b/.history/index_20230528133416.html new file mode 100644 index 000000000..9594e0390 --- /dev/null +++ b/.history/index_20230528133416.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + +
+ + + + + + + + +
+ +
+ + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230528133449.html b/.history/index_20230528133449.html new file mode 100644 index 000000000..56706a376 --- /dev/null +++ b/.history/index_20230528133449.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + +
+
+ + + \ No newline at end of file diff --git a/.history/index_20230528133454.html b/.history/index_20230528133454.html new file mode 100644 index 000000000..fef586164 --- /dev/null +++ b/.history/index_20230528133454.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133457.html b/.history/index_20230528133457.html new file mode 100644 index 000000000..ca97ba271 --- /dev/null +++ b/.history/index_20230528133457.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133459.html b/.history/index_20230528133459.html new file mode 100644 index 000000000..4b2c710fd --- /dev/null +++ b/.history/index_20230528133459.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + +
+ + + + + + + + +
+ +
+ + + +
+ + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133512.html b/.history/index_20230528133512.html new file mode 100644 index 000000000..4585044cf --- /dev/null +++ b/.history/index_20230528133512.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230528133518.html b/.history/index_20230528133518.html new file mode 100644 index 000000000..85e97881c --- /dev/null +++ b/.history/index_20230528133518.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133520.html b/.history/index_20230528133520.html new file mode 100644 index 000000000..35c6b59b0 --- /dev/null +++ b/.history/index_20230528133520.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133522.html b/.history/index_20230528133522.html new file mode 100644 index 000000000..afe7c3a9e --- /dev/null +++ b/.history/index_20230528133522.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/index_20230528133533.html b/.history/index_20230528133533.html new file mode 100644 index 000000000..250020269 --- /dev/null +++ b/.history/index_20230528133533.html @@ -0,0 +1,38 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/.history/style/index_20230528140424.css b/.history/style/index_20230528140424.css new file mode 100644 index 000000000..e04a9fbaa --- /dev/null +++ b/.history/style/index_20230528140424.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} diff --git a/.history/style/index_20230528140425.css b/.history/style/index_20230528140425.css new file mode 100644 index 000000000..c4a4149bc --- /dev/null +++ b/.history/style/index_20230528140425.css @@ -0,0 +1,20 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +. \ No newline at end of file diff --git a/.history/style/index_20230528140432.css b/.history/style/index_20230528140432.css new file mode 100644 index 000000000..e6765340d --- /dev/null +++ b/.history/style/index_20230528140432.css @@ -0,0 +1,20 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer \ No newline at end of file diff --git a/.history/style/index_20230528140433.css b/.history/style/index_20230528140433.css new file mode 100644 index 000000000..2fd8c2f97 --- /dev/null +++ b/.history/style/index_20230528140433.css @@ -0,0 +1,20 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{} \ No newline at end of file diff --git a/.history/style/index_20230528140434.css b/.history/style/index_20230528140434.css new file mode 100644 index 000000000..404940cfe --- /dev/null +++ b/.history/style/index_20230528140434.css @@ -0,0 +1,22 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + +} \ No newline at end of file diff --git a/.history/style/index_20230528140445.css b/.history/style/index_20230528140445.css new file mode 100644 index 000000000..de7efb2ff --- /dev/null +++ b/.history/style/index_20230528140445.css @@ -0,0 +1,22 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + d +} \ No newline at end of file diff --git a/.history/style/index_20230528140449.css b/.history/style/index_20230528140449.css new file mode 100644 index 000000000..525a0cee6 --- /dev/null +++ b/.history/style/index_20230528140449.css @@ -0,0 +1,22 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + bac +} \ No newline at end of file diff --git a/.history/style/index_20230528140457.css b/.history/style/index_20230528140457.css new file mode 100644 index 000000000..26f3375ea --- /dev/null +++ b/.history/style/index_20230528140457.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding +} \ No newline at end of file diff --git a/.history/style/index_20230528140502.css b/.history/style/index_20230528140502.css new file mode 100644 index 000000000..0b7146fd8 --- /dev/null +++ b/.history/style/index_20230528140502.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding: 20px +} \ No newline at end of file diff --git a/.history/style/index_20230528140507.css b/.history/style/index_20230528140507.css new file mode 100644 index 000000000..0b7146fd8 --- /dev/null +++ b/.history/style/index_20230528140507.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding: 20px +} \ No newline at end of file diff --git a/.history/style/index_20230528140509.css b/.history/style/index_20230528140509.css new file mode 100644 index 000000000..101ec13c8 --- /dev/null +++ b/.history/style/index_20230528140509.css @@ -0,0 +1,24 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding: 20px; + +} \ No newline at end of file diff --git a/.history/style/index_20230528140516.css b/.history/style/index_20230528140516.css new file mode 100644 index 000000000..d293d5e0e --- /dev/null +++ b/.history/style/index_20230528140516.css @@ -0,0 +1,24 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding: 20px; + text align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140517.css b/.history/style/index_20230528140517.css new file mode 100644 index 000000000..3dac9dee3 --- /dev/null +++ b/.history/style/index_20230528140517.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +footer{ + background-color: lightgray; + padding: 20px; + text align: center; + +} \ No newline at end of file diff --git a/.history/style/index_20230528140519.css b/.history/style/index_20230528140519.css new file mode 100644 index 000000000..15ca82d6c --- /dev/null +++ b/.history/style/index_20230528140519.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} + +footer { + background-color: lightgray; + padding: 20px; + text align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140541.css b/.history/style/index_20230528140541.css new file mode 100644 index 000000000..a3bbb6a88 --- /dev/null +++ b/.history/style/index_20230528140541.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} + +footer { + background-color: lightgray; + padding: 20px; + textalign: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140542.css b/.history/style/index_20230528140542.css new file mode 100644 index 000000000..227162dbe --- /dev/null +++ b/.history/style/index_20230528140542.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} + +footer { + background-color: lightgray; + padding: 20px; + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140555.css b/.history/style/index_20230528140555.css new file mode 100644 index 000000000..8a32821d2 --- /dev/null +++ b/.history/style/index_20230528140555.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html index fadf4de6e..250020269 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,10 @@

SEAN KIPINÄ

-
+ + diff --git a/style/index.css b/style/index.css index 05289f660..8a32821d2 100644 --- a/style/index.css +++ b/style/index.css @@ -16,4 +16,10 @@ nav { font-size: 1.5em; width: 700px; height: 400px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; } \ No newline at end of file From 20d57ee8ff4da6b405278305086e0c3db7849d9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Sun, 28 May 2023 14:27:00 +0300 Subject: [PATCH 07/40] Added div classes in a new section and random images and text for for picture. --- .history/index_20230528141115.html | 41 ++++++++++++++++++++++ .history/index_20230528141118.html | 41 ++++++++++++++++++++++ .history/index_20230528141120.html | 41 ++++++++++++++++++++++ .history/index_20230528141124.html | 42 +++++++++++++++++++++++ .history/index_20230528141125.html | 42 +++++++++++++++++++++++ .history/index_20230528141127.html | 43 +++++++++++++++++++++++ .history/index_20230528141130.html | 43 +++++++++++++++++++++++ .history/index_20230528141131.html | 43 +++++++++++++++++++++++ .history/index_20230528141916.html | 44 ++++++++++++++++++++++++ .history/index_20230528141920.html | 44 ++++++++++++++++++++++++ .history/index_20230528141925.html | 44 ++++++++++++++++++++++++ .history/index_20230528141928.html | 44 ++++++++++++++++++++++++ .history/index_20230528141932.html | 44 ++++++++++++++++++++++++ .history/index_20230528141944.html | 44 ++++++++++++++++++++++++ .history/index_20230528141950.html | 43 +++++++++++++++++++++++ .history/index_20230528142015.html | 44 ++++++++++++++++++++++++ .history/index_20230528142021.html | 45 +++++++++++++++++++++++++ .history/index_20230528142024.html | 45 +++++++++++++++++++++++++ .history/index_20230528142031.html | 45 +++++++++++++++++++++++++ .history/index_20230528142034.html | 45 +++++++++++++++++++++++++ .history/index_20230528142400.html | 44 ++++++++++++++++++++++++ .history/index_20230528142530.html | 44 ++++++++++++++++++++++++ .history/index_20230528142536.html | 44 ++++++++++++++++++++++++ .history/index_20230528142537.html | 45 +++++++++++++++++++++++++ .history/style/index_20230528140739.css | 25 ++++++++++++++ .history/style/index_20230528140742.css | 26 ++++++++++++++ .history/style/index_20230528140745.css | 26 ++++++++++++++ .history/style/index_20230528140747.css | 26 ++++++++++++++ .history/style/index_20230528140750.css | 27 +++++++++++++++ .history/style/index_20230528140758.css | 27 +++++++++++++++ .history/style/index_20230528140808.css | 27 +++++++++++++++ .history/style/index_20230528140809.css | 27 +++++++++++++++ .history/style/index_20230528140812.css | 27 +++++++++++++++ .history/style/index_20230528140814.css | 28 +++++++++++++++ .history/style/index_20230528140826.css | 28 +++++++++++++++ .history/style/index_20230528140830.css | 28 +++++++++++++++ .history/style/index_20230528140835.css | 28 +++++++++++++++ .history/style/index_20230528140837.css | 28 +++++++++++++++ .history/style/index_20230528140839.css | 28 +++++++++++++++ .history/style/index_20230528141016.css | 28 +++++++++++++++ .history/style/index_20230528141018.css | 28 +++++++++++++++ .history/style/index_20230528141027.css | 28 +++++++++++++++ .history/style/index_20230528141029.css | 28 +++++++++++++++ .history/style/index_20230528141033.css | 28 +++++++++++++++ .history/style/index_20230528141034.css | 28 +++++++++++++++ .history/style/index_20230528141049.css | 28 +++++++++++++++ .history/style/index_20230528141053.css | 28 +++++++++++++++ .history/style/index_20230528141055.css | 25 ++++++++++++++ .history/style/index_20230528141107.css | 28 +++++++++++++++ .history/style/index_20230528141111.css | 24 +++++++++++++ index.html | 9 ++++- style/index.css | 1 - 52 files changed, 1759 insertions(+), 2 deletions(-) create mode 100644 .history/index_20230528141115.html create mode 100644 .history/index_20230528141118.html create mode 100644 .history/index_20230528141120.html create mode 100644 .history/index_20230528141124.html create mode 100644 .history/index_20230528141125.html create mode 100644 .history/index_20230528141127.html create mode 100644 .history/index_20230528141130.html create mode 100644 .history/index_20230528141131.html create mode 100644 .history/index_20230528141916.html create mode 100644 .history/index_20230528141920.html create mode 100644 .history/index_20230528141925.html create mode 100644 .history/index_20230528141928.html create mode 100644 .history/index_20230528141932.html create mode 100644 .history/index_20230528141944.html create mode 100644 .history/index_20230528141950.html create mode 100644 .history/index_20230528142015.html create mode 100644 .history/index_20230528142021.html create mode 100644 .history/index_20230528142024.html create mode 100644 .history/index_20230528142031.html create mode 100644 .history/index_20230528142034.html create mode 100644 .history/index_20230528142400.html create mode 100644 .history/index_20230528142530.html create mode 100644 .history/index_20230528142536.html create mode 100644 .history/index_20230528142537.html create mode 100644 .history/style/index_20230528140739.css create mode 100644 .history/style/index_20230528140742.css create mode 100644 .history/style/index_20230528140745.css create mode 100644 .history/style/index_20230528140747.css create mode 100644 .history/style/index_20230528140750.css create mode 100644 .history/style/index_20230528140758.css create mode 100644 .history/style/index_20230528140808.css create mode 100644 .history/style/index_20230528140809.css create mode 100644 .history/style/index_20230528140812.css create mode 100644 .history/style/index_20230528140814.css create mode 100644 .history/style/index_20230528140826.css create mode 100644 .history/style/index_20230528140830.css create mode 100644 .history/style/index_20230528140835.css create mode 100644 .history/style/index_20230528140837.css create mode 100644 .history/style/index_20230528140839.css create mode 100644 .history/style/index_20230528141016.css create mode 100644 .history/style/index_20230528141018.css create mode 100644 .history/style/index_20230528141027.css create mode 100644 .history/style/index_20230528141029.css create mode 100644 .history/style/index_20230528141033.css create mode 100644 .history/style/index_20230528141034.css create mode 100644 .history/style/index_20230528141049.css create mode 100644 .history/style/index_20230528141053.css create mode 100644 .history/style/index_20230528141055.css create mode 100644 .history/style/index_20230528141107.css create mode 100644 .history/style/index_20230528141111.css diff --git a/.history/index_20230528141115.html b/.history/index_20230528141115.html new file mode 100644 index 000000000..b9a6f2ecd --- /dev/null +++ b/.history/index_20230528141115.html @@ -0,0 +1,41 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230528141118.html b/.history/index_20230528141118.html new file mode 100644 index 000000000..04d8587af --- /dev/null +++ b/.history/index_20230528141118.html @@ -0,0 +1,41 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141120.html b/.history/index_20230528141120.html new file mode 100644 index 000000000..6fd33fdba --- /dev/null +++ b/.history/index_20230528141120.html @@ -0,0 +1,41 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141124.html b/.history/index_20230528141124.html new file mode 100644 index 000000000..2aacdd263 --- /dev/null +++ b/.history/index_20230528141124.html @@ -0,0 +1,42 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141125.html b/.history/index_20230528141125.html new file mode 100644 index 000000000..0f2b6f921 --- /dev/null +++ b/.history/index_20230528141125.html @@ -0,0 +1,42 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ < +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141127.html b/.history/index_20230528141127.html new file mode 100644 index 000000000..7e81b474c --- /dev/null +++ b/.history/index_20230528141127.html @@ -0,0 +1,43 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141130.html b/.history/index_20230528141130.html new file mode 100644 index 000000000..4331b71f5 --- /dev/null +++ b/.history/index_20230528141130.html @@ -0,0 +1,43 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ < +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141131.html b/.history/index_20230528141131.html new file mode 100644 index 000000000..08190d499 --- /dev/null +++ b/.history/index_20230528141131.html @@ -0,0 +1,43 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141916.html b/.history/index_20230528141916.html new file mode 100644 index 000000000..ab08b6bdd --- /dev/null +++ b/.history/index_20230528141916.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ https://picsum.photos/700/400 +
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141920.html b/.history/index_20230528141920.html new file mode 100644 index 000000000..a6ab5156a --- /dev/null +++ b/.history/index_20230528141920.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141925.html b/.history/index_20230528141925.html new file mode 100644 index 000000000..32bcb63c1 --- /dev/null +++ b/.history/index_20230528141925.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141928.html b/.history/index_20230528141928.html new file mode 100644 index 000000000..f60699afa --- /dev/null +++ b/.history/index_20230528141928.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141932.html b/.history/index_20230528141932.html new file mode 100644 index 000000000..d9666a43a --- /dev/null +++ b/.history/index_20230528141932.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141944.html b/.history/index_20230528141944.html new file mode 100644 index 000000000..2737a044d --- /dev/null +++ b/.history/index_20230528141944.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528141950.html b/.history/index_20230528141950.html new file mode 100644 index 000000000..01244ec07 --- /dev/null +++ b/.history/index_20230528141950.html @@ -0,0 +1,43 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142015.html b/.history/index_20230528142015.html new file mode 100644 index 000000000..ea09f1b2e --- /dev/null +++ b/.history/index_20230528142015.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142021.html b/.history/index_20230528142021.html new file mode 100644 index 000000000..2c9fc38aa --- /dev/null +++ b/.history/index_20230528142021.html @@ -0,0 +1,45 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142024.html b/.history/index_20230528142024.html new file mode 100644 index 000000000..52ad3b4d2 --- /dev/null +++ b/.history/index_20230528142024.html @@ -0,0 +1,45 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142031.html b/.history/index_20230528142031.html new file mode 100644 index 000000000..723a79e78 --- /dev/null +++ b/.history/index_20230528142031.html @@ -0,0 +1,45 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ Portfolio Pictures

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142034.html b/.history/index_20230528142034.html new file mode 100644 index 000000000..6b56172a6 --- /dev/null +++ b/.history/index_20230528142034.html @@ -0,0 +1,45 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ Portfolio Pieces

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142400.html b/.history/index_20230528142400.html new file mode 100644 index 000000000..a846a26d4 --- /dev/null +++ b/.history/index_20230528142400.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ Portfolio Project

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142530.html b/.history/index_20230528142530.html new file mode 100644 index 000000000..71193bec3 --- /dev/null +++ b/.history/index_20230528142530.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+

Portfolio Project

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142536.html b/.history/index_20230528142536.html new file mode 100644 index 000000000..639d4e97b --- /dev/null +++ b/.history/index_20230528142536.html @@ -0,0 +1,44 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+

Portfolio Project

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230528142537.html b/.history/index_20230528142537.html new file mode 100644 index 000000000..6e82d6691 --- /dev/null +++ b/.history/index_20230528142537.html @@ -0,0 +1,45 @@ + + + + + + + Sean Kipinä Portfolio + + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Portfolio Project

+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/style/index_20230528140739.css b/.history/style/index_20230528140739.css new file mode 100644 index 000000000..d0c68b24f --- /dev/null +++ b/.history/style/index_20230528140739.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +
+ +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140745.css b/.history/style/index_20230528140745.css new file mode 100644 index 000000000..3e73207c2 --- /dev/null +++ b/.history/style/index_20230528140745.css @@ -0,0 +1,26 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +
+< +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230528140747.css b/.history/style/index_20230528140747.css new file mode 100644 index 000000000..e073c671c --- /dev/null +++ b/.history/style/index_20230528140747.css @@ -0,0 +1,26 @@ +nav { + display: flex; + justify-content: space-between; +} + +.uppersection { + display: flex; + justify-content: center; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; +} +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SEAN KIPINÄ - +
+
+
+ +

Portfolio Project

+
+
+
- \ No newline at end of file + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 63c83a308..931e14190 100644 --- a/style/index.css +++ b/style/index.css @@ -141,53 +141,3 @@ button:hover { } /* Add a media query for mobile devices */ -@media (max-width: 768px) { - nav { - flex-direction: column; - align-items: center; - } - - .links { - flex-direction: column; - margin-top: 10px; - } - - .links button { - margin-bottom: 10px; - width: 100%; - } - - .uppersection { - padding: 10px; - } - - .img_button { - width: 100%; - height: 200px; - } - - .button-content { - padding: 10px; - } - - .button-content h1 { - font-size: 1.5em; - } - - .button-content a { - font-size: 1em; - } - - .rounded-text { - font-size: 1em; - } - - .row { - flex-direction: column; - padding: 10px; - } - - .element_pics { - padding: 10px; - } -} \ No newline at end of file From 01feee79b1dfea0eb5f8d73e4c1c5bc53364dc68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Mon, 5 Jun 2023 17:46:50 +0300 Subject: [PATCH 20/40] Changed title to be after .css linking style added new @media tags. --- .history/index_20230605174404.html | 91 ++++++++++++++ .history/index_20230605174406.html | 92 ++++++++++++++ .history/style/index_20230605174246.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174250.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174251.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174254.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174256.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174258.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174300.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174301.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174303.css | 144 ++++++++++++++++++++++ .history/style/index_20230605174307.css | 146 ++++++++++++++++++++++ .history/style/index_20230605174320.css | 147 ++++++++++++++++++++++ .history/style/index_20230605174323.css | 147 ++++++++++++++++++++++ .history/style/index_20230605174327.css | 149 ++++++++++++++++++++++ .history/style/index_20230605174337.css | 149 ++++++++++++++++++++++ .history/style/index_20230605174443.css | 151 +++++++++++++++++++++++ .history/style/index_20230605174444.css | 151 +++++++++++++++++++++++ .history/style/index_20230605174450.css | 152 +++++++++++++++++++++++ .history/style/index_20230605174454.css | 153 +++++++++++++++++++++++ .history/style/index_20230605174538.css | 154 +++++++++++++++++++++++ .history/style/index_20230605174541.css | 154 +++++++++++++++++++++++ .history/style/index_20230605174544.css | 156 ++++++++++++++++++++++++ .history/style/index_20230605174548.css | 156 ++++++++++++++++++++++++ .history/style/index_20230605174552.css | 156 ++++++++++++++++++++++++ .history/style/index_20230605174556.css | 156 ++++++++++++++++++++++++ index.html | 4 +- style/index.css | 13 ++ 28 files changed, 3771 insertions(+), 2 deletions(-) create mode 100644 .history/index_20230605174404.html create mode 100644 .history/index_20230605174406.html create mode 100644 .history/style/index_20230605174246.css create mode 100644 .history/style/index_20230605174250.css create mode 100644 .history/style/index_20230605174251.css create mode 100644 .history/style/index_20230605174254.css create mode 100644 .history/style/index_20230605174256.css create mode 100644 .history/style/index_20230605174258.css create mode 100644 .history/style/index_20230605174300.css create mode 100644 .history/style/index_20230605174301.css create mode 100644 .history/style/index_20230605174303.css create mode 100644 .history/style/index_20230605174307.css create mode 100644 .history/style/index_20230605174320.css create mode 100644 .history/style/index_20230605174323.css create mode 100644 .history/style/index_20230605174327.css create mode 100644 .history/style/index_20230605174337.css create mode 100644 .history/style/index_20230605174443.css create mode 100644 .history/style/index_20230605174444.css create mode 100644 .history/style/index_20230605174450.css create mode 100644 .history/style/index_20230605174454.css create mode 100644 .history/style/index_20230605174538.css create mode 100644 .history/style/index_20230605174541.css create mode 100644 .history/style/index_20230605174544.css create mode 100644 .history/style/index_20230605174548.css create mode 100644 .history/style/index_20230605174552.css create mode 100644 .history/style/index_20230605174556.css diff --git a/.history/index_20230605174404.html b/.history/index_20230605174404.html new file mode 100644 index 000000000..70de6a72c --- /dev/null +++ b/.history/index_20230605174404.html @@ -0,0 +1,91 @@ + + + + + + + + + + +
+ +
+ +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230605174406.html b/.history/index_20230605174406.html new file mode 100644 index 000000000..00c8f0261 --- /dev/null +++ b/.history/index_20230605174406.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/style/index_20230605174246.css b/.history/style/index_20230605174246.css new file mode 100644 index 000000000..c5337fda3 --- /dev/null +++ b/.history/style/index_20230605174246.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media \ No newline at end of file diff --git a/.history/style/index_20230605174250.css b/.history/style/index_20230605174250.css new file mode 100644 index 000000000..da66b3f6b --- /dev/null +++ b/.history/style/index_20230605174250.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media() \ No newline at end of file diff --git a/.history/style/index_20230605174251.css b/.history/style/index_20230605174251.css new file mode 100644 index 000000000..4531c1f00 --- /dev/null +++ b/.history/style/index_20230605174251.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(ma) \ No newline at end of file diff --git a/.history/style/index_20230605174254.css b/.history/style/index_20230605174254.css new file mode 100644 index 000000000..ccb4e4567 --- /dev/null +++ b/.history/style/index_20230605174254.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width) \ No newline at end of file diff --git a/.history/style/index_20230605174256.css b/.history/style/index_20230605174256.css new file mode 100644 index 000000000..83045cedc --- /dev/null +++ b/.history/style/index_20230605174256.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width:) \ No newline at end of file diff --git a/.history/style/index_20230605174258.css b/.history/style/index_20230605174258.css new file mode 100644 index 000000000..2358d0873 --- /dev/null +++ b/.history/style/index_20230605174258.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width:800) \ No newline at end of file diff --git a/.history/style/index_20230605174300.css b/.history/style/index_20230605174300.css new file mode 100644 index 000000000..ac2fe0d45 --- /dev/null +++ b/.history/style/index_20230605174300.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width:800px) \ No newline at end of file diff --git a/.history/style/index_20230605174301.css b/.history/style/index_20230605174301.css new file mode 100644 index 000000000..ddccdcd37 --- /dev/null +++ b/.history/style/index_20230605174301.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width:8 00px) \ No newline at end of file diff --git a/.history/style/index_20230605174303.css b/.history/style/index_20230605174303.css new file mode 100644 index 000000000..ab41b6e12 --- /dev/null +++ b/.history/style/index_20230605174303.css @@ -0,0 +1,144 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) \ No newline at end of file diff --git a/.history/style/index_20230605174307.css b/.history/style/index_20230605174307.css new file mode 100644 index 000000000..bbfc59bd6 --- /dev/null +++ b/.history/style/index_20230605174307.css @@ -0,0 +1,146 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} \ No newline at end of file diff --git a/.history/style/index_20230605174320.css b/.history/style/index_20230605174320.css new file mode 100644 index 000000000..907efbd85 --- /dev/null +++ b/.history/style/index_20230605174320.css @@ -0,0 +1,147 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media \ No newline at end of file diff --git a/.history/style/index_20230605174323.css b/.history/style/index_20230605174323.css new file mode 100644 index 000000000..907efbd85 --- /dev/null +++ b/.history/style/index_20230605174323.css @@ -0,0 +1,147 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media \ No newline at end of file diff --git a/.history/style/index_20230605174327.css b/.history/style/index_20230605174327.css new file mode 100644 index 000000000..9d40b87de --- /dev/null +++ b/.history/style/index_20230605174327.css @@ -0,0 +1,149 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 600px){ + +} \ No newline at end of file diff --git a/.history/style/index_20230605174337.css b/.history/style/index_20230605174337.css new file mode 100644 index 000000000..61f7df502 --- /dev/null +++ b/.history/style/index_20230605174337.css @@ -0,0 +1,149 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + +} \ No newline at end of file diff --git a/.history/style/index_20230605174443.css b/.history/style/index_20230605174443.css new file mode 100644 index 000000000..9f053c350 --- /dev/null +++ b/.history/style/index_20230605174443.css @@ -0,0 +1,151 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174444.css b/.history/style/index_20230605174444.css new file mode 100644 index 000000000..6b8687c2d --- /dev/null +++ b/.history/style/index_20230605174444.css @@ -0,0 +1,151 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + flex-direction: column; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174450.css b/.history/style/index_20230605174450.css new file mode 100644 index 000000000..237aa97bc --- /dev/null +++ b/.history/style/index_20230605174450.css @@ -0,0 +1,152 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174454.css b/.history/style/index_20230605174454.css new file mode 100644 index 000000000..fefe78b3b --- /dev/null +++ b/.history/style/index_20230605174454.css @@ -0,0 +1,153 @@ +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174538.css b/.history/style/index_20230605174538.css new file mode 100644 index 000000000..0800f4d20 --- /dev/null +++ b/.history/style/index_20230605174538.css @@ -0,0 +1,154 @@ + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174541.css b/.history/style/index_20230605174541.css new file mode 100644 index 000000000..6f3094a77 --- /dev/null +++ b/.history/style/index_20230605174541.css @@ -0,0 +1,154 @@ +* +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174544.css b/.history/style/index_20230605174544.css new file mode 100644 index 000000000..719b30079 --- /dev/null +++ b/.history/style/index_20230605174544.css @@ -0,0 +1,156 @@ +*{ + +} +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174548.css b/.history/style/index_20230605174548.css new file mode 100644 index 000000000..a49c91a37 --- /dev/null +++ b/.history/style/index_20230605174548.css @@ -0,0 +1,156 @@ +*{ + box +} +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174552.css b/.history/style/index_20230605174552.css new file mode 100644 index 000000000..b12be062b --- /dev/null +++ b/.history/style/index_20230605174552.css @@ -0,0 +1,156 @@ +*{ + box-sizing: border-box; +} +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px){ + +} +@media(max-width: 500px){ + nav{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230605174556.css b/.history/style/index_20230605174556.css new file mode 100644 index 000000000..1eb2a7ee0 --- /dev/null +++ b/.history/style/index_20230605174556.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/index.html b/index.html index f4c11ea91..00c8f0261 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ - Sean Kipinä Portfolio + Sean Kipinä Portfolio @@ -89,4 +89,4 @@

SEAN KIPINÄ

- \ No newline at end of file + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 931e14190..1eb2a7ee0 100644 --- a/style/index.css +++ b/style/index.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + nav { display: flex; justify-content: space-between; @@ -141,3 +145,12 @@ button:hover { } /* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + + } +} \ No newline at end of file From 34399ccd25eda9f140560adeee285069d88718dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Tue, 6 Jun 2023 14:35:56 +0300 Subject: [PATCH 21/40] Added centering to the buttons and changed links properties. --- .history/style/index_20230605175152.css | 156 +++++++++++++++++++++ .history/style/index_20230605175156.css | 156 +++++++++++++++++++++ .history/style/index_20230605175157.css | 156 +++++++++++++++++++++ .history/style/index_20230605175159.css | 156 +++++++++++++++++++++ .history/style/index_20230605175218.css | 157 ++++++++++++++++++++++ .history/style/index_20230605175221.css | 157 ++++++++++++++++++++++ .history/style/index_20230605175229.css | 159 ++++++++++++++++++++++ .history/style/index_20230605175232.css | 159 ++++++++++++++++++++++ .history/style/index_20230605175403.css | 160 ++++++++++++++++++++++ .history/style/index_20230605175404.css | 160 ++++++++++++++++++++++ .history/style/index_20230605175406.css | 160 ++++++++++++++++++++++ .history/style/index_20230605175410.css | 160 ++++++++++++++++++++++ .history/style/index_20230605175413.css | 160 ++++++++++++++++++++++ .history/style/index_20230606141714.css | 161 ++++++++++++++++++++++ .history/style/index_20230606141717.css | 161 ++++++++++++++++++++++ .history/style/index_20230606141718.css | 161 ++++++++++++++++++++++ .history/style/index_20230606141719.css | 163 ++++++++++++++++++++++ .history/style/index_20230606141723.css | 163 ++++++++++++++++++++++ .history/style/index_20230606141726.css | 164 +++++++++++++++++++++++ .history/style/index_20230606141729.css | 164 +++++++++++++++++++++++ .history/style/index_20230606141731.css | 165 +++++++++++++++++++++++ .history/style/index_20230606141739.css | 165 +++++++++++++++++++++++ .history/style/index_20230606141741.css | 165 +++++++++++++++++++++++ .history/style/index_20230606141744.css | 165 +++++++++++++++++++++++ .history/style/index_20230606143039.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143041.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143043.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143045.css | 167 +++++++++++++++++++++++ .history/style/index_20230606143048.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143049.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143051.css | 166 +++++++++++++++++++++++ .history/style/index_20230606143053.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143056.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143103.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143104.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143109.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143119.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143123.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143130.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143132.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143134.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143136.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143142.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143146.css | 168 +++++++++++++++++++++++ .history/style/index_20230606143156.css | 169 +++++++++++++++++++++++ .history/style/index_20230606143159.css | 169 +++++++++++++++++++++++ .history/style/index_20230606143200.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143211.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143329.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143335.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143336.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143347.css | 171 ++++++++++++++++++++++++ .history/style/index_20230606143409.css | 171 ++++++++++++++++++++++++ style/index.css | 15 +++ 54 files changed, 8750 insertions(+) create mode 100644 .history/style/index_20230605175152.css create mode 100644 .history/style/index_20230605175156.css create mode 100644 .history/style/index_20230605175157.css create mode 100644 .history/style/index_20230605175159.css create mode 100644 .history/style/index_20230605175218.css create mode 100644 .history/style/index_20230605175221.css create mode 100644 .history/style/index_20230605175229.css create mode 100644 .history/style/index_20230605175232.css create mode 100644 .history/style/index_20230605175403.css create mode 100644 .history/style/index_20230605175404.css create mode 100644 .history/style/index_20230605175406.css create mode 100644 .history/style/index_20230605175410.css create mode 100644 .history/style/index_20230605175413.css create mode 100644 .history/style/index_20230606141714.css create mode 100644 .history/style/index_20230606141717.css create mode 100644 .history/style/index_20230606141718.css create mode 100644 .history/style/index_20230606141719.css create mode 100644 .history/style/index_20230606141723.css create mode 100644 .history/style/index_20230606141726.css create mode 100644 .history/style/index_20230606141729.css create mode 100644 .history/style/index_20230606141731.css create mode 100644 .history/style/index_20230606141739.css create mode 100644 .history/style/index_20230606141741.css create mode 100644 .history/style/index_20230606141744.css create mode 100644 .history/style/index_20230606143039.css create mode 100644 .history/style/index_20230606143041.css create mode 100644 .history/style/index_20230606143043.css create mode 100644 .history/style/index_20230606143045.css create mode 100644 .history/style/index_20230606143048.css create mode 100644 .history/style/index_20230606143049.css create mode 100644 .history/style/index_20230606143051.css create mode 100644 .history/style/index_20230606143053.css create mode 100644 .history/style/index_20230606143056.css create mode 100644 .history/style/index_20230606143103.css create mode 100644 .history/style/index_20230606143104.css create mode 100644 .history/style/index_20230606143109.css create mode 100644 .history/style/index_20230606143119.css create mode 100644 .history/style/index_20230606143123.css create mode 100644 .history/style/index_20230606143130.css create mode 100644 .history/style/index_20230606143132.css create mode 100644 .history/style/index_20230606143134.css create mode 100644 .history/style/index_20230606143136.css create mode 100644 .history/style/index_20230606143142.css create mode 100644 .history/style/index_20230606143146.css create mode 100644 .history/style/index_20230606143156.css create mode 100644 .history/style/index_20230606143159.css create mode 100644 .history/style/index_20230606143200.css create mode 100644 .history/style/index_20230606143211.css create mode 100644 .history/style/index_20230606143329.css create mode 100644 .history/style/index_20230606143335.css create mode 100644 .history/style/index_20230606143336.css create mode 100644 .history/style/index_20230606143347.css create mode 100644 .history/style/index_20230606143409.css diff --git a/.history/style/index_20230605175152.css b/.history/style/index_20230605175152.css new file mode 100644 index 000000000..d09e14412 --- /dev/null +++ b/.history/style/index_20230605175152.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175156.css b/.history/style/index_20230605175156.css new file mode 100644 index 000000000..df37a3701 --- /dev/null +++ b/.history/style/index_20230605175156.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items:la + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175157.css b/.history/style/index_20230605175157.css new file mode 100644 index 000000000..d09e14412 --- /dev/null +++ b/.history/style/index_20230605175157.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175159.css b/.history/style/index_20230605175159.css new file mode 100644 index 000000000..5700918b6 --- /dev/null +++ b/.history/style/index_20230605175159.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175218.css b/.history/style/index_20230605175218.css new file mode 100644 index 000000000..254106939 --- /dev/null +++ b/.history/style/index_20230605175218.css @@ -0,0 +1,157 @@ +* { + box-sizing: border-box; + padding: ; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175221.css b/.history/style/index_20230605175221.css new file mode 100644 index 000000000..9f9671f47 --- /dev/null +++ b/.history/style/index_20230605175221.css @@ -0,0 +1,157 @@ +* { + box-sizing: border-box; + padding: 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175229.css b/.history/style/index_20230605175229.css new file mode 100644 index 000000000..96c9c6308 --- /dev/null +++ b/.history/style/index_20230605175229.css @@ -0,0 +1,159 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175232.css b/.history/style/index_20230605175232.css new file mode 100644 index 000000000..3b182bd0d --- /dev/null +++ b/.history/style/index_20230605175232.css @@ -0,0 +1,159 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175403.css b/.history/style/index_20230605175403.css new file mode 100644 index 000000000..2511620ed --- /dev/null +++ b/.history/style/index_20230605175403.css @@ -0,0 +1,160 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175404.css b/.history/style/index_20230605175404.css new file mode 100644 index 000000000..23ec53141 --- /dev/null +++ b/.history/style/index_20230605175404.css @@ -0,0 +1,160 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175406.css b/.history/style/index_20230605175406.css new file mode 100644 index 000000000..2a95787a9 --- /dev/null +++ b/.history/style/index_20230605175406.css @@ -0,0 +1,160 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175410.css b/.history/style/index_20230605175410.css new file mode 100644 index 000000000..53c5fb0fd --- /dev/null +++ b/.history/style/index_20230605175410.css @@ -0,0 +1,160 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid #; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230605175413.css b/.history/style/index_20230605175413.css new file mode 100644 index 000000000..243447a67 --- /dev/null +++ b/.history/style/index_20230605175413.css @@ -0,0 +1,160 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141714.css b/.history/style/index_20230606141714.css new file mode 100644 index 000000000..cdc7b2491 --- /dev/null +++ b/.history/style/index_20230606141714.css @@ -0,0 +1,161 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + +} \ No newline at end of file diff --git a/.history/style/index_20230606141717.css b/.history/style/index_20230606141717.css new file mode 100644 index 000000000..41641a7e1 --- /dev/null +++ b/.history/style/index_20230606141717.css @@ -0,0 +1,161 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links +} \ No newline at end of file diff --git a/.history/style/index_20230606141718.css b/.history/style/index_20230606141718.css new file mode 100644 index 000000000..fb2f8dc51 --- /dev/null +++ b/.history/style/index_20230606141718.css @@ -0,0 +1,161 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{} +} \ No newline at end of file diff --git a/.history/style/index_20230606141719.css b/.history/style/index_20230606141719.css new file mode 100644 index 000000000..00c8fb89d --- /dev/null +++ b/.history/style/index_20230606141719.css @@ -0,0 +1,163 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141723.css b/.history/style/index_20230606141723.css new file mode 100644 index 000000000..b678661a1 --- /dev/null +++ b/.history/style/index_20230606141723.css @@ -0,0 +1,163 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141726.css b/.history/style/index_20230606141726.css new file mode 100644 index 000000000..20563d987 --- /dev/null +++ b/.history/style/index_20230606141726.css @@ -0,0 +1,164 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141729.css b/.history/style/index_20230606141729.css new file mode 100644 index 000000000..207d08379 --- /dev/null +++ b/.history/style/index_20230606141729.css @@ -0,0 +1,164 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141731.css b/.history/style/index_20230606141731.css new file mode 100644 index 000000000..df8140242 --- /dev/null +++ b/.history/style/index_20230606141731.css @@ -0,0 +1,165 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141739.css b/.history/style/index_20230606141739.css new file mode 100644 index 000000000..deb1c7d03 --- /dev/null +++ b/.history/style/index_20230606141739.css @@ -0,0 +1,165 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141741.css b/.history/style/index_20230606141741.css new file mode 100644 index 000000000..126416abb --- /dev/null +++ b/.history/style/index_20230606141741.css @@ -0,0 +1,165 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: ; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606141744.css b/.history/style/index_20230606141744.css new file mode 100644 index 000000000..926b3a626 --- /dev/null +++ b/.history/style/index_20230606141744.css @@ -0,0 +1,165 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143039.css b/.history/style/index_20230606143039.css new file mode 100644 index 000000000..b3900ab03 --- /dev/null +++ b/.history/style/index_20230606143039.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .lib +} \ No newline at end of file diff --git a/.history/style/index_20230606143041.css b/.history/style/index_20230606143041.css new file mode 100644 index 000000000..7ca2b6a72 --- /dev/null +++ b/.history/style/index_20230606143041.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links +} \ No newline at end of file diff --git a/.history/style/index_20230606143043.css b/.history/style/index_20230606143043.css new file mode 100644 index 000000000..c29f1b279 --- /dev/null +++ b/.history/style/index_20230606143043.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button +} \ No newline at end of file diff --git a/.history/style/index_20230606143045.css b/.history/style/index_20230606143045.css new file mode 100644 index 000000000..054e9ddc5 --- /dev/null +++ b/.history/style/index_20230606143045.css @@ -0,0 +1,167 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + +} \ No newline at end of file diff --git a/.history/style/index_20230606143048.css b/.history/style/index_20230606143048.css new file mode 100644 index 000000000..cd8723742 --- /dev/null +++ b/.history/style/index_20230606143048.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { +} \ No newline at end of file diff --git a/.history/style/index_20230606143049.css b/.history/style/index_20230606143049.css new file mode 100644 index 000000000..9319ce9bc --- /dev/null +++ b/.history/style/index_20230606143049.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button {{} +} \ No newline at end of file diff --git a/.history/style/index_20230606143051.css b/.history/style/index_20230606143051.css new file mode 100644 index 000000000..99e166600 --- /dev/null +++ b/.history/style/index_20230606143051.css @@ -0,0 +1,166 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button +} \ No newline at end of file diff --git a/.history/style/index_20230606143053.css b/.history/style/index_20230606143053.css new file mode 100644 index 000000000..8cfd24189 --- /dev/null +++ b/.history/style/index_20230606143053.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143056.css b/.history/style/index_20230606143056.css new file mode 100644 index 000000000..2d9378c4c --- /dev/null +++ b/.history/style/index_20230606143056.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143103.css b/.history/style/index_20230606143103.css new file mode 100644 index 000000000..e2e97d0e6 --- /dev/null +++ b/.history/style/index_20230606143103.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width 40 + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143104.css b/.history/style/index_20230606143104.css new file mode 100644 index 000000000..246c8b7b3 --- /dev/null +++ b/.history/style/index_20230606143104.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143109.css b/.history/style/index_20230606143109.css new file mode 100644 index 000000000..2d9378c4c --- /dev/null +++ b/.history/style/index_20230606143109.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143119.css b/.history/style/index_20230606143119.css new file mode 100644 index 000000000..2d9378c4c --- /dev/null +++ b/.history/style/index_20230606143119.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143123.css b/.history/style/index_20230606143123.css new file mode 100644 index 000000000..0393d25f4 --- /dev/null +++ b/.history/style/index_20230606143123.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143130.css b/.history/style/index_20230606143130.css new file mode 100644 index 000000000..0393d25f4 --- /dev/null +++ b/.history/style/index_20230606143130.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143132.css b/.history/style/index_20230606143132.css new file mode 100644 index 000000000..0393d25f4 --- /dev/null +++ b/.history/style/index_20230606143132.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143134.css b/.history/style/index_20230606143134.css new file mode 100644 index 000000000..0393d25f4 --- /dev/null +++ b/.history/style/index_20230606143134.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143136.css b/.history/style/index_20230606143136.css new file mode 100644 index 000000000..b6ba79ed3 --- /dev/null +++ b/.history/style/index_20230606143136.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%, + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143142.css b/.history/style/index_20230606143142.css new file mode 100644 index 000000000..833cfae7e --- /dev/null +++ b/.history/style/index_20230606143142.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143146.css b/.history/style/index_20230606143146.css new file mode 100644 index 000000000..833cfae7e --- /dev/null +++ b/.history/style/index_20230606143146.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143156.css b/.history/style/index_20230606143156.css new file mode 100644 index 000000000..fa0fa7486 --- /dev/null +++ b/.history/style/index_20230606143156.css @@ -0,0 +1,169 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143159.css b/.history/style/index_20230606143159.css new file mode 100644 index 000000000..a360f2283 --- /dev/null +++ b/.history/style/index_20230606143159.css @@ -0,0 +1,169 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143200.css b/.history/style/index_20230606143200.css new file mode 100644 index 000000000..611e65704 --- /dev/null +++ b/.history/style/index_20230606143200.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143211.css b/.history/style/index_20230606143211.css new file mode 100644 index 000000000..aa9c8792b --- /dev/null +++ b/.history/style/index_20230606143211.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border-box: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143329.css b/.history/style/index_20230606143329.css new file mode 100644 index 000000000..13cd44b83 --- /dev/null +++ b/.history/style/index_20230606143329.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143335.css b/.history/style/index_20230606143335.css new file mode 100644 index 000000000..3a2f478de --- /dev/null +++ b/.history/style/index_20230606143335.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: v1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143336.css b/.history/style/index_20230606143336.css new file mode 100644 index 000000000..13cd44b83 --- /dev/null +++ b/.history/style/index_20230606143336.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143347.css b/.history/style/index_20230606143347.css new file mode 100644 index 000000000..609d4f222 --- /dev/null +++ b/.history/style/index_20230606143347.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solidbox grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143409.css b/.history/style/index_20230606143409.css new file mode 100644 index 000000000..fb8c7054b --- /dev/null +++ b/.history/style/index_20230606143409.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 1eb2a7ee0..fb8c7054b 100644 --- a/style/index.css +++ b/style/index.css @@ -1,5 +1,9 @@ * { box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; } nav { @@ -151,6 +155,17 @@ button:hover { nav { display: flex; flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + .links button { + width: 40%; } } \ No newline at end of file From bb1e2d46a9b91a56f26a641d65800bacff20e345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Tue, 6 Jun 2023 14:41:02 +0300 Subject: [PATCH 22/40] Adjusted the links button margin padding and spacing. --- .history/style/index_20230606143528.css | 171 +++++++++++++++++++++++ .history/style/index_20230606143531.css | 171 +++++++++++++++++++++++ .history/style/index_20230606143652.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143654.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143656.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143701.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143705.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143706.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143721.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143722.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143724.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143727.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143738.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143740.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143751.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143841.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143847.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143939.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143940.css | 172 +++++++++++++++++++++++ .history/style/index_20230606143941.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143945.css | 173 ++++++++++++++++++++++++ .history/style/index_20230606143948.css | 173 ++++++++++++++++++++++++ style/index.css | 2 + 23 files changed, 3796 insertions(+) create mode 100644 .history/style/index_20230606143528.css create mode 100644 .history/style/index_20230606143531.css create mode 100644 .history/style/index_20230606143652.css create mode 100644 .history/style/index_20230606143654.css create mode 100644 .history/style/index_20230606143656.css create mode 100644 .history/style/index_20230606143701.css create mode 100644 .history/style/index_20230606143705.css create mode 100644 .history/style/index_20230606143706.css create mode 100644 .history/style/index_20230606143721.css create mode 100644 .history/style/index_20230606143722.css create mode 100644 .history/style/index_20230606143724.css create mode 100644 .history/style/index_20230606143727.css create mode 100644 .history/style/index_20230606143738.css create mode 100644 .history/style/index_20230606143740.css create mode 100644 .history/style/index_20230606143751.css create mode 100644 .history/style/index_20230606143841.css create mode 100644 .history/style/index_20230606143847.css create mode 100644 .history/style/index_20230606143939.css create mode 100644 .history/style/index_20230606143940.css create mode 100644 .history/style/index_20230606143941.css create mode 100644 .history/style/index_20230606143945.css create mode 100644 .history/style/index_20230606143948.css diff --git a/.history/style/index_20230606143528.css b/.history/style/index_20230606143528.css new file mode 100644 index 000000000..7d2573145 --- /dev/null +++ b/.history/style/index_20230606143528.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px sol grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143531.css b/.history/style/index_20230606143531.css new file mode 100644 index 000000000..fb8c7054b --- /dev/null +++ b/.history/style/index_20230606143531.css @@ -0,0 +1,171 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143652.css b/.history/style/index_20230606143652.css new file mode 100644 index 000000000..b225e72e5 --- /dev/null +++ b/.history/style/index_20230606143652.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143654.css b/.history/style/index_20230606143654.css new file mode 100644 index 000000000..c808a3bd3 --- /dev/null +++ b/.history/style/index_20230606143654.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143656.css b/.history/style/index_20230606143656.css new file mode 100644 index 000000000..3a4db3c47 --- /dev/null +++ b/.history/style/index_20230606143656.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 0 + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143701.css b/.history/style/index_20230606143701.css new file mode 100644 index 000000000..e9f956942 --- /dev/null +++ b/.history/style/index_20230606143701.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143705.css b/.history/style/index_20230606143705.css new file mode 100644 index 000000000..c99f842ed --- /dev/null +++ b/.history/style/index_20230606143705.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100 + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143706.css b/.history/style/index_20230606143706.css new file mode 100644 index 000000000..93b5e45e9 --- /dev/null +++ b/.history/style/index_20230606143706.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143721.css b/.history/style/index_20230606143721.css new file mode 100644 index 000000000..c72e787e4 --- /dev/null +++ b/.history/style/index_20230606143721.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin 2 + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143722.css b/.history/style/index_20230606143722.css new file mode 100644 index 000000000..45a2d1293 --- /dev/null +++ b/.history/style/index_20230606143722.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin 2% + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143724.css b/.history/style/index_20230606143724.css new file mode 100644 index 000000000..45a2d1293 --- /dev/null +++ b/.history/style/index_20230606143724.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin 2% + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143727.css b/.history/style/index_20230606143727.css new file mode 100644 index 000000000..3f5c0ef33 --- /dev/null +++ b/.history/style/index_20230606143727.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin 2%; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143738.css b/.history/style/index_20230606143738.css new file mode 100644 index 000000000..93b5e45e9 --- /dev/null +++ b/.history/style/index_20230606143738.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143740.css b/.history/style/index_20230606143740.css new file mode 100644 index 000000000..a24da3132 --- /dev/null +++ b/.history/style/index_20230606143740.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 2%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143751.css b/.history/style/index_20230606143751.css new file mode 100644 index 000000000..243f3a187 --- /dev/null +++ b/.history/style/index_20230606143751.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 2% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143841.css b/.history/style/index_20230606143841.css new file mode 100644 index 000000000..740af78c5 --- /dev/null +++ b/.history/style/index_20230606143841.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 29% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143847.css b/.history/style/index_20230606143847.css new file mode 100644 index 000000000..243f3a187 --- /dev/null +++ b/.history/style/index_20230606143847.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 2% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143939.css b/.history/style/index_20230606143939.css new file mode 100644 index 000000000..0ea53425a --- /dev/null +++ b/.history/style/index_20230606143939.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 1% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143940.css b/.history/style/index_20230606143940.css new file mode 100644 index 000000000..93b5e45e9 --- /dev/null +++ b/.history/style/index_20230606143940.css @@ -0,0 +1,172 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143941.css b/.history/style/index_20230606143941.css new file mode 100644 index 000000000..0ea53425a --- /dev/null +++ b/.history/style/index_20230606143941.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 1% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143945.css b/.history/style/index_20230606143945.css new file mode 100644 index 000000000..243f3a187 --- /dev/null +++ b/.history/style/index_20230606143945.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin 2% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606143948.css b/.history/style/index_20230606143948.css new file mode 100644 index 000000000..81fb9dbab --- /dev/null +++ b/.history/style/index_20230606143948.css @@ -0,0 +1,173 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index fb8c7054b..81fb9dbab 100644 --- a/style/index.css +++ b/style/index.css @@ -163,9 +163,11 @@ button:hover { display: flex; flex-direction: column; align-items: center; + width: 100%; } .links button { width: 40%; + margin: 2% 0; } } \ No newline at end of file From b6ab022b3ac43270f56fdee76dcc97cde1a668f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Wed, 7 Jun 2023 00:06:28 +0300 Subject: [PATCH 23/40] Fixed Spacing for mobile view. --- .history/index_20230606220453.html | 92 ++++++++++++ .history/index_20230606220455.html | 92 ++++++++++++ .history/index_20230606220531.html | 92 ++++++++++++ .history/index_20230606220533.html | 92 ++++++++++++ .history/index_20230606220540.html | 92 ++++++++++++ .history/index_20230606220543.html | 92 ++++++++++++ .history/index_20230606220546.html | 92 ++++++++++++ .history/index_20230606220602.html | 92 ++++++++++++ .history/index_20230606220604.html | 92 ++++++++++++ .history/index_20230606220606.html | 92 ++++++++++++ .history/index_20230606222043.html | 92 ++++++++++++ .history/index_20230606222045.html | 92 ++++++++++++ .history/index_20230606222046.html | 92 ++++++++++++ .history/index_20230606222449.html | 91 ++++++++++++ .history/index_20230606222451.html | 90 ++++++++++++ .history/index_20230606222509.html | 90 ++++++++++++ .history/index_20230606222510.html | 90 ++++++++++++ .history/index_20230606222520.html | 89 ++++++++++++ .history/index_20230606222521.html | 89 ++++++++++++ .history/index_20230606222533.html | 90 ++++++++++++ .history/index_20230606222538.html | 90 ++++++++++++ .history/index_20230606222539.html | 90 ++++++++++++ .history/index_20230606222545.html | 90 ++++++++++++ .history/index_20230606222546.html | 90 ++++++++++++ .history/index_20230606222804.html | 91 ++++++++++++ .history/index_20230606222806.html | 90 ++++++++++++ .history/index_20230606222811.html | 90 ++++++++++++ .history/index_20230606222813.html | 90 ++++++++++++ .history/index_20230606222815.html | 90 ++++++++++++ .history/index_20230606222837.html | 90 ++++++++++++ .history/index_20230606222840.html | 90 ++++++++++++ .history/index_20230606223245.html | 90 ++++++++++++ .history/index_20230606223248.html | 90 ++++++++++++ .history/index_20230606223249.html | 90 ++++++++++++ .history/style/index_20230606144235.css | 174 ++++++++++++++++++++++ .history/style/index_20230606144238.css | 174 ++++++++++++++++++++++ .history/style/index_20230606144241.css | 176 ++++++++++++++++++++++ .history/style/index_20230606144418.css | 176 ++++++++++++++++++++++ .history/style/index_20230606144420.css | 176 ++++++++++++++++++++++ .history/style/index_20230606144424.css | 176 ++++++++++++++++++++++ .history/style/index_20230606144427.css | 176 ++++++++++++++++++++++ .history/style/index_20230606144430.css | 177 ++++++++++++++++++++++ .history/style/index_20230606144441.css | 177 ++++++++++++++++++++++ .history/style/index_20230606144443.css | 177 ++++++++++++++++++++++ .history/style/index_20230606144444.css | 177 ++++++++++++++++++++++ .history/style/index_20230606144451.css | 177 ++++++++++++++++++++++ .history/style/index_20230606144803.css | 175 ++++++++++++++++++++++ .history/style/index_20230606144812.css | 179 +++++++++++++++++++++++ .history/style/index_20230606220422.css | 179 +++++++++++++++++++++++ .history/style/index_20230606220423.css | 179 +++++++++++++++++++++++ .history/style/index_20230606220430.css | 179 +++++++++++++++++++++++ .history/style/index_20230606220435.css | 179 +++++++++++++++++++++++ .history/style/index_20230606220651.css | 177 ++++++++++++++++++++++ .history/style/index_20230606222616.css | 177 ++++++++++++++++++++++ .history/style/index_20230606222629.css | 177 ++++++++++++++++++++++ .history/style/index_20230606222636.css | 177 ++++++++++++++++++++++ .history/style/index_20230606222642.css | 178 +++++++++++++++++++++++ .history/style/index_20230606222650.css | 178 +++++++++++++++++++++++ .history/style/index_20230606222655.css | 178 +++++++++++++++++++++++ .history/style/index_20230606222656.css | 178 +++++++++++++++++++++++ .history/style/index_20230606222659.css | 178 +++++++++++++++++++++++ .history/style/index_20230606222702.css | 179 +++++++++++++++++++++++ .history/style/index_20230606222704.css | 184 +++++++++++++++++++++++ .history/style/index_20230606222715.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222717.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222719.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222722.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222725.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222745.css | 180 +++++++++++++++++++++++ .history/style/index_20230606222936.css | 181 +++++++++++++++++++++++ .history/style/index_20230606222939.css | 181 +++++++++++++++++++++++ .history/style/index_20230606223027.css | 182 +++++++++++++++++++++++ .history/style/index_20230606223032.css | 184 +++++++++++++++++++++++ .history/style/index_20230606223037.css | 184 +++++++++++++++++++++++ .history/style/index_20230606223039.css | 184 +++++++++++++++++++++++ .history/style/index_20230606223042.css | 184 +++++++++++++++++++++++ .history/style/index_20230606223044.css | 185 +++++++++++++++++++++++ .history/style/index_20230606223205.css | 186 ++++++++++++++++++++++++ .history/style/index_20230606223207.css | 185 +++++++++++++++++++++++ .history/style/index_20230606223208.css | 186 ++++++++++++++++++++++++ .history/style/index_20230606223225.css | 186 ++++++++++++++++++++++++ index.html | 10 +- style/index.css | 25 +++- 83 files changed, 11541 insertions(+), 12 deletions(-) create mode 100644 .history/index_20230606220453.html create mode 100644 .history/index_20230606220455.html create mode 100644 .history/index_20230606220531.html create mode 100644 .history/index_20230606220533.html create mode 100644 .history/index_20230606220540.html create mode 100644 .history/index_20230606220543.html create mode 100644 .history/index_20230606220546.html create mode 100644 .history/index_20230606220602.html create mode 100644 .history/index_20230606220604.html create mode 100644 .history/index_20230606220606.html create mode 100644 .history/index_20230606222043.html create mode 100644 .history/index_20230606222045.html create mode 100644 .history/index_20230606222046.html create mode 100644 .history/index_20230606222449.html create mode 100644 .history/index_20230606222451.html create mode 100644 .history/index_20230606222509.html create mode 100644 .history/index_20230606222510.html create mode 100644 .history/index_20230606222520.html create mode 100644 .history/index_20230606222521.html create mode 100644 .history/index_20230606222533.html create mode 100644 .history/index_20230606222538.html create mode 100644 .history/index_20230606222539.html create mode 100644 .history/index_20230606222545.html create mode 100644 .history/index_20230606222546.html create mode 100644 .history/index_20230606222804.html create mode 100644 .history/index_20230606222806.html create mode 100644 .history/index_20230606222811.html create mode 100644 .history/index_20230606222813.html create mode 100644 .history/index_20230606222815.html create mode 100644 .history/index_20230606222837.html create mode 100644 .history/index_20230606222840.html create mode 100644 .history/index_20230606223245.html create mode 100644 .history/index_20230606223248.html create mode 100644 .history/index_20230606223249.html create mode 100644 .history/style/index_20230606144235.css create mode 100644 .history/style/index_20230606144238.css create mode 100644 .history/style/index_20230606144241.css create mode 100644 .history/style/index_20230606144418.css create mode 100644 .history/style/index_20230606144420.css create mode 100644 .history/style/index_20230606144424.css create mode 100644 .history/style/index_20230606144427.css create mode 100644 .history/style/index_20230606144430.css create mode 100644 .history/style/index_20230606144441.css create mode 100644 .history/style/index_20230606144443.css create mode 100644 .history/style/index_20230606144444.css create mode 100644 .history/style/index_20230606144451.css create mode 100644 .history/style/index_20230606144803.css create mode 100644 .history/style/index_20230606144812.css create mode 100644 .history/style/index_20230606220422.css create mode 100644 .history/style/index_20230606220423.css create mode 100644 .history/style/index_20230606220430.css create mode 100644 .history/style/index_20230606220435.css create mode 100644 .history/style/index_20230606220651.css create mode 100644 .history/style/index_20230606222616.css create mode 100644 .history/style/index_20230606222629.css create mode 100644 .history/style/index_20230606222636.css create mode 100644 .history/style/index_20230606222642.css create mode 100644 .history/style/index_20230606222650.css create mode 100644 .history/style/index_20230606222655.css create mode 100644 .history/style/index_20230606222656.css create mode 100644 .history/style/index_20230606222659.css create mode 100644 .history/style/index_20230606222702.css create mode 100644 .history/style/index_20230606222704.css create mode 100644 .history/style/index_20230606222715.css create mode 100644 .history/style/index_20230606222717.css create mode 100644 .history/style/index_20230606222719.css create mode 100644 .history/style/index_20230606222722.css create mode 100644 .history/style/index_20230606222725.css create mode 100644 .history/style/index_20230606222745.css create mode 100644 .history/style/index_20230606222936.css create mode 100644 .history/style/index_20230606222939.css create mode 100644 .history/style/index_20230606223027.css create mode 100644 .history/style/index_20230606223032.css create mode 100644 .history/style/index_20230606223037.css create mode 100644 .history/style/index_20230606223039.css create mode 100644 .history/style/index_20230606223042.css create mode 100644 .history/style/index_20230606223044.css create mode 100644 .history/style/index_20230606223205.css create mode 100644 .history/style/index_20230606223207.css create mode 100644 .history/style/index_20230606223208.css create mode 100644 .history/style/index_20230606223225.css diff --git a/.history/index_20230606220453.html b/.history/index_20230606220453.html new file mode 100644 index 000000000..15661933f --- /dev/null +++ b/.history/index_20230606220453.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ My Portfolio +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220455.html b/.history/index_20230606220455.html new file mode 100644 index 000000000..63245ed9a --- /dev/null +++ b/.history/index_20230606220455.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ My Portfolio +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220531.html b/.history/index_20230606220531.html new file mode 100644 index 000000000..480079fe8 --- /dev/null +++ b/.history/index_20230606220531.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ >My Portfolio +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220533.html b/.history/index_20230606220533.html new file mode 100644 index 000000000..bccd97bdb --- /dev/null +++ b/.history/index_20230606220533.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ >My Portfolio +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220540.html b/.history/index_20230606220540.html new file mode 100644 index 000000000..336dad3b9 --- /dev/null +++ b/.history/index_20230606220540.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ My Portfolio +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220543.html b/.history/index_20230606220543.html new file mode 100644 index 000000000..91beb0675 --- /dev/null +++ b/.history/index_20230606220543.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220546.html b/.history/index_20230606220546.html new file mode 100644 index 000000000..352332ee0 --- /dev/null +++ b/.history/index_20230606220546.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ < href="projects.html">
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220602.html b/.history/index_20230606220602.html new file mode 100644 index 000000000..e9f8046f9 --- /dev/null +++ b/.history/index_20230606220602.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ < href="projects.html">
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220604.html b/.history/index_20230606220604.html new file mode 100644 index 000000000..899b344d0 --- /dev/null +++ b/.history/index_20230606220604.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ < href="projects.html">> +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606220606.html b/.history/index_20230606220606.html new file mode 100644 index 000000000..899b344d0 --- /dev/null +++ b/.history/index_20230606220606.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ < href="projects.html">> +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222043.html b/.history/index_20230606222043.html new file mode 100644 index 000000000..c86c9ac97 --- /dev/null +++ b/.history/index_20230606222043.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ href="projects.html">> +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222045.html b/.history/index_20230606222045.html new file mode 100644 index 000000000..899b344d0 --- /dev/null +++ b/.history/index_20230606222045.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ < href="projects.html">> +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222046.html b/.history/index_20230606222046.html new file mode 100644 index 000000000..df34f4795 --- /dev/null +++ b/.history/index_20230606222046.html @@ -0,0 +1,92 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+

SEAN KIPINÄ

+ > +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222449.html b/.history/index_20230606222449.html new file mode 100644 index 000000000..4741bc495 --- /dev/null +++ b/.history/index_20230606222449.html @@ -0,0 +1,91 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+ +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222451.html b/.history/index_20230606222451.html new file mode 100644 index 000000000..c38449e6e --- /dev/null +++ b/.history/index_20230606222451.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222509.html b/.history/index_20230606222509.html new file mode 100644 index 000000000..e9d3a826c --- /dev/null +++ b/.history/index_20230606222509.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
SEAN KIPINÄ + > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222510.html b/.history/index_20230606222510.html new file mode 100644 index 000000000..fb9d0625f --- /dev/null +++ b/.history/index_20230606222510.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > + +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222520.html b/.history/index_20230606222520.html new file mode 100644 index 000000000..ee543a612 --- /dev/null +++ b/.history/index_20230606222520.html @@ -0,0 +1,89 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
SEAN KIPINÄ + > + +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222521.html b/.history/index_20230606222521.html new file mode 100644 index 000000000..77b9ca0dd --- /dev/null +++ b/.history/index_20230606222521.html @@ -0,0 +1,89 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ > + +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222533.html b/.history/index_20230606222533.html new file mode 100644 index 000000000..9c1c0d66a --- /dev/null +++ b/.history/index_20230606222533.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ > + +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222538.html b/.history/index_20230606222538.html new file mode 100644 index 000000000..786e1cfa6 --- /dev/null +++ b/.history/index_20230606222538.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
SEAN KIPINÄ + > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222539.html b/.history/index_20230606222539.html new file mode 100644 index 000000000..7d88c9d7c --- /dev/null +++ b/.history/index_20230606222539.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > + +
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222545.html b/.history/index_20230606222545.html new file mode 100644 index 000000000..72274f350 --- /dev/null +++ b/.history/index_20230606222545.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222546.html b/.history/index_20230606222546.html new file mode 100644 index 000000000..6c4271a5a --- /dev/null +++ b/.history/index_20230606222546.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222804.html b/.history/index_20230606222804.html new file mode 100644 index 000000000..77c439825 --- /dev/null +++ b/.history/index_20230606222804.html @@ -0,0 +1,91 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222806.html b/.history/index_20230606222806.html new file mode 100644 index 000000000..6c4271a5a --- /dev/null +++ b/.history/index_20230606222806.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222811.html b/.history/index_20230606222811.html new file mode 100644 index 000000000..58229f2df --- /dev/null +++ b/.history/index_20230606222811.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

< + > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222813.html b/.history/index_20230606222813.html new file mode 100644 index 000000000..3aecd567c --- /dev/null +++ b/.history/index_20230606222813.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


> +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222815.html b/.history/index_20230606222815.html new file mode 100644 index 000000000..75bf01c0b --- /dev/null +++ b/.history/index_20230606222815.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222837.html b/.history/index_20230606222837.html new file mode 100644 index 000000000..a9028f20a --- /dev/null +++ b/.history/index_20230606222837.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606222840.html b/.history/index_20230606222840.html new file mode 100644 index 000000000..75bf01c0b --- /dev/null +++ b/.history/index_20230606222840.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ > +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606223245.html b/.history/index_20230606223245.html new file mode 100644 index 000000000..bb84f946a --- /dev/null +++ b/.history/index_20230606223245.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ >/a> +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606223248.html b/.history/index_20230606223248.html new file mode 100644 index 000000000..918eb56b3 --- /dev/null +++ b/.history/index_20230606223248.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ /a> +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230606223249.html b/.history/index_20230606223249.html new file mode 100644 index 000000000..69589af75 --- /dev/null +++ b/.history/index_20230606223249.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/style/index_20230606144235.css b/.history/style/index_20230606144235.css new file mode 100644 index 000000000..8c7487cb0 --- /dev/null +++ b/.history/style/index_20230606144235.css @@ -0,0 +1,174 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + uppersection +} \ No newline at end of file diff --git a/.history/style/index_20230606144238.css b/.history/style/index_20230606144238.css new file mode 100644 index 000000000..f7190902c --- /dev/null +++ b/.history/style/index_20230606144238.css @@ -0,0 +1,174 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection +} \ No newline at end of file diff --git a/.history/style/index_20230606144241.css b/.history/style/index_20230606144241.css new file mode 100644 index 000000000..ed89e9a82 --- /dev/null +++ b/.history/style/index_20230606144241.css @@ -0,0 +1,176 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144418.css b/.history/style/index_20230606144418.css new file mode 100644 index 000000000..09908b0d0 --- /dev/null +++ b/.history/style/index_20230606144418.css @@ -0,0 +1,176 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: ; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144420.css b/.history/style/index_20230606144420.css new file mode 100644 index 000000000..0a0d46423 --- /dev/null +++ b/.history/style/index_20230606144420.css @@ -0,0 +1,176 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: ; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144424.css b/.history/style/index_20230606144424.css new file mode 100644 index 000000000..82dab0d5e --- /dev/null +++ b/.history/style/index_20230606144424.css @@ -0,0 +1,176 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144427.css b/.history/style/index_20230606144427.css new file mode 100644 index 000000000..9c29fb82b --- /dev/null +++ b/.history/style/index_20230606144427.css @@ -0,0 +1,176 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%:; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144430.css b/.history/style/index_20230606144430.css new file mode 100644 index 000000000..403fbd310 --- /dev/null +++ b/.history/style/index_20230606144430.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + ; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144441.css b/.history/style/index_20230606144441.css new file mode 100644 index 000000000..4baf66015 --- /dev/null +++ b/.history/style/index_20230606144441.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + margin + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144443.css b/.history/style/index_20230606144443.css new file mode 100644 index 000000000..40466f55e --- /dev/null +++ b/.history/style/index_20230606144443.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + margin: + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144444.css b/.history/style/index_20230606144444.css new file mode 100644 index 000000000..40cb7fa35 --- /dev/null +++ b/.history/style/index_20230606144444.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + margin:auto auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144451.css b/.history/style/index_20230606144451.css new file mode 100644 index 000000000..750c05ecd --- /dev/null +++ b/.history/style/index_20230606144451.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + margin:0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144803.css b/.history/style/index_20230606144803.css new file mode 100644 index 000000000..7c2625ad3 --- /dev/null +++ b/.history/style/index_20230606144803.css @@ -0,0 +1,175 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + padding: 20px; +} + +.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + .uppersection{ + width: 80%; + margin:0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606144812.css b/.history/style/index_20230606144812.css new file mode 100644 index 000000000..361c81a50 --- /dev/null +++ b/.history/style/index_20230606144812.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606220422.css b/.history/style/index_20230606220422.css new file mode 100644 index 000000000..b59c5b888 --- /dev/null +++ b/.history/style/index_20230606220422.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +/.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606220423.css b/.history/style/index_20230606220423.css new file mode 100644 index 000000000..d922d1c33 --- /dev/null +++ b/.history/style/index_20230606220423.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606220430.css b/.history/style/index_20230606220430.css new file mode 100644 index 000000000..e2388d918 --- /dev/null +++ b/.history/style/index_20230606220430.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +}*/ + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606220435.css b/.history/style/index_20230606220435.css new file mode 100644 index 000000000..d922d1c33 --- /dev/null +++ b/.history/style/index_20230606220435.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606220651.css b/.history/style/index_20230606220651.css new file mode 100644 index 000000000..80180cd34 --- /dev/null +++ b/.history/style/index_20230606220651.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + padding: 20px; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222616.css b/.history/style/index_20230606222616.css new file mode 100644 index 000000000..06c9da7e0 --- /dev/null +++ b/.history/style/index_20230606222616.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222629.css b/.history/style/index_20230606222629.css new file mode 100644 index 000000000..d9d15555f --- /dev/null +++ b/.history/style/index_20230606222629.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; +display: ; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222636.css b/.history/style/index_20230606222636.css new file mode 100644 index 000000000..3d3146252 --- /dev/null +++ b/.history/style/index_20230606222636.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; +display: fled; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222642.css b/.history/style/index_20230606222642.css new file mode 100644 index 000000000..5f7cd4603 --- /dev/null +++ b/.history/style/index_20230606222642.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; +display: flex; + +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222650.css b/.history/style/index_20230606222650.css new file mode 100644 index 000000000..96d692d7b --- /dev/null +++ b/.history/style/index_20230606222650.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222655.css b/.history/style/index_20230606222655.css new file mode 100644 index 000000000..87ddc7124 --- /dev/null +++ b/.history/style/index_20230606222655.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +just +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222656.css b/.history/style/index_20230606222656.css new file mode 100644 index 000000000..024c4fc0f --- /dev/null +++ b/.history/style/index_20230606222656.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: ; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222659.css b/.history/style/index_20230606222659.css new file mode 100644 index 000000000..9f19bfc87 --- /dev/null +++ b/.history/style/index_20230606222659.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222702.css b/.history/style/index_20230606222702.css new file mode 100644 index 000000000..05c6f3595 --- /dev/null +++ b/.history/style/index_20230606222702.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +align-items +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222704.css b/.history/style/index_20230606222704.css new file mode 100644 index 000000000..06b1049de --- /dev/null +++ b/.history/style/index_20230606222704.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +align-items: center; + height: 400px; + width: 100%; + margin: 0 auto; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222715.css b/.history/style/index_20230606222715.css new file mode 100644 index 000000000..08cb40cac --- /dev/null +++ b/.history/style/index_20230606222715.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +align-items: center; +height +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222717.css b/.history/style/index_20230606222717.css new file mode 100644 index 000000000..b61f1aff7 --- /dev/null +++ b/.history/style/index_20230606222717.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +align-items: center; +height: +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222719.css b/.history/style/index_20230606222719.css new file mode 100644 index 000000000..81348a5f3 --- /dev/null +++ b/.history/style/index_20230606222719.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; +justify-content: center; +align-items: center; +height: 50bh +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222722.css b/.history/style/index_20230606222722.css new file mode 100644 index 000000000..5d7fec8ed --- /dev/null +++ b/.history/style/index_20230606222722.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50bh; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222725.css b/.history/style/index_20230606222725.css new file mode 100644 index 000000000..68a38a35a --- /dev/null +++ b/.history/style/index_20230606222725.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222745.css b/.history/style/index_20230606222745.css new file mode 100644 index 000000000..68a38a35a --- /dev/null +++ b/.history/style/index_20230606222745.css @@ -0,0 +1,180 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222936.css b/.history/style/index_20230606222936.css new file mode 100644 index 000000000..3da644b36 --- /dev/null +++ b/.history/style/index_20230606222936.css @@ -0,0 +1,181 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606222939.css b/.history/style/index_20230606222939.css new file mode 100644 index 000000000..8776266ac --- /dev/null +++ b/.history/style/index_20230606222939.css @@ -0,0 +1,181 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223027.css b/.history/style/index_20230606223027.css new file mode 100644 index 000000000..6b2d693d7 --- /dev/null +++ b/.history/style/index_20230606223027.css @@ -0,0 +1,182 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +section + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223032.css b/.history/style/index_20230606223032.css new file mode 100644 index 000000000..6cf8e6ceb --- /dev/null +++ b/.history/style/index_20230606223032.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +section{ + padding +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223037.css b/.history/style/index_20230606223037.css new file mode 100644 index 000000000..6a1c913c7 --- /dev/null +++ b/.history/style/index_20230606223037.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +section{ + padding: +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223039.css b/.history/style/index_20230606223039.css new file mode 100644 index 000000000..6a1c913c7 --- /dev/null +++ b/.history/style/index_20230606223039.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +section{ + padding: +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223042.css b/.history/style/index_20230606223042.css new file mode 100644 index 000000000..bff354ce6 --- /dev/null +++ b/.history/style/index_20230606223042.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +section{ + padding: 4% 0 +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223044.css b/.history/style/index_20230606223044.css new file mode 100644 index 000000000..0a6d7444b --- /dev/null +++ b/.history/style/index_20230606223044.css @@ -0,0 +1,185 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223205.css b/.history/style/index_20230606223205.css new file mode 100644 index 000000000..109b2a486 --- /dev/null +++ b/.history/style/index_20230606223205.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223207.css b/.history/style/index_20230606223207.css new file mode 100644 index 000000000..9f3d0e6f5 --- /dev/null +++ b/.history/style/index_20230606223207.css @@ -0,0 +1,185 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header,section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223208.css b/.history/style/index_20230606223208.css new file mode 100644 index 000000000..109b2a486 --- /dev/null +++ b/.history/style/index_20230606223208.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230606223225.css b/.history/style/index_20230606223225.css new file mode 100644 index 000000000..557f267b9 --- /dev/null +++ b/.history/style/index_20230606223225.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 00c8f0261..69589af75 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,10 @@

SEAN KIPINÄ

- +
+

SEAN KIPINÄ


+ +
diff --git a/style/index.css b/style/index.css index 81fb9dbab..557f267b9 100644 --- a/style/index.css +++ b/style/index.css @@ -23,23 +23,31 @@ nav { /* Set a specific width for the buttons */ } -.uppersection { - display: flex; - justify-content: center; - padding: 20px; +header, +section { + padding: 4% 0; } -.img_button { +.uppersection { background-image: url("https://picsum.photos/700/400"); background-size: cover; background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + color: white; font-size: 1.5em; width: 700px; height: 400px; position: relative; /* Add position relative to establish a new stacking context */ -} + .button-content { position: absolute; @@ -170,4 +178,9 @@ button:hover { width: 40%; margin: 2% 0; } + + .uppersection { + width: 80%; + margin: 0 auto; + } } \ No newline at end of file From 79a2d3413b34d5948dc7a1a280a9ef8bac7cfc43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Wed, 7 Jun 2023 00:14:20 +0300 Subject: [PATCH 24/40] Adjusted spacing for portfolio project images --- .history/index_20230607000746.html | 90 +++++++++++ .history/index_20230607000823.html | 88 +++++++++++ .history/style/index_20230607000945.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001018.css | 185 ++++++++++++++++++++++ .history/style/index_20230607001022.css | 185 ++++++++++++++++++++++ .history/style/index_20230607001028.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001036.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001038.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001039.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001040.css | 186 +++++++++++++++++++++++ .history/style/index_20230607001119.css | 188 +++++++++++++++++++++++ .history/style/index_20230607001122.css | 188 +++++++++++++++++++++++ .history/style/index_20230607001125.css | 188 +++++++++++++++++++++++ .history/style/index_20230607001126.css | 188 +++++++++++++++++++++++ .history/style/index_20230607001129.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001131.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001133.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001135.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001139.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001140.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001144.css | 190 +++++++++++++++++++++++ .history/style/index_20230607001147.css | 194 ++++++++++++++++++++++++ .history/style/index_20230607001152.css | 191 +++++++++++++++++++++++ .history/style/index_20230607001156.css | 191 +++++++++++++++++++++++ .history/style/index_20230607001200.css | 191 +++++++++++++++++++++++ .history/style/index_20230607001204.css | 191 +++++++++++++++++++++++ index.html | 2 - style/index.css | 7 +- 28 files changed, 4710 insertions(+), 3 deletions(-) create mode 100644 .history/index_20230607000746.html create mode 100644 .history/index_20230607000823.html create mode 100644 .history/style/index_20230607000945.css create mode 100644 .history/style/index_20230607001018.css create mode 100644 .history/style/index_20230607001022.css create mode 100644 .history/style/index_20230607001028.css create mode 100644 .history/style/index_20230607001036.css create mode 100644 .history/style/index_20230607001038.css create mode 100644 .history/style/index_20230607001039.css create mode 100644 .history/style/index_20230607001040.css create mode 100644 .history/style/index_20230607001119.css create mode 100644 .history/style/index_20230607001122.css create mode 100644 .history/style/index_20230607001125.css create mode 100644 .history/style/index_20230607001126.css create mode 100644 .history/style/index_20230607001129.css create mode 100644 .history/style/index_20230607001131.css create mode 100644 .history/style/index_20230607001133.css create mode 100644 .history/style/index_20230607001135.css create mode 100644 .history/style/index_20230607001139.css create mode 100644 .history/style/index_20230607001140.css create mode 100644 .history/style/index_20230607001144.css create mode 100644 .history/style/index_20230607001147.css create mode 100644 .history/style/index_20230607001152.css create mode 100644 .history/style/index_20230607001156.css create mode 100644 .history/style/index_20230607001200.css create mode 100644 .history/style/index_20230607001204.css diff --git a/.history/index_20230607000746.html b/.history/index_20230607000746.html new file mode 100644 index 000000000..e02c7d812 --- /dev/null +++ b/.history/index_20230607000746.html @@ -0,0 +1,90 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607000823.html b/.history/index_20230607000823.html new file mode 100644 index 000000000..95eb292cb --- /dev/null +++ b/.history/index_20230607000823.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/style/index_20230607000945.css b/.history/style/index_20230607000945.css new file mode 100644 index 000000000..557f267b9 --- /dev/null +++ b/.history/style/index_20230607000945.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001018.css b/.history/style/index_20230607001018.css new file mode 100644 index 000000000..fa5519555 --- /dev/null +++ b/.history/style/index_20230607001018.css @@ -0,0 +1,185 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001022.css b/.history/style/index_20230607001022.css new file mode 100644 index 000000000..3f29aeac0 --- /dev/null +++ b/.history/style/index_20230607001022.css @@ -0,0 +1,185 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001028.css b/.history/style/index_20230607001028.css new file mode 100644 index 000000000..8de80b911 --- /dev/null +++ b/.history/style/index_20230607001028.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001036.css b/.history/style/index_20230607001036.css new file mode 100644 index 000000000..9b8b8252d --- /dev/null +++ b/.history/style/index_20230607001036.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001038.css b/.history/style/index_20230607001038.css new file mode 100644 index 000000000..77cc196d4 --- /dev/null +++ b/.history/style/index_20230607001038.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001039.css b/.history/style/index_20230607001039.css new file mode 100644 index 000000000..5c6f0695c --- /dev/null +++ b/.history/style/index_20230607001039.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001040.css b/.history/style/index_20230607001040.css new file mode 100644 index 000000000..5c6f0695c --- /dev/null +++ b/.history/style/index_20230607001040.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001119.css b/.history/style/index_20230607001119.css new file mode 100644 index 000000000..7b69bd257 --- /dev/null +++ b/.history/style/index_20230607001119.css @@ -0,0 +1,188 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + + + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001122.css b/.history/style/index_20230607001122.css new file mode 100644 index 000000000..883c9b832 --- /dev/null +++ b/.history/style/index_20230607001122.css @@ -0,0 +1,188 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001125.css b/.history/style/index_20230607001125.css new file mode 100644 index 000000000..6cbcdc921 --- /dev/null +++ b/.history/style/index_20230607001125.css @@ -0,0 +1,188 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001126.css b/.history/style/index_20230607001126.css new file mode 100644 index 000000000..6cbcdc921 --- /dev/null +++ b/.history/style/index_20230607001126.css @@ -0,0 +1,188 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001129.css b/.history/style/index_20230607001129.css new file mode 100644 index 000000000..059434b8b --- /dev/null +++ b/.history/style/index_20230607001129.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001131.css b/.history/style/index_20230607001131.css new file mode 100644 index 000000000..2393e490f --- /dev/null +++ b/.history/style/index_20230607001131.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001133.css b/.history/style/index_20230607001133.css new file mode 100644 index 000000000..a65923309 --- /dev/null +++ b/.history/style/index_20230607001133.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001135.css b/.history/style/index_20230607001135.css new file mode 100644 index 000000000..7aef3d73a --- /dev/null +++ b/.history/style/index_20230607001135.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001139.css b/.history/style/index_20230607001139.css new file mode 100644 index 000000000..a51dbd2ef --- /dev/null +++ b/.history/style/index_20230607001139.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30 +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001140.css b/.history/style/index_20230607001140.css new file mode 100644 index 000000000..ab6346bb8 --- /dev/null +++ b/.history/style/index_20230607001140.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30% +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001144.css b/.history/style/index_20230607001144.css new file mode 100644 index 000000000..ab6346bb8 --- /dev/null +++ b/.history/style/index_20230607001144.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30% +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001147.css b/.history/style/index_20230607001147.css new file mode 100644 index 000000000..e089b85fd --- /dev/null +++ b/.history/style/index_20230607001147.css @@ -0,0 +1,194 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30%; + margin: 1%; + padding: 1%; + border: 1px solid black; + text-align: cente +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001152.css b/.history/style/index_20230607001152.css new file mode 100644 index 000000000..33616a6d8 --- /dev/null +++ b/.history/style/index_20230607001152.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30%; + mar +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001156.css b/.history/style/index_20230607001156.css new file mode 100644 index 000000000..2356c605e --- /dev/null +++ b/.history/style/index_20230607001156.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div{ + width: 30%; + margin: 1%; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001200.css b/.history/style/index_20230607001200.css new file mode 100644 index 000000000..60b239837 --- /dev/null +++ b/.history/style/index_20230607001200.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607001204.css b/.history/style/index_20230607001204.css new file mode 100644 index 000000000..7b59e686c --- /dev/null +++ b/.history/style/index_20230607001204.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 69589af75..95eb292cb 100644 --- a/index.html +++ b/index.html @@ -48,8 +48,6 @@

SEAN KIPINÄ


Portfolio Project 3

- -
Portfolio Project 4 diff --git a/style/index.css b/style/index.css index 557f267b9..7b59e686c 100644 --- a/style/index.css +++ b/style/index.css @@ -130,8 +130,13 @@ footer { .row { display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-evenly; - padding: 25px; +} + +.row div { + width: 30%; + margin: 2% 0 ; } .element_pics { From 316a3ca4db7aa3a30451e8e80b220803d8e73920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Wed, 7 Jun 2023 23:34:07 +0300 Subject: [PATCH 25/40] Cleaned up dupicate css code --- .history/index_20230607232327.html | 88 ++++++++++ .history/index_20230607232329.html | 88 ++++++++++ .history/index_20230607232331.html | 88 ++++++++++ .history/index_20230607232332.html | 88 ++++++++++ .history/index_20230607232333.html | 88 ++++++++++ .history/index_20230607232338.html | 88 ++++++++++ .history/index_20230607232345.html | 88 ++++++++++ .history/index_20230607232503.html | 88 ++++++++++ .history/index_20230607232504.html | 88 ++++++++++ .history/style/index_20230607133303.css | 191 +++++++++++++++++++++ .history/style/index_20230607133304.css | 191 +++++++++++++++++++++ .history/style/index_20230607133305.css | 191 +++++++++++++++++++++ .history/style/index_20230607133307.css | 194 ++++++++++++++++++++++ .history/style/index_20230607133316.css | 194 ++++++++++++++++++++++ .history/style/index_20230607133317.css | 194 ++++++++++++++++++++++ .history/style/index_20230607133328.css | 194 ++++++++++++++++++++++ .history/style/index_20230607133333.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134008.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134009.css | 192 +++++++++++++++++++++ .history/style/index_20230607134011.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134014.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134025.css | 192 +++++++++++++++++++++ .history/style/index_20230607134026.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134140.css | 195 ++++++++++++++++++++++ .history/style/index_20230607134325.css | 196 ++++++++++++++++++++++ .history/style/index_20230607134328.css | 196 ++++++++++++++++++++++ .history/style/index_20230607134332.css | 198 ++++++++++++++++++++++ .history/style/index_20230607134336.css | 201 ++++++++++++++++++++++ .history/style/index_20230607134342.css | 201 ++++++++++++++++++++++ .history/style/index_20230607134414.css | 202 +++++++++++++++++++++++ .history/style/index_20230607134415.css | 202 +++++++++++++++++++++++ .history/style/index_20230607134420.css | 204 +++++++++++++++++++++++ .history/style/index_20230607134423.css | 204 +++++++++++++++++++++++ .history/style/index_20230607134425.css | 204 +++++++++++++++++++++++ .history/style/index_20230607134432.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134454.css | 195 ++++++++++++++++++++++ .history/style/index_20230607134457.css | 193 ++++++++++++++++++++++ .history/style/index_20230607134502.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134518.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134519.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134543.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134551.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134552.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134824.css | 205 +++++++++++++++++++++++ .history/style/index_20230607134827.css | 207 +++++++++++++++++++++++ .history/style/index_20230607134829.css | 207 +++++++++++++++++++++++ .history/style/index_20230607134831.css | 207 +++++++++++++++++++++++ .history/style/index_20230607134832.css | 207 +++++++++++++++++++++++ .history/style/index_20230607134833.css | 208 +++++++++++++++++++++++ .history/style/index_20230607134838.css | 208 +++++++++++++++++++++++ .history/style/index_20230607134842.css | 208 +++++++++++++++++++++++ .history/style/index_20230607134846.css | 208 +++++++++++++++++++++++ .history/style/index_20230607134903.css | 210 +++++++++++++++++++++++ .history/style/index_20230607134939.css | 199 ++++++++++++++++++++++ .history/style/index_20230607134949.css | 211 ++++++++++++++++++++++++ .history/style/index_20230607135009.css | 200 ++++++++++++++++++++++ .history/style/index_20230607135455.css | 199 ++++++++++++++++++++++ .history/style/index_20230607232109.css | 199 ++++++++++++++++++++++ .history/style/index_20230607232130.css | 201 ++++++++++++++++++++++ .history/style/index_20230607232135.css | 201 ++++++++++++++++++++++ .history/style/index_20230607232136.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232139.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232141.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232143.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232144.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232146.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232147.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232157.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232200.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232202.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232204.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232205.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232206.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232530.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232906.css | 203 +++++++++++++++++++++++ .history/style/index_20230607232908.css | 205 +++++++++++++++++++++++ .history/style/index_20230607232913.css | 205 +++++++++++++++++++++++ .history/style/index_20230607232924.css | 205 +++++++++++++++++++++++ .history/style/index_20230607232925.css | 205 +++++++++++++++++++++++ .history/style/index_20230607232927.css | 206 +++++++++++++++++++++++ .history/style/index_20230607232933.css | 206 +++++++++++++++++++++++ .history/style/index_20230607232936.css | 206 +++++++++++++++++++++++ .history/style/index_20230607232938.css | 206 +++++++++++++++++++++++ .history/style/index_20230607232941.css | 206 +++++++++++++++++++++++ .history/style/index_20230607232945.css | 207 +++++++++++++++++++++++ .history/style/index_20230607232950.css | 208 +++++++++++++++++++++++ .history/style/index_20230607233036.css | 208 +++++++++++++++++++++++ .history/style/index_20230607233309.css | 186 +++++++++++++++++++++ .history/style/index_20230607233316.css | 186 +++++++++++++++++++++ index.html | 2 +- style/index.css | 81 +++++---- 91 files changed, 16930 insertions(+), 44 deletions(-) create mode 100644 .history/index_20230607232327.html create mode 100644 .history/index_20230607232329.html create mode 100644 .history/index_20230607232331.html create mode 100644 .history/index_20230607232332.html create mode 100644 .history/index_20230607232333.html create mode 100644 .history/index_20230607232338.html create mode 100644 .history/index_20230607232345.html create mode 100644 .history/index_20230607232503.html create mode 100644 .history/index_20230607232504.html create mode 100644 .history/style/index_20230607133303.css create mode 100644 .history/style/index_20230607133304.css create mode 100644 .history/style/index_20230607133305.css create mode 100644 .history/style/index_20230607133307.css create mode 100644 .history/style/index_20230607133316.css create mode 100644 .history/style/index_20230607133317.css create mode 100644 .history/style/index_20230607133328.css create mode 100644 .history/style/index_20230607133333.css create mode 100644 .history/style/index_20230607134008.css create mode 100644 .history/style/index_20230607134009.css create mode 100644 .history/style/index_20230607134011.css create mode 100644 .history/style/index_20230607134014.css create mode 100644 .history/style/index_20230607134025.css create mode 100644 .history/style/index_20230607134026.css create mode 100644 .history/style/index_20230607134140.css create mode 100644 .history/style/index_20230607134325.css create mode 100644 .history/style/index_20230607134328.css create mode 100644 .history/style/index_20230607134332.css create mode 100644 .history/style/index_20230607134336.css create mode 100644 .history/style/index_20230607134342.css create mode 100644 .history/style/index_20230607134414.css create mode 100644 .history/style/index_20230607134415.css create mode 100644 .history/style/index_20230607134420.css create mode 100644 .history/style/index_20230607134423.css create mode 100644 .history/style/index_20230607134425.css create mode 100644 .history/style/index_20230607134432.css create mode 100644 .history/style/index_20230607134454.css create mode 100644 .history/style/index_20230607134457.css create mode 100644 .history/style/index_20230607134502.css create mode 100644 .history/style/index_20230607134518.css create mode 100644 .history/style/index_20230607134519.css create mode 100644 .history/style/index_20230607134543.css create mode 100644 .history/style/index_20230607134551.css create mode 100644 .history/style/index_20230607134552.css create mode 100644 .history/style/index_20230607134824.css create mode 100644 .history/style/index_20230607134827.css create mode 100644 .history/style/index_20230607134829.css create mode 100644 .history/style/index_20230607134831.css create mode 100644 .history/style/index_20230607134832.css create mode 100644 .history/style/index_20230607134833.css create mode 100644 .history/style/index_20230607134838.css create mode 100644 .history/style/index_20230607134842.css create mode 100644 .history/style/index_20230607134846.css create mode 100644 .history/style/index_20230607134903.css create mode 100644 .history/style/index_20230607134939.css create mode 100644 .history/style/index_20230607134949.css create mode 100644 .history/style/index_20230607135009.css create mode 100644 .history/style/index_20230607135455.css create mode 100644 .history/style/index_20230607232109.css create mode 100644 .history/style/index_20230607232130.css create mode 100644 .history/style/index_20230607232135.css create mode 100644 .history/style/index_20230607232136.css create mode 100644 .history/style/index_20230607232139.css create mode 100644 .history/style/index_20230607232141.css create mode 100644 .history/style/index_20230607232143.css create mode 100644 .history/style/index_20230607232144.css create mode 100644 .history/style/index_20230607232146.css create mode 100644 .history/style/index_20230607232147.css create mode 100644 .history/style/index_20230607232157.css create mode 100644 .history/style/index_20230607232200.css create mode 100644 .history/style/index_20230607232202.css create mode 100644 .history/style/index_20230607232204.css create mode 100644 .history/style/index_20230607232205.css create mode 100644 .history/style/index_20230607232206.css create mode 100644 .history/style/index_20230607232530.css create mode 100644 .history/style/index_20230607232906.css create mode 100644 .history/style/index_20230607232908.css create mode 100644 .history/style/index_20230607232913.css create mode 100644 .history/style/index_20230607232924.css create mode 100644 .history/style/index_20230607232925.css create mode 100644 .history/style/index_20230607232927.css create mode 100644 .history/style/index_20230607232933.css create mode 100644 .history/style/index_20230607232936.css create mode 100644 .history/style/index_20230607232938.css create mode 100644 .history/style/index_20230607232941.css create mode 100644 .history/style/index_20230607232945.css create mode 100644 .history/style/index_20230607232950.css create mode 100644 .history/style/index_20230607233036.css create mode 100644 .history/style/index_20230607233309.css create mode 100644 .history/style/index_20230607233316.css diff --git a/.history/index_20230607232327.html b/.history/index_20230607232327.html new file mode 100644 index 000000000..90237811b --- /dev/null +++ b/.history/index_20230607232327.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232329.html b/.history/index_20230607232329.html new file mode 100644 index 000000000..715edf162 --- /dev/null +++ b/.history/index_20230607232329.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232331.html b/.history/index_20230607232331.html new file mode 100644 index 000000000..8640a50ce --- /dev/null +++ b/.history/index_20230607232331.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232332.html b/.history/index_20230607232332.html new file mode 100644 index 000000000..125e5c84c --- /dev/null +++ b/.history/index_20230607232332.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232333.html b/.history/index_20230607232333.html new file mode 100644 index 000000000..715edf162 --- /dev/null +++ b/.history/index_20230607232333.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232338.html b/.history/index_20230607232338.html new file mode 100644 index 000000000..010905e07 --- /dev/null +++ b/.history/index_20230607232338.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232345.html b/.history/index_20230607232345.html new file mode 100644 index 000000000..e71dee7f9 --- /dev/null +++ b/.history/index_20230607232345.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232503.html b/.history/index_20230607232503.html new file mode 100644 index 000000000..a385cc432 --- /dev/null +++ b/.history/index_20230607232503.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607232504.html b/.history/index_20230607232504.html new file mode 100644 index 000000000..a1a138c1b --- /dev/null +++ b/.history/index_20230607232504.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/style/index_20230607133303.css b/.history/style/index_20230607133303.css new file mode 100644 index 000000000..02934477f --- /dev/null +++ b/.history/style/index_20230607133303.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133304.css b/.history/style/index_20230607133304.css new file mode 100644 index 000000000..9e24a66b0 --- /dev/null +++ b/.history/style/index_20230607133304.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133305.css b/.history/style/index_20230607133305.css new file mode 100644 index 000000000..4f8a9c9a2 --- /dev/null +++ b/.history/style/index_20230607133305.css @@ -0,0 +1,191 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html {} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133307.css b/.history/style/index_20230607133307.css new file mode 100644 index 000000000..107e3a083 --- /dev/null +++ b/.history/style/index_20230607133307.css @@ -0,0 +1,194 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 16px; + /* Set the base font size to 16px */ +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133316.css b/.history/style/index_20230607133316.css new file mode 100644 index 000000000..736d1efe1 --- /dev/null +++ b/.history/style/index_20230607133316.css @@ -0,0 +1,194 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size; + /* Set the base font size to 16px */ +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133317.css b/.history/style/index_20230607133317.css new file mode 100644 index 000000000..107e3a083 --- /dev/null +++ b/.history/style/index_20230607133317.css @@ -0,0 +1,194 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 16px; + /* Set the base font size to 16px */ +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133328.css b/.history/style/index_20230607133328.css new file mode 100644 index 000000000..003806e2e --- /dev/null +++ b/.history/style/index_20230607133328.css @@ -0,0 +1,194 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; + /* Set the base font size to 16px */ +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607133333.css b/.history/style/index_20230607133333.css new file mode 100644 index 000000000..8a1a12f27 --- /dev/null +++ b/.history/style/index_20230607133333.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + /* Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134008.css b/.history/style/index_20230607134008.css new file mode 100644 index 000000000..6e0be15eb --- /dev/null +++ b/.history/style/index_20230607134008.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134009.css b/.history/style/index_20230607134009.css new file mode 100644 index 000000000..3d67d1412 --- /dev/null +++ b/.history/style/index_20230607134009.css @@ -0,0 +1,192 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative;Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134011.css b/.history/style/index_20230607134011.css new file mode 100644 index 000000000..4c8e30592 --- /dev/null +++ b/.history/style/index_20230607134011.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134014.css b/.history/style/index_20230607134014.css new file mode 100644 index 000000000..8c701d5bf --- /dev/null +++ b/.history/style/index_20230607134014.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134025.css b/.history/style/index_20230607134025.css new file mode 100644 index 000000000..3d67d1412 --- /dev/null +++ b/.history/style/index_20230607134025.css @@ -0,0 +1,192 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative;Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134026.css b/.history/style/index_20230607134026.css new file mode 100644 index 000000000..6e0be15eb --- /dev/null +++ b/.history/style/index_20230607134026.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +html { + font-size: 63.5%; +} +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 2% 0 ; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134140.css b/.history/style/index_20230607134140.css new file mode 100644 index 000000000..858afa9a9 --- /dev/null +++ b/.history/style/index_20230607134140.css @@ -0,0 +1,195 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134325.css b/.history/style/index_20230607134325.css new file mode 100644 index 000000000..90f55ae6f --- /dev/null +++ b/.history/style/index_20230607134325.css @@ -0,0 +1,196 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134328.css b/.history/style/index_20230607134328.css new file mode 100644 index 000000000..3f53cf025 --- /dev/null +++ b/.history/style/index_20230607134328.css @@ -0,0 +1,196 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134332.css b/.history/style/index_20230607134332.css new file mode 100644 index 000000000..39e7c9986 --- /dev/null +++ b/.history/style/index_20230607134332.css @@ -0,0 +1,198 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header{ + d + } + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134336.css b/.history/style/index_20230607134336.css new file mode 100644 index 000000000..8f65def57 --- /dev/null +++ b/.history/style/index_20230607134336.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134342.css b/.history/style/index_20230607134342.css new file mode 100644 index 000000000..1d075b336 --- /dev/null +++ b/.history/style/index_20230607134342.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134414.css b/.history/style/index_20230607134414.css new file mode 100644 index 000000000..ac59ce401 --- /dev/null +++ b/.history/style/index_20230607134414.css @@ -0,0 +1,202 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + .top +} \ No newline at end of file diff --git a/.history/style/index_20230607134415.css b/.history/style/index_20230607134415.css new file mode 100644 index 000000000..f6d828a46 --- /dev/null +++ b/.history/style/index_20230607134415.css @@ -0,0 +1,202 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + .topsection { +} \ No newline at end of file diff --git a/.history/style/index_20230607134420.css b/.history/style/index_20230607134420.css new file mode 100644 index 000000000..50e7d3db3 --- /dev/null +++ b/.history/style/index_20230607134420.css @@ -0,0 +1,204 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + .topsection div{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134423.css b/.history/style/index_20230607134423.css new file mode 100644 index 000000000..324c364bf --- /dev/null +++ b/.history/style/index_20230607134423.css @@ -0,0 +1,204 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + .topsection div{ + width: 100%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134425.css b/.history/style/index_20230607134425.css new file mode 100644 index 000000000..11f7bf70c --- /dev/null +++ b/.history/style/index_20230607134425.css @@ -0,0 +1,204 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + .topsection div{ + width: 90%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134432.css b/.history/style/index_20230607134432.css new file mode 100644 index 000000000..a88927fdd --- /dev/null +++ b/.history/style/index_20230607134432.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 4% 0; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134454.css b/.history/style/index_20230607134454.css new file mode 100644 index 000000000..e71edee5d --- /dev/null +++ b/.history/style/index_20230607134454.css @@ -0,0 +1,195 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + + + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134457.css b/.history/style/index_20230607134457.css new file mode 100644 index 000000000..a7d57b82c --- /dev/null +++ b/.history/style/index_20230607134457.css @@ -0,0 +1,193 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134502.css b/.history/style/index_20230607134502.css new file mode 100644 index 000000000..e8a1653bd --- /dev/null +++ b/.history/style/index_20230607134502.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 30%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134518.css b/.history/style/index_20230607134518.css new file mode 100644 index 000000000..d8c3a7f32 --- /dev/null +++ b/.history/style/index_20230607134518.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134519.css b/.history/style/index_20230607134519.css new file mode 100644 index 000000000..d8c3a7f32 --- /dev/null +++ b/.history/style/index_20230607134519.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .topsection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134543.css b/.history/style/index_20230607134543.css new file mode 100644 index 000000000..57a6eba57 --- /dev/null +++ b/.history/style/index_20230607134543.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppdersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134551.css b/.history/style/index_20230607134551.css new file mode 100644 index 000000000..e3c654177 --- /dev/null +++ b/.history/style/index_20230607134551.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134552.css b/.history/style/index_20230607134552.css new file mode 100644 index 000000000..e3c654177 --- /dev/null +++ b/.history/style/index_20230607134552.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134824.css b/.history/style/index_20230607134824.css new file mode 100644 index 000000000..a73884d04 --- /dev/null +++ b/.history/style/index_20230607134824.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134827.css b/.history/style/index_20230607134827.css new file mode 100644 index 000000000..9c68920d3 --- /dev/null +++ b/.history/style/index_20230607134827.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134829.css b/.history/style/index_20230607134829.css new file mode 100644 index 000000000..77f3cc25c --- /dev/null +++ b/.history/style/index_20230607134829.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: ; +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134831.css b/.history/style/index_20230607134831.css new file mode 100644 index 000000000..5badabfb0 --- /dev/null +++ b/.history/style/index_20230607134831.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40; +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134832.css b/.history/style/index_20230607134832.css new file mode 100644 index 000000000..161476dc2 --- /dev/null +++ b/.history/style/index_20230607134832.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40%; +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134833.css b/.history/style/index_20230607134833.css new file mode 100644 index 000000000..117b8371d --- /dev/null +++ b/.history/style/index_20230607134833.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40%; + +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134838.css b/.history/style/index_20230607134838.css new file mode 100644 index 000000000..a18cdf0dc --- /dev/null +++ b/.history/style/index_20230607134838.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40%; + margin +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134842.css b/.history/style/index_20230607134842.css new file mode 100644 index 000000000..599c5b62a --- /dev/null +++ b/.history/style/index_20230607134842.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40%; + margin: 1 +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134846.css b/.history/style/index_20230607134846.css new file mode 100644 index 000000000..62525623a --- /dev/null +++ b/.history/style/index_20230607134846.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } +button{ + width: 40%; + margin: 1% 0; +} + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134903.css b/.history/style/index_20230607134903.css new file mode 100644 index 000000000..f1c8397a4 --- /dev/null +++ b/.history/style/index_20230607134903.css @@ -0,0 +1,210 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 2% 0; + } + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134939.css b/.history/style/index_20230607134939.css new file mode 100644 index 000000000..fa161069b --- /dev/null +++ b/.history/style/index_20230607134939.css @@ -0,0 +1,199 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607134949.css b/.history/style/index_20230607134949.css new file mode 100644 index 000000000..e294264c6 --- /dev/null +++ b/.history/style/index_20230607134949.css @@ -0,0 +1,211 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + /* Display the links in a flex container */ +} + +.links button { + padding: 0; + /* Remove padding */ + width: 100px; + /* Set a specific width for the buttons */ +} +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607135009.css b/.history/style/index_20230607135009.css new file mode 100644 index 000000000..9a1a40e81 --- /dev/null +++ b/.history/style/index_20230607135009.css @@ -0,0 +1,200 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607135455.css b/.history/style/index_20230607135455.css new file mode 100644 index 000000000..fe958155a --- /dev/null +++ b/.history/style/index_20230607135455.css @@ -0,0 +1,199 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232109.css b/.history/style/index_20230607232109.css new file mode 100644 index 000000000..a90226b30 --- /dev/null +++ b/.history/style/index_20230607232109.css @@ -0,0 +1,199 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) {} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232130.css b/.history/style/index_20230607232130.css new file mode 100644 index 000000000..cbdf6f686 --- /dev/null +++ b/.history/style/index_20230607232130.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232135.css b/.history/style/index_20230607232135.css new file mode 100644 index 000000000..82edee417 --- /dev/null +++ b/.history/style/index_20230607232135.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232136.css b/.history/style/index_20230607232136.css new file mode 100644 index 000000000..031a0f3a2 --- /dev/null +++ b/.history/style/index_20230607232136.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232139.css b/.history/style/index_20230607232139.css new file mode 100644 index 000000000..8c179288b --- /dev/null +++ b/.history/style/index_20230607232139.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232141.css b/.history/style/index_20230607232141.css new file mode 100644 index 000000000..1d49fbff7 --- /dev/null +++ b/.history/style/index_20230607232141.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width" + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232143.css b/.history/style/index_20230607232143.css new file mode 100644 index 000000000..0952910f6 --- /dev/null +++ b/.history/style/index_20230607232143.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width: + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232144.css b/.history/style/index_20230607232144.css new file mode 100644 index 000000000..88d46d7b2 --- /dev/null +++ b/.history/style/index_20230607232144.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232146.css b/.history/style/index_20230607232146.css new file mode 100644 index 000000000..8c179288b --- /dev/null +++ b/.history/style/index_20230607232146.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232147.css b/.history/style/index_20230607232147.css new file mode 100644 index 000000000..0952910f6 --- /dev/null +++ b/.history/style/index_20230607232147.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width: + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232157.css b/.history/style/index_20230607232157.css new file mode 100644 index 000000000..b1eb04480 --- /dev/null +++ b/.history/style/index_20230607232157.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width:20 + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232200.css b/.history/style/index_20230607232200.css new file mode 100644 index 000000000..d234c08aa --- /dev/null +++ b/.history/style/index_20230607232200.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width:20% + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232202.css b/.history/style/index_20230607232202.css new file mode 100644 index 000000000..703bc36c0 --- /dev/null +++ b/.history/style/index_20230607232202.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width:20%. + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232204.css b/.history/style/index_20230607232204.css new file mode 100644 index 000000000..a4212f2b0 --- /dev/null +++ b/.history/style/index_20230607232204.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width:20%, + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232205.css b/.history/style/index_20230607232205.css new file mode 100644 index 000000000..d234c08aa --- /dev/null +++ b/.history/style/index_20230607232205.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div{ + width:20% + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232206.css b/.history/style/index_20230607232206.css new file mode 100644 index 000000000..6d236e539 --- /dev/null +++ b/.history/style/index_20230607232206.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232530.css b/.history/style/index_20230607232530.css new file mode 100644 index 000000000..6d236e539 --- /dev/null +++ b/.history/style/index_20230607232530.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232906.css b/.history/style/index_20230607232906.css new file mode 100644 index 000000000..b4f93d24c --- /dev/null +++ b/.history/style/index_20230607232906.css @@ -0,0 +1,203 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +links + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232908.css b/.history/style/index_20230607232908.css new file mode 100644 index 000000000..b63b6452e --- /dev/null +++ b/.history/style/index_20230607232908.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +links{ + +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232913.css b/.history/style/index_20230607232913.css new file mode 100644 index 000000000..00ffa2b9d --- /dev/null +++ b/.history/style/index_20230607232913.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ + +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232924.css b/.history/style/index_20230607232924.css new file mode 100644 index 000000000..192ec4773 --- /dev/null +++ b/.history/style/index_20230607232924.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232925.css b/.history/style/index_20230607232925.css new file mode 100644 index 000000000..f51553d9b --- /dev/null +++ b/.history/style/index_20230607232925.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232927.css b/.history/style/index_20230607232927.css new file mode 100644 index 000000000..7477d70a7 --- /dev/null +++ b/.history/style/index_20230607232927.css @@ -0,0 +1,206 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +font-kerning: ; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232933.css b/.history/style/index_20230607232933.css new file mode 100644 index 000000000..66489c146 --- /dev/null +++ b/.history/style/index_20230607232933.css @@ -0,0 +1,206 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +flex-direction: ; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232936.css b/.history/style/index_20230607232936.css new file mode 100644 index 000000000..eee040a5a --- /dev/null +++ b/.history/style/index_20230607232936.css @@ -0,0 +1,206 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +flex-direction: column; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232938.css b/.history/style/index_20230607232938.css new file mode 100644 index 000000000..eee040a5a --- /dev/null +++ b/.history/style/index_20230607232938.css @@ -0,0 +1,206 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +flex-direction: column; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232941.css b/.history/style/index_20230607232941.css new file mode 100644 index 000000000..eee040a5a --- /dev/null +++ b/.history/style/index_20230607232941.css @@ -0,0 +1,206 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +flex-direction: column; +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232945.css b/.history/style/index_20230607232945.css new file mode 100644 index 000000000..144cb1c98 --- /dev/null +++ b/.history/style/index_20230607232945.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + +.links{ +display: flex; +flex-direction: column; + +} + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607232950.css b/.history/style/index_20230607232950.css new file mode 100644 index 000000000..b6ba2598f --- /dev/null +++ b/.history/style/index_20230607232950.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607233036.css b/.history/style/index_20230607233036.css new file mode 100644 index 000000000..c81fd36cc --- /dev/null +++ b/.history/style/index_20230607233036.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +/*.img_button { + + color: white; + font-size: 1.5em; + width: 700px; + height: 400px; + position: relative; + Add position relative to establish a new stacking context */ + + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + /* Add a background color with transparency */ + padding: 20px; + /* Add padding to the background */ +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; + /* Increase the font size if necessary */ +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + /* Use rgba to specify the background color with transparency */ + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + /* Change the text color to a darker shade */ + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + + +.rounded-text p { + margin: 0; + /* Remove default margin */ + line-height: 1.4; + /* Adjust line height for better readability */ +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; + /* Align icons to the right */ +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +/* Add a media query for mobile devices */ +@media(max-width: 800px) { + .row div { + width: 20%; + } +} + +@media(max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607233309.css b/.history/style/index_20230607233309.css new file mode 100644 index 000000000..f94420745 --- /dev/null +++ b/.history/style/index_20230607233309.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} diff --git a/.history/style/index_20230607233316.css b/.history/style/index_20230607233316.css new file mode 100644 index 000000000..f94420745 --- /dev/null +++ b/.history/style/index_20230607233316.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} diff --git a/index.html b/index.html index 95eb292cb..a1a138c1b 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@

SEAN KIPINÄ

-
+

SEAN KIPINÄ


diff --git a/style/index.css b/style/index.css index 7b59e686c..f94420745 100644 --- a/style/index.css +++ b/style/index.css @@ -13,14 +13,18 @@ nav { .links { display: flex; - /* Display the links in a flex container */ + flex-direction: column; + align-items: center; + width: 100%; } .links button { - padding: 0; - /* Remove padding */ - width: 100px; - /* Set a specific width for the buttons */ + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; } header, @@ -39,16 +43,6 @@ section { text-align: center; } -/*.img_button { - - color: white; - font-size: 1.5em; - width: 700px; - height: 400px; - position: relative; - /* Add position relative to establish a new stacking context */ - - .button-content { position: absolute; top: 50%; @@ -56,22 +50,18 @@ section { transform: translate(-50%, -50%); text-align: center; background-color: rgba(0, 0, 0, 0.7); - /* Add a background color with transparency */ padding: 20px; - /* Add padding to the background */ } .button-content h1 { margin: 0; padding: 0; font-size: 2em; - /* Increase the font size if necessary */ } .button-content a { display: inline-block; background-color: rgba(255, 165, 0, 0.7); - /* Use rgba to specify the background color with transparency */ color: white; padding: 10px 20px; text-decoration: none; @@ -83,7 +73,6 @@ section { display: inline-block; background-color: rgba(255, 165, 0, 0.7); color: #333333; - /* Change the text color to a darker shade */ padding: 10px 20px; text-decoration: none; font-size: 1.2em; @@ -91,12 +80,9 @@ section { text-align: center; } - .rounded-text p { margin: 0; - /* Remove default margin */ line-height: 1.4; - /* Adjust line height for better readability */ } .rounded-text img { @@ -104,7 +90,6 @@ section { margin-bottom: 10px; } - footer { background-color: lightgray; padding: 25px; @@ -114,7 +99,6 @@ footer { .social-media { display: inline-block; float: left; - /* Align icons to the right */ } .social-media a { @@ -127,18 +111,6 @@ footer { height: 30px; } -.row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; -} - -.row div { - width: 30%; - margin: 2% 0 ; -} - .element_pics { text-align: center; } @@ -161,10 +133,19 @@ button:hover { border: white solid 1px; } -/* Add a media query for mobile devices */ -@media(max-width: 800px) {} +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } -@media(max-width: 500px) { nav { display: flex; flex-direction: column; @@ -176,16 +157,30 @@ button:hover { display: flex; flex-direction: column; align-items: center; - width: 100%; } .links button { width: 40%; - margin: 2% 0; + margin: 1% 0; } .uppersection { width: 80%; margin: 0 auto; } -} \ No newline at end of file + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} From 7e9815c48bfc7ae048207ee1d56787a53aa13cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 15:44:32 +0300 Subject: [PATCH 26/40] Going back to fix code from scratch. --- .history/index_20230607234937.html | 0 .history/index_20230607234939.html | 1 + .history/index_20230607234941.html | 88 +++++++++++ .history/index_20230607234953.html | 15 ++ .history/index_20230607234956.html | 15 ++ .history/index_20230607234957.html | 15 ++ .history/index_20230607235015.html | 15 ++ .history/index_20230607235214.html | 16 ++ .history/index_20230607235215.html | 16 ++ .history/index_20230607235216.html | 16 ++ .history/index_20230607235220.html | 16 ++ .history/index_20230607235223.html | 16 ++ .history/index_20230607235224.html | 16 ++ .history/index_20230607235229.html | 16 ++ .history/index_20230607235237.html | 16 ++ .history/index_20230607235238.html | 18 +++ .history/index_20230607235244.html | 18 +++ .history/index_20230607235247.html | 20 +++ .history/index_20230607235256.html | 20 +++ .history/index_20230607235258.html | 20 +++ .history/index_20230607235303.html | 20 +++ .history/index_20230607235305.html | 20 +++ .history/index_20230607235306.html | 19 +++ .history/index_20230607235308.html | 20 +++ .history/index_20230607235311.html | 20 +++ .history/index_20230607235312.html | 20 +++ .history/index_20230607235313.html | 20 +++ .history/index_20230607235315.html | 20 +++ .history/index_20230607235319.html | 20 +++ .history/index_20230607235321.html | 20 +++ .history/index_20230607235327.html | 20 +++ .history/index_20230607235328.html | 20 +++ .history/index_20230607235331.html | 20 +++ .history/index_20230607235340.html | 21 +++ .history/index_20230607235346.html | 21 +++ .history/index_20230607235354.html | 22 +++ .history/index_20230607235356.html | 23 +++ .history/index_20230607235358.html | 23 +++ .history/index_20230607235400.html | 22 +++ .history/index_20230607235404.html | 22 +++ .history/index_20230607235408.html | 23 +++ .history/index_20230607235413.html | 23 +++ .history/index_20230607235417.html | 23 +++ .history/index_20230607235420.html | 23 +++ .history/index_20230607235427.html | 23 +++ .history/index_20230607235430.html | 23 +++ .history/index_20230607235431.html | 23 +++ .history/index_20230607235438.html | 23 +++ .history/index_20230607235445.html | 23 +++ .history/index_20230607235501.html | 26 ++++ .history/index_20230607235504.html | 26 ++++ .history/index_20230607235506.html | 26 ++++ .history/index_20230607235514.html | 26 ++++ .history/index_20230607235517.html | 26 ++++ .history/index_20230607235520.html | 26 ++++ .history/index_20230607235529.html | 26 ++++ .history/index_20230607235539.html | 26 ++++ .history/index_20230607235548.html | 26 ++++ .history/index_20230607235554.html | 26 ++++ .history/index_20230607235556.html | 26 ++++ .history/index_20230607235605.html | 25 ++++ .history/style/index_20230607233515.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607233517.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607233519.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607233522.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607233750.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607233751.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607234930.css | 187 ++++++++++++++++++++++++ .history/style/index_20230607234933.css | 0 index.html | 77 +--------- style/index.css | 186 ----------------------- 71 files changed, 2620 insertions(+), 256 deletions(-) create mode 100644 .history/index_20230607234937.html create mode 100644 .history/index_20230607234939.html create mode 100644 .history/index_20230607234941.html create mode 100644 .history/index_20230607234953.html create mode 100644 .history/index_20230607234956.html create mode 100644 .history/index_20230607234957.html create mode 100644 .history/index_20230607235015.html create mode 100644 .history/index_20230607235214.html create mode 100644 .history/index_20230607235215.html create mode 100644 .history/index_20230607235216.html create mode 100644 .history/index_20230607235220.html create mode 100644 .history/index_20230607235223.html create mode 100644 .history/index_20230607235224.html create mode 100644 .history/index_20230607235229.html create mode 100644 .history/index_20230607235237.html create mode 100644 .history/index_20230607235238.html create mode 100644 .history/index_20230607235244.html create mode 100644 .history/index_20230607235247.html create mode 100644 .history/index_20230607235256.html create mode 100644 .history/index_20230607235258.html create mode 100644 .history/index_20230607235303.html create mode 100644 .history/index_20230607235305.html create mode 100644 .history/index_20230607235306.html create mode 100644 .history/index_20230607235308.html create mode 100644 .history/index_20230607235311.html create mode 100644 .history/index_20230607235312.html create mode 100644 .history/index_20230607235313.html create mode 100644 .history/index_20230607235315.html create mode 100644 .history/index_20230607235319.html create mode 100644 .history/index_20230607235321.html create mode 100644 .history/index_20230607235327.html create mode 100644 .history/index_20230607235328.html create mode 100644 .history/index_20230607235331.html create mode 100644 .history/index_20230607235340.html create mode 100644 .history/index_20230607235346.html create mode 100644 .history/index_20230607235354.html create mode 100644 .history/index_20230607235356.html create mode 100644 .history/index_20230607235358.html create mode 100644 .history/index_20230607235400.html create mode 100644 .history/index_20230607235404.html create mode 100644 .history/index_20230607235408.html create mode 100644 .history/index_20230607235413.html create mode 100644 .history/index_20230607235417.html create mode 100644 .history/index_20230607235420.html create mode 100644 .history/index_20230607235427.html create mode 100644 .history/index_20230607235430.html create mode 100644 .history/index_20230607235431.html create mode 100644 .history/index_20230607235438.html create mode 100644 .history/index_20230607235445.html create mode 100644 .history/index_20230607235501.html create mode 100644 .history/index_20230607235504.html create mode 100644 .history/index_20230607235506.html create mode 100644 .history/index_20230607235514.html create mode 100644 .history/index_20230607235517.html create mode 100644 .history/index_20230607235520.html create mode 100644 .history/index_20230607235529.html create mode 100644 .history/index_20230607235539.html create mode 100644 .history/index_20230607235548.html create mode 100644 .history/index_20230607235554.html create mode 100644 .history/index_20230607235556.html create mode 100644 .history/index_20230607235605.html create mode 100644 .history/style/index_20230607233515.css create mode 100644 .history/style/index_20230607233517.css create mode 100644 .history/style/index_20230607233519.css create mode 100644 .history/style/index_20230607233522.css create mode 100644 .history/style/index_20230607233750.css create mode 100644 .history/style/index_20230607233751.css create mode 100644 .history/style/index_20230607234930.css create mode 100644 .history/style/index_20230607234933.css diff --git a/.history/index_20230607234937.html b/.history/index_20230607234937.html new file mode 100644 index 000000000..e69de29bb diff --git a/.history/index_20230607234939.html b/.history/index_20230607234939.html new file mode 100644 index 000000000..c5fa78456 --- /dev/null +++ b/.history/index_20230607234939.html @@ -0,0 +1 @@ +< \ No newline at end of file diff --git a/.history/index_20230607234941.html b/.history/index_20230607234941.html new file mode 100644 index 000000000..a1a138c1b --- /dev/null +++ b/.history/index_20230607234941.html @@ -0,0 +1,88 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+
+ Portfolio Project 1 +

Portfolio Project 1

+
+
+
+
+ Portfolio Project 2 +

Portfolio Project 2

+
+
+
+
+ Portfolio Project 3 +

Portfolio Project 3

+
+
+
+
+ Portfolio Project 4 +

Portfolio Project 4

+
+
+
+
+ Portfolio Project 5 +

Portfolio Project 5

+
+
+
+
+ Portfolio Project 6 +

Portfolio Project 6

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/.history/index_20230607234953.html b/.history/index_20230607234953.html new file mode 100644 index 000000000..4ebc1b3c0 --- /dev/null +++ b/.history/index_20230607234953.html @@ -0,0 +1,15 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + + \ No newline at end of file diff --git a/.history/index_20230607234956.html b/.history/index_20230607234956.html new file mode 100644 index 000000000..2d7cec141 --- /dev/null +++ b/.history/index_20230607234956.html @@ -0,0 +1,15 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + < + + \ No newline at end of file diff --git a/.history/index_20230607234957.html b/.history/index_20230607234957.html new file mode 100644 index 000000000..28fa12142 --- /dev/null +++ b/.history/index_20230607234957.html @@ -0,0 +1,15 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + + \ No newline at end of file diff --git a/.history/index_20230607235015.html b/.history/index_20230607235015.html new file mode 100644 index 000000000..28fa12142 --- /dev/null +++ b/.history/index_20230607235015.html @@ -0,0 +1,15 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + + \ No newline at end of file diff --git a/.history/index_20230607235214.html b/.history/index_20230607235214.html new file mode 100644 index 000000000..385f01194 --- /dev/null +++ b/.history/index_20230607235214.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + < + + + + \ No newline at end of file diff --git a/.history/index_20230607235215.html b/.history/index_20230607235215.html new file mode 100644 index 000000000..18a3a65fb --- /dev/null +++ b/.history/index_20230607235215.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + + + \ No newline at end of file diff --git a/.history/index_20230607235216.html b/.history/index_20230607235216.html new file mode 100644 index 000000000..e52171dd7 --- /dev/null +++ b/.history/index_20230607235216.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + > + + + + \ No newline at end of file diff --git a/.history/index_20230607235220.html b/.history/index_20230607235220.html new file mode 100644 index 000000000..ee621a65f --- /dev/null +++ b/.history/index_20230607235220.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + ?< + + + + \ No newline at end of file diff --git a/.history/index_20230607235223.html b/.history/index_20230607235223.html new file mode 100644 index 000000000..18a3a65fb --- /dev/null +++ b/.history/index_20230607235223.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + + + \ No newline at end of file diff --git a/.history/index_20230607235224.html b/.history/index_20230607235224.html new file mode 100644 index 000000000..385f01194 --- /dev/null +++ b/.history/index_20230607235224.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + < + + + + \ No newline at end of file diff --git a/.history/index_20230607235229.html b/.history/index_20230607235229.html new file mode 100644 index 000000000..9ee466c1f --- /dev/null +++ b/.history/index_20230607235229.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + + + + \ No newline at end of file diff --git a/.history/index_20230607235237.html b/.history/index_20230607235237.html new file mode 100644 index 000000000..32335bb05 --- /dev/null +++ b/.history/index_20230607235237.html @@ -0,0 +1,16 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235238.html b/.history/index_20230607235238.html new file mode 100644 index 000000000..f0ac5e0f8 --- /dev/null +++ b/.history/index_20230607235238.html @@ -0,0 +1,18 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235244.html b/.history/index_20230607235244.html new file mode 100644 index 000000000..61d450b17 --- /dev/null +++ b/.history/index_20230607235244.html @@ -0,0 +1,18 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ < +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235247.html b/.history/index_20230607235247.html new file mode 100644 index 000000000..3f51286e6 --- /dev/null +++ b/.history/index_20230607235247.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235256.html b/.history/index_20230607235256.html new file mode 100644 index 000000000..84a176caf --- /dev/null +++ b/.history/index_20230607235256.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235258.html b/.history/index_20230607235258.html new file mode 100644 index 000000000..1189de892 --- /dev/null +++ b/.history/index_20230607235258.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235303.html b/.history/index_20230607235303.html new file mode 100644 index 000000000..1189de892 --- /dev/null +++ b/.history/index_20230607235303.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235305.html b/.history/index_20230607235305.html new file mode 100644 index 000000000..40b787ac1 --- /dev/null +++ b/.history/index_20230607235305.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235306.html b/.history/index_20230607235306.html new file mode 100644 index 000000000..4d69c6834 --- /dev/null +++ b/.history/index_20230607235306.html @@ -0,0 +1,19 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235308.html b/.history/index_20230607235308.html new file mode 100644 index 000000000..40b787ac1 --- /dev/null +++ b/.history/index_20230607235308.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235311.html b/.history/index_20230607235311.html new file mode 100644 index 000000000..30d0599ea --- /dev/null +++ b/.history/index_20230607235311.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235312.html b/.history/index_20230607235312.html new file mode 100644 index 000000000..84ad362ed --- /dev/null +++ b/.history/index_20230607235312.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235313.html b/.history/index_20230607235313.html new file mode 100644 index 000000000..30d0599ea --- /dev/null +++ b/.history/index_20230607235313.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235315.html b/.history/index_20230607235315.html new file mode 100644 index 000000000..1189de892 --- /dev/null +++ b/.history/index_20230607235315.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235319.html b/.history/index_20230607235319.html new file mode 100644 index 000000000..657f785bb --- /dev/null +++ b/.history/index_20230607235319.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235321.html b/.history/index_20230607235321.html new file mode 100644 index 000000000..a4c68b457 --- /dev/null +++ b/.history/index_20230607235321.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235327.html b/.history/index_20230607235327.html new file mode 100644 index 000000000..e809052d3 --- /dev/null +++ b/.history/index_20230607235327.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235328.html b/.history/index_20230607235328.html new file mode 100644 index 000000000..a4c68b457 --- /dev/null +++ b/.history/index_20230607235328.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235331.html b/.history/index_20230607235331.html new file mode 100644 index 000000000..44ebd8021 --- /dev/null +++ b/.history/index_20230607235331.html @@ -0,0 +1,20 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235340.html b/.history/index_20230607235340.html new file mode 100644 index 000000000..25245e42a --- /dev/null +++ b/.history/index_20230607235340.html @@ -0,0 +1,21 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235346.html b/.history/index_20230607235346.html new file mode 100644 index 000000000..e648d9350 --- /dev/null +++ b/.history/index_20230607235346.html @@ -0,0 +1,21 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235354.html b/.history/index_20230607235354.html new file mode 100644 index 000000000..4d240c685 --- /dev/null +++ b/.history/index_20230607235354.html @@ -0,0 +1,22 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235356.html b/.history/index_20230607235356.html new file mode 100644 index 000000000..1b3d27b72 --- /dev/null +++ b/.history/index_20230607235356.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235358.html b/.history/index_20230607235358.html new file mode 100644 index 000000000..ad75ab075 --- /dev/null +++ b/.history/index_20230607235358.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + < + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235400.html b/.history/index_20230607235400.html new file mode 100644 index 000000000..beb1c643c --- /dev/null +++ b/.history/index_20230607235400.html @@ -0,0 +1,22 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235404.html b/.history/index_20230607235404.html new file mode 100644 index 000000000..ccb6e69f4 --- /dev/null +++ b/.history/index_20230607235404.html @@ -0,0 +1,22 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235408.html b/.history/index_20230607235408.html new file mode 100644 index 000000000..607075035 --- /dev/null +++ b/.history/index_20230607235408.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235413.html b/.history/index_20230607235413.html new file mode 100644 index 000000000..ec1089050 --- /dev/null +++ b/.history/index_20230607235413.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235417.html b/.history/index_20230607235417.html new file mode 100644 index 000000000..860cd0738 --- /dev/null +++ b/.history/index_20230607235417.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235420.html b/.history/index_20230607235420.html new file mode 100644 index 000000000..2298aeb31 --- /dev/null +++ b/.history/index_20230607235420.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235427.html b/.history/index_20230607235427.html new file mode 100644 index 000000000..685b61c2a --- /dev/null +++ b/.history/index_20230607235427.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235430.html b/.history/index_20230607235430.html new file mode 100644 index 000000000..42a99a417 --- /dev/null +++ b/.history/index_20230607235430.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235431.html b/.history/index_20230607235431.html new file mode 100644 index 000000000..c654a1e29 --- /dev/null +++ b/.history/index_20230607235431.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235438.html b/.history/index_20230607235438.html new file mode 100644 index 000000000..3885a773b --- /dev/null +++ b/.history/index_20230607235438.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235445.html b/.history/index_20230607235445.html new file mode 100644 index 000000000..f2ec474d1 --- /dev/null +++ b/.history/index_20230607235445.html @@ -0,0 +1,23 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235501.html b/.history/index_20230607235501.html new file mode 100644 index 000000000..0e6fb6460 --- /dev/null +++ b/.history/index_20230607235501.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235504.html b/.history/index_20230607235504.html new file mode 100644 index 000000000..48e6f7e43 --- /dev/null +++ b/.history/index_20230607235504.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235506.html b/.history/index_20230607235506.html new file mode 100644 index 000000000..df46450c8 --- /dev/null +++ b/.history/index_20230607235506.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235514.html b/.history/index_20230607235514.html new file mode 100644 index 000000000..ae10804d4 --- /dev/null +++ b/.history/index_20230607235514.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235517.html b/.history/index_20230607235517.html new file mode 100644 index 000000000..80161cb11 --- /dev/null +++ b/.history/index_20230607235517.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235520.html b/.history/index_20230607235520.html new file mode 100644 index 000000000..8f802f5c4 --- /dev/null +++ b/.history/index_20230607235520.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235529.html b/.history/index_20230607235529.html new file mode 100644 index 000000000..3b42dbc3d --- /dev/null +++ b/.history/index_20230607235529.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235539.html b/.history/index_20230607235539.html new file mode 100644 index 000000000..1e8359f73 --- /dev/null +++ b/.history/index_20230607235539.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235548.html b/.history/index_20230607235548.html new file mode 100644 index 000000000..b41b134ae --- /dev/null +++ b/.history/index_20230607235548.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235554.html b/.history/index_20230607235554.html new file mode 100644 index 000000000..6629db97d --- /dev/null +++ b/.history/index_20230607235554.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235556.html b/.history/index_20230607235556.html new file mode 100644 index 000000000..896d8fc8a --- /dev/null +++ b/.history/index_20230607235556.html @@ -0,0 +1,26 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/index_20230607235605.html b/.history/index_20230607235605.html new file mode 100644 index 000000000..fe54a75bc --- /dev/null +++ b/.history/index_20230607235605.html @@ -0,0 +1,25 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230607233515.css b/.history/style/index_20230607233515.css new file mode 100644 index 000000000..ce436b60d --- /dev/null +++ b/.history/style/index_20230607233515.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} diff --git a/.history/style/index_20230607233517.css b/.history/style/index_20230607233517.css new file mode 100644 index 000000000..26247da09 --- /dev/null +++ b/.history/style/index_20230607233517.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: ; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} diff --git a/.history/style/index_20230607233519.css b/.history/style/index_20230607233519.css new file mode 100644 index 000000000..15bf4e195 --- /dev/null +++ b/.history/style/index_20230607233519.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} diff --git a/.history/style/index_20230607233522.css b/.history/style/index_20230607233522.css new file mode 100644 index 000000000..3d05a2267 --- /dev/null +++ b/.history/style/index_20230607233522.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607233750.css b/.history/style/index_20230607233750.css new file mode 100644 index 000000000..3ab2e3783 --- /dev/null +++ b/.history/style/index_20230607233750.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +}f + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607233751.css b/.history/style/index_20230607233751.css new file mode 100644 index 000000000..3d05a2267 --- /dev/null +++ b/.history/style/index_20230607233751.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607234930.css b/.history/style/index_20230607234930.css new file mode 100644 index 000000000..3d05a2267 --- /dev/null +++ b/.history/style/index_20230607234930.css @@ -0,0 +1,187 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + +nav { + display: flex; + justify-content: space-between; +} + +.links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.links button { + width: 40%; + margin: 2% 0; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 4% 0; +} + +.uppersection { + background-image: url("https://picsum.photos/700/400"); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +.button-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; +} + +.button-content h1 { + margin: 0; + padding: 0; + font-size: 2em; +} + +.button-content a { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: white; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; +} + +.rounded-text { + display: inline-block; + background-color: rgba(255, 165, 0, 0.7); + color: #333333; + padding: 10px 20px; + text-decoration: none; + font-size: 1.2em; + border-radius: 5px; + text-align: center; +} + +.rounded-text p { + margin: 0; + line-height: 1.4; +} + +.rounded-text img { + border-radius: 5px; + margin-bottom: 10px; +} + +footer { + background-color: lightgray; + padding: 25px; + text-align: center; +} + +.social-media { + display: inline-block; + float: left; +} + +.social-media a { + display: inline-block; + margin-right: 10px; +} + +.social-media img { + width: 30px; + height: 30px; +} + +.element_pics { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button a { + text-decoration: none; + color: inherit; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +@media (max-width: 800px) { + .row div { + width: 20%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .uppersection { + width: 80%; + margin: 0 auto; + } + + .uppersection div { + width: 90%; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .row div { + width: 40%; + margin: 4% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230607234933.css b/.history/style/index_20230607234933.css new file mode 100644 index 000000000..e69de29bb diff --git a/index.html b/index.html index a1a138c1b..fe54a75bc 100644 --- a/index.html +++ b/index.html @@ -11,78 +11,15 @@
+

SEAN KIPINA

+ + + + + +
-
-
-

SEAN KIPINÄ


- -
-
- -
-
-
-
- Portfolio Project 1 -

Portfolio Project 1

-
-
-
-
- Portfolio Project 2 -

Portfolio Project 2

-
-
-
-
- Portfolio Project 3 -

Portfolio Project 3

-
-
-
-
- Portfolio Project 4 -

Portfolio Project 4

-
-
-
-
- Portfolio Project 5 -

Portfolio Project 5

-
-
-
-
- Portfolio Project 6 -

Portfolio Project 6

-
-
-
-
- - \ No newline at end of file diff --git a/style/index.css b/style/index.css index f94420745..e69de29bb 100644 --- a/style/index.css +++ b/style/index.css @@ -1,186 +0,0 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; - max-width: 100%; - border: 1px solid grey; -} - -nav { - display: flex; - justify-content: space-between; -} - -.links { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; -} - -.links button { - width: 40%; - margin: 2% 0; -} - -html { - font-size: 63.5%; -} - -header, -section { - padding: 4% 0; -} - -.uppersection { - background-image: url("https://picsum.photos/700/400"); - background-size: cover; - background-repeat: no-repeat; - display: flex; - justify-content: center; - align-items: center; - height: 50vh; - text-align: center; -} - -.button-content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - background-color: rgba(0, 0, 0, 0.7); - padding: 20px; -} - -.button-content h1 { - margin: 0; - padding: 0; - font-size: 2em; -} - -.button-content a { - display: inline-block; - background-color: rgba(255, 165, 0, 0.7); - color: white; - padding: 10px 20px; - text-decoration: none; - font-size: 1.2em; - border-radius: 5px; -} - -.rounded-text { - display: inline-block; - background-color: rgba(255, 165, 0, 0.7); - color: #333333; - padding: 10px 20px; - text-decoration: none; - font-size: 1.2em; - border-radius: 5px; - text-align: center; -} - -.rounded-text p { - margin: 0; - line-height: 1.4; -} - -.rounded-text img { - border-radius: 5px; - margin-bottom: 10px; -} - -footer { - background-color: lightgray; - padding: 25px; - text-align: center; -} - -.social-media { - display: inline-block; - float: left; -} - -.social-media a { - display: inline-block; - margin-right: 10px; -} - -.social-media img { - width: 30px; - height: 30px; -} - -.element_pics { - text-align: center; -} - -button { - background-color: white; - color: black; - border: black solid 1px; - padding: 5px 10px; -} - -button a { - text-decoration: none; - color: inherit; -} - -button:hover { - background-color: black; - color: white; - border: white solid 1px; -} - -@media (max-width: 800px) { - .row div { - width: 20%; - } -} - -@media (max-width: 500px) { - header { - display: flex; - flex-direction: column; - align-items: center; - } - - nav { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - } - - .links { - display: flex; - flex-direction: column; - align-items: center; - } - - .links button { - width: 40%; - margin: 1% 0; - } - - .uppersection { - width: 80%; - margin: 0 auto; - } - - .uppersection div { - width: 90%; - } - - .row { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - } - - .row div { - width: 40%; - margin: 4% 0; - } -} From eb18e78804d75e0128e4dcad0f10bfad7300917f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 15:54:41 +0300 Subject: [PATCH 27/40] Rebuilt part of the layout for the site with my navigation. --- .history/index_20230609155200.html | 27 +++++++++++++++++++++++ .history/index_20230609155209.html | 27 +++++++++++++++++++++++ .history/index_20230609155211.html | 27 +++++++++++++++++++++++ .history/index_20230609155214.html | 27 +++++++++++++++++++++++ .history/index_20230609155218.html | 27 +++++++++++++++++++++++ .history/index_20230609155221.html | 27 +++++++++++++++++++++++ .history/index_20230609155225.html | 27 +++++++++++++++++++++++ .history/index_20230609155228.html | 27 +++++++++++++++++++++++ .history/index_20230609155232.html | 27 +++++++++++++++++++++++ .history/index_20230609155245.html | 28 ++++++++++++++++++++++++ .history/index_20230609155252.html | 29 +++++++++++++++++++++++++ .history/index_20230609155302.html | 29 +++++++++++++++++++++++++ .history/index_20230609155316.html | 29 +++++++++++++++++++++++++ .history/index_20230609155325.html | 29 +++++++++++++++++++++++++ .history/style/index_20230609154936.css | 1 + .history/style/index_20230609154938.css | 3 +++ .history/style/index_20230609154941.css | 2 ++ .history/style/index_20230609154945.css | 1 + .history/style/index_20230609154947.css | 3 +++ .history/style/index_20230609154949.css | 3 +++ .history/style/index_20230609154952.css | 4 ++++ .history/style/index_20230609154954.css | 3 +++ .history/style/index_20230609154956.css | 3 +++ .history/style/index_20230609155000.css | 4 ++++ .history/style/index_20230609155009.css | 4 ++++ .history/style/index_20230609155011.css | 4 ++++ index.html | 6 ++++- style/index.css | 4 ++++ 28 files changed, 431 insertions(+), 1 deletion(-) create mode 100644 .history/index_20230609155200.html create mode 100644 .history/index_20230609155209.html create mode 100644 .history/index_20230609155211.html create mode 100644 .history/index_20230609155214.html create mode 100644 .history/index_20230609155218.html create mode 100644 .history/index_20230609155221.html create mode 100644 .history/index_20230609155225.html create mode 100644 .history/index_20230609155228.html create mode 100644 .history/index_20230609155232.html create mode 100644 .history/index_20230609155245.html create mode 100644 .history/index_20230609155252.html create mode 100644 .history/index_20230609155302.html create mode 100644 .history/index_20230609155316.html create mode 100644 .history/index_20230609155325.html create mode 100644 .history/style/index_20230609154936.css create mode 100644 .history/style/index_20230609154938.css create mode 100644 .history/style/index_20230609154941.css create mode 100644 .history/style/index_20230609154945.css create mode 100644 .history/style/index_20230609154947.css create mode 100644 .history/style/index_20230609154949.css create mode 100644 .history/style/index_20230609154952.css create mode 100644 .history/style/index_20230609154954.css create mode 100644 .history/style/index_20230609154956.css create mode 100644 .history/style/index_20230609155000.css create mode 100644 .history/style/index_20230609155009.css create mode 100644 .history/style/index_20230609155011.css diff --git a/.history/index_20230609155200.html b/.history/index_20230609155200.html new file mode 100644 index 000000000..1e2e9ac06 --- /dev/null +++ b/.history/index_20230609155200.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155209.html b/.history/index_20230609155209.html new file mode 100644 index 000000000..58f718954 --- /dev/null +++ b/.history/index_20230609155209.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ < +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155211.html b/.history/index_20230609155211.html new file mode 100644 index 000000000..bdc874a36 --- /dev/null +++ b/.history/index_20230609155211.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ + + + + + +
+ + + + + + +
+ + + + + + +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155225.html b/.history/index_20230609155225.html new file mode 100644 index 000000000..305ce99db --- /dev/null +++ b/.history/index_20230609155225.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155228.html b/.history/index_20230609155228.html new file mode 100644 index 000000000..c3b3ca376 --- /dev/null +++ b/.history/index_20230609155228.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155232.html b/.history/index_20230609155232.html new file mode 100644 index 000000000..8067e77aa --- /dev/null +++ b/.history/index_20230609155232.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155245.html b/.history/index_20230609155245.html new file mode 100644 index 000000000..de7c58857 --- /dev/null +++ b/.history/index_20230609155245.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155252.html b/.history/index_20230609155252.html new file mode 100644 index 000000000..6d0158abf --- /dev/null +++ b/.history/index_20230609155252.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155302.html b/.history/index_20230609155302.html new file mode 100644 index 000000000..39dee8d9f --- /dev/null +++ b/.history/index_20230609155302.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155316.html b/.history/index_20230609155316.html new file mode 100644 index 000000000..d531a2b9b --- /dev/null +++ b/.history/index_20230609155316.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ My Pro +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155325.html b/.history/index_20230609155325.html new file mode 100644 index 000000000..e3e550223 --- /dev/null +++ b/.history/index_20230609155325.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/style/index_20230609154936.css b/.history/style/index_20230609154936.css new file mode 100644 index 000000000..74766c206 --- /dev/null +++ b/.history/style/index_20230609154936.css @@ -0,0 +1 @@ +nac \ No newline at end of file diff --git a/.history/style/index_20230609154938.css b/.history/style/index_20230609154938.css new file mode 100644 index 000000000..efebadbc6 --- /dev/null +++ b/.history/style/index_20230609154938.css @@ -0,0 +1,3 @@ +nac{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609154941.css b/.history/style/index_20230609154941.css new file mode 100644 index 000000000..7c1113224 --- /dev/null +++ b/.history/style/index_20230609154941.css @@ -0,0 +1,2 @@ + +} \ No newline at end of file diff --git a/.history/style/index_20230609154945.css b/.history/style/index_20230609154945.css new file mode 100644 index 000000000..1c06c413d --- /dev/null +++ b/.history/style/index_20230609154945.css @@ -0,0 +1 @@ +nav \ No newline at end of file diff --git a/.history/style/index_20230609154947.css b/.history/style/index_20230609154947.css new file mode 100644 index 000000000..4a995f6fc --- /dev/null +++ b/.history/style/index_20230609154947.css @@ -0,0 +1,3 @@ +nav{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609154949.css b/.history/style/index_20230609154949.css new file mode 100644 index 000000000..9a6c75b47 --- /dev/null +++ b/.history/style/index_20230609154949.css @@ -0,0 +1,3 @@ +nav{ + display +} \ No newline at end of file diff --git a/.history/style/index_20230609154952.css b/.history/style/index_20230609154952.css new file mode 100644 index 000000000..5ad258fcc --- /dev/null +++ b/.history/style/index_20230609154952.css @@ -0,0 +1,4 @@ +nav{ + display: flex + ; +} \ No newline at end of file diff --git a/.history/style/index_20230609154954.css b/.history/style/index_20230609154954.css new file mode 100644 index 000000000..6aa121ef6 --- /dev/null +++ b/.history/style/index_20230609154954.css @@ -0,0 +1,3 @@ +nav{ + display: flex; +} \ No newline at end of file diff --git a/.history/style/index_20230609154956.css b/.history/style/index_20230609154956.css new file mode 100644 index 000000000..6aa121ef6 --- /dev/null +++ b/.history/style/index_20230609154956.css @@ -0,0 +1,3 @@ +nav{ + display: flex; +} \ No newline at end of file diff --git a/.history/style/index_20230609155000.css b/.history/style/index_20230609155000.css new file mode 100644 index 000000000..35304df8a --- /dev/null +++ b/.history/style/index_20230609155000.css @@ -0,0 +1,4 @@ +nav{ + display: flex; + +} \ No newline at end of file diff --git a/.history/style/index_20230609155009.css b/.history/style/index_20230609155009.css new file mode 100644 index 000000000..76a2a13cf --- /dev/null +++ b/.history/style/index_20230609155009.css @@ -0,0 +1,4 @@ +nav{ + display: flex; + justify-content: ; +} \ No newline at end of file diff --git a/.history/style/index_20230609155011.css b/.history/style/index_20230609155011.css new file mode 100644 index 000000000..03c525801 --- /dev/null +++ b/.history/style/index_20230609155011.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/index.html b/index.html index fe54a75bc..e3e550223 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,11 @@

SEAN KIPINA

- +
+ +

SEAN KIPINA

+ My Projects +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index e69de29bb..03c525801 100644 --- a/style/index.css +++ b/style/index.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} \ No newline at end of file From 48de100d0dd4c80cd0750999c9513f9809e5a5f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 16:13:36 +0300 Subject: [PATCH 28/40] Added image to button and a footer. --- .history/index_20230609155913.html | 27 +++++++++++++++++++ .history/index_20230609155926.html | 27 +++++++++++++++++++ .history/index_20230609155927.html | 27 +++++++++++++++++++ .history/index_20230609155928.html | 27 +++++++++++++++++++ .history/index_20230609155950.html | 28 +++++++++++++++++++ .history/index_20230609155956.html | 29 ++++++++++++++++++++ .history/index_20230609155959.html | 29 ++++++++++++++++++++ .history/index_20230609160001.html | 29 ++++++++++++++++++++ .history/index_20230609160002.html | 29 ++++++++++++++++++++ .history/index_20230609160006.html | 29 ++++++++++++++++++++ .history/index_20230609160009.html | 29 ++++++++++++++++++++ .history/index_20230609160011.html | 29 ++++++++++++++++++++ .history/index_20230609160014.html | 29 ++++++++++++++++++++ .history/index_20230609160015.html | 29 ++++++++++++++++++++ .history/index_20230609160023.html | 28 +++++++++++++++++++ .history/index_20230609160025.html | 28 +++++++++++++++++++ .history/index_20230609160035.html | 28 +++++++++++++++++++ .history/index_20230609160036.html | 28 +++++++++++++++++++ .history/index_20230609160051.html | 29 ++++++++++++++++++++ .history/index_20230609160101.html | 29 ++++++++++++++++++++ .history/index_20230609160106.html | 30 +++++++++++++++++++++ .history/index_20230609160107.html | 30 +++++++++++++++++++++ .history/index_20230609160108.html | 30 +++++++++++++++++++++ .history/index_20230609160113.html | 30 +++++++++++++++++++++ .history/index_20230609160116.html | 30 +++++++++++++++++++++ .history/index_20230609160118.html | 30 +++++++++++++++++++++ .history/index_20230609160119.html | 30 +++++++++++++++++++++ .history/index_20230609160138.html | 31 +++++++++++++++++++++ .history/index_20230609160143.html | 31 +++++++++++++++++++++ .history/index_20230609160146.html | 31 +++++++++++++++++++++ .history/index_20230609160148.html | 31 +++++++++++++++++++++ .history/index_20230609160150.html | 31 +++++++++++++++++++++ .history/index_20230609160153.html | 31 +++++++++++++++++++++ .history/index_20230609160214.html | 30 +++++++++++++++++++++ .history/index_20230609160220.html | 30 +++++++++++++++++++++ .history/index_20230609160222.html | 31 +++++++++++++++++++++ .history/index_20230609160223.html | 31 +++++++++++++++++++++ .history/index_20230609160242.html | 30 +++++++++++++++++++++ .history/index_20230609160244.html | 31 +++++++++++++++++++++ .history/index_20230609160254.html | 32 ++++++++++++++++++++++ .history/index_20230609160257.html | 33 +++++++++++++++++++++++ .history/index_20230609160300.html | 35 ++++++++++++++++++++++++ .history/index_20230609160329.html | 34 +++++++++++++++++++++++ .history/index_20230609160357.html | 33 +++++++++++++++++++++++ .history/index_20230609160406.html | 34 +++++++++++++++++++++++ .history/index_20230609160408.html | 34 +++++++++++++++++++++++ .history/index_20230609160412.html | 35 ++++++++++++++++++++++++ .history/index_20230609161154.html | 35 ++++++++++++++++++++++++ .history/index_20230609161156.html | 36 +++++++++++++++++++++++++ .history/index_20230609161241.html | 36 +++++++++++++++++++++++++ .history/index_20230609161246.html | 36 +++++++++++++++++++++++++ .history/index_20230609161251.html | 36 +++++++++++++++++++++++++ .history/index_20230609161259.html | 36 +++++++++++++++++++++++++ .history/index_20230609161303.html | 36 +++++++++++++++++++++++++ .history/index_20230609161304.html | 36 +++++++++++++++++++++++++ .history/style/index_20230609155451.css | 4 +++ .history/style/index_20230609155457.css | 5 ++++ .history/style/index_20230609155500.css | 12 +++++++++ .history/style/index_20230609155506.css | 8 ++++++ .history/style/index_20230609155509.css | 9 +++++++ .history/style/index_20230609155515.css | 10 +++++++ .history/style/index_20230609155517.css | 10 +++++++ .history/style/index_20230609155518.css | 12 +++++++++ .history/style/index_20230609155521.css | 12 +++++++++ .history/style/index_20230609155522.css | 11 ++++++++ .history/style/index_20230609155523.css | 13 +++++++++ .history/style/index_20230609155537.css | 13 +++++++++ .history/style/index_20230609155545.css | 11 ++++++++ .history/style/index_20230609155549.css | 13 +++++++++ .history/style/index_20230609155623.css | 13 +++++++++ .history/style/index_20230609155636.css | 13 +++++++++ .history/style/index_20230609155642.css | 13 +++++++++ .history/style/index_20230609155646.css | 13 +++++++++ .history/style/index_20230609155650.css | 13 +++++++++ .history/style/index_20230609155654.css | 14 ++++++++++ .history/style/index_20230609155705.css | 14 ++++++++++ .history/style/index_20230609155706.css | 14 ++++++++++ .history/style/index_20230609155720.css | 15 +++++++++++ .history/style/index_20230609155745.css | 16 +++++++++++ .history/style/index_20230609155752.css | 16 +++++++++++ .history/style/index_20230609155754.css | 17 ++++++++++++ .history/style/index_20230609155758.css | 17 ++++++++++++ .history/style/index_20230609155821.css | 18 +++++++++++++ .history/style/index_20230609155824.css | 18 +++++++++++++ .history/style/index_20230609155825.css | 19 +++++++++++++ .history/style/index_20230609155829.css | 19 +++++++++++++ index.html | 27 ++++++++++++------- style/index.css | 15 +++++++++++ 88 files changed, 2140 insertions(+), 10 deletions(-) create mode 100644 .history/index_20230609155913.html create mode 100644 .history/index_20230609155926.html create mode 100644 .history/index_20230609155927.html create mode 100644 .history/index_20230609155928.html create mode 100644 .history/index_20230609155950.html create mode 100644 .history/index_20230609155956.html create mode 100644 .history/index_20230609155959.html create mode 100644 .history/index_20230609160001.html create mode 100644 .history/index_20230609160002.html create mode 100644 .history/index_20230609160006.html create mode 100644 .history/index_20230609160009.html create mode 100644 .history/index_20230609160011.html create mode 100644 .history/index_20230609160014.html create mode 100644 .history/index_20230609160015.html create mode 100644 .history/index_20230609160023.html create mode 100644 .history/index_20230609160025.html create mode 100644 .history/index_20230609160035.html create mode 100644 .history/index_20230609160036.html create mode 100644 .history/index_20230609160051.html create mode 100644 .history/index_20230609160101.html create mode 100644 .history/index_20230609160106.html create mode 100644 .history/index_20230609160107.html create mode 100644 .history/index_20230609160108.html create mode 100644 .history/index_20230609160113.html create mode 100644 .history/index_20230609160116.html create mode 100644 .history/index_20230609160118.html create mode 100644 .history/index_20230609160119.html create mode 100644 .history/index_20230609160138.html create mode 100644 .history/index_20230609160143.html create mode 100644 .history/index_20230609160146.html create mode 100644 .history/index_20230609160148.html create mode 100644 .history/index_20230609160150.html create mode 100644 .history/index_20230609160153.html create mode 100644 .history/index_20230609160214.html create mode 100644 .history/index_20230609160220.html create mode 100644 .history/index_20230609160222.html create mode 100644 .history/index_20230609160223.html create mode 100644 .history/index_20230609160242.html create mode 100644 .history/index_20230609160244.html create mode 100644 .history/index_20230609160254.html create mode 100644 .history/index_20230609160257.html create mode 100644 .history/index_20230609160300.html create mode 100644 .history/index_20230609160329.html create mode 100644 .history/index_20230609160357.html create mode 100644 .history/index_20230609160406.html create mode 100644 .history/index_20230609160408.html create mode 100644 .history/index_20230609160412.html create mode 100644 .history/index_20230609161154.html create mode 100644 .history/index_20230609161156.html create mode 100644 .history/index_20230609161241.html create mode 100644 .history/index_20230609161246.html create mode 100644 .history/index_20230609161251.html create mode 100644 .history/index_20230609161259.html create mode 100644 .history/index_20230609161303.html create mode 100644 .history/index_20230609161304.html create mode 100644 .history/style/index_20230609155451.css create mode 100644 .history/style/index_20230609155457.css create mode 100644 .history/style/index_20230609155500.css create mode 100644 .history/style/index_20230609155506.css create mode 100644 .history/style/index_20230609155509.css create mode 100644 .history/style/index_20230609155515.css create mode 100644 .history/style/index_20230609155517.css create mode 100644 .history/style/index_20230609155518.css create mode 100644 .history/style/index_20230609155521.css create mode 100644 .history/style/index_20230609155522.css create mode 100644 .history/style/index_20230609155523.css create mode 100644 .history/style/index_20230609155537.css create mode 100644 .history/style/index_20230609155545.css create mode 100644 .history/style/index_20230609155549.css create mode 100644 .history/style/index_20230609155623.css create mode 100644 .history/style/index_20230609155636.css create mode 100644 .history/style/index_20230609155642.css create mode 100644 .history/style/index_20230609155646.css create mode 100644 .history/style/index_20230609155650.css create mode 100644 .history/style/index_20230609155654.css create mode 100644 .history/style/index_20230609155705.css create mode 100644 .history/style/index_20230609155706.css create mode 100644 .history/style/index_20230609155720.css create mode 100644 .history/style/index_20230609155745.css create mode 100644 .history/style/index_20230609155752.css create mode 100644 .history/style/index_20230609155754.css create mode 100644 .history/style/index_20230609155758.css create mode 100644 .history/style/index_20230609155821.css create mode 100644 .history/style/index_20230609155824.css create mode 100644 .history/style/index_20230609155825.css create mode 100644 .history/style/index_20230609155829.css diff --git a/.history/index_20230609155913.html b/.history/index_20230609155913.html new file mode 100644 index 000000000..c7aa54fa9 --- /dev/null +++ b/.history/index_20230609155913.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155926.html b/.history/index_20230609155926.html new file mode 100644 index 000000000..04cb0f4e8 --- /dev/null +++ b/.history/index_20230609155926.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ < + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155927.html b/.history/index_20230609155927.html new file mode 100644 index 000000000..4d5cefe50 --- /dev/null +++ b/.history/index_20230609155927.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ <> + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155928.html b/.history/index_20230609155928.html new file mode 100644 index 000000000..e1b956d3b --- /dev/null +++ b/.history/index_20230609155928.html @@ -0,0 +1,27 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155950.html b/.history/index_20230609155950.html new file mode 100644 index 000000000..974c9b14e --- /dev/null +++ b/.history/index_20230609155950.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINA

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155956.html b/.history/index_20230609155956.html new file mode 100644 index 000000000..d74a908d7 --- /dev/null +++ b/.history/index_20230609155956.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPIN +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609155959.html b/.history/index_20230609155959.html new file mode 100644 index 000000000..d74a908d7 --- /dev/null +++ b/.history/index_20230609155959.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPIN +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160001.html b/.history/index_20230609160001.html new file mode 100644 index 000000000..44a203580 --- /dev/null +++ b/.history/index_20230609160001.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPIN¨ +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160002.html b/.history/index_20230609160002.html new file mode 100644 index 000000000..569dfde5e --- /dev/null +++ b/.history/index_20230609160002.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160006.html b/.history/index_20230609160006.html new file mode 100644 index 000000000..d74a908d7 --- /dev/null +++ b/.history/index_20230609160006.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPIN +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160009.html b/.history/index_20230609160009.html new file mode 100644 index 000000000..d74a908d7 --- /dev/null +++ b/.history/index_20230609160009.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPIN +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160011.html b/.history/index_20230609160011.html new file mode 100644 index 000000000..569dfde5e --- /dev/null +++ b/.history/index_20230609160011.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160014.html b/.history/index_20230609160014.html new file mode 100644 index 000000000..569dfde5e --- /dev/null +++ b/.history/index_20230609160014.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160015.html b/.history/index_20230609160015.html new file mode 100644 index 000000000..569dfde5e --- /dev/null +++ b/.history/index_20230609160015.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ +

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160023.html b/.history/index_20230609160023.html new file mode 100644 index 000000000..706bd33f6 --- /dev/null +++ b/.history/index_20230609160023.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160025.html b/.history/index_20230609160025.html new file mode 100644 index 000000000..3cbd9d4b0 --- /dev/null +++ b/.history/index_20230609160025.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160035.html b/.history/index_20230609160035.html new file mode 100644 index 000000000..8f071fc5d --- /dev/null +++ b/.history/index_20230609160035.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+<> + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160036.html b/.history/index_20230609160036.html new file mode 100644 index 000000000..e0972bd6d --- /dev/null +++ b/.history/index_20230609160036.html @@ -0,0 +1,28 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160051.html b/.history/index_20230609160051.html new file mode 100644 index 000000000..0b4e1e3d4 --- /dev/null +++ b/.history/index_20230609160051.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160101.html b/.history/index_20230609160101.html new file mode 100644 index 000000000..760c24119 --- /dev/null +++ b/.history/index_20230609160101.html @@ -0,0 +1,29 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160106.html b/.history/index_20230609160106.html new file mode 100644 index 000000000..62dd87ff4 --- /dev/null +++ b/.history/index_20230609160106.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160107.html b/.history/index_20230609160107.html new file mode 100644 index 000000000..94d788f92 --- /dev/null +++ b/.history/index_20230609160107.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160108.html b/.history/index_20230609160108.html new file mode 100644 index 000000000..14778379f --- /dev/null +++ b/.history/index_20230609160108.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160113.html b/.history/index_20230609160113.html new file mode 100644 index 000000000..d7d17532b --- /dev/null +++ b/.history/index_20230609160113.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+ SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160116.html b/.history/index_20230609160116.html new file mode 100644 index 000000000..bb59da7ea --- /dev/null +++ b/.history/index_20230609160116.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+ + + + + + + + +

+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160118.html b/.history/index_20230609160118.html new file mode 100644 index 000000000..34577b72f --- /dev/null +++ b/.history/index_20230609160118.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+ <>SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160119.html b/.history/index_20230609160119.html new file mode 100644 index 000000000..e1384f1be --- /dev/null +++ b/.history/index_20230609160119.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160138.html b/.history/index_20230609160138.html new file mode 100644 index 000000000..d63e2ff71 --- /dev/null +++ b/.history/index_20230609160138.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160143.html b/.history/index_20230609160143.html new file mode 100644 index 000000000..4d3d753fc --- /dev/null +++ b/.history/index_20230609160143.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + <> + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160146.html b/.history/index_20230609160146.html new file mode 100644 index 000000000..829a4f252 --- /dev/null +++ b/.history/index_20230609160146.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + nav> + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160148.html b/.history/index_20230609160148.html new file mode 100644 index 000000000..efb6f6eb1 --- /dev/null +++ b/.history/index_20230609160148.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + > + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160150.html b/.history/index_20230609160150.html new file mode 100644 index 000000000..1b2ddb7ed --- /dev/null +++ b/.history/index_20230609160150.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160153.html b/.history/index_20230609160153.html new file mode 100644 index 000000000..a60a5b3d0 --- /dev/null +++ b/.history/index_20230609160153.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160214.html b/.history/index_20230609160214.html new file mode 100644 index 000000000..75edfee2c --- /dev/null +++ b/.history/index_20230609160214.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160220.html b/.history/index_20230609160220.html new file mode 100644 index 000000000..388001631 --- /dev/null +++ b/.history/index_20230609160220.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160222.html b/.history/index_20230609160222.html new file mode 100644 index 000000000..4e32fcfeb --- /dev/null +++ b/.history/index_20230609160222.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160223.html b/.history/index_20230609160223.html new file mode 100644 index 000000000..e989f4776 --- /dev/null +++ b/.history/index_20230609160223.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160242.html b/.history/index_20230609160242.html new file mode 100644 index 000000000..0e9185bb4 --- /dev/null +++ b/.history/index_20230609160242.html @@ -0,0 +1,30 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160244.html b/.history/index_20230609160244.html new file mode 100644 index 000000000..adaa6f5af --- /dev/null +++ b/.history/index_20230609160244.html @@ -0,0 +1,31 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160254.html b/.history/index_20230609160254.html new file mode 100644 index 000000000..ca07f17a6 --- /dev/null +++ b/.history/index_20230609160254.html @@ -0,0 +1,32 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ + + + \ No newline at end of file diff --git a/.history/index_20230609160257.html b/.history/index_20230609160257.html new file mode 100644 index 000000000..715ade0aa --- /dev/null +++ b/.history/index_20230609160257.html @@ -0,0 +1,33 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ + <> + + + \ No newline at end of file diff --git a/.history/index_20230609160300.html b/.history/index_20230609160300.html new file mode 100644 index 000000000..f9ebefbe7 --- /dev/null +++ b/.history/index_20230609160300.html @@ -0,0 +1,35 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

+

SEAN KIPINÄ

+ + + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160329.html b/.history/index_20230609160329.html new file mode 100644 index 000000000..2f8c32537 --- /dev/null +++ b/.history/index_20230609160329.html @@ -0,0 +1,34 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

SEAN KIPINÄ

+ + + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160357.html b/.history/index_20230609160357.html new file mode 100644 index 000000000..c679e20fc --- /dev/null +++ b/.history/index_20230609160357.html @@ -0,0 +1,33 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+

SEAN KIPINÄ

+ + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160406.html b/.history/index_20230609160406.html new file mode 100644 index 000000000..f6ea26746 --- /dev/null +++ b/.history/index_20230609160406.html @@ -0,0 +1,34 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ <> +

SEAN KIPINÄ

+ + + + + + +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160408.html b/.history/index_20230609160408.html new file mode 100644 index 000000000..5ca0d179d --- /dev/null +++ b/.history/index_20230609160408.html @@ -0,0 +1,34 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609160412.html b/.history/index_20230609160412.html new file mode 100644 index 000000000..8813747ad --- /dev/null +++ b/.history/index_20230609160412.html @@ -0,0 +1,35 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609161154.html b/.history/index_20230609161154.html new file mode 100644 index 000000000..c5e274b84 --- /dev/null +++ b/.history/index_20230609161154.html @@ -0,0 +1,35 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609161156.html b/.history/index_20230609161156.html new file mode 100644 index 000000000..edc7978a7 --- /dev/null +++ b/.history/index_20230609161156.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609161241.html b/.history/index_20230609161241.html new file mode 100644 index 000000000..952c9ea30 --- /dev/null +++ b/.history/index_20230609161241.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609161246.html b/.history/index_20230609161246.html new file mode 100644 index 000000000..b33b23481 --- /dev/null +++ b/.history/index_20230609161246.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/.history/index_20230609161251.html b/.history/index_20230609161251.html new file mode 100644 index 000000000..278b298f1 --- /dev/null +++ b/.history/index_20230609161251.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230609161259.html b/.history/index_20230609161259.html new file mode 100644 index 000000000..bde48bd4c --- /dev/null +++ b/.history/index_20230609161259.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230609161303.html b/.history/index_20230609161303.html new file mode 100644 index 000000000..3167f282f --- /dev/null +++ b/.history/index_20230609161303.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609161304.html b/.history/index_20230609161304.html new file mode 100644 index 000000000..aca4ea8d2 --- /dev/null +++ b/.history/index_20230609161304.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/style/index_20230609155451.css b/.history/style/index_20230609155451.css new file mode 100644 index 000000000..170b9bce0 --- /dev/null +++ b/.history/style/index_20230609155451.css @@ -0,0 +1,4 @@ +nav { + display: flex; + justify-content: space-between; +} diff --git a/.history/style/index_20230609155457.css b/.history/style/index_20230609155457.css new file mode 100644 index 000000000..9dd67f623 --- /dev/null +++ b/.history/style/index_20230609155457.css @@ -0,0 +1,5 @@ +nav { + display: flex; + justify-content: space-between; +} +.topsection { \ No newline at end of file diff --git a/.history/style/index_20230609155500.css b/.history/style/index_20230609155500.css new file mode 100644 index 000000000..e353f10e8 --- /dev/null +++ b/.history/style/index_20230609155500.css @@ -0,0 +1,12 @@ +nav { + display: flex; + justify-content: space-between; +} +.topsection { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + background-color: #fff; + border-bottom: 1px solid #e6e6e6; +} \ No newline at end of file diff --git a/.history/style/index_20230609155506.css b/.history/style/index_20230609155506.css new file mode 100644 index 000000000..c0d63a658 --- /dev/null +++ b/.history/style/index_20230609155506.css @@ -0,0 +1,8 @@ +nav { + display: flex; + justify-content: space-between; +} +.topsection { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/.history/style/index_20230609155509.css b/.history/style/index_20230609155509.css new file mode 100644 index 000000000..a973d77b1 --- /dev/null +++ b/.history/style/index_20230609155509.css @@ -0,0 +1,9 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609155515.css b/.history/style/index_20230609155515.css new file mode 100644 index 000000000..d03ff6c11 --- /dev/null +++ b/.history/style/index_20230609155515.css @@ -0,0 +1,10 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} +.image \ No newline at end of file diff --git a/.history/style/index_20230609155517.css b/.history/style/index_20230609155517.css new file mode 100644 index 000000000..5dfcbcf21 --- /dev/null +++ b/.history/style/index_20230609155517.css @@ -0,0 +1,10 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} +.image-button \ No newline at end of file diff --git a/.history/style/index_20230609155518.css b/.history/style/index_20230609155518.css new file mode 100644 index 000000000..8623b6f5e --- /dev/null +++ b/.history/style/index_20230609155518.css @@ -0,0 +1,12 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} +.image-button{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609155521.css b/.history/style/index_20230609155521.css new file mode 100644 index 000000000..88d16f5d0 --- /dev/null +++ b/.history/style/index_20230609155521.css @@ -0,0 +1,12 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} +.image-button { + +} \ No newline at end of file diff --git a/.history/style/index_20230609155522.css b/.history/style/index_20230609155522.css new file mode 100644 index 000000000..530076730 --- /dev/null +++ b/.history/style/index_20230609155522.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button {} \ No newline at end of file diff --git a/.history/style/index_20230609155523.css b/.history/style/index_20230609155523.css new file mode 100644 index 000000000..18fa79268 --- /dev/null +++ b/.history/style/index_20230609155523.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + +} \ No newline at end of file diff --git a/.history/style/index_20230609155537.css b/.history/style/index_20230609155537.css new file mode 100644 index 000000000..151e22f5a --- /dev/null +++ b/.history/style/index_20230609155537.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +image-button { + +} \ No newline at end of file diff --git a/.history/style/index_20230609155545.css b/.history/style/index_20230609155545.css new file mode 100644 index 000000000..530076730 --- /dev/null +++ b/.history/style/index_20230609155545.css @@ -0,0 +1,11 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button {} \ No newline at end of file diff --git a/.history/style/index_20230609155549.css b/.history/style/index_20230609155549.css new file mode 100644 index 000000000..18fa79268 --- /dev/null +++ b/.history/style/index_20230609155549.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + +} \ No newline at end of file diff --git a/.history/style/index_20230609155623.css b/.history/style/index_20230609155623.css new file mode 100644 index 000000000..342b176b8 --- /dev/null +++ b/.history/style/index_20230609155623.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + backgr +} \ No newline at end of file diff --git a/.history/style/index_20230609155636.css b/.history/style/index_20230609155636.css new file mode 100644 index 000000000..47713f4ea --- /dev/null +++ b/.history/style/index_20230609155636.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url +} \ No newline at end of file diff --git a/.history/style/index_20230609155642.css b/.history/style/index_20230609155642.css new file mode 100644 index 000000000..c31fa2fb5 --- /dev/null +++ b/.history/style/index_20230609155642.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url() +} \ No newline at end of file diff --git a/.history/style/index_20230609155646.css b/.history/style/index_20230609155646.css new file mode 100644 index 000000000..cb9bbc9a3 --- /dev/null +++ b/.history/style/index_20230609155646.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/") +} \ No newline at end of file diff --git a/.history/style/index_20230609155650.css b/.history/style/index_20230609155650.css new file mode 100644 index 000000000..cb9bbc9a3 --- /dev/null +++ b/.history/style/index_20230609155650.css @@ -0,0 +1,13 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/") +} \ No newline at end of file diff --git a/.history/style/index_20230609155654.css b/.history/style/index_20230609155654.css new file mode 100644 index 000000000..92cf98ca6 --- /dev/null +++ b/.history/style/index_20230609155654.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/"); + +} \ No newline at end of file diff --git a/.history/style/index_20230609155705.css b/.history/style/index_20230609155705.css new file mode 100644 index 000000000..437732e67 --- /dev/null +++ b/.history/style/index_20230609155705.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/"); + +} \ No newline at end of file diff --git a/.history/style/index_20230609155706.css b/.history/style/index_20230609155706.css new file mode 100644 index 000000000..ac32bfe20 --- /dev/null +++ b/.history/style/index_20230609155706.css @@ -0,0 +1,14 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + +} \ No newline at end of file diff --git a/.history/style/index_20230609155720.css b/.history/style/index_20230609155720.css new file mode 100644 index 000000000..73009c27d --- /dev/null +++ b/.history/style/index_20230609155720.css @@ -0,0 +1,15 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} \ No newline at end of file diff --git a/.history/style/index_20230609155745.css b/.history/style/index_20230609155745.css new file mode 100644 index 000000000..cf8f5f359 --- /dev/null +++ b/.history/style/index_20230609155745.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color +} \ No newline at end of file diff --git a/.history/style/index_20230609155752.css b/.history/style/index_20230609155752.css new file mode 100644 index 000000000..ca49f6e40 --- /dev/null +++ b/.history/style/index_20230609155752.css @@ -0,0 +1,16 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; +} \ No newline at end of file diff --git a/.history/style/index_20230609155754.css b/.history/style/index_20230609155754.css new file mode 100644 index 000000000..a42fc1546 --- /dev/null +++ b/.history/style/index_20230609155754.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + fond +} \ No newline at end of file diff --git a/.history/style/index_20230609155758.css b/.history/style/index_20230609155758.css new file mode 100644 index 000000000..3795755cd --- /dev/null +++ b/.history/style/index_20230609155758.css @@ -0,0 +1,17 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; +} \ No newline at end of file diff --git a/.history/style/index_20230609155821.css b/.history/style/index_20230609155821.css new file mode 100644 index 000000000..3f09fc77b --- /dev/null +++ b/.history/style/index_20230609155821.css @@ -0,0 +1,18 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: ; +} \ No newline at end of file diff --git a/.history/style/index_20230609155824.css b/.history/style/index_20230609155824.css new file mode 100644 index 000000000..cbb77b0f7 --- /dev/null +++ b/.history/style/index_20230609155824.css @@ -0,0 +1,18 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; +} \ No newline at end of file diff --git a/.history/style/index_20230609155825.css b/.history/style/index_20230609155825.css new file mode 100644 index 000000000..8c0a135b1 --- /dev/null +++ b/.history/style/index_20230609155825.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + +} \ No newline at end of file diff --git a/.history/style/index_20230609155829.css b/.history/style/index_20230609155829.css new file mode 100644 index 000000000..82f8ce407 --- /dev/null +++ b/.history/style/index_20230609155829.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} \ No newline at end of file diff --git a/index.html b/index.html index e3e550223..aca4ea8d2 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,26 @@
- - - - - +

SEAN KIPINÄ

+ + + + + + +
+
- -

SEAN KIPINA

- My Projects +
+ +
+ +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 03c525801..82f8ce407 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,19 @@ nav { display: flex; justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; } \ No newline at end of file From 1193e0aaaed59e7aa223adfb25772af64b710951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 16:51:56 +0300 Subject: [PATCH 29/40] Buttons now are showing different colors on hovering. --- .history/index_20230609163114.html | 36 ++++++++++++++ .history/index_20230609163116.html | 37 ++++++++++++++ .history/index_20230609163118.html | 39 +++++++++++++++ .history/index_20230609163124.html | 39 +++++++++++++++ .history/index_20230609163127.html | 39 +++++++++++++++ .history/index_20230609163130.html | 39 +++++++++++++++ .history/index_20230609163134.html | 39 +++++++++++++++ .history/index_20230609163138.html | 41 +++++++++++++++ .history/index_20230609163140.html | 41 +++++++++++++++ .history/index_20230609163148.html | 41 +++++++++++++++ .history/index_20230609163150.html | 41 +++++++++++++++ .history/index_20230609163156.html | 41 +++++++++++++++ .history/index_20230609163201.html | 43 ++++++++++++++++ .history/index_20230609163247.html | 43 ++++++++++++++++ .history/index_20230609163309.html | 43 ++++++++++++++++ .history/index_20230609163312.html | 43 ++++++++++++++++ .history/index_20230609163315.html | 43 ++++++++++++++++ .history/index_20230609163318.html | 43 ++++++++++++++++ .history/index_20230609163322.html | 43 ++++++++++++++++ .history/index_20230609163326.html | 43 ++++++++++++++++ .history/index_20230609163331.html | 43 ++++++++++++++++ .history/index_20230609163336.html | 43 ++++++++++++++++ .history/index_20230609163337.html | 43 ++++++++++++++++ .history/index_20230609163338.html | 43 ++++++++++++++++ .history/index_20230609163347.html | 43 ++++++++++++++++ .history/index_20230609163355.html | 43 ++++++++++++++++ .history/index_20230609163358.html | 44 +++++++++++++++++ .history/index_20230609163359.html | 44 +++++++++++++++++ .history/index_20230609163403.html | 44 +++++++++++++++++ .history/index_20230609163415.html | 44 +++++++++++++++++ .history/index_20230609163426.html | 49 ++++++++++++++++++ .history/index_20230609163427.html | 49 ++++++++++++++++++ .history/index_20230609163429.html | 49 ++++++++++++++++++ .history/index_20230609163430.html | 49 ++++++++++++++++++ .history/index_20230609163432.html | 49 ++++++++++++++++++ .history/index_20230609163435.html | 49 ++++++++++++++++++ .history/index_20230609163519.html | 44 +++++++++++++++++ .history/index_20230609163726.html | 52 +++++++++++++++++++ .history/index_20230609163729.html | 52 +++++++++++++++++++ .history/index_20230609163732.html | 52 +++++++++++++++++++ .history/index_20230609163806.html | 66 +++++++++++++++++++++++++ .history/index_20230609163814.html | 66 +++++++++++++++++++++++++ .history/index_20230609163816.html | 66 +++++++++++++++++++++++++ .history/index_20230609163823.html | 66 +++++++++++++++++++++++++ .history/style/index_20230609161846.css | 19 +++++++ .history/style/index_20230609161848.css | 20 ++++++++ .history/style/index_20230609161849.css | 21 ++++++++ .history/style/index_20230609161855.css | 23 +++++++++ .history/style/index_20230609161858.css | 23 +++++++++ .history/style/index_20230609161906.css | 23 +++++++++ .history/style/index_20230609161908.css | 23 +++++++++ .history/style/index_20230609161911.css | 24 +++++++++ .history/style/index_20230609161914.css | 24 +++++++++ .history/style/index_20230609161916.css | 24 +++++++++ .history/style/index_20230609161921.css | 25 ++++++++++ .history/style/index_20230609163530.css | 26 ++++++++++ .history/style/index_20230609163536.css | 28 +++++++++++ .history/style/index_20230609163539.css | 28 +++++++++++ .history/style/index_20230609163540.css | 28 +++++++++++ .history/style/index_20230609163543.css | 28 +++++++++++ .history/style/index_20230609163551.css | 28 +++++++++++ .history/style/index_20230609163552.css | 29 +++++++++++ .history/style/index_20230609163553.css | 30 +++++++++++ .history/style/index_20230609163556.css | 30 +++++++++++ .history/style/index_20230609163609.css | 31 ++++++++++++ .history/style/index_20230609163610.css | 31 ++++++++++++ .history/style/index_20230609163612.css | 31 ++++++++++++ .history/style/index_20230609163617.css | 33 +++++++++++++ .history/style/index_20230609163618.css | 34 +++++++++++++ .history/style/index_20230609163621.css | 33 +++++++++++++ .history/style/index_20230609163622.css | 34 +++++++++++++ .history/style/index_20230609163633.css | 35 +++++++++++++ .history/style/index_20230609163636.css | 35 +++++++++++++ .history/style/index_20230609163707.css | 36 ++++++++++++++ .history/style/index_20230609163942.css | 38 ++++++++++++++ .history/style/index_20230609163944.css | 40 +++++++++++++++ .history/style/index_20230609163950.css | 40 +++++++++++++++ .history/style/index_20230609163953.css | 42 ++++++++++++++++ .history/style/index_20230609163955.css | 42 ++++++++++++++++ .history/style/index_20230609163957.css | 42 ++++++++++++++++ .history/style/index_20230609164000.css | 44 +++++++++++++++++ .history/style/index_20230609164023.css | 44 +++++++++++++++++ .history/style/index_20230609164027.css | 42 ++++++++++++++++ .history/style/index_20230609164042.css | 44 +++++++++++++++++ .history/style/index_20230609164046.css | 44 +++++++++++++++++ .history/style/index_20230609164054.css | 44 +++++++++++++++++ .history/style/index_20230609164101.css | 44 +++++++++++++++++ .history/style/index_20230609164107.css | 45 +++++++++++++++++ .history/style/index_20230609164112.css | 45 +++++++++++++++++ .history/style/index_20230609164115.css | 45 +++++++++++++++++ .history/style/index_20230609164242.css | 47 ++++++++++++++++++ .history/style/index_20230609164258.css | 49 ++++++++++++++++++ .history/style/index_20230609164324.css | 49 ++++++++++++++++++ .history/style/index_20230609164333.css | 49 ++++++++++++++++++ .history/style/index_20230609164341.css | 49 ++++++++++++++++++ .history/style/index_20230609164422.css | 53 ++++++++++++++++++++ .history/style/index_20230609164430.css | 53 ++++++++++++++++++++ .history/style/index_20230609164431.css | 53 ++++++++++++++++++++ .history/style/index_20230609164433.css | 53 ++++++++++++++++++++ .history/style/index_20230609164439.css | 54 ++++++++++++++++++++ .history/style/index_20230609164445.css | 54 ++++++++++++++++++++ .history/style/index_20230609165053.css | 54 ++++++++++++++++++++ .history/style/index_20230609165103.css | 54 ++++++++++++++++++++ index.html | 32 +++++++++++- style/index.css | 35 +++++++++++++ 105 files changed, 4268 insertions(+), 1 deletion(-) create mode 100644 .history/index_20230609163114.html create mode 100644 .history/index_20230609163116.html create mode 100644 .history/index_20230609163118.html create mode 100644 .history/index_20230609163124.html create mode 100644 .history/index_20230609163127.html create mode 100644 .history/index_20230609163130.html create mode 100644 .history/index_20230609163134.html create mode 100644 .history/index_20230609163138.html create mode 100644 .history/index_20230609163140.html create mode 100644 .history/index_20230609163148.html create mode 100644 .history/index_20230609163150.html create mode 100644 .history/index_20230609163156.html create mode 100644 .history/index_20230609163201.html create mode 100644 .history/index_20230609163247.html create mode 100644 .history/index_20230609163309.html create mode 100644 .history/index_20230609163312.html create mode 100644 .history/index_20230609163315.html create mode 100644 .history/index_20230609163318.html create mode 100644 .history/index_20230609163322.html create mode 100644 .history/index_20230609163326.html create mode 100644 .history/index_20230609163331.html create mode 100644 .history/index_20230609163336.html create mode 100644 .history/index_20230609163337.html create mode 100644 .history/index_20230609163338.html create mode 100644 .history/index_20230609163347.html create mode 100644 .history/index_20230609163355.html create mode 100644 .history/index_20230609163358.html create mode 100644 .history/index_20230609163359.html create mode 100644 .history/index_20230609163403.html create mode 100644 .history/index_20230609163415.html create mode 100644 .history/index_20230609163426.html create mode 100644 .history/index_20230609163427.html create mode 100644 .history/index_20230609163429.html create mode 100644 .history/index_20230609163430.html create mode 100644 .history/index_20230609163432.html create mode 100644 .history/index_20230609163435.html create mode 100644 .history/index_20230609163519.html create mode 100644 .history/index_20230609163726.html create mode 100644 .history/index_20230609163729.html create mode 100644 .history/index_20230609163732.html create mode 100644 .history/index_20230609163806.html create mode 100644 .history/index_20230609163814.html create mode 100644 .history/index_20230609163816.html create mode 100644 .history/index_20230609163823.html create mode 100644 .history/style/index_20230609161846.css create mode 100644 .history/style/index_20230609161848.css create mode 100644 .history/style/index_20230609161849.css create mode 100644 .history/style/index_20230609161855.css create mode 100644 .history/style/index_20230609161858.css create mode 100644 .history/style/index_20230609161906.css create mode 100644 .history/style/index_20230609161908.css create mode 100644 .history/style/index_20230609161911.css create mode 100644 .history/style/index_20230609161914.css create mode 100644 .history/style/index_20230609161916.css create mode 100644 .history/style/index_20230609161921.css create mode 100644 .history/style/index_20230609163530.css create mode 100644 .history/style/index_20230609163536.css create mode 100644 .history/style/index_20230609163539.css create mode 100644 .history/style/index_20230609163540.css create mode 100644 .history/style/index_20230609163543.css create mode 100644 .history/style/index_20230609163551.css create mode 100644 .history/style/index_20230609163552.css create mode 100644 .history/style/index_20230609163553.css create mode 100644 .history/style/index_20230609163556.css create mode 100644 .history/style/index_20230609163609.css create mode 100644 .history/style/index_20230609163610.css create mode 100644 .history/style/index_20230609163612.css create mode 100644 .history/style/index_20230609163617.css create mode 100644 .history/style/index_20230609163618.css create mode 100644 .history/style/index_20230609163621.css create mode 100644 .history/style/index_20230609163622.css create mode 100644 .history/style/index_20230609163633.css create mode 100644 .history/style/index_20230609163636.css create mode 100644 .history/style/index_20230609163707.css create mode 100644 .history/style/index_20230609163942.css create mode 100644 .history/style/index_20230609163944.css create mode 100644 .history/style/index_20230609163950.css create mode 100644 .history/style/index_20230609163953.css create mode 100644 .history/style/index_20230609163955.css create mode 100644 .history/style/index_20230609163957.css create mode 100644 .history/style/index_20230609164000.css create mode 100644 .history/style/index_20230609164023.css create mode 100644 .history/style/index_20230609164027.css create mode 100644 .history/style/index_20230609164042.css create mode 100644 .history/style/index_20230609164046.css create mode 100644 .history/style/index_20230609164054.css create mode 100644 .history/style/index_20230609164101.css create mode 100644 .history/style/index_20230609164107.css create mode 100644 .history/style/index_20230609164112.css create mode 100644 .history/style/index_20230609164115.css create mode 100644 .history/style/index_20230609164242.css create mode 100644 .history/style/index_20230609164258.css create mode 100644 .history/style/index_20230609164324.css create mode 100644 .history/style/index_20230609164333.css create mode 100644 .history/style/index_20230609164341.css create mode 100644 .history/style/index_20230609164422.css create mode 100644 .history/style/index_20230609164430.css create mode 100644 .history/style/index_20230609164431.css create mode 100644 .history/style/index_20230609164433.css create mode 100644 .history/style/index_20230609164439.css create mode 100644 .history/style/index_20230609164445.css create mode 100644 .history/style/index_20230609165053.css create mode 100644 .history/style/index_20230609165103.css diff --git a/.history/index_20230609163114.html b/.history/index_20230609163114.html new file mode 100644 index 000000000..8d1ed7138 --- /dev/null +++ b/.history/index_20230609163114.html @@ -0,0 +1,36 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163116.html b/.history/index_20230609163116.html new file mode 100644 index 000000000..c8d029f0b --- /dev/null +++ b/.history/index_20230609163116.html @@ -0,0 +1,37 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/.history/index_20230609163118.html b/.history/index_20230609163118.html new file mode 100644 index 000000000..9449f1ab0 --- /dev/null +++ b/.history/index_20230609163118.html @@ -0,0 +1,39 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+ \ +
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163124.html b/.history/index_20230609163124.html new file mode 100644 index 000000000..74d358f3f --- /dev/null +++ b/.history/index_20230609163124.html @@ -0,0 +1,39 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163127.html b/.history/index_20230609163127.html new file mode 100644 index 000000000..6db5e9829 --- /dev/null +++ b/.history/index_20230609163127.html @@ -0,0 +1,39 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163130.html b/.history/index_20230609163130.html new file mode 100644 index 000000000..6de5c2029 --- /dev/null +++ b/.history/index_20230609163130.html @@ -0,0 +1,39 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163134.html b/.history/index_20230609163134.html new file mode 100644 index 000000000..a6fc2a219 --- /dev/null +++ b/.history/index_20230609163134.html @@ -0,0 +1,39 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163138.html b/.history/index_20230609163138.html new file mode 100644 index 000000000..d63a1cd65 --- /dev/null +++ b/.history/index_20230609163138.html @@ -0,0 +1,41 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163140.html b/.history/index_20230609163140.html new file mode 100644 index 000000000..726f1483e --- /dev/null +++ b/.history/index_20230609163140.html @@ -0,0 +1,41 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+ < +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163148.html b/.history/index_20230609163148.html new file mode 100644 index 000000000..5d3dbd6dd --- /dev/null +++ b/.history/index_20230609163148.html @@ -0,0 +1,41 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163150.html b/.history/index_20230609163150.html new file mode 100644 index 000000000..a8d4580a0 --- /dev/null +++ b/.history/index_20230609163150.html @@ -0,0 +1,41 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163156.html b/.history/index_20230609163156.html new file mode 100644 index 000000000..529647e41 --- /dev/null +++ b/.history/index_20230609163156.html @@ -0,0 +1,41 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163201.html b/.history/index_20230609163201.html new file mode 100644 index 000000000..66cde9252 --- /dev/null +++ b/.history/index_20230609163201.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163247.html b/.history/index_20230609163247.html new file mode 100644 index 000000000..15fc132f4 --- /dev/null +++ b/.history/index_20230609163247.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163309.html b/.history/index_20230609163309.html new file mode 100644 index 000000000..749768669 --- /dev/null +++ b/.history/index_20230609163309.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+< +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163312.html b/.history/index_20230609163312.html new file mode 100644 index 000000000..2a37cde11 --- /dev/null +++ b/.history/index_20230609163312.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163315.html b/.history/index_20230609163315.html new file mode 100644 index 000000000..cce9a764a --- /dev/null +++ b/.history/index_20230609163315.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163318.html b/.history/index_20230609163318.html new file mode 100644 index 000000000..e68972d40 --- /dev/null +++ b/.history/index_20230609163318.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163322.html b/.history/index_20230609163322.html new file mode 100644 index 000000000..9b89a8534 --- /dev/null +++ b/.history/index_20230609163322.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163326.html b/.history/index_20230609163326.html new file mode 100644 index 000000000..62adafd6c --- /dev/null +++ b/.history/index_20230609163326.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163331.html b/.history/index_20230609163331.html new file mode 100644 index 000000000..5dde413c0 --- /dev/null +++ b/.history/index_20230609163331.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163336.html b/.history/index_20230609163336.html new file mode 100644 index 000000000..17e771d14 --- /dev/null +++ b/.history/index_20230609163336.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163337.html b/.history/index_20230609163337.html new file mode 100644 index 000000000..3006569b3 --- /dev/null +++ b/.history/index_20230609163337.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163338.html b/.history/index_20230609163338.html new file mode 100644 index 000000000..5758e8219 --- /dev/null +++ b/.history/index_20230609163338.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163347.html b/.history/index_20230609163347.html new file mode 100644 index 000000000..4f44a951e --- /dev/null +++ b/.history/index_20230609163347.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163355.html b/.history/index_20230609163355.html new file mode 100644 index 000000000..9fdaf7f1b --- /dev/null +++ b/.history/index_20230609163355.html @@ -0,0 +1,43 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163358.html b/.history/index_20230609163358.html new file mode 100644 index 000000000..a03d428ad --- /dev/null +++ b/.history/index_20230609163358.html @@ -0,0 +1,44 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ + +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163359.html b/.history/index_20230609163359.html new file mode 100644 index 000000000..26824d98a --- /dev/null +++ b/.history/index_20230609163359.html @@ -0,0 +1,44 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ + < +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163403.html b/.history/index_20230609163403.html new file mode 100644 index 000000000..9d0db2b80 --- /dev/null +++ b/.history/index_20230609163403.html @@ -0,0 +1,44 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163415.html b/.history/index_20230609163415.html new file mode 100644 index 000000000..8bd6e33bc --- /dev/null +++ b/.history/index_20230609163415.html @@ -0,0 +1,44 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163426.html b/.history/index_20230609163426.html new file mode 100644 index 000000000..8d9a5605b --- /dev/null +++ b/.history/index_20230609163426.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 1

+

Project 1

+

Project 1

+

Project 1

+

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163427.html b/.history/index_20230609163427.html new file mode 100644 index 000000000..42b375a18 --- /dev/null +++ b/.history/index_20230609163427.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 2

+

Project 1

+

Project 1

+

Project 1

+

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163429.html b/.history/index_20230609163429.html new file mode 100644 index 000000000..c34c12454 --- /dev/null +++ b/.history/index_20230609163429.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 2

+

Project 4

+

Project 1

+

Project 1

+

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163430.html b/.history/index_20230609163430.html new file mode 100644 index 000000000..834a481ee --- /dev/null +++ b/.history/index_20230609163430.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 2

+

Project 3

+

Project 1

+

Project 1

+

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163432.html b/.history/index_20230609163432.html new file mode 100644 index 000000000..7b3dc4f15 --- /dev/null +++ b/.history/index_20230609163432.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 2

+

Project 3

+

Project 4

+

Project 1

+

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163435.html b/.history/index_20230609163435.html new file mode 100644 index 000000000..50a15b5f9 --- /dev/null +++ b/.history/index_20230609163435.html @@ -0,0 +1,49 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+

Project 2

+

Project 3

+

Project 4

+

Project 5

+

Project 6

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163519.html b/.history/index_20230609163519.html new file mode 100644 index 000000000..04c3775fc --- /dev/null +++ b/.history/index_20230609163519.html @@ -0,0 +1,44 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163726.html b/.history/index_20230609163726.html new file mode 100644 index 000000000..353f1287c --- /dev/null +++ b/.history/index_20230609163726.html @@ -0,0 +1,52 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 1

+
+
+ +

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163729.html b/.history/index_20230609163729.html new file mode 100644 index 000000000..7fd4d399b --- /dev/null +++ b/.history/index_20230609163729.html @@ -0,0 +1,52 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 1

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163732.html b/.history/index_20230609163732.html new file mode 100644 index 000000000..3785f7fe5 --- /dev/null +++ b/.history/index_20230609163732.html @@ -0,0 +1,52 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163806.html b/.history/index_20230609163806.html new file mode 100644 index 000000000..faa72e976 --- /dev/null +++ b/.history/index_20230609163806.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/.history/index_20230609163814.html b/.history/index_20230609163814.html new file mode 100644 index 000000000..c165fc060 --- /dev/null +++ b/.history/index_20230609163814.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609163816.html b/.history/index_20230609163816.html new file mode 100644 index 000000000..fd462f07b --- /dev/null +++ b/.history/index_20230609163816.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609163823.html b/.history/index_20230609163823.html new file mode 100644 index 000000000..10e38f1f4 --- /dev/null +++ b/.history/index_20230609163823.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230609161846.css b/.history/style/index_20230609161846.css new file mode 100644 index 000000000..2c6b3a354 --- /dev/null +++ b/.history/style/index_20230609161846.css @@ -0,0 +1,19 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} diff --git a/.history/style/index_20230609161848.css b/.history/style/index_20230609161848.css new file mode 100644 index 000000000..db825d714 --- /dev/null +++ b/.history/style/index_20230609161848.css @@ -0,0 +1,20 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} +footer \ No newline at end of file diff --git a/.history/style/index_20230609161849.css b/.history/style/index_20230609161849.css new file mode 100644 index 000000000..f998605a1 --- /dev/null +++ b/.history/style/index_20230609161849.css @@ -0,0 +1,21 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer {} \ No newline at end of file diff --git a/.history/style/index_20230609161855.css b/.history/style/index_20230609161855.css new file mode 100644 index 000000000..0e84670e5 --- /dev/null +++ b/.history/style/index_20230609161855.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + ba +} \ No newline at end of file diff --git a/.history/style/index_20230609161858.css b/.history/style/index_20230609161858.css new file mode 100644 index 000000000..b0d811d1a --- /dev/null +++ b/.history/style/index_20230609161858.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color +} \ No newline at end of file diff --git a/.history/style/index_20230609161906.css b/.history/style/index_20230609161906.css new file mode 100644 index 000000000..189e43025 --- /dev/null +++ b/.history/style/index_20230609161906.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey +} \ No newline at end of file diff --git a/.history/style/index_20230609161908.css b/.history/style/index_20230609161908.css new file mode 100644 index 000000000..189e43025 --- /dev/null +++ b/.history/style/index_20230609161908.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey +} \ No newline at end of file diff --git a/.history/style/index_20230609161911.css b/.history/style/index_20230609161911.css new file mode 100644 index 000000000..c7c8ebd43 --- /dev/null +++ b/.history/style/index_20230609161911.css @@ -0,0 +1,24 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + +} \ No newline at end of file diff --git a/.history/style/index_20230609161914.css b/.history/style/index_20230609161914.css new file mode 100644 index 000000000..03814a15f --- /dev/null +++ b/.history/style/index_20230609161914.css @@ -0,0 +1,24 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding +} \ No newline at end of file diff --git a/.history/style/index_20230609161916.css b/.history/style/index_20230609161916.css new file mode 100644 index 000000000..7621e0905 --- /dev/null +++ b/.history/style/index_20230609161916.css @@ -0,0 +1,24 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: +} \ No newline at end of file diff --git a/.history/style/index_20230609161921.css b/.history/style/index_20230609161921.css new file mode 100644 index 000000000..cfc09046a --- /dev/null +++ b/.history/style/index_20230609161921.css @@ -0,0 +1,25 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163530.css b/.history/style/index_20230609163530.css new file mode 100644 index 000000000..7570df193 --- /dev/null +++ b/.history/style/index_20230609163530.css @@ -0,0 +1,26 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row \ No newline at end of file diff --git a/.history/style/index_20230609163536.css b/.history/style/index_20230609163536.css new file mode 100644 index 000000000..71a4c4ae1 --- /dev/null +++ b/.history/style/index_20230609163536.css @@ -0,0 +1,28 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + j +} \ No newline at end of file diff --git a/.history/style/index_20230609163539.css b/.history/style/index_20230609163539.css new file mode 100644 index 000000000..8c101828f --- /dev/null +++ b/.history/style/index_20230609163539.css @@ -0,0 +1,28 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + justify-content: ; +} \ No newline at end of file diff --git a/.history/style/index_20230609163540.css b/.history/style/index_20230609163540.css new file mode 100644 index 000000000..b5ed1351e --- /dev/null +++ b/.history/style/index_20230609163540.css @@ -0,0 +1,28 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + justify-content: ; +} \ No newline at end of file diff --git a/.history/style/index_20230609163543.css b/.history/style/index_20230609163543.css new file mode 100644 index 000000000..ce5803050 --- /dev/null +++ b/.history/style/index_20230609163543.css @@ -0,0 +1,28 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + justify-content: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163551.css b/.history/style/index_20230609163551.css new file mode 100644 index 000000000..7a561daac --- /dev/null +++ b/.history/style/index_20230609163551.css @@ -0,0 +1,28 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + justify-content: space-evenly; +} \ No newline at end of file diff --git a/.history/style/index_20230609163552.css b/.history/style/index_20230609163552.css new file mode 100644 index 000000000..51ea0a5d2 --- /dev/null +++ b/.history/style/index_20230609163552.css @@ -0,0 +1,29 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} +.row{ + + justify-content: space-evenly; +} \ No newline at end of file diff --git a/.history/style/index_20230609163553.css b/.history/style/index_20230609163553.css new file mode 100644 index 000000000..71c2bdad0 --- /dev/null +++ b/.history/style/index_20230609163553.css @@ -0,0 +1,30 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + + justify-content: space-evenly; +} \ No newline at end of file diff --git a/.history/style/index_20230609163556.css b/.history/style/index_20230609163556.css new file mode 100644 index 000000000..17d722de3 --- /dev/null +++ b/.history/style/index_20230609163556.css @@ -0,0 +1,30 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} \ No newline at end of file diff --git a/.history/style/index_20230609163609.css b/.history/style/index_20230609163609.css new file mode 100644 index 000000000..ccd3731b5 --- /dev/null +++ b/.history/style/index_20230609163609.css @@ -0,0 +1,31 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} +.portfolio \ No newline at end of file diff --git a/.history/style/index_20230609163610.css b/.history/style/index_20230609163610.css new file mode 100644 index 000000000..10d84653b --- /dev/null +++ b/.history/style/index_20230609163610.css @@ -0,0 +1,31 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} +.portfolio- \ No newline at end of file diff --git a/.history/style/index_20230609163612.css b/.history/style/index_20230609163612.css new file mode 100644 index 000000000..8b2f24b28 --- /dev/null +++ b/.history/style/index_20230609163612.css @@ -0,0 +1,31 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} +.portfolio-element \ No newline at end of file diff --git a/.history/style/index_20230609163617.css b/.history/style/index_20230609163617.css new file mode 100644 index 000000000..c8d7a491d --- /dev/null +++ b/.history/style/index_20230609163617.css @@ -0,0 +1,33 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} +.portfolio-element{ + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163618.css b/.history/style/index_20230609163618.css new file mode 100644 index 000000000..a74e3a44c --- /dev/null +++ b/.history/style/index_20230609163618.css @@ -0,0 +1,34 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} + +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163621.css b/.history/style/index_20230609163621.css new file mode 100644 index 000000000..c80264bd3 --- /dev/null +++ b/.history/style/index_20230609163621.css @@ -0,0 +1,33 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163622.css b/.history/style/index_20230609163622.css new file mode 100644 index 000000000..a74e3a44c --- /dev/null +++ b/.history/style/index_20230609163622.css @@ -0,0 +1,34 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + justify-content: space-evenly; +} + +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163633.css b/.history/style/index_20230609163633.css new file mode 100644 index 000000000..bfe473cad --- /dev/null +++ b/.history/style/index_20230609163633.css @@ -0,0 +1,35 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex + justify-content: space-evenly; +} + +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163636.css b/.history/style/index_20230609163636.css new file mode 100644 index 000000000..2fb4ac556 --- /dev/null +++ b/.history/style/index_20230609163636.css @@ -0,0 +1,35 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163707.css b/.history/style/index_20230609163707.css new file mode 100644 index 000000000..3aaf6fc0b --- /dev/null +++ b/.history/style/index_20230609163707.css @@ -0,0 +1,36 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} \ No newline at end of file diff --git a/.history/style/index_20230609163942.css b/.history/style/index_20230609163942.css new file mode 100644 index 000000000..e19fd831f --- /dev/null +++ b/.history/style/index_20230609163942.css @@ -0,0 +1,38 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button \ No newline at end of file diff --git a/.history/style/index_20230609163944.css b/.history/style/index_20230609163944.css new file mode 100644 index 000000000..37e3b86e6 --- /dev/null +++ b/.history/style/index_20230609163944.css @@ -0,0 +1,40 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609163950.css b/.history/style/index_20230609163950.css new file mode 100644 index 000000000..4e7015827 --- /dev/null +++ b/.history/style/index_20230609163950.css @@ -0,0 +1,40 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} diff --git a/.history/style/index_20230609163953.css b/.history/style/index_20230609163953.css new file mode 100644 index 000000000..6efb07bdd --- /dev/null +++ b/.history/style/index_20230609163953.css @@ -0,0 +1,42 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} + +button \ No newline at end of file diff --git a/.history/style/index_20230609163955.css b/.history/style/index_20230609163955.css new file mode 100644 index 000000000..19311a888 --- /dev/null +++ b/.history/style/index_20230609163955.css @@ -0,0 +1,42 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} + +button: \ No newline at end of file diff --git a/.history/style/index_20230609163957.css b/.history/style/index_20230609163957.css new file mode 100644 index 000000000..3b0346078 --- /dev/null +++ b/.history/style/index_20230609163957.css @@ -0,0 +1,42 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} + +button:hover \ No newline at end of file diff --git a/.history/style/index_20230609164000.css b/.history/style/index_20230609164000.css new file mode 100644 index 000000000..006a0e989 --- /dev/null +++ b/.history/style/index_20230609164000.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ + +} + +button:hover{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609164023.css b/.history/style/index_20230609164023.css new file mode 100644 index 000000000..1069dbc22 --- /dev/null +++ b/.history/style/index_20230609164023.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button{ +background-color; +} + +button:hover{ + +} \ No newline at end of file diff --git a/.history/style/index_20230609164027.css b/.history/style/index_20230609164027.css new file mode 100644 index 000000000..933f5d39c --- /dev/null +++ b/.history/style/index_20230609164027.css @@ -0,0 +1,42 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164042.css b/.history/style/index_20230609164042.css new file mode 100644 index 000000000..29fb9f4b7 --- /dev/null +++ b/.history/style/index_20230609164042.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164046.css b/.history/style/index_20230609164046.css new file mode 100644 index 000000000..88e29bb19 --- /dev/null +++ b/.history/style/index_20230609164046.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164054.css b/.history/style/index_20230609164054.css new file mode 100644 index 000000000..47902793d --- /dev/null +++ b/.history/style/index_20230609164054.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164101.css b/.history/style/index_20230609164101.css new file mode 100644 index 000000000..cdeebd199 --- /dev/null +++ b/.history/style/index_20230609164101.css @@ -0,0 +1,44 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164107.css b/.history/style/index_20230609164107.css new file mode 100644 index 000000000..f196aa63a --- /dev/null +++ b/.history/style/index_20230609164107.css @@ -0,0 +1,45 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164112.css b/.history/style/index_20230609164112.css new file mode 100644 index 000000000..7cf46fa0a --- /dev/null +++ b/.history/style/index_20230609164112.css @@ -0,0 +1,45 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 10px; +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164115.css b/.history/style/index_20230609164115.css new file mode 100644 index 000000000..f14f736d2 --- /dev/null +++ b/.history/style/index_20230609164115.css @@ -0,0 +1,45 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover {} \ No newline at end of file diff --git a/.history/style/index_20230609164242.css b/.history/style/index_20230609164242.css new file mode 100644 index 000000000..532c06302 --- /dev/null +++ b/.history/style/index_20230609164242.css @@ -0,0 +1,47 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + +} \ No newline at end of file diff --git a/.history/style/index_20230609164258.css b/.history/style/index_20230609164258.css new file mode 100644 index 000000000..93c2269b3 --- /dev/null +++ b/.history/style/index_20230609164258.css @@ -0,0 +1,49 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: white; + color: black; + border: black solid 1px; +} \ No newline at end of file diff --git a/.history/style/index_20230609164324.css b/.history/style/index_20230609164324.css new file mode 100644 index 000000000..121170d39 --- /dev/null +++ b/.history/style/index_20230609164324.css @@ -0,0 +1,49 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: black; + border: black solid 1px; +} \ No newline at end of file diff --git a/.history/style/index_20230609164333.css b/.history/style/index_20230609164333.css new file mode 100644 index 000000000..73bdcf33b --- /dev/null +++ b/.history/style/index_20230609164333.css @@ -0,0 +1,49 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: black solid 1px; +} \ No newline at end of file diff --git a/.history/style/index_20230609164341.css b/.history/style/index_20230609164341.css new file mode 100644 index 000000000..c48d83474 --- /dev/null +++ b/.history/style/index_20230609164341.css @@ -0,0 +1,49 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} \ No newline at end of file diff --git a/.history/style/index_20230609164422.css b/.history/style/index_20230609164422.css new file mode 100644 index 000000000..529ad4349 --- /dev/null +++ b/.history/style/index_20230609164422.css @@ -0,0 +1,53 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + +} \ No newline at end of file diff --git a/.history/style/index_20230609164430.css b/.history/style/index_20230609164430.css new file mode 100644 index 000000000..6e72baf00 --- /dev/null +++ b/.history/style/index_20230609164430.css @@ -0,0 +1,53 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + tex +} \ No newline at end of file diff --git a/.history/style/index_20230609164431.css b/.history/style/index_20230609164431.css new file mode 100644 index 000000000..ef2b809de --- /dev/null +++ b/.history/style/index_20230609164431.css @@ -0,0 +1,53 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: ; +} \ No newline at end of file diff --git a/.history/style/index_20230609164433.css b/.history/style/index_20230609164433.css new file mode 100644 index 000000000..be9007746 --- /dev/null +++ b/.history/style/index_20230609164433.css @@ -0,0 +1,53 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; +} \ No newline at end of file diff --git a/.history/style/index_20230609164439.css b/.history/style/index_20230609164439.css new file mode 100644 index 000000000..aa646992f --- /dev/null +++ b/.history/style/index_20230609164439.css @@ -0,0 +1,54 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none + color +} \ No newline at end of file diff --git a/.history/style/index_20230609164445.css b/.history/style/index_20230609164445.css new file mode 100644 index 000000000..d0ed3ce78 --- /dev/null +++ b/.history/style/index_20230609164445.css @@ -0,0 +1,54 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none + color: inherit; +} \ No newline at end of file diff --git a/.history/style/index_20230609165053.css b/.history/style/index_20230609165053.css new file mode 100644 index 000000000..79ce6b5b0 --- /dev/null +++ b/.history/style/index_20230609165053.css @@ -0,0 +1,54 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color +} \ No newline at end of file diff --git a/.history/style/index_20230609165103.css b/.history/style/index_20230609165103.css new file mode 100644 index 000000000..e0b6ae439 --- /dev/null +++ b/.history/style/index_20230609165103.css @@ -0,0 +1,54 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/index.html b/index.html index aca4ea8d2..10e38f1f4 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,38 @@

SEAN KIPINÄ

+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
diff --git a/style/index.css b/style/index.css index 82f8ce407..e0b6ae439 100644 --- a/style/index.css +++ b/style/index.css @@ -16,4 +16,39 @@ nav { font-size: large; width: 600px; height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; } \ No newline at end of file From f23243e27c660f5fe740b04bdbb200ff657da246 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 16:54:56 +0300 Subject: [PATCH 30/40] Fixed second row project names and adjusted image size for project images. --- .history/index_20230609165401.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165403.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165405.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165407.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165410.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165412.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165413.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165417.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165420.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165421.html | 66 ++++++++++++++++++++++++++++++ .history/index_20230609165422.html | 66 ++++++++++++++++++++++++++++++ index.html | 18 ++++---- 12 files changed, 735 insertions(+), 9 deletions(-) create mode 100644 .history/index_20230609165401.html create mode 100644 .history/index_20230609165403.html create mode 100644 .history/index_20230609165405.html create mode 100644 .history/index_20230609165407.html create mode 100644 .history/index_20230609165410.html create mode 100644 .history/index_20230609165412.html create mode 100644 .history/index_20230609165413.html create mode 100644 .history/index_20230609165417.html create mode 100644 .history/index_20230609165420.html create mode 100644 .history/index_20230609165421.html create mode 100644 .history/index_20230609165422.html diff --git a/.history/index_20230609165401.html b/.history/index_20230609165401.html new file mode 100644 index 000000000..a69f194c5 --- /dev/null +++ b/.history/index_20230609165401.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165403.html b/.history/index_20230609165403.html new file mode 100644 index 000000000..5cb128a08 --- /dev/null +++ b/.history/index_20230609165403.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165405.html b/.history/index_20230609165405.html new file mode 100644 index 000000000..f17493e06 --- /dev/null +++ b/.history/index_20230609165405.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165407.html b/.history/index_20230609165407.html new file mode 100644 index 000000000..b610dd633 --- /dev/null +++ b/.history/index_20230609165407.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165410.html b/.history/index_20230609165410.html new file mode 100644 index 000000000..143428a80 --- /dev/null +++ b/.history/index_20230609165410.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165412.html b/.history/index_20230609165412.html new file mode 100644 index 000000000..0411a6eb9 --- /dev/null +++ b/.history/index_20230609165412.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165413.html b/.history/index_20230609165413.html new file mode 100644 index 000000000..0411a6eb9 --- /dev/null +++ b/.history/index_20230609165413.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165417.html b/.history/index_20230609165417.html new file mode 100644 index 000000000..3ef03b1f0 --- /dev/null +++ b/.history/index_20230609165417.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165420.html b/.history/index_20230609165420.html new file mode 100644 index 000000000..b2c1d8a71 --- /dev/null +++ b/.history/index_20230609165420.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 3

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165421.html b/.history/index_20230609165421.html new file mode 100644 index 000000000..7b0825acf --- /dev/null +++ b/.history/index_20230609165421.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165422.html b/.history/index_20230609165422.html new file mode 100644 index 000000000..bc8b97e85 --- /dev/null +++ b/.history/index_20230609165422.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 10e38f1f4..bc8b97e85 100644 --- a/index.html +++ b/index.html @@ -31,30 +31,30 @@

SEAN KIPINÄ

- +

Project 1

- +

Project 2

- +

Project 3

- -

Project 1

+ +

Project 4

- -

Project 2

+ +

Project 5

- -

Project 3

+ +

Project 6

From 6645de2e2cbb09d54f5233d4e12b75dbb8b65f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 17:03:48 +0300 Subject: [PATCH 31/40] Added @media tags for max width of 500px and 800px --- .history/index_20230609165719.html | 66 +++++++++++++++++++++++++ .history/index_20230609165721.html | 66 +++++++++++++++++++++++++ .history/index_20230609165726.html | 66 +++++++++++++++++++++++++ .history/index_20230609165731.html | 66 +++++++++++++++++++++++++ .history/style/index_20230609165751.css | 54 ++++++++++++++++++++ .history/style/index_20230609165752.css | 55 +++++++++++++++++++++ .history/style/index_20230609165757.css | 56 +++++++++++++++++++++ .history/style/index_20230609165759.css | 56 +++++++++++++++++++++ .history/style/index_20230609165802.css | 56 +++++++++++++++++++++ .history/style/index_20230609165803.css | 63 +++++++++++++++++++++++ .history/style/index_20230609165815.css | 58 ++++++++++++++++++++++ .history/style/index_20230609165846.css | 58 ++++++++++++++++++++++ .history/style/index_20230609165850.css | 61 +++++++++++++++++++++++ .history/style/index_20230609165852.css | 62 +++++++++++++++++++++++ .history/style/index_20230609165855.css | 62 +++++++++++++++++++++++ index.html | 2 +- style/index.css | 8 +++ 17 files changed, 914 insertions(+), 1 deletion(-) create mode 100644 .history/index_20230609165719.html create mode 100644 .history/index_20230609165721.html create mode 100644 .history/index_20230609165726.html create mode 100644 .history/index_20230609165731.html create mode 100644 .history/style/index_20230609165751.css create mode 100644 .history/style/index_20230609165752.css create mode 100644 .history/style/index_20230609165757.css create mode 100644 .history/style/index_20230609165759.css create mode 100644 .history/style/index_20230609165802.css create mode 100644 .history/style/index_20230609165803.css create mode 100644 .history/style/index_20230609165815.css create mode 100644 .history/style/index_20230609165846.css create mode 100644 .history/style/index_20230609165850.css create mode 100644 .history/style/index_20230609165852.css create mode 100644 .history/style/index_20230609165855.css diff --git a/.history/index_20230609165719.html b/.history/index_20230609165719.html new file mode 100644 index 000000000..eaff2ead0 --- /dev/null +++ b/.history/index_20230609165719.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165721.html b/.history/index_20230609165721.html new file mode 100644 index 000000000..eaff2ead0 --- /dev/null +++ b/.history/index_20230609165721.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165726.html b/.history/index_20230609165726.html new file mode 100644 index 000000000..37af1f7a9 --- /dev/null +++ b/.history/index_20230609165726.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609165731.html b/.history/index_20230609165731.html new file mode 100644 index 000000000..339fbeeaa --- /dev/null +++ b/.history/index_20230609165731.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230609165751.css b/.history/style/index_20230609165751.css new file mode 100644 index 000000000..2085e9dcb --- /dev/null +++ b/.history/style/index_20230609165751.css @@ -0,0 +1,54 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} diff --git a/.history/style/index_20230609165752.css b/.history/style/index_20230609165752.css new file mode 100644 index 000000000..accae8bed --- /dev/null +++ b/.history/style/index_20230609165752.css @@ -0,0 +1,55 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + diff --git a/.history/style/index_20230609165757.css b/.history/style/index_20230609165757.css new file mode 100644 index 000000000..4c4c2f794 --- /dev/null +++ b/.history/style/index_20230609165757.css @@ -0,0 +1,56 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@ \ No newline at end of file diff --git a/.history/style/index_20230609165759.css b/.history/style/index_20230609165759.css new file mode 100644 index 000000000..33cb26a19 --- /dev/null +++ b/.history/style/index_20230609165759.css @@ -0,0 +1,56 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media \ No newline at end of file diff --git a/.history/style/index_20230609165802.css b/.history/style/index_20230609165802.css new file mode 100644 index 000000000..33cb26a19 --- /dev/null +++ b/.history/style/index_20230609165802.css @@ -0,0 +1,56 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media \ No newline at end of file diff --git a/.history/style/index_20230609165803.css b/.history/style/index_20230609165803.css new file mode 100644 index 000000000..2fcc9b115 --- /dev/null +++ b/.history/style/index_20230609165803.css @@ -0,0 +1,63 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 600px) { + .image-button { + width: 100%; + height: 100%; + } +} +``` +``` \ No newline at end of file diff --git a/.history/style/index_20230609165815.css b/.history/style/index_20230609165815.css new file mode 100644 index 000000000..bc8ab2176 --- /dev/null +++ b/.history/style/index_20230609165815.css @@ -0,0 +1,58 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 600px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609165846.css b/.history/style/index_20230609165846.css new file mode 100644 index 000000000..9877f1d41 --- /dev/null +++ b/.history/style/index_20230609165846.css @@ -0,0 +1,58 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609165850.css b/.history/style/index_20230609165850.css new file mode 100644 index 000000000..27f7b6e3b --- /dev/null +++ b/.history/style/index_20230609165850.css @@ -0,0 +1,61 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { + +} +@media (max-width: 800px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609165852.css b/.history/style/index_20230609165852.css new file mode 100644 index 000000000..15ab4f96a --- /dev/null +++ b/.history/style/index_20230609165852.css @@ -0,0 +1,62 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { + +} + +@media (max-width: 800px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609165855.css b/.history/style/index_20230609165855.css new file mode 100644 index 000000000..d3cf57fbf --- /dev/null +++ b/.history/style/index_20230609165855.css @@ -0,0 +1,62 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { + +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/index.html b/index.html index bc8b97e85..339fbeeaa 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@

SEAN KIPINÄ

diff --git a/style/index.css b/style/index.css index e0b6ae439..d3cf57fbf 100644 --- a/style/index.css +++ b/style/index.css @@ -51,4 +51,12 @@ button:hover { button a { text-decoration: none; color: inherit; +} + +@media (max-width: 800px) { + +} + +@media (max-width: 500px) { + } \ No newline at end of file From 9de18ebe684b7b5b5fb96ce23a98ad2575fefc7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 17:11:12 +0300 Subject: [PATCH 32/40] Added reset css to code. --- .history/style/index_20230609170734.css | 62 +++++++++++++++++++++ .history/style/index_20230609170736.css | 64 ++++++++++++++++++++++ .history/style/index_20230609170739.css | 64 ++++++++++++++++++++++ .history/style/index_20230609170742.css | 65 ++++++++++++++++++++++ .history/style/index_20230609170746.css | 66 +++++++++++++++++++++++ .history/style/index_20230609170751.css | 66 +++++++++++++++++++++++ .history/style/index_20230609170759.css | 62 +++++++++++++++++++++ .history/style/index_20230609170800.css | 64 ++++++++++++++++++++++ .history/style/index_20230609170952.css | 65 ++++++++++++++++++++++ .history/style/index_20230609171002.css | 65 ++++++++++++++++++++++ .history/style/index_20230609171005.css | 67 +++++++++++++++++++++++ .history/style/index_20230609171008.css | 68 +++++++++++++++++++++++ .history/style/index_20230609171011.css | 68 +++++++++++++++++++++++ .history/style/index_20230609171019.css | 69 ++++++++++++++++++++++++ .history/style/index_20230609171020.css | 69 ++++++++++++++++++++++++ .history/style/index_20230609171024.css | 70 ++++++++++++++++++++++++ .history/style/index_20230609171027.css | 70 ++++++++++++++++++++++++ .history/style/index_20230609171028.css | 70 ++++++++++++++++++++++++ .history/style/index_20230609171032.css | 71 +++++++++++++++++++++++++ .history/style/index_20230609171035.css | 71 +++++++++++++++++++++++++ .history/style/index_20230609171037.css | 71 +++++++++++++++++++++++++ style/index.css | 17 ++++-- 22 files changed, 1420 insertions(+), 4 deletions(-) create mode 100644 .history/style/index_20230609170734.css create mode 100644 .history/style/index_20230609170736.css create mode 100644 .history/style/index_20230609170739.css create mode 100644 .history/style/index_20230609170742.css create mode 100644 .history/style/index_20230609170746.css create mode 100644 .history/style/index_20230609170751.css create mode 100644 .history/style/index_20230609170759.css create mode 100644 .history/style/index_20230609170800.css create mode 100644 .history/style/index_20230609170952.css create mode 100644 .history/style/index_20230609171002.css create mode 100644 .history/style/index_20230609171005.css create mode 100644 .history/style/index_20230609171008.css create mode 100644 .history/style/index_20230609171011.css create mode 100644 .history/style/index_20230609171019.css create mode 100644 .history/style/index_20230609171020.css create mode 100644 .history/style/index_20230609171024.css create mode 100644 .history/style/index_20230609171027.css create mode 100644 .history/style/index_20230609171028.css create mode 100644 .history/style/index_20230609171032.css create mode 100644 .history/style/index_20230609171035.css create mode 100644 .history/style/index_20230609171037.css diff --git a/.history/style/index_20230609170734.css b/.history/style/index_20230609170734.css new file mode 100644 index 000000000..7e9bb0155 --- /dev/null +++ b/.history/style/index_20230609170734.css @@ -0,0 +1,62 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170736.css b/.history/style/index_20230609170736.css new file mode 100644 index 000000000..741d26dd6 --- /dev/null +++ b/.history/style/index_20230609170736.css @@ -0,0 +1,64 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav{ + +} +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170739.css b/.history/style/index_20230609170739.css new file mode 100644 index 000000000..2454b4003 --- /dev/null +++ b/.history/style/index_20230609170739.css @@ -0,0 +1,64 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav{ + display: flex; +} +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170742.css b/.history/style/index_20230609170742.css new file mode 100644 index 000000000..5678ad9c2 --- /dev/null +++ b/.history/style/index_20230609170742.css @@ -0,0 +1,65 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav{ + display: flex; + +} +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170746.css b/.history/style/index_20230609170746.css new file mode 100644 index 000000000..815dd1d6d --- /dev/null +++ b/.history/style/index_20230609170746.css @@ -0,0 +1,66 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav{ + display: flex; + flex-direction: column; + +} +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170751.css b/.history/style/index_20230609170751.css new file mode 100644 index 000000000..ad47d8be9 --- /dev/null +++ b/.history/style/index_20230609170751.css @@ -0,0 +1,66 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { +nav{ + display: flex; + flex-direction: column; + align-items: center; +} +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170759.css b/.history/style/index_20230609170759.css new file mode 100644 index 000000000..d3cf57fbf --- /dev/null +++ b/.history/style/index_20230609170759.css @@ -0,0 +1,62 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) { + +} + +@media (max-width: 500px) { + +} \ No newline at end of file diff --git a/.history/style/index_20230609170800.css b/.history/style/index_20230609170800.css new file mode 100644 index 000000000..6b3b35db2 --- /dev/null +++ b/.history/style/index_20230609170800.css @@ -0,0 +1,64 @@ +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609170952.css b/.history/style/index_20230609170952.css new file mode 100644 index 000000000..57ce145b3 --- /dev/null +++ b/.history/style/index_20230609170952.css @@ -0,0 +1,65 @@ + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171002.css b/.history/style/index_20230609171002.css new file mode 100644 index 000000000..d75446bd4 --- /dev/null +++ b/.history/style/index_20230609171002.css @@ -0,0 +1,65 @@ +* +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171005.css b/.history/style/index_20230609171005.css new file mode 100644 index 000000000..7b951e4fd --- /dev/null +++ b/.history/style/index_20230609171005.css @@ -0,0 +1,67 @@ +*{ + +} +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171008.css b/.history/style/index_20230609171008.css new file mode 100644 index 000000000..8c3c37a3c --- /dev/null +++ b/.history/style/index_20230609171008.css @@ -0,0 +1,68 @@ +*{ + +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171011.css b/.history/style/index_20230609171011.css new file mode 100644 index 000000000..3d83da8a8 --- /dev/null +++ b/.history/style/index_20230609171011.css @@ -0,0 +1,68 @@ +*{ +box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171019.css b/.history/style/index_20230609171019.css new file mode 100644 index 000000000..40887f923 --- /dev/null +++ b/.history/style/index_20230609171019.css @@ -0,0 +1,69 @@ +*{ +box-sizing: border-box; +padding: ; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171020.css b/.history/style/index_20230609171020.css new file mode 100644 index 000000000..b72d714e0 --- /dev/null +++ b/.history/style/index_20230609171020.css @@ -0,0 +1,69 @@ +*{ +box-sizing: border-box; +padding: 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171024.css b/.history/style/index_20230609171024.css new file mode 100644 index 000000000..279d2d8f3 --- /dev/null +++ b/.history/style/index_20230609171024.css @@ -0,0 +1,70 @@ +*{ +box-sizing: border-box; +padding: 0; + +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171027.css b/.history/style/index_20230609171027.css new file mode 100644 index 000000000..c2bfc7854 --- /dev/null +++ b/.history/style/index_20230609171027.css @@ -0,0 +1,70 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: ; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171028.css b/.history/style/index_20230609171028.css new file mode 100644 index 000000000..28d972885 --- /dev/null +++ b/.history/style/index_20230609171028.css @@ -0,0 +1,70 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171032.css b/.history/style/index_20230609171032.css new file mode 100644 index 000000000..b8c24b175 --- /dev/null +++ b/.history/style/index_20230609171032.css @@ -0,0 +1,71 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: 0; +max-width: ; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171035.css b/.history/style/index_20230609171035.css new file mode 100644 index 000000000..bbbeebe01 --- /dev/null +++ b/.history/style/index_20230609171035.css @@ -0,0 +1,71 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: 0; +max-width: 100; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171037.css b/.history/style/index_20230609171037.css new file mode 100644 index 000000000..2da02cbeb --- /dev/null +++ b/.history/style/index_20230609171037.css @@ -0,0 +1,71 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: 0; +max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + paddding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index d3cf57fbf..2da02cbeb 100644 --- a/style/index.css +++ b/style/index.css @@ -1,3 +1,10 @@ +*{ +box-sizing: border-box; +padding: 0; +margin: 0; +max-width: 100%; +} + nav { display: flex; justify-content: space-between; @@ -53,10 +60,12 @@ button a { color: inherit; } -@media (max-width: 800px) { - -} +@media (max-width: 800px) {} @media (max-width: 500px) { - + nav { + display: flex; + flex-direction: column; + align-items: center; + } } \ No newline at end of file From aeae1e4d067623c89b48ccf70e4250dcc78e213d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 17:13:52 +0300 Subject: [PATCH 33/40] Fixed the links to make it a class. --- .history/index_20230609171245.html | 66 +++++++++++++++++++++ .history/index_20230609171251.html | 66 +++++++++++++++++++++ .history/index_20230609171252.html | 66 +++++++++++++++++++++ .history/index_20230609171255.html | 66 +++++++++++++++++++++ .history/style/index_20230609171128.css | 71 +++++++++++++++++++++++ .history/style/index_20230609171144.css | 73 +++++++++++++++++++++++ .history/style/index_20230609171146.css | 73 +++++++++++++++++++++++ .history/style/index_20230609171147.css | 75 ++++++++++++++++++++++++ .history/style/index_20230609171154.css | 75 ++++++++++++++++++++++++ .history/style/index_20230609171156.css | 75 ++++++++++++++++++++++++ .history/style/index_20230609171158.css | 75 ++++++++++++++++++++++++ .history/style/index_20230609171205.css | 75 ++++++++++++++++++++++++ .history/style/index_20230609171207.css | 76 ++++++++++++++++++++++++ .history/style/index_20230609171209.css | 76 ++++++++++++++++++++++++ .history/style/index_20230609171216.css | 77 +++++++++++++++++++++++++ index.html | 4 +- style/index.css | 18 ++++-- 17 files changed, 1099 insertions(+), 8 deletions(-) create mode 100644 .history/index_20230609171245.html create mode 100644 .history/index_20230609171251.html create mode 100644 .history/index_20230609171252.html create mode 100644 .history/index_20230609171255.html create mode 100644 .history/style/index_20230609171128.css create mode 100644 .history/style/index_20230609171144.css create mode 100644 .history/style/index_20230609171146.css create mode 100644 .history/style/index_20230609171147.css create mode 100644 .history/style/index_20230609171154.css create mode 100644 .history/style/index_20230609171156.css create mode 100644 .history/style/index_20230609171158.css create mode 100644 .history/style/index_20230609171205.css create mode 100644 .history/style/index_20230609171207.css create mode 100644 .history/style/index_20230609171209.css create mode 100644 .history/style/index_20230609171216.css diff --git a/.history/index_20230609171245.html b/.history/index_20230609171245.html new file mode 100644 index 000000000..b3d05a2b7 --- /dev/null +++ b/.history/index_20230609171245.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609171251.html b/.history/index_20230609171251.html new file mode 100644 index 000000000..20c9f8ab3 --- /dev/null +++ b/.history/index_20230609171251.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+
+ + + +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609171252.html b/.history/index_20230609171252.html new file mode 100644 index 000000000..0d6f3deb2 --- /dev/null +++ b/.history/index_20230609171252.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609171255.html b/.history/index_20230609171255.html new file mode 100644 index 000000000..4fcc1de9e --- /dev/null +++ b/.history/index_20230609171255.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230609171128.css b/.history/style/index_20230609171128.css new file mode 100644 index 000000000..52f600a74 --- /dev/null +++ b/.history/style/index_20230609171128.css @@ -0,0 +1,71 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171144.css b/.history/style/index_20230609171144.css new file mode 100644 index 000000000..2f53bbbf0 --- /dev/null +++ b/.history/style/index_20230609171144.css @@ -0,0 +1,73 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .li +} \ No newline at end of file diff --git a/.history/style/index_20230609171146.css b/.history/style/index_20230609171146.css new file mode 100644 index 000000000..40b8194e8 --- /dev/null +++ b/.history/style/index_20230609171146.css @@ -0,0 +1,73 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links +} \ No newline at end of file diff --git a/.history/style/index_20230609171147.css b/.history/style/index_20230609171147.css new file mode 100644 index 000000000..5152e94f7 --- /dev/null +++ b/.history/style/index_20230609171147.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171154.css b/.history/style/index_20230609171154.css new file mode 100644 index 000000000..e00e60ccf --- /dev/null +++ b/.history/style/index_20230609171154.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171156.css b/.history/style/index_20230609171156.css new file mode 100644 index 000000000..89b799c53 --- /dev/null +++ b/.history/style/index_20230609171156.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171158.css b/.history/style/index_20230609171158.css new file mode 100644 index 000000000..45ca500fd --- /dev/null +++ b/.history/style/index_20230609171158.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171205.css b/.history/style/index_20230609171205.css new file mode 100644 index 000000000..55c6be7fc --- /dev/null +++ b/.history/style/index_20230609171205.css @@ -0,0 +1,75 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171207.css b/.history/style/index_20230609171207.css new file mode 100644 index 000000000..d7b43a43f --- /dev/null +++ b/.history/style/index_20230609171207.css @@ -0,0 +1,76 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171209.css b/.history/style/index_20230609171209.css new file mode 100644 index 000000000..2393e3a79 --- /dev/null +++ b/.history/style/index_20230609171209.css @@ -0,0 +1,76 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171216.css b/.history/style/index_20230609171216.css new file mode 100644 index 000000000..0666c8ebc --- /dev/null +++ b/.history/style/index_20230609171216.css @@ -0,0 +1,77 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 339fbeeaa..4fcc1de9e 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,12 @@
diff --git a/style/index.css b/style/index.css index 2da02cbeb..0666c8ebc 100644 --- a/style/index.css +++ b/style/index.css @@ -1,8 +1,8 @@ -*{ -box-sizing: border-box; -padding: 0; -margin: 0; -max-width: 100%; +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; } nav { @@ -46,7 +46,7 @@ button { background-color: white; color: black; border: black solid 1px; - paddding: 5px 10px; + padding: 5px 10px; } button:hover { @@ -68,4 +68,10 @@ button a { flex-direction: column; align-items: center; } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } } \ No newline at end of file From ca8e0fc17ebe022901b0c40ba0e6ee5655431d75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 17:16:24 +0300 Subject: [PATCH 34/40] Fixed spacing of links and adjusted button width and margins. --- .history/style/index_20230609171409.css | 78 +++++++++++++++++++++++ .history/style/index_20230609171412.css | 78 +++++++++++++++++++++++ .history/style/index_20230609171416.css | 78 +++++++++++++++++++++++ .history/style/index_20230609171418.css | 78 +++++++++++++++++++++++ .history/style/index_20230609171421.css | 80 +++++++++++++++++++++++ .history/style/index_20230609171422.css | 81 ++++++++++++++++++++++++ .history/style/index_20230609171436.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609171441.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609171443.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609171446.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609171449.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609171451.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609171527.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609171530.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609171531.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609171533.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609171537.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609171540.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609171544.css | 84 +++++++++++++++++++++++++ style/index.css | 9 ++- 20 files changed, 1558 insertions(+), 1 deletion(-) create mode 100644 .history/style/index_20230609171409.css create mode 100644 .history/style/index_20230609171412.css create mode 100644 .history/style/index_20230609171416.css create mode 100644 .history/style/index_20230609171418.css create mode 100644 .history/style/index_20230609171421.css create mode 100644 .history/style/index_20230609171422.css create mode 100644 .history/style/index_20230609171436.css create mode 100644 .history/style/index_20230609171441.css create mode 100644 .history/style/index_20230609171443.css create mode 100644 .history/style/index_20230609171446.css create mode 100644 .history/style/index_20230609171449.css create mode 100644 .history/style/index_20230609171451.css create mode 100644 .history/style/index_20230609171527.css create mode 100644 .history/style/index_20230609171530.css create mode 100644 .history/style/index_20230609171531.css create mode 100644 .history/style/index_20230609171533.css create mode 100644 .history/style/index_20230609171537.css create mode 100644 .history/style/index_20230609171540.css create mode 100644 .history/style/index_20230609171544.css diff --git a/.history/style/index_20230609171409.css b/.history/style/index_20230609171409.css new file mode 100644 index 000000000..aa0531cda --- /dev/null +++ b/.history/style/index_20230609171409.css @@ -0,0 +1,78 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + +} \ No newline at end of file diff --git a/.history/style/index_20230609171412.css b/.history/style/index_20230609171412.css new file mode 100644 index 000000000..bc17d70b5 --- /dev/null +++ b/.history/style/index_20230609171412.css @@ -0,0 +1,78 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links +} \ No newline at end of file diff --git a/.history/style/index_20230609171416.css b/.history/style/index_20230609171416.css new file mode 100644 index 000000000..1563d19d7 --- /dev/null +++ b/.history/style/index_20230609171416.css @@ -0,0 +1,78 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button +} \ No newline at end of file diff --git a/.history/style/index_20230609171418.css b/.history/style/index_20230609171418.css new file mode 100644 index 000000000..1563d19d7 --- /dev/null +++ b/.history/style/index_20230609171418.css @@ -0,0 +1,78 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button +} \ No newline at end of file diff --git a/.history/style/index_20230609171421.css b/.history/style/index_20230609171421.css new file mode 100644 index 000000000..5b2beb8a0 --- /dev/null +++ b/.history/style/index_20230609171421.css @@ -0,0 +1,80 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + .links button{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171422.css b/.history/style/index_20230609171422.css new file mode 100644 index 000000000..ece14fc43 --- /dev/null +++ b/.history/style/index_20230609171422.css @@ -0,0 +1,81 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + + .links button{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171436.css b/.history/style/index_20230609171436.css new file mode 100644 index 000000000..204958893 --- /dev/null +++ b/.history/style/index_20230609171436.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + + .links button{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171441.css b/.history/style/index_20230609171441.css new file mode 100644 index 000000000..b55b09000 --- /dev/null +++ b/.history/style/index_20230609171441.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + + .links button{ +widt + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171443.css b/.history/style/index_20230609171443.css new file mode 100644 index 000000000..5a306bd1f --- /dev/null +++ b/.history/style/index_20230609171443.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + + .links button{ +width:40 + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171446.css b/.history/style/index_20230609171446.css new file mode 100644 index 000000000..3bbc5288e --- /dev/null +++ b/.history/style/index_20230609171446.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links{ + display: flex; + flex-direction: column; + align-items: center; + } + + .links button{ +width: 40% + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171449.css b/.history/style/index_20230609171449.css new file mode 100644 index 000000000..75405a96e --- /dev/null +++ b/.history/style/index_20230609171449.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171451.css b/.history/style/index_20230609171451.css new file mode 100644 index 000000000..a6026440e --- /dev/null +++ b/.history/style/index_20230609171451.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171527.css b/.history/style/index_20230609171527.css new file mode 100644 index 000000000..6590cc202 --- /dev/null +++ b/.history/style/index_20230609171527.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171530.css b/.history/style/index_20230609171530.css new file mode 100644 index 000000000..bb1482858 --- /dev/null +++ b/.history/style/index_20230609171530.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100 + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171531.css b/.history/style/index_20230609171531.css new file mode 100644 index 000000000..bc1a073bc --- /dev/null +++ b/.history/style/index_20230609171531.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100% + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171533.css b/.history/style/index_20230609171533.css new file mode 100644 index 000000000..62f2fc22e --- /dev/null +++ b/.history/style/index_20230609171533.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171537.css b/.history/style/index_20230609171537.css new file mode 100644 index 000000000..e127c867a --- /dev/null +++ b/.history/style/index_20230609171537.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171540.css b/.history/style/index_20230609171540.css new file mode 100644 index 000000000..019297853 --- /dev/null +++ b/.history/style/index_20230609171540.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1 + } +} \ No newline at end of file diff --git a/.history/style/index_20230609171544.css b/.history/style/index_20230609171544.css new file mode 100644 index 000000000..669a01e51 --- /dev/null +++ b/.history/style/index_20230609171544.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 0666c8ebc..669a01e51 100644 --- a/style/index.css +++ b/style/index.css @@ -67,11 +67,18 @@ button a { display: flex; flex-direction: column; align-items: center; + width: 100%; } - .links{ + .links { display: flex; flex-direction: column; align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; } } \ No newline at end of file From 732fda5c897d0109fd1f63b981a6f5b811944799 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:07:22 +0300 Subject: [PATCH 35/40] Removed image-button class and moved the background elements to .topsection. --- .history/style/index_20230609175932.css | 85 +++++++++++++++++++++++ .history/style/index_20230609175934.css | 84 +++++++++++++++++++++++ .history/style/index_20230609180001.css | 88 ++++++++++++++++++++++++ .history/style/index_20230609180006.css | 88 ++++++++++++++++++++++++ .history/style/index_20230609180011.css | 89 +++++++++++++++++++++++++ .history/style/index_20230609180018.css | 89 +++++++++++++++++++++++++ .history/style/index_20230609180021.css | 89 +++++++++++++++++++++++++ .history/style/index_20230609180229.css | 87 ++++++++++++++++++++++++ .history/style/index_20230609180328.css | 85 +++++++++++++++++++++++ .history/style/index_20230609180331.css | 88 ++++++++++++++++++++++++ .history/style/index_20230609180335.css | 88 ++++++++++++++++++++++++ .history/style/index_20230609180348.css | 87 ++++++++++++++++++++++++ .history/style/index_20230609180519.css | 83 +++++++++++++++++++++++ .history/style/index_20230609180521.css | 82 +++++++++++++++++++++++ style/index.css | 12 ++-- 15 files changed, 1217 insertions(+), 7 deletions(-) create mode 100644 .history/style/index_20230609175932.css create mode 100644 .history/style/index_20230609175934.css create mode 100644 .history/style/index_20230609180001.css create mode 100644 .history/style/index_20230609180006.css create mode 100644 .history/style/index_20230609180011.css create mode 100644 .history/style/index_20230609180018.css create mode 100644 .history/style/index_20230609180021.css create mode 100644 .history/style/index_20230609180229.css create mode 100644 .history/style/index_20230609180328.css create mode 100644 .history/style/index_20230609180331.css create mode 100644 .history/style/index_20230609180335.css create mode 100644 .history/style/index_20230609180348.css create mode 100644 .history/style/index_20230609180519.css create mode 100644 .history/style/index_20230609180521.css diff --git a/.history/style/index_20230609175932.css b/.history/style/index_20230609175932.css new file mode 100644 index 000000000..3f652789c --- /dev/null +++ b/.history/style/index_20230609175932.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + +} \ No newline at end of file diff --git a/.history/style/index_20230609175934.css b/.history/style/index_20230609175934.css new file mode 100644 index 000000000..669a01e51 --- /dev/null +++ b/.history/style/index_20230609175934.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180001.css b/.history/style/index_20230609180001.css new file mode 100644 index 000000000..3b89e47a1 --- /dev/null +++ b/.history/style/index_20230609180001.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection{ + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180006.css b/.history/style/index_20230609180006.css new file mode 100644 index 000000000..a2e1a359f --- /dev/null +++ b/.history/style/index_20230609180006.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection{ + width: + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180011.css b/.history/style/index_20230609180011.css new file mode 100644 index 000000000..e3fc15d1b --- /dev/null +++ b/.history/style/index_20230609180011.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection{ + width: 80%; + + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180018.css b/.history/style/index_20230609180018.css new file mode 100644 index 000000000..1b803a82b --- /dev/null +++ b/.history/style/index_20230609180018.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection{ + width: 80%; + margin + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180021.css b/.history/style/index_20230609180021.css new file mode 100644 index 000000000..f51a25fba --- /dev/null +++ b/.history/style/index_20230609180021.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; + width: 600px; + height: 400px; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection{ + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180229.css b/.history/style/index_20230609180229.css new file mode 100644 index 000000000..ccf9d3cbf --- /dev/null +++ b/.history/style/index_20230609180229.css @@ -0,0 +1,87 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + color: white; + font-size: large; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180328.css b/.history/style/index_20230609180328.css new file mode 100644 index 000000000..6096dc71b --- /dev/null +++ b/.history/style/index_20230609180328.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; +} + +.image-button { + + color: white; + font-size: large; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180331.css b/.history/style/index_20230609180331.css new file mode 100644 index 000000000..26d9cb65c --- /dev/null +++ b/.history/style/index_20230609180331.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +.image-button { + + color: white; + font-size: large; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180335.css b/.history/style/index_20230609180335.css new file mode 100644 index 000000000..6be79d598 --- /dev/null +++ b/.history/style/index_20230609180335.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +.image-button { + + color: white; + font-size: large; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180348.css b/.history/style/index_20230609180348.css new file mode 100644 index 000000000..b88b57fe9 --- /dev/null +++ b/.history/style/index_20230609180348.css @@ -0,0 +1,87 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +.image-button { + color: white; + font-size: large; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180519.css b/.history/style/index_20230609180519.css new file mode 100644 index 000000000..eca8c1a1c --- /dev/null +++ b/.history/style/index_20230609180519.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180521.css b/.history/style/index_20230609180521.css new file mode 100644 index 000000000..93fd716ce --- /dev/null +++ b/.history/style/index_20230609180521.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 669a01e51..93fd716ce 100644 --- a/style/index.css +++ b/style/index.css @@ -13,16 +13,9 @@ nav { .topsection { display: flex; justify-content: center; -} - -.image-button { background-image: url("https://picsum.photos/600/400"); background-repeat: no-repeat; background-size: cover; - color: white; - font-size: large; - width: 600px; - height: 400px; } footer { @@ -81,4 +74,9 @@ button a { width: 40%; margin: 1% 0; } + + .topsection { + width: 80%; + margin: 0 auto; + } } \ No newline at end of file From 243fc8442f849cf60ab2c4c2dbf63bbde35f182f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:12:49 +0300 Subject: [PATCH 36/40] Fixed the button part and changed CSS sheet to move the text inside the topsection. --- .history/index_20230609180740.html | 66 +++++++++++++++++++ .history/index_20230609180742.html | 66 +++++++++++++++++++ .history/index_20230609180745.html | 65 +++++++++++++++++++ .history/index_20230609180746.html | 64 +++++++++++++++++++ .history/index_20230609180815.html | 64 +++++++++++++++++++ .history/index_20230609180817.html | 64 +++++++++++++++++++ .history/index_20230609180841.html | 64 +++++++++++++++++++ .history/index_20230609180843.html | 64 +++++++++++++++++++ .history/index_20230609180846.html | 64 +++++++++++++++++++ .history/index_20230609180926.html | 65 +++++++++++++++++++ .history/index_20230609180928.html | 65 +++++++++++++++++++ .history/index_20230609180932.html | 65 +++++++++++++++++++ .history/index_20230609180934.html | 65 +++++++++++++++++++ .history/index_20230609180939.html | 66 +++++++++++++++++++ .history/index_20230609181047.html | 66 +++++++++++++++++++ .history/index_20230609181049.html | 66 +++++++++++++++++++ .history/style/index_20230609180909.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609180913.css | 80 +++++++++++++++++++++++ .history/style/index_20230609181000.css | 81 ++++++++++++++++++++++++ .history/style/index_20230609181003.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609181007.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609181011.css | 82 ++++++++++++++++++++++++ .history/style/index_20230609181016.css | 83 ++++++++++++++++++++++++ .history/style/index_20230609181021.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609181022.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609181023.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609181027.css | 84 +++++++++++++++++++++++++ .history/style/index_20230609181031.css | 84 +++++++++++++++++++++++++ index.html | 8 +-- style/index.css | 6 +- 30 files changed, 2039 insertions(+), 6 deletions(-) create mode 100644 .history/index_20230609180740.html create mode 100644 .history/index_20230609180742.html create mode 100644 .history/index_20230609180745.html create mode 100644 .history/index_20230609180746.html create mode 100644 .history/index_20230609180815.html create mode 100644 .history/index_20230609180817.html create mode 100644 .history/index_20230609180841.html create mode 100644 .history/index_20230609180843.html create mode 100644 .history/index_20230609180846.html create mode 100644 .history/index_20230609180926.html create mode 100644 .history/index_20230609180928.html create mode 100644 .history/index_20230609180932.html create mode 100644 .history/index_20230609180934.html create mode 100644 .history/index_20230609180939.html create mode 100644 .history/index_20230609181047.html create mode 100644 .history/index_20230609181049.html create mode 100644 .history/style/index_20230609180909.css create mode 100644 .history/style/index_20230609180913.css create mode 100644 .history/style/index_20230609181000.css create mode 100644 .history/style/index_20230609181003.css create mode 100644 .history/style/index_20230609181007.css create mode 100644 .history/style/index_20230609181011.css create mode 100644 .history/style/index_20230609181016.css create mode 100644 .history/style/index_20230609181021.css create mode 100644 .history/style/index_20230609181022.css create mode 100644 .history/style/index_20230609181023.css create mode 100644 .history/style/index_20230609181027.css create mode 100644 .history/style/index_20230609181031.css diff --git a/.history/index_20230609180740.html b/.history/index_20230609180740.html new file mode 100644 index 000000000..cbb704fac --- /dev/null +++ b/.history/index_20230609180740.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ My Projects + +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180742.html b/.history/index_20230609180742.html new file mode 100644 index 000000000..020be8129 --- /dev/null +++ b/.history/index_20230609180742.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ My Projects + +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180745.html b/.history/index_20230609180745.html new file mode 100644 index 000000000..108bbda0d --- /dev/null +++ b/.history/index_20230609180745.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ My Projects +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180746.html b/.history/index_20230609180746.html new file mode 100644 index 000000000..d8fbae8ac --- /dev/null +++ b/.history/index_20230609180746.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ My Projects +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180815.html b/.history/index_20230609180815.html new file mode 100644 index 000000000..54af00e88 --- /dev/null +++ b/.history/index_20230609180815.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180817.html b/.history/index_20230609180817.html new file mode 100644 index 000000000..9b5941283 --- /dev/null +++ b/.history/index_20230609180817.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ My Projects +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180841.html b/.history/index_20230609180841.html new file mode 100644 index 000000000..ff9b2a5e7 --- /dev/null +++ b/.history/index_20230609180841.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180843.html b/.history/index_20230609180843.html new file mode 100644 index 000000000..4d8bbdae5 --- /dev/null +++ b/.history/index_20230609180843.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180846.html b/.history/index_20230609180846.html new file mode 100644 index 000000000..4d8bbdae5 --- /dev/null +++ b/.history/index_20230609180846.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180926.html b/.history/index_20230609180926.html new file mode 100644 index 000000000..1d3bcb88e --- /dev/null +++ b/.history/index_20230609180926.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ +

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180928.html b/.history/index_20230609180928.html new file mode 100644 index 000000000..ca7bdd3ed --- /dev/null +++ b/.history/index_20230609180928.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
SEAN KIPINÄ + +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180932.html b/.history/index_20230609180932.html new file mode 100644 index 000000000..566733fc1 --- /dev/null +++ b/.history/index_20230609180932.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+ <> +

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180934.html b/.history/index_20230609180934.html new file mode 100644 index 000000000..e6f5fc238 --- /dev/null +++ b/.history/index_20230609180934.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ +
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609180939.html b/.history/index_20230609180939.html new file mode 100644 index 000000000..366da5cb2 --- /dev/null +++ b/.history/index_20230609180939.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ

+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181047.html b/.history/index_20230609181047.html new file mode 100644 index 000000000..40f48fb3a --- /dev/null +++ b/.history/index_20230609181047.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181049.html b/.history/index_20230609181049.html new file mode 100644 index 000000000..aebd645a3 --- /dev/null +++ b/.history/index_20230609181049.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230609180909.css b/.history/style/index_20230609180909.css new file mode 100644 index 000000000..6496cb28b --- /dev/null +++ b/.history/style/index_20230609180909.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + display: flex; + justify-content: center; + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609180913.css b/.history/style/index_20230609180913.css new file mode 100644 index 000000000..f6f300702 --- /dev/null +++ b/.history/style/index_20230609180913.css @@ -0,0 +1,80 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181000.css b/.history/style/index_20230609181000.css new file mode 100644 index 000000000..594915d25 --- /dev/null +++ b/.history/style/index_20230609181000.css @@ -0,0 +1,81 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + dis +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181003.css b/.history/style/index_20230609181003.css new file mode 100644 index 000000000..9ae9b259a --- /dev/null +++ b/.history/style/index_20230609181003.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181007.css b/.history/style/index_20230609181007.css new file mode 100644 index 000000000..5f592bc51 --- /dev/null +++ b/.history/style/index_20230609181007.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + jus +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181011.css b/.history/style/index_20230609181011.css new file mode 100644 index 000000000..ccd817d8f --- /dev/null +++ b/.history/style/index_20230609181011.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: ; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181016.css b/.history/style/index_20230609181016.css new file mode 100644 index 000000000..1b43868ad --- /dev/null +++ b/.history/style/index_20230609181016.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181021.css b/.history/style/index_20230609181021.css new file mode 100644 index 000000000..2ae2a5050 --- /dev/null +++ b/.history/style/index_20230609181021.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + heigh +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181022.css b/.history/style/index_20230609181022.css new file mode 100644 index 000000000..dbd9d6e01 --- /dev/null +++ b/.history/style/index_20230609181022.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181023.css b/.history/style/index_20230609181023.css new file mode 100644 index 000000000..2e0a9662a --- /dev/null +++ b/.history/style/index_20230609181023.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181027.css b/.history/style/index_20230609181027.css new file mode 100644 index 000000000..8867b8be4 --- /dev/null +++ b/.history/style/index_20230609181027.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181031.css b/.history/style/index_20230609181031.css new file mode 100644 index 000000000..8867b8be4 --- /dev/null +++ b/.history/style/index_20230609181031.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 4fcc1de9e..aebd645a3 100644 --- a/index.html +++ b/index.html @@ -22,10 +22,10 @@

SEAN KIPINÄ

- +
+

SEAN KIPINÄ


+ +
diff --git a/style/index.css b/style/index.css index 93fd716ce..8867b8be4 100644 --- a/style/index.css +++ b/style/index.css @@ -11,11 +11,13 @@ nav { } .topsection { - display: flex; - justify-content: center; background-image: url("https://picsum.photos/600/400"); background-repeat: no-repeat; background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; } footer { From bdfa4bbf87d652ab0f03af1d42ff82bd2939440b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:14:20 +0300 Subject: [PATCH 37/40] Added padding to sections. --- .history/style/index_20230609181303.css | 85 +++++++++++++++++++++++ .history/style/index_20230609181326.css | 87 ++++++++++++++++++++++++ .history/style/index_20230609181328.css | 87 ++++++++++++++++++++++++ .history/style/index_20230609181332.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181333.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181337.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181338.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181340.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181349.css | 89 ++++++++++++++++++++++++ .history/style/index_20230609181351.css | 90 +++++++++++++++++++++++++ .history/style/index_20230609181358.css | 90 +++++++++++++++++++++++++ style/index.css | 6 ++ 12 files changed, 979 insertions(+) create mode 100644 .history/style/index_20230609181303.css create mode 100644 .history/style/index_20230609181326.css create mode 100644 .history/style/index_20230609181328.css create mode 100644 .history/style/index_20230609181332.css create mode 100644 .history/style/index_20230609181333.css create mode 100644 .history/style/index_20230609181337.css create mode 100644 .history/style/index_20230609181338.css create mode 100644 .history/style/index_20230609181340.css create mode 100644 .history/style/index_20230609181349.css create mode 100644 .history/style/index_20230609181351.css create mode 100644 .history/style/index_20230609181358.css diff --git a/.history/style/index_20230609181303.css b/.history/style/index_20230609181303.css new file mode 100644 index 000000000..b6d0a6ae0 --- /dev/null +++ b/.history/style/index_20230609181303.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181326.css b/.history/style/index_20230609181326.css new file mode 100644 index 000000000..703d5f90b --- /dev/null +++ b/.history/style/index_20230609181326.css @@ -0,0 +1,87 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + + + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181328.css b/.history/style/index_20230609181328.css new file mode 100644 index 000000000..9ffebe208 --- /dev/null +++ b/.history/style/index_20230609181328.css @@ -0,0 +1,87 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181332.css b/.history/style/index_20230609181332.css new file mode 100644 index 000000000..68a76449f --- /dev/null +++ b/.history/style/index_20230609181332.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section{ + padding +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181333.css b/.history/style/index_20230609181333.css new file mode 100644 index 000000000..b6a3ccacd --- /dev/null +++ b/.history/style/index_20230609181333.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section{ + padding: +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181337.css b/.history/style/index_20230609181337.css new file mode 100644 index 000000000..087cf5805 --- /dev/null +++ b/.history/style/index_20230609181337.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section{ + padding:5% 0 +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181338.css b/.history/style/index_20230609181338.css new file mode 100644 index 000000000..9bba6227d --- /dev/null +++ b/.history/style/index_20230609181338.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section{ + padding:5% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181340.css b/.history/style/index_20230609181340.css new file mode 100644 index 000000000..bbc8ca16b --- /dev/null +++ b/.history/style/index_20230609181340.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +section { + padding: 5% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181349.css b/.history/style/index_20230609181349.css new file mode 100644 index 000000000..0921bcab5 --- /dev/null +++ b/.history/style/index_20230609181349.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +headersection { + padding: 5% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181351.css b/.history/style/index_20230609181351.css new file mode 100644 index 000000000..f7a9f9d74 --- /dev/null +++ b/.history/style/index_20230609181351.css @@ -0,0 +1,90 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 5% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181358.css b/.history/style/index_20230609181358.css new file mode 100644 index 000000000..dadff6d39 --- /dev/null +++ b/.history/style/index_20230609181358.css @@ -0,0 +1,90 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 8867b8be4..dadff6d39 100644 --- a/style/index.css +++ b/style/index.css @@ -5,6 +5,11 @@ max-width: 100%; } +header, +section { + padding: 6% 0; +} + nav { display: flex; justify-content: space-between; @@ -18,6 +23,7 @@ nav { justify-content: center; align-items: center; height: 50vh; + text-align: center; } footer { From 6851fb1c67ae0debae58bec562197eedea70dfc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:21:27 +0300 Subject: [PATCH 38/40] Removed extra row div tag and created a CSS .row div tag instead to display 3 per row. --- .history/index_20230609181449.html | 66 +++++++++++++++++ .history/index_20230609181500.html | 65 +++++++++++++++++ .history/index_20230609181502.html | 64 +++++++++++++++++ .history/index_20230609181707.html | 64 +++++++++++++++++ .history/index_20230609181715.html | 64 +++++++++++++++++ .history/index_20230609181721.html | 64 +++++++++++++++++ .history/index_20230609181730.html | 64 +++++++++++++++++ .history/style/index_20230609181546.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181548.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181555.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181556.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181559.css | 90 +++++++++++++++++++++++ .history/style/index_20230609181607.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181611.css | 91 +++++++++++++++++++++++ .history/style/index_20230609181613.css | 93 ++++++++++++++++++++++++ .history/style/index_20230609181615.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181623.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181624.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181628.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181635.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181641.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181642.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181643.css | 94 ++++++++++++++++++++++++ .history/style/index_20230609181644.css | 95 +++++++++++++++++++++++++ .history/style/index_20230609181648.css | 95 +++++++++++++++++++++++++ .history/style/index_20230609181752.css | 95 +++++++++++++++++++++++++ index.html | 2 - style/index.css | 7 +- 28 files changed, 2223 insertions(+), 3 deletions(-) create mode 100644 .history/index_20230609181449.html create mode 100644 .history/index_20230609181500.html create mode 100644 .history/index_20230609181502.html create mode 100644 .history/index_20230609181707.html create mode 100644 .history/index_20230609181715.html create mode 100644 .history/index_20230609181721.html create mode 100644 .history/index_20230609181730.html create mode 100644 .history/style/index_20230609181546.css create mode 100644 .history/style/index_20230609181548.css create mode 100644 .history/style/index_20230609181555.css create mode 100644 .history/style/index_20230609181556.css create mode 100644 .history/style/index_20230609181559.css create mode 100644 .history/style/index_20230609181607.css create mode 100644 .history/style/index_20230609181611.css create mode 100644 .history/style/index_20230609181613.css create mode 100644 .history/style/index_20230609181615.css create mode 100644 .history/style/index_20230609181623.css create mode 100644 .history/style/index_20230609181624.css create mode 100644 .history/style/index_20230609181628.css create mode 100644 .history/style/index_20230609181635.css create mode 100644 .history/style/index_20230609181641.css create mode 100644 .history/style/index_20230609181642.css create mode 100644 .history/style/index_20230609181643.css create mode 100644 .history/style/index_20230609181644.css create mode 100644 .history/style/index_20230609181648.css create mode 100644 .history/style/index_20230609181752.css diff --git a/.history/index_20230609181449.html b/.history/index_20230609181449.html new file mode 100644 index 000000000..2f17d8884 --- /dev/null +++ b/.history/index_20230609181449.html @@ -0,0 +1,66 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181500.html b/.history/index_20230609181500.html new file mode 100644 index 000000000..c718af546 --- /dev/null +++ b/.history/index_20230609181500.html @@ -0,0 +1,65 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+ +
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181502.html b/.history/index_20230609181502.html new file mode 100644 index 000000000..1b92bf4d1 --- /dev/null +++ b/.history/index_20230609181502.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181707.html b/.history/index_20230609181707.html new file mode 100644 index 000000000..6c8ee38c0 --- /dev/null +++ b/.history/index_20230609181707.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+ < class="portfolio-element"> + +

Project 3

+ +
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181715.html b/.history/index_20230609181715.html new file mode 100644 index 000000000..e9e724ab2 --- /dev/null +++ b/.history/index_20230609181715.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+ + +

Project 3

+ + +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181721.html b/.history/index_20230609181721.html new file mode 100644 index 000000000..1b92bf4d1 --- /dev/null +++ b/.history/index_20230609181721.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/index_20230609181730.html b/.history/index_20230609181730.html new file mode 100644 index 000000000..913d440f1 --- /dev/null +++ b/.history/index_20230609181730.html @@ -0,0 +1,64 @@ + + + + + + + + Sean Kipinä Portfolio + + + +
+ +
+ +
+
+

SEAN KIPINÄ


+ +
+
+ +
+
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+
+ + + + \ No newline at end of file diff --git a/.history/style/index_20230609181546.css b/.history/style/index_20230609181546.css new file mode 100644 index 000000000..d8ffdcdc5 --- /dev/null +++ b/.history/style/index_20230609181546.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181548.css b/.history/style/index_20230609181548.css new file mode 100644 index 000000000..545421333 --- /dev/null +++ b/.history/style/index_20230609181548.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: ; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181555.css b/.history/style/index_20230609181555.css new file mode 100644 index 000000000..8cdb82e94 --- /dev/null +++ b/.history/style/index_20230609181555.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181556.css b/.history/style/index_20230609181556.css new file mode 100644 index 000000000..8cdb82e94 --- /dev/null +++ b/.history/style/index_20230609181556.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + padding: 20px; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181559.css b/.history/style/index_20230609181559.css new file mode 100644 index 000000000..3d0c9ae16 --- /dev/null +++ b/.history/style/index_20230609181559.css @@ -0,0 +1,90 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181607.css b/.history/style/index_20230609181607.css new file mode 100644 index 000000000..025da3549 --- /dev/null +++ b/.history/style/index_20230609181607.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181611.css b/.history/style/index_20230609181611.css new file mode 100644 index 000000000..74a90e102 --- /dev/null +++ b/.history/style/index_20230609181611.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181613.css b/.history/style/index_20230609181613.css new file mode 100644 index 000000000..14af5d63f --- /dev/null +++ b/.history/style/index_20230609181613.css @@ -0,0 +1,93 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ + +} +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181615.css b/.history/style/index_20230609181615.css new file mode 100644 index 000000000..f287939d4 --- /dev/null +++ b/.history/style/index_20230609181615.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ + +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181623.css b/.history/style/index_20230609181623.css new file mode 100644 index 000000000..bae98313a --- /dev/null +++ b/.history/style/index_20230609181623.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181624.css b/.history/style/index_20230609181624.css new file mode 100644 index 000000000..b61ef3dda --- /dev/null +++ b/.history/style/index_20230609181624.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: ; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181628.css b/.history/style/index_20230609181628.css new file mode 100644 index 000000000..1331ac376 --- /dev/null +++ b/.history/style/index_20230609181628.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: 40; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181635.css b/.history/style/index_20230609181635.css new file mode 100644 index 000000000..b61ef3dda --- /dev/null +++ b/.history/style/index_20230609181635.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: ; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181641.css b/.history/style/index_20230609181641.css new file mode 100644 index 000000000..089d034c9 --- /dev/null +++ b/.history/style/index_20230609181641.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: 3; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181642.css b/.history/style/index_20230609181642.css new file mode 100644 index 000000000..b61ef3dda --- /dev/null +++ b/.history/style/index_20230609181642.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: ; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181643.css b/.history/style/index_20230609181643.css new file mode 100644 index 000000000..4e772ed34 --- /dev/null +++ b/.history/style/index_20230609181643.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: 30; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181644.css b/.history/style/index_20230609181644.css new file mode 100644 index 000000000..567f6c232 --- /dev/null +++ b/.history/style/index_20230609181644.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row{ +width: 30%; +} +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181648.css b/.history/style/index_20230609181648.css new file mode 100644 index 000000000..920235519 --- /dev/null +++ b/.history/style/index_20230609181648.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row { + width: 30%; +} +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609181752.css b/.history/style/index_20230609181752.css new file mode 100644 index 000000000..b4fa1c367 --- /dev/null +++ b/.history/style/index_20230609181752.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; +} +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/index.html b/index.html index aebd645a3..913d440f1 100644 --- a/index.html +++ b/index.html @@ -42,8 +42,6 @@

SEAN KIPINÄ


Project 3

-
-

Project 4

diff --git a/style/index.css b/style/index.css index dadff6d39..b4fa1c367 100644 --- a/style/index.css +++ b/style/index.css @@ -35,8 +35,13 @@ footer { .row { display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-evenly; - padding: 20px; +} + +.row div { + width: 30%; +} } .portfolio-element { From 41330f3e995c17ce1e9558d6cd1a4c88a78939dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:28:05 +0300 Subject: [PATCH 39/40] Changed font sizing for html, body, and h1 tags. --- .history/style/index_20230609182151.css | 96 +++++++++++++++++++++ .history/style/index_20230609182153.css | 95 +++++++++++++++++++++ .history/style/index_20230609182202.css | 95 +++++++++++++++++++++ .history/style/index_20230609182205.css | 95 +++++++++++++++++++++ .history/style/index_20230609182206.css | 95 +++++++++++++++++++++ .history/style/index_20230609182215.css | 95 +++++++++++++++++++++ .history/style/index_20230609182315.css | 95 +++++++++++++++++++++ .history/style/index_20230609182322.css | 97 +++++++++++++++++++++ .history/style/index_20230609182323.css | 98 ++++++++++++++++++++++ .history/style/index_20230609182328.css | 98 ++++++++++++++++++++++ .history/style/index_20230609182330.css | 98 ++++++++++++++++++++++ .history/style/index_20230609182334.css | 99 ++++++++++++++++++++++ .history/style/index_20230609182350.css | 99 ++++++++++++++++++++++ .history/style/index_20230609182352.css | 99 ++++++++++++++++++++++ .history/style/index_20230609182401.css | 100 ++++++++++++++++++++++ .history/style/index_20230609182404.css | 102 ++++++++++++++++++++++ .history/style/index_20230609182406.css | 103 +++++++++++++++++++++++ .history/style/index_20230609182419.css | 103 +++++++++++++++++++++++ .history/style/index_20230609182428.css | 103 +++++++++++++++++++++++ .history/style/index_20230609182431.css | 105 +++++++++++++++++++++++ .history/style/index_20230609182432.css | 106 +++++++++++++++++++++++ .history/style/index_20230609182442.css | 106 +++++++++++++++++++++++ .history/style/index_20230609182450.css | 106 +++++++++++++++++++++++ .history/style/index_20230609182451.css | 107 ++++++++++++++++++++++++ .history/style/index_20230609182557.css | 107 ++++++++++++++++++++++++ .history/style/index_20230609182604.css | 107 ++++++++++++++++++++++++ .history/style/index_20230609182605.css | 107 ++++++++++++++++++++++++ style/index.css | 14 +++- 28 files changed, 2729 insertions(+), 1 deletion(-) create mode 100644 .history/style/index_20230609182151.css create mode 100644 .history/style/index_20230609182153.css create mode 100644 .history/style/index_20230609182202.css create mode 100644 .history/style/index_20230609182205.css create mode 100644 .history/style/index_20230609182206.css create mode 100644 .history/style/index_20230609182215.css create mode 100644 .history/style/index_20230609182315.css create mode 100644 .history/style/index_20230609182322.css create mode 100644 .history/style/index_20230609182323.css create mode 100644 .history/style/index_20230609182328.css create mode 100644 .history/style/index_20230609182330.css create mode 100644 .history/style/index_20230609182334.css create mode 100644 .history/style/index_20230609182350.css create mode 100644 .history/style/index_20230609182352.css create mode 100644 .history/style/index_20230609182401.css create mode 100644 .history/style/index_20230609182404.css create mode 100644 .history/style/index_20230609182406.css create mode 100644 .history/style/index_20230609182419.css create mode 100644 .history/style/index_20230609182428.css create mode 100644 .history/style/index_20230609182431.css create mode 100644 .history/style/index_20230609182432.css create mode 100644 .history/style/index_20230609182442.css create mode 100644 .history/style/index_20230609182450.css create mode 100644 .history/style/index_20230609182451.css create mode 100644 .history/style/index_20230609182557.css create mode 100644 .history/style/index_20230609182604.css create mode 100644 .history/style/index_20230609182605.css diff --git a/.history/style/index_20230609182151.css b/.history/style/index_20230609182151.css new file mode 100644 index 000000000..4b6ba356a --- /dev/null +++ b/.history/style/index_20230609182151.css @@ -0,0 +1,96 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + mar +} +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182153.css b/.history/style/index_20230609182153.css new file mode 100644 index 000000000..477bebcf2 --- /dev/null +++ b/.history/style/index_20230609182153.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + mar +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182202.css b/.history/style/index_20230609182202.css new file mode 100644 index 000000000..0bd5f8796 --- /dev/null +++ b/.history/style/index_20230609182202.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182205.css b/.history/style/index_20230609182205.css new file mode 100644 index 000000000..8cb896198 --- /dev/null +++ b/.history/style/index_20230609182205.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3 +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182206.css b/.history/style/index_20230609182206.css new file mode 100644 index 000000000..e97de288d --- /dev/null +++ b/.history/style/index_20230609182206.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182215.css b/.history/style/index_20230609182215.css new file mode 100644 index 000000000..ba69dcd00 --- /dev/null +++ b/.history/style/index_20230609182215.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182315.css b/.history/style/index_20230609182315.css new file mode 100644 index 000000000..eda2d49c2 --- /dev/null +++ b/.history/style/index_20230609182315.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} +html +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182322.css b/.history/style/index_20230609182322.css new file mode 100644 index 000000000..4c34e70c5 --- /dev/null +++ b/.history/style/index_20230609182322.css @@ -0,0 +1,97 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} +html{ + +} +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182323.css b/.history/style/index_20230609182323.css new file mode 100644 index 000000000..de48a7411 --- /dev/null +++ b/.history/style/index_20230609182323.css @@ -0,0 +1,98 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} +html{ + +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182328.css b/.history/style/index_20230609182328.css new file mode 100644 index 000000000..b3bf07755 --- /dev/null +++ b/.history/style/index_20230609182328.css @@ -0,0 +1,98 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} +html{ +font-size: ; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182330.css b/.history/style/index_20230609182330.css new file mode 100644 index 000000000..3ef81df9b --- /dev/null +++ b/.history/style/index_20230609182330.css @@ -0,0 +1,98 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} +html{ +font-size: 6; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182334.css b/.history/style/index_20230609182334.css new file mode 100644 index 000000000..730e09002 --- /dev/null +++ b/.history/style/index_20230609182334.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 60.5%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182350.css b/.history/style/index_20230609182350.css new file mode 100644 index 000000000..1a3ffe269 --- /dev/null +++ b/.history/style/index_20230609182350.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 6.5%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182352.css b/.history/style/index_20230609182352.css new file mode 100644 index 000000000..1af3efa7f --- /dev/null +++ b/.history/style/index_20230609182352.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182401.css b/.history/style/index_20230609182401.css new file mode 100644 index 000000000..3dc4a4d80 --- /dev/null +++ b/.history/style/index_20230609182401.css @@ -0,0 +1,100 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182404.css b/.history/style/index_20230609182404.css new file mode 100644 index 000000000..4e2e9eef0 --- /dev/null +++ b/.history/style/index_20230609182404.css @@ -0,0 +1,102 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body{ + +} +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182406.css b/.history/style/index_20230609182406.css new file mode 100644 index 000000000..ef230af1c --- /dev/null +++ b/.history/style/index_20230609182406.css @@ -0,0 +1,103 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body{ + +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182419.css b/.history/style/index_20230609182419.css new file mode 100644 index 000000000..b58e33ab5 --- /dev/null +++ b/.history/style/index_20230609182419.css @@ -0,0 +1,103 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182428.css b/.history/style/index_20230609182428.css new file mode 100644 index 000000000..bf05ffe13 --- /dev/null +++ b/.history/style/index_20230609182428.css @@ -0,0 +1,103 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} +h1 +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182431.css b/.history/style/index_20230609182431.css new file mode 100644 index 000000000..df26b2db0 --- /dev/null +++ b/.history/style/index_20230609182431.css @@ -0,0 +1,105 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} +h1{ + +} +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182432.css b/.history/style/index_20230609182432.css new file mode 100644 index 000000000..ae188dd3d --- /dev/null +++ b/.history/style/index_20230609182432.css @@ -0,0 +1,106 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} +h1{ + +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182442.css b/.history/style/index_20230609182442.css new file mode 100644 index 000000000..8904e9712 --- /dev/null +++ b/.history/style/index_20230609182442.css @@ -0,0 +1,106 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} +h1{ +font-size: ; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182450.css b/.history/style/index_20230609182450.css new file mode 100644 index 000000000..a8e365998 --- /dev/null +++ b/.history/style/index_20230609182450.css @@ -0,0 +1,106 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} +h1{ +font-size: 5; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182451.css b/.history/style/index_20230609182451.css new file mode 100644 index 000000000..1017379f2 --- /dev/null +++ b/.history/style/index_20230609182451.css @@ -0,0 +1,107 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size 1.8rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182557.css b/.history/style/index_20230609182557.css new file mode 100644 index 000000000..6e8d46cc0 --- /dev/null +++ b/.history/style/index_20230609182557.css @@ -0,0 +1,107 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.8rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182604.css b/.history/style/index_20230609182604.css new file mode 100644 index 000000000..33b44f1e5 --- /dev/null +++ b/.history/style/index_20230609182604.css @@ -0,0 +1,107 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182605.css b/.history/style/index_20230609182605.css new file mode 100644 index 000000000..33b44f1e5 --- /dev/null +++ b/.history/style/index_20230609182605.css @@ -0,0 +1,107 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index b4fa1c367..33b44f1e5 100644 --- a/style/index.css +++ b/style/index.css @@ -5,6 +5,18 @@ max-width: 100%; } +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + header, section { padding: 6% 0; @@ -41,7 +53,7 @@ footer { .row div { width: 30%; -} + margin: 3% 0; } .portfolio-element { From 5de0a6f4fbe87f835e02d4520b819ecf4c61c5f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sean=20Kipin=C3=A4?= Date: Fri, 9 Jun 2023 18:30:10 +0300 Subject: [PATCH 40/40] Fixed row div two display 2 projects per row in css max-width 500px. --- .history/style/index_20230609182839.css | 108 +++++++++++++++++++++++ .history/style/index_20230609182841.css | 108 +++++++++++++++++++++++ .history/style/index_20230609182843.css | 108 +++++++++++++++++++++++ .history/style/index_20230609182846.css | 110 +++++++++++++++++++++++ .history/style/index_20230609182847.css | 110 +++++++++++++++++++++++ .history/style/index_20230609182850.css | 111 ++++++++++++++++++++++++ .history/style/index_20230609182918.css | 111 ++++++++++++++++++++++++ .history/style/index_20230609182920.css | 111 ++++++++++++++++++++++++ .history/style/index_20230609182927.css | 111 ++++++++++++++++++++++++ style/index.css | 4 + 10 files changed, 992 insertions(+) create mode 100644 .history/style/index_20230609182839.css create mode 100644 .history/style/index_20230609182841.css create mode 100644 .history/style/index_20230609182843.css create mode 100644 .history/style/index_20230609182846.css create mode 100644 .history/style/index_20230609182847.css create mode 100644 .history/style/index_20230609182850.css create mode 100644 .history/style/index_20230609182918.css create mode 100644 .history/style/index_20230609182920.css create mode 100644 .history/style/index_20230609182927.css diff --git a/.history/style/index_20230609182839.css b/.history/style/index_20230609182839.css new file mode 100644 index 000000000..a95e6d41a --- /dev/null +++ b/.history/style/index_20230609182839.css @@ -0,0 +1,108 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + +} \ No newline at end of file diff --git a/.history/style/index_20230609182841.css b/.history/style/index_20230609182841.css new file mode 100644 index 000000000..cbefda3dd --- /dev/null +++ b/.history/style/index_20230609182841.css @@ -0,0 +1,108 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + .row +} \ No newline at end of file diff --git a/.history/style/index_20230609182843.css b/.history/style/index_20230609182843.css new file mode 100644 index 000000000..bcff2e8ed --- /dev/null +++ b/.history/style/index_20230609182843.css @@ -0,0 +1,108 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + .row div +} \ No newline at end of file diff --git a/.history/style/index_20230609182846.css b/.history/style/index_20230609182846.css new file mode 100644 index 000000000..a9520f568 --- /dev/null +++ b/.history/style/index_20230609182846.css @@ -0,0 +1,110 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + .row div{ + wid + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182847.css b/.history/style/index_20230609182847.css new file mode 100644 index 000000000..ab6adf6f8 --- /dev/null +++ b/.history/style/index_20230609182847.css @@ -0,0 +1,110 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + .row div{ + width: 100%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182850.css b/.history/style/index_20230609182850.css new file mode 100644 index 000000000..8cc75aab5 --- /dev/null +++ b/.history/style/index_20230609182850.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + + .row div { + width: 40%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182918.css b/.history/style/index_20230609182918.css new file mode 100644 index 000000000..8c6814a23 --- /dev/null +++ b/.history/style/index_20230609182918.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + + .row div { + width: 0%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182920.css b/.history/style/index_20230609182920.css new file mode 100644 index 000000000..991a9718d --- /dev/null +++ b/.history/style/index_20230609182920.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + + .row div { + width: 80%; + } +} \ No newline at end of file diff --git a/.history/style/index_20230609182927.css b/.history/style/index_20230609182927.css new file mode 100644 index 000000000..8cc75aab5 --- /dev/null +++ b/.history/style/index_20230609182927.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; +} + +html { + font-size: 63.5%; +} + +body { + font-size: 1.4rem; +} + +h1 { + font-size: 5rem; +} + +header, +section { + padding: 6% 0; +} + +nav { + display: flex; + justify-content: space-between; +} + +.topsection { + background-image: url("https://picsum.photos/600/400"); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + height: 50vh; + text-align: center; +} + +footer { + background-color: lightgrey; + padding: 20px; + text-align: center; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.row div { + width: 30%; + margin: 3% 0; +} + +.portfolio-element { + text-align: center; +} + +button { + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} + +button:hover { + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} + +@media (max-width: 800px) {} + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .links button { + width: 40%; + margin: 1% 0; + } + + .topsection { + width: 80%; + margin: 0 auto; + } + + .row div { + width: 40%; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 33b44f1e5..8cc75aab5 100644 --- a/style/index.css +++ b/style/index.css @@ -104,4 +104,8 @@ button a { width: 80%; margin: 0 auto; } + + .row div { + width: 40%; + } } \ No newline at end of file