GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Amita-Roy → global-summit-2020

Amita-Roy / global-summit-2020

Licence: other
I have created this project for the capstone of the HTML/CSS module. I was provided with a design to mock. The content was inspired by https://www.intelligentcommunity.org/summit_2020_speakers  website, which lists speakers at the ICF in Dublin, Ohio on the 21st-23rd October 2020.

Programming Languages

HTML
75241 projects
CSS
56736 projects

Labels

bootstraphtml5css3fontawesomegooglefonts

Projects that are alternatives of or similar to global-summit-2020

ecommerce-template
This is a simple and easy to integrate e-commerce design template based on Bootstrap 5.
Stars: ✭ 34 (+54.55%)
Mutual labels:  css3, fontawesome
vue-resume
a live resume builder using VueJs
Stars: ✭ 72 (+227.27%)
Mutual labels:  css3, fontawesome
boardz
Create Pinterest-like boards with pure CSS, in less than 1kB.
Stars: ✭ 33 (+50%)
Mutual labels:  css3
Books-Library-using-ReactJs
A Book Library for all Books Lovers made using React-Js. The API used for fetching books is Google Books API.
Stars: ✭ 22 (+0%)
Mutual labels:  css3
AuroraCMS
The Australian Open Source Content Management System
Stars: ✭ 13 (-40.91%)
Mutual labels:  css3
fontIconPicker
A lightweight iconpicker for use with jQuery
Stars: ✭ 30 (+36.36%)
Mutual labels:  fontawesome
Fenice-Network
Building the job search portal which helps both recruiters and job seekers to get perfect jobs.
Stars: ✭ 20 (-9.09%)
Mutual labels:  css3
Vaccine-near-me-Using-Cowin-Government-API
🌟ᴛʜɪꜱ ɪꜱ ᴀ ᴀᴘᴘʟɪᴄᴀᴛɪᴏɴ ᴍᴀᴅᴇ ʙʏ ᴍᴇ ᴡʜᴇʀᴇ ʏᴏᴜ ᴄᴀɴ ᴄʜᴇᴄᴋ ᴠᴀᴄᴄɪɴᴇ ᴡʜɪᴄʜ ɪꜱ ᴀᴠᴀɪʟᴀʙʟᴇ ɴᴇᴀʀ ʏᴏᴜ 💻 🎯🚀
Stars: ✭ 13 (-40.91%)
Mutual labels:  css3
css2video
Python library to convert CSS animations into video
Stars: ✭ 55 (+150%)
Mutual labels:  css3
Frontend-Animations
Frontend Animation Projects.🚀
Stars: ✭ 20 (-9.09%)
Mutual labels:  css3
coupon
🎫 Generate Coupon-UI CSS code
Stars: ✭ 79 (+259.09%)
Mutual labels:  css3
nwMAME
Open-Source MAME front-end built on Node-WebKit (NWJS)
Stars: ✭ 32 (+45.45%)
Mutual labels:  css3
react-sweet-progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 250 (+1036.36%)
Mutual labels:  css3
Freecodecamp-responsive-web-design-projects
Freecodecamp-responsive-web-design-projects solution github
Stars: ✭ 24 (+9.09%)
Mutual labels:  css3
Hacktoberfest-2021
❗❗ Make your first PR now, accepting and merging PRs continuously. ⭐HACKTOBER ACCEPTED 2021 ✨✨Happy Hacking 💖💖
Stars: ✭ 11 (-50%)
Mutual labels:  css3
fa5pro-downloader
A tool that allows you to download Font Awesome 5 Pro for free
Stars: ✭ 34 (+54.55%)
Mutual labels:  fontawesome
Elementary
Minimal Jekyll theme optimized for performance, accessibility, usability and readability
Stars: ✭ 47 (+113.64%)
Mutual labels:  css3
latex-awesomebox
A package to draw attention boxes in your documents, illustrated with FontAwesome icons (Mirror)
Stars: ✭ 33 (+50%)
Mutual labels:  fontawesome
Focus
Mix sounds to make the best environment for you
Stars: ✭ 19 (-13.64%)
Mutual labels:  css3
strawberry
A new flexbox based CSS micro-framework.
Stars: ✭ 71 (+222.73%)
Mutual labels:  css3
View All Similar Projects ➔

HTML/CSS Capstone: ICF Global Summit 2020

This project is a website for the ICF Global Conference taking place in Dublin, Ohio, USA in October 2020.

screenshot

I was given this design of Cindy Shin's to follow, mirroring its structure, typography and colors as I built my own conference website.

I have created this sidebar without using bootstrap. screenshot

I am using logo and content from this website. I have 2 version for my footer (dark and light). For the dark footer, I wasn't able to integrate the original logo as it has dark color so I created the my own logo for dark footer.

screenshot

For speaker images, I have created my own frame.

screenshot

On the Ticket page, there is a page divider on the original design, so I created that divider from scratch instead of taking the screenshot from the design. Now the divider is a scaleable vector graphic.

screenshot

Video Presentation

Video after update presentation of the project to hear more about this assignment and how I approached it.

Watch my video presentation of the project to hear more about this assignment and how I approached it.

Built With

  • HTML/CSS
  • Bootstrap
  • CSS
  • fontawesome
  • npm
  • Adobe XD (for logo, image frame and page divider)
  • Google Fonts (Lato)
  • Stylelint, Webhint, Lighthouse
  • VSCode (with Prettier, Stylelint)
  • Google Chrome (with DevTools and Pesticide)
  • MacOS

Live Demo

See the project in action by visiting the live demo!

Getting Started

To get this project set up on your local machine, follow these simple steps:

  1. Open Terminal.

  2. Navigate to your desired location to download the contents of this repository.

  3. Copy and paste the following code into the Terminal:

    git clone [email protected]:Amita-Roy/global-summit-2020.git

  4. Hit enter.

  5. Run npm install in the terminal to get all the dependencies installed localy.

  6. Once the repository has been cloned, open main.html in a browser of your choosing. From there, you may also navigate to the "Home", "About" and "Join" (Join tab for Ticket page) pages.

  7. Enjoy!

Prerequisites

  • A computer, a smartphone, or another similar device.
  • Access to the internet.

Author

👤 Amita Roy

🤝 Contributing

Contributions, issues and feature requests are always welcome!

I love meeting other developers, especially ones that give me advice on how to improve my work.

Drop me an issue!

Show your support

Finally, if you've read this far, don't forget to give this repo a ⭐️. They're free . . . I think.

Acknowledgments

📝 License

This project is MIT licensed.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].