Thinking of becoming a wedding planner?

Your search of a brand new website is over. Here is everything you need for your business to get a flying start!

https://antonrasegard.github.io/white-wedding/

This is a website for a wedding planner, built because I have a friend who is starting up her own business in this very occupation. The thought is that the site should represent her and others who want to sell the concept of happily ever after through big, beautiful pictures and clean, white design.

As a user of this website, I'd like to be able to get a great first impression of this specific wedding planner. This is done by having a home page with quotes, a big beautiful picture and a navigation bar in wedding white with a logo to match. I would also like to be able to see pictures of former events that this planner has done. That is done by watching the gallery page. Naturally, I need to be able to find out more information about who this wedding planner is and what he or she (in this case she) has done to get her to this spot in her life. Therefore I have added an about page with information and a timeline. Lastly, every wedding prospect needs to have the possibility to contact the wedding planner via the site. That is when the customer will use the contact page, where you can enter your name, email, chosen date and write a bit about who you are and what you'd like to be helped with for your wedding.

On every page you'll see the navbar, the logo and also a footer at the bottom, which will lead you to the wedding planner's various social media accounts. Transparency is key and the more connection you sense will increase your likelihood of hiring this specific planner over other ones with similar qualifications.

As this is my first solo project, my wireframe is limited. But I will add a link to a picture of it, since I actually sketched up the design on an empty envelope. I had the basic design quite clear for me from the start. I am happy to say that I was able to follow my wireframe and come up with a similar end result. Yey me!

Wireframe: https://imgur.com/zi2ht0j

I had misunderstood and thought it was enough to git commit after a few changes. Thankfully, my mentor explained that I had to push it out as well, for my progress to be properly seen. This happened when most of my navigation bar was done. Just thought I would give some heads up.

We have a logo up in the right corner and a navigation bar in the top right. We also have a footer with social media-links in the bottom. These three features are permanent and can be seen on each page on the website. The navbar and logo have transparent backgrounds and are featured on top of the main page background.

In total we have four different pages on this site: index.html acts as the home page. It is supposed to lure potential customers in by being clean and inviting. It also has quotes from previous, happy customers which are responsive and can be seen on any platform. gallery.html has a collage of happy wedding pictures to get potential customers fired up. about.html provides information about the wedding planner and his/her background. Why he/she is the perfect person for the job. It also features a timeline with important events in the planner's own life. You know, for a personal touch. contact.html will give potential customers or collaborators the chance to contact the wedding planner with a form, where you can put in information about the upcoming wedding itself.

• Feature 1 - Navigation through the four pages. The navigation bar lets users navigate freely between the four pages and shows which is currently active through highlighting.
• Feature 2 - The items on the navbar all have an active class which shines brighter when you are on the page in question, as a navigation help.
• Feature 3 - The navbar collapses when featured on a smaller, cellphonesque screen.
• Feature 4 - The footer navigates to social media links outside of the webpage. They open in a new tab.
• Feature 5 - The main background images on each site zooms in just ever so slightly when you arrive at each page, just to give a more slick look.
• Feature 6 - All pages have a slightly dark overlay, to contrast the photos against the bright-coloured logo and navbar.
• Feature 7 - When you hover over the navigation items, you'll get an overlay in transparent white through the hover.css-library.
• Feature 8 - All fields on the contact page are marked the with the required value, meaning that they have to be filled in in order for the message to be sent.

I would like to make this website fully functional in the future, meaning that I will ad a back end solution to make the contact page fully functioning, setting it up to the wedding planner's email account. I'd also naturally wish to improve the styling, because come on... I have only coded for a month-and-a-half and I am thus far quite limited. This is a good, responsive template built upon the lessons which you have given me. I bet that in a month or two, I will be able to rewrite most of the code in a better, much more efficient manner.

As stated above. When we learn back end and gets further into the course, I naturally want to develop this site so we can have the possibility of actually sending messages to the planner and hooking it up to an email of his/her choosing.

• [HTML] This project uses HTML as its base language.
• [CSS] This project uses CSS for bits that require personal styling, overwriting the more conventional Bootstrap styles.
• Bootstrap This project uses Bootstrap for default styling.
• [JavaScript/jQuery] Calm down. I'm not that advanced yet. But to manage to get some responsive bits working, I added the jQuery-links from Bootstrap components' start page.
• FontAwesome I ended up only using FontAwesome for the social media-links in the footer. But there, they were essential!
• GoogleFonts This project uses three fonts (Great Vibes, Raleway & Roboto) found on the Google Fonts website.
• Google Image Search All images are from Google and are of the kind which are allowed to be used and altered. I don't want no copyright infringement problems here, y'all.

Well, since this is my first project and basically a test run for bigger things to come, my testing have been quite limited. I have checked the website countless of times on computer, cell phone and iPad to see if it really is as responsive as it looks in the Google DevTools. Increasingly, day by day, it has become better and better. I have also run the code through https://validator.w3.org/ and the styling through https://jigsaw.w3.org/css-validator/. So far, so good. I don't seem to have forgotten anything in terms of brackets or misspelled words. So once again, yey me!

Okay, so I added my website "White Wedding" to Github Pages early on in the process so that I would be able to check it on my phone without accessing Gitpod. Also, I was quite infatuated just with having created a website, so I

Inspiration from the navigation bar came from the Whiskey Drop-project. That is also where I found the idea to use a full-width background picture with an opaque overlay for the home page. Inspo for the footer came from the Love Running-project. The idea with a timeline and a divided page on bigger screens - as seen on the about-page - came from the resume-project. I also took inspiration to using the hover.css-library for a sweep-to-bottom-feature from that project.

So yes, all the credits here go to Code Institute - my fabulous teachers who have taught me everything I so far know.

The content is made up by me, but some of the information added is based on my friend, the wedding planner, and her life. It's been a wild ride creating this. Many hairs have been pulled in this annoying process of getting things to work as you wish. Still, I wouldn't have it any other way. There have been problems constantly, even though I took a lot of inspiration from earlier trial projects we have done during the modules. It's one thing following a path set-up by tutors, with given instructors. A whole other business giving life to an original idea. Anyway, it should be working now. If there are issues, they should be minor at the moment. I have done all I can to make it a fully functional site, testing on different screen sizes. Often I have figured out the problems through using my cellphone, which is quite narrow in width. I look forward to hearing what you think about my first website!

• The photos used in this site were obtained from Google, searching for "wedding joy", "wedding bride", "wedding petals", "wedding rings", "wedding dress", "wedding cake", "wedding dinner", "wedding cake", "wedding sunset". "wedding hair", "wedding beach", "wedding bouquet", "wedding drink" and "champagne bubbles". I only chose photos that I was allowed to use. Naturally these photos should be replaced by more personal photos if this website ever becomes used by an actual wedding planner.

• I received inspiration for this project from my friend Madeleine, who is training to become a wedding planner. Workwise, my inspiration came from earlier projects made with you at the Code Institute.
• Throughout my project, I have researched by visiting other wedding planning websites, to find inspiration. I have, however, not used any elements from these sites.
• Thanks for the lessons so far. Let's get on to the next one!