Compare commits
10 Commits
af0578d80c
...
e9491ea5a8
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e9491ea5a8 | ||
|
|
d6407cfa1d | ||
|
|
e3b3aa01f0 | ||
|
|
6a67ed8347 | ||
|
|
489f2856d4 | ||
|
|
677049f5af | ||
|
|
114b86c54e | ||
|
|
9426f9325c | ||
|
|
a81cd89dd3 | ||
|
|
3664590c3e |
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 mathieucans
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
1
LICENSE.md
Normal file
1
LICENSE.md
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
22
README.md
22
README.md
@@ -1,6 +1,22 @@
|
||||
CSS KOANS KATA - FLEX
|
||||
=======================
|
||||
|
||||
This is my progress on these exercises.
|
||||
|
||||
|
||||
Koan 1 :
|
||||
The objective of these exercices is to become more confortable with css flex manipulation.
|
||||
|
||||
- add a css file that make header green and content red
|
||||
- use diplay flex to make content fill the entire page
|
||||

|
||||
|
||||
1. *Start*: add a css file that make header green and content red.
|
||||
2. *Flex:* use diplay flex to make content fill the entire page.
|
||||
3. *Side bar:* add a 25% width left sidebar.
|
||||
4. *Tab & status:* add some uniform tabs on top of content, and a status bar on bottom.
|
||||
5. *Scroll:* add some items in content of 150px Height. Make content scrollable.
|
||||
6. *Russian doll:* add a first div that host entire content. Keep same behaviour.
|
||||
7. *Dot dot dot:* Create an item that have a long text that is overflow with ellipsis. Keep same behaviour.
|
||||
|
||||
Resources
|
||||
---------
|
||||
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- [Flexbox and Truncated Text](https://css-tricks.com/flexbox-truncated-text/)
|
||||
|
||||
BIN
css-koans-training.png
Normal file
BIN
css-koans-training.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
11
src/index.html
Normal file
11
src/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">this is a green header</div>
|
||||
<div class="content">this is a red content</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user