Git Product home page Git Product logo

d1ffamp-portfolio1_sepresub's Introduction

This is the one lads

This is the one lads is a sites that helps existing clan members to arrange co-op sessions in the game Destiny 2. It also enables new people to request to join the clan in order play with more experienced clan members. This is the one lads is designed for existing and new Destiny2 players to come together to have a good gaming experience.

Responsive view

Features

  • Navigation Bar

    • Featured on all three pages, the full responsive navigation bar includes links to the Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
    • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

Nav Bar

  • The landing page image

    • The landing includes a photograph with text overlay to allow the user to see exactly to whom this site would be applicable to.
    • This section introduces the user to This is the one lads with an eye catching animation of the Destiny2 logo to grab their attention.

Landing Page

  • Club Ethos Section

    • The clan ethos section will allow the user to see the benefits of joining the clan.
    • This user will see the value of signing up for This is the one lads in order to enjou the full Destiny2 experience.

Club Ethos

  • Meetup Times section

    • This section will allow the user to see exactly when the different in-game avtivities will happen and what we will be doing together.
    • This section will be updated as game content changes to keep the user up to date.

Meetup Times

  • The Footer

    • The footer section includes links to the relevant social media sites for Love This is the one lads. The links will open to a new tab to allow easy navigation for the user.
    • The footer is valuable to the user as it encourages them to keep connected via social media

Footer

  • Gallery

    • The gallery will provide the user with supporting images to see what Destiny2 look like.
    • This section is valuable to the user as they will be able to easily identify the types of activities and features available in the game.

Gallery

  • The Sign Up Page

    • This page will allow the user to get signed up to This is the one lads to start playing with the clan. The user will be able specify if they would like to play on Playsation, Steam or both. The user will be asked to submit their full name and email address.

Sign Up

Features Left to Implement

  • Add a looking for group(LFG) section, where users can select a specific ativity at preferred time.

Testing

The site was tested in Firefox and Google Chrome at varying screen sizes using dev tools

Using dev tools Small screen testing

The site remains responive across multiple screen sizes

On smaller screen sizes the hero image appeared streched and pixelated. I found a solution using css background on Stackoverflow. Link in credit sections

The gallery images were not displaying properly on smalller screens. Found a solution on Youtube using a flexbox. Link in credit section.

Validator Testing

  • HTML

    • No errors were returned when passing through the official W3C validator
  • CSS

  • Accessability

    • I confirmed the fonts and colours are approriate by using lighthouse in dev tools
    • lighthouse

Deployment

This section should describe the process you went through to deploy the project to a hosting platform (e.g. GitHub)

  • The site was deployed to GitHub pages. The steps to deploy are as follows:
    • In the GitHub repository, navigate to the Settings tab
    • From the source section drop-down menu, select the Master Branch
    • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://d1ffamp.github.io/Portfolio1/

Credits

Content

  • The structure for the home page was taken from the Love Running tutorial
  • Instructions on how to implement the flexbox on the gallery page was taken from Cem Eygi Media
  • The icons in the footer were taken from Font Awesome
  • The fix for the hero image pixelation was found on Slack Overflow

Media

d1ffamp-portfolio1_sepresub's People

Contributors

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