Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ogm710811/cssexercise
https://github.com/ogm710811/cssexercise
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/ogm710811/cssexercise
- Owner: ogm710811
- Created: 2017-01-23T18:25:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-28T18:18:16.000Z (about 8 years ago)
- Last Synced: 2024-11-15T02:33:42.188Z (3 months ago)
- Language: CSS
- Size: 12.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# HTML & CSS | Tweet clone
## Introduction
We have learned a lot of new stuff about HTML and CSS. Now, we will work with an small example to practice all what we learned. We are going to clone a tweet.
Jack Dorsey created [Twitter](https://www.twitter.com) in 2006. Once it was ready to launch, he created his twitter account and published the following:
"just setting up my twttr"
It was March, 21st. **We will clone this first tweet from Jack's account to learn HTML and CSS :)**
## Exercise
### Requirements
- [Fork this repo](https://guides.github.com/activities/forking/).
- Clone this repo into your `~/prework/code/labs` folder.
- Make sure you use:
- Block elements for the main container of the tweet.
- Inline elements for the bottom icons: reply, retweet, and favorites.
- Use the images in the `img` folder to complete the designs.
- Use the following colors:
```
body
- background: rgb(244, 248, 249)
tweet
- background: rgb(255, 255, 255)
- border: rgb(225, 232, 237)
- user name: rgb(0, 0, 0)
- user account: rgb(104, 109, 129)
- text: rgb(0, 0, 0)
- date: rgb(101, 116, 127)
- bottom text color: rgb(105, 120, 130)
- follow button: rgb(85, 172, 238)
```
- Finally, the font is "Helvetica".
### Submission
- Upon completion, run the following commands:
```
git add .
git commit -m"done"
git push origin master
```
- Navigate to your repo and [create a Pull Request](https://help.github.com/articles/creating-a-pull-request/).
### Starter Code
The starter code contains all the files, images and basic setup to replicate the first tweet of the story.
### Deliverable
Please, find a screenshot of the expected results below:
## Extra Resources
- [First tweet](https://discover.twitter.com/first-tweet#jack). You can figure out the first tweet of any twitter account.
# css-tweet-clone