Web Programming with Python and JavaScript
Visit site here https://mattthehat.github.io/project0/
The site comprises of 4 html pages and built with Boostrap 4 framework with custom styles
- The homepage
- About page
- Events page
- News page
The hero section. This has a h1 and paragraph centred using flexbox justify-content center and align items center.
The next section is split in 2 parts. A news section and events section.
The news section spans 7 grid columns and has custom 'news' divs inside.Tthe news divs have styles for h3 and paragraphs.
The events section has a span of 4 grid columns and is offset by 1 grid column.
The event listings are made using boostrap 4's ul list group and items.
The Testimonials section is a custom component within a col-12 span.
The testimonial div is a flex container with just-content: space-between.
The testimonial item is a div with a width of 49% that resolves to a width of 100% on mobile (768px).
The newsletter signup is a a simple Bootsrap 4 form. Please note form does not actually submit.
The hero section is similar to the homepage but with a different background image. It has an extended class of hero-news.
The news items are 2 modified bootstrap card with custom widths. The lead story has a custom image div container that restricts the height of the displayed image.
The Events page also has a hero, again extending the class and has a differemt background-image.
The events items are custom width bootstrap 4 cards
The about page also has an extended hero section.
An unordered list follows
A Boostrap 4 table lists facts about Devon.
The last section shows a map of UK with Devon marked on it.
All images are from Pexcels with exception of the map which came from pixabay (edited to add the circle).
The CSS was built using SASS/SCSS compiler
Pleae note, the news and events listed on the site are entirely ficticious adn so are the dates.