https://github.com/mohamedsabry0/apple-clone
a clone of an old version of Apple homepage using only HTML and CSS (flexbox for layout)
https://github.com/mohamedsabry0/apple-clone
Last synced: 3 months ago
JSON representation
a clone of an old version of Apple homepage using only HTML and CSS (flexbox for layout)
- Host: GitHub
- URL: https://github.com/mohamedsabry0/apple-clone
- Owner: mohamedSabry0
- Created: 2019-11-18T15:40:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T21:30:11.000Z (over 2 years ago)
- Last Synced: 2025-02-07T21:43:49.742Z (4 months ago)
- Language: CSS
- Homepage:
- Size: 2.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# apple-clone
## Forth-microverse-projet
[![Contributors][contributors-shield]][contributors-url]
Apple homepage clone
Attemptting to recreate the apple old homepage.
Project: Building with Backgrounds and Gradients
(https://web.archive.org/web/20140301004610/http://www.apple.com/)
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
## Table of Contents
* [About the Project](#about-the-project)
* [Built With](#built-with)
* [License](#license)
* [Contact](#contact)
## About The Project
Built for Microverse following these requirements:
#### nav and main container
- [x] should contain covering background image
- [x] should be covered with a link to "your-verse" page
- [x] should have a hieght a bit larger than content
#### nav
- [x] nav buttons should be covered with corresponding links
- [x] inner elements positioned with flex
- [x] must contain search field with a search icon
- [x] links must have hovering effect of changing background color
#### main
- [x] must be spaced with about 30px between each part of text
- [x] must contain a link to "your-verse-video" with an icon
- [x] the link must have hovering effect of underlining the text
- [x] must contain some space before and after the section
#### promo section
- [x] should have four sections divided evenly
- [x] promo images should be covered with links to respective promos
#### footer
- [x] should have some space between and around its sections
and following this lesson :
https://www.theodinproject.com/courses/html5-and-css3/lessons/building-with-backgrounds-and-gradients
[![Product Name Screen Shot][product-screenshot]](imgs/screenshot.png)
## Built With
* (HTML5)
* (CSS3)
* Assistant, Lucida Grande fonts
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Mohamed Sabry - [Github profile](https://github.com/mohamedSabry0)
Project Link: [https://github.com/RodolfoRodriguezMata/nytimes-clone](https://github.com/mohamedSabry0/apple-clone)
[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=flat-square
[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square
[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square
[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square
[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/othneildrew
[product-screenshot]: imgs/screenshot.png