https://github.com/michojekunle/architect-website
Architect Website
https://github.com/michojekunle/architect-website
css-animations css-responsive css3 html5 javascript
Last synced: 4 months ago
JSON representation
Architect Website
- Host: GitHub
- URL: https://github.com/michojekunle/architect-website
- Owner: michojekunle
- Created: 2023-03-08T16:10:00.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T21:09:40.000Z (over 2 years ago)
- Last Synced: 2025-03-02T17:32:47.226Z (7 months ago)
- Topics: css-animations, css-responsive, css3, html5, javascript
- Language: CSS
- Homepage: https://architect-website-nine.vercel.app
- Size: 3.22 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ARCHITECT-WEBSITE
This is a CSS(Responsive Design) Challenge project.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page.
### Screenshot
### Links
- Solution URL: [https://github.com/michojekunle/ARCHITECT-WEBSITE/](https://github.com/michojekunle/ARCHITECT-WEBSITE/)
- Live Site URL: [https://architect-website-nine.vercel.app/](https://architect-website-nine.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS3
- Flexbox
- CSS Grid
- Desktop-first workflow
- [Vanilla-tilt](https://micku7zu.github.io/vanilla-tilt.js/) - JS library
### What I learned
In the course of this Project as Interesting and Refreshing as it was, I grabbed a few Important concepts such as:
- Effectively Building Responsive websites and apps with vanilla css.
- Utilizing Vanilla-tilt.js to add interesing tilt effects to the teams section of the project.
```
```css
.proud-of-this-css
a::after {
content: attr(data-content);
}
```
### Continued development
```
Going forward, I'll be working on more animated, responsive, dynamic and interactive websites with vanilla CSS and other CSS & JS Libraries.
```
### Useful resources
- [Resource 1 (The Effect on mouse Over)](https://www.youtube.com/watch?v=UqEmFSlx4ps) - This helped me for understand vanill-tilt.js and building this effect from scratch. I really liked this pattern and will use it going forward.
- [Resource 2 (Customizing Scrollbar)](https://css-tricks.com/almanac/properties/s/scrollbar/) - This is an amazing article. I'd recommend it to anyone still learning this concept.
- If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
## Author
- Website - [AMD](https://github.com/michojekunle)
- Twitter - [@MichaelOjekunl2](https://www.twitter.com/MichaelOjekunl2)
- LinkedIn - [Michael Ojekunle](https://www.linkedin.com/in/michael-ojekunle-651a8a232/)
## Acknowledgments
Special Credits to
- [Code and Create](https://youtube.com/@codeandcreate)
- [Coding Journey](https://youtube.com/@CodingJourney)
- [CSS Tricks](https://css-tricks.com/)