├── .DS_Store ├── img └── 1.jpg ├── index.html ├── style-finished.css └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandhikagalih/belajar-css-calc/824de78f0a6f7033a9023170cea20102cb620b7c/.DS_Store -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandhikagalih/belajar-css-calc/824de78f0a6f7033a9023170cea20102cb620b7c/img/1.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Calc 8 | 9 | 10 | 11 |
12 |

Calc()

13 | 14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ipsum natus, repellendus totam repellat iusto sit. Itaque odit laudantium, autem tempore sit commodi placeat, in ea accusamus sed, reprehenderit earum.

15 |

16 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis consequatur inventore, cumque ab reprehenderit quidem officia nisi quaerat neque sint, quisquam vel vero recusandae officiis accusamus consequuntur non quia, saepe 17 | delectus veniam ipsam sit! Magni nam exercitationem est eos illum, mollitia impedit nemo velit iste a et enim? Nam nesciunt temporibus dolorum eligendi ratione atque nihil cumque veniam culpa quo? 18 |

19 | desk-setup 20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores ullam, itaque sint, sapiente quam possimus consequatur asperiores porro eveniet distinctio, exercitationem vel saepe.

21 |

dolorum, fuga temporibus odio voluptates dicta, ad est. Perspiciatis repellendus beatae at, distinctio, voluptatem sint repellat culpa exercitationem, officia aspernatur asperiores.

22 |

23 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid hic accusantium odio expedita dignissimos vel sunt culpa numquam dolorem animi dolor aperiam debitis dolores eum nemo odit, aspernatur tempora molestiae minima 24 | similique rem voluptates quis necessitatibus? Dolore voluptates reiciendis distinctio molestiae, eius quae cum fuga maiores quidem, ex repellat ad. Ducimus repellat neque sint magni accusantium? Et iusto beatae corrupti? 25 |

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /style-finished.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Nunito, sans-serif; 9 | min-height: 100vh; 10 | font-size: 1.4rem; 11 | line-height: 1.6; 12 | color: #333; 13 | overflow-x: hidden; 14 | } 15 | 16 | .container { 17 | /* width: 800px; */ 18 | max-width: 800px; 19 | /* width: calc(100vw - 100px); */ 20 | width: calc(100vw - 4em); 21 | margin: 0 auto; 22 | } 23 | 24 | h1 { 25 | text-align: center; 26 | color: lightblue; 27 | /* font-size: 6vw; */ 28 | font-size: calc(6vw + 1.5rem); 29 | } 30 | 31 | img { 32 | display: block; 33 | max-width: 100%; 34 | } 35 | 36 | .full-img { 37 | max-width: 100vw; 38 | margin: 0 calc(-50vw + 50%); 39 | } 40 | 41 | .highlight { 42 | background-color: lightblue; 43 | padding: 2em; 44 | margin: 0 calc(-50vw + 50%); 45 | text-align: center; 46 | font-size: calc(1vw + 1rem); 47 | } 48 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Nunito, sans-serif; 9 | min-height: 100vh; 10 | font-size: 1.4rem; 11 | line-height: 1.6; 12 | color: #333; 13 | overflow-x: hidden; 14 | } 15 | 16 | .container { 17 | width: 800px; 18 | margin: 0 auto; 19 | } 20 | 21 | h1 { 22 | text-align: center; 23 | color: lightblue; 24 | } 25 | 26 | img { 27 | display: block; 28 | max-width: 100%; 29 | } 30 | --------------------------------------------------------------------------------