├── captions.vtt ├── flower.jpg ├── index.html ├── style.css └── video.mp4 /captions.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT - Made with VTT Creator 2 | 3 | 00:01.971 --> 00:03.956 4 | She wants to watch Lama Dev every day. 5 | 6 | 00:04.023 --> 00:05.513 7 | I have to tell her all the time. 8 | 9 | 00:05.614 --> 00:07.399 10 | There are other instructors out there! 11 | 12 | 00:07.490 --> 00:09.015 13 | But she thinks he's the best. 14 | 15 | 00:09.090 --> 00:10.245 16 | I don't believe this. 17 | 18 | 00:10.305 --> 00:12.745 19 | I know he has some good videos but 4 hours tutorial? 20 | 21 | 00:12.810 --> 00:14.810 22 | come on! 23 | 24 | -------------------------------------------------------------------------------- /flower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/safak/css-tips/cc570bb62cb9ce5bd58a20f032309fbc27cc606b/flower.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LAMA DEV CSS TIPS AND TRICKS 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 |

He dies at the end :(

24 | 25 | 26 | 27 | 28 | 29 |
30 |

31 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, fugiat. 32 | Similique delectus recusandae, in dolorem quia pariatur reiciendis vel. 33 | Sint eveniet tempora recusandae iusto accusamus a ducimus reprehenderit! 34 | Ullam, impedit. 35 |

36 |

37 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ipsum 38 | quo ipsa labore aut pariatur tempore unde ratione voluptatum 39 | voluptatibus. Pariatur alias velit eveniet aliquam veritatis est quia 40 | deleniti dignissimos. 41 |

42 |

43 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, 44 | provident ad quidem tenetur iste perferendis doloribus optio officia 45 | harum exercitationem fugit sequi aut neque, dolor eveniet. Sint 46 | exercitationem error dolorum? 47 |

48 |

49 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe sed 50 | officiis nulla, earum aperiam, reprehenderit harum numquam nostrum quis 51 | voluptatum minus necessitatibus ea quas quaerat eligendi et deleniti? 52 | Cupiditate, repellat! 53 |

54 |

55 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae eveniet 56 | velit fugit voluptatibus illo animi vero reprehenderit omnis nam, 57 | sapiente sunt nemo, veniam labore nesciunt at eius laudantium similique. 58 | Consequatur. 59 |

60 |
61 |
62 |

Post1

63 |

64 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae 65 | iusto, voluptatum adipisci corporis itaque ab soluta eum aliquid 66 | quas ipsum sint fuga dolorem? Inventore ex ratione error eos ipsa 67 | cumque! 68 |

69 |
70 |
71 |
72 | 73 |
74 |

Post2

75 |

76 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae 77 | iusto, voluptatum adipisci corporis itaque ab soluta eum aliquid 78 | quas ipsum sint fuga dolorem? Inventore ex ratione error eos ipsa 79 | cumque! 80 |

81 |
82 |
83 |
84 | 85 | 86 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: 100vh; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | .container{ 11 | width: 500px; 12 | height: 500px; 13 | background-color: rebeccapurple; 14 | clip-path: path("M0.5 73.5V1H20V56H72V73.5H0.5Z"); 15 | transition: all 2s ease; 16 | } 17 | 18 | .container:hover{ 19 | clip-path: polygon(0% 50%, 11% 59%, 54% 76%, 81% 48%, 30% 18%); 20 | } 21 | 22 | .frame { 23 | width: 500px; 24 | height: 500px; 25 | border: 3px solid rebeccapurple; 26 | perspective: 200px; 27 | } 28 | 29 | .shape { 30 | width: 500px; 31 | height: 500px; 32 | background-color: lightblue; 33 | transform: rotateY(-30deg); 34 | transition: all 3s ease; 35 | } 36 | 37 | .player { 38 | width: 100%; 39 | background-color: black; 40 | aspect-ratio: 16/9; 41 | } 42 | 43 | img { 44 | filter: saturate(200%); 45 | } 46 | 47 | img:active { 48 | filter: none; 49 | } 50 | 51 | input { 52 | padding: 20px; 53 | border: 1px solid red; 54 | caret-color: red; 55 | } 56 | 57 | input:focus { 58 | outline: 1px solid red; 59 | } 60 | 61 | input::placeholder { 62 | color: red; 63 | } 64 | 65 | /* .item h1, 66 | .item h2, 67 | .item h4, 68 | .item p{ 69 | color: blue; 70 | } */ 71 | 72 | .item :not(h3) { 73 | color: red; 74 | } 75 | 76 | .review:has(button) .content { 77 | filter: blur(10px); 78 | } 79 | 80 | video { 81 | width: 100%; 82 | aspect-ratio: 16/9; 83 | } 84 | 85 | ::cue { 86 | font-size: 50px; 87 | } 88 | -------------------------------------------------------------------------------- /video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/safak/css-tips/cc570bb62cb9ce5bd58a20f032309fbc27cc606b/video.mp4 --------------------------------------------------------------------------------