Compare commits
10 Commits
af0578d80c
...
main
| 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