Code Monkey home page Code Monkey logo

project0's Introduction

Project 0

Web Programming with Python and JavaScript

Visit site here https://mattthehat.github.io/project0/

Simple HTML site for CS50 Project 0

The site comprises of 4 html pages and built with Boostrap 4 framework with custom styles

  • The homepage
  • About page
  • Events page
  • News page

Homepage

Hero

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.

News

The news section spans 7 grid columns and has custom 'news' divs inside.Tthe news divs have styles for h3 and paragraphs.

Events

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.

Tesimonials

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).

Newsletter

The newsletter signup is a a simple Bootsrap 4 form. Please note form does not actually submit.

News page

Hero

The hero section is similar to the homepage but with a different background image. It has an extended class of hero-news.

News items

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.

Events

Hero

The Events page also has a hero, again extending the class and has a differemt background-image.

Events

The events items are custom width bootstrap 4 cards

About page

Hero

The about page also has an extended hero section.

List

An unordered list follows

Fact table

A Boostrap 4 table lists facts about Devon.

Iamge

The last section shows a map of UK with Devon marked on it.

Notes

All images are from Pexcels with exception of the map which came from pixabay (edited to add the circle).

CSS

The CSS was built using SASS/SCSS compiler

Content

Pleae note, the news and events listed on the site are entirely ficticious adn so are the dates.

project0's People

Contributors

mattthehat avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.