Fonts Large
| <!DOCTYPE html> | |
| <html lang="eng"> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="buttons"> | |
| <span class="btn active" onclick="document.getElementById('text').style.fontSize = '1em'">A</span> | |
| <span class="btn " onclick="document.getElementById('text').style.fontSize = '1.25em'">A</span> | |
| <span class="btn" onclick="document.getElementById('text').style.fontSize = '1.75em'">A</span> | |
| </div> | |
| <div class="content" id="text"> | |
| <h2>Change font size</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dolor dolore quibusdam nulla odit illo expedita fugiat corrupti, accusamus sit, animi amet eos, tenetur neque. Perspiciatis, earum at suscipit dolorem voluptatum unde quas libero vel cumque commodi, ipsum velit minus non porro quidem animi, maxime ab? Molestiae illo odit minus, doloremque voluptatibus numquam dolor ipsum. Expedita possimus ipsam aliquid sunt quae minima corporis a ut, tenetur inventore pariatur ipsum neque dolorum impedit iste. Aperiam, omnis mollitia, rem soluta enim nihil recusandae placeat perspiciatis debitis iure? Magnam maxime dolorum, alias reprehenderit quos esse explicabo fugiat nostrum obcaecati eaque ex voluptatum earum quas nemo recusandae et dignissimos placeat unde ipsam dolor modi natus, nam mollitia. Maxime possimus tempore magnam. Eligendi, sequi. Repellat provident nobis optio et dicta?</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| let buttons = document.querySelector('.buttons'); | |
| let btn = buttons.querySelectorAll('.btn'); | |
| for (var i = 0; i <btn.length; i++) { | |
| btn[i].addEventListener('click' , function () {y | |
| let current = document. | |
| getElementsByClassName('active'); | |
| current[0].className = current[0].className.replace("active" , ""); | |
| this.className +=" active"'' | |
| }) | |
| } | |
| </script> | |
| <style type="text/css"> | |
| *{font-family: arial; margin: 0px; padding: 0px; box-sizing: border-box;} | |
| body{display: flex; justify-content: flex-start; align-items: flex-start;} | |
| .container{ | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 1200px; | |
| flex-direction: column; | |
| margin: 20px auto; | |
| padding: 0 20px; | |
| } | |
| .container .buttons{ | |
| width: 100%; | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: flex-end; | |
| margin-bottom: 20px; | |
| } | |
| .container .buttons .btn{ | |
| padding: 0 10px; | |
| display: inline-flex; | |
| background-color: #ddd; | |
| color: #fff; | |
| margin-left: 10px; | |
| cursor: pointer; | |
| } | |
| .container .buttons .btn.active{ | |
| background-color: #444; | |
| } | |
| .container .buttons .btn:nth-child(2){ | |
| font-size: 1.5em; | |
| } | |
| .container .buttons .btn:nth-child(3){ | |
| font-size: 2em; | |
| } | |
| .container .content{font-size: 1em; color: #444;} | |
| .container .content h2, | |
| .container .content p{transition: 0.5s;} | |
| </style> | |
Comments
Post a Comment