A Pen by Emily Seibert on CodePen.
-
-
Save jcork4real/b72b25279eefe01a2863103cc19dba85 to your computer and use it in GitHub Desktop.
Components - I starter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="home"> | |
| <header> | |
| <nav class="main-nav"> | |
| <a href="https://learn.lambdaschool.com/" target="_blank" id="home-tag">Home</a> | |
| <a href="#" class="nav-item">About</a> | |
| <a href="#" class="nav-item">Blog</a> | |
| <a href="#" class="nav-item">Contact</a> | |
| </nav> | |
| </header> | |
| <section class="main-content"> | |
| <h2 class="first-heading">HTML, CSS, or JS</h2> | |
| <p class="testing">No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something | |
| else entirely. Legend, Mr Wayne. | |
| </p> | |
| </section> | |
| <section class="container secondary"> | |
| <div class="accordion"> | |
| </div> | |
| </section> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const panelData = [ | |
| { | |
| title: "First Panel", | |
| content: "No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an idel and if they can't stop you then you become something else entirely. Legend, Mr Wayne." | |
| }, | |
| { | |
| title: "Second Panel", | |
| content: "Tomorrow, you will be released. If you are bored of brawling with thieves and want to achieve something there is a rare blue flower that grows on the eastern slopes. Pick one of these flowers. If you can carry it to the top of the mountain, you may find what you were looking for in the first place." | |
| }, | |
| { | |
| title: "Third Panel", | |
| content: "I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital." | |
| }, | |
| { | |
| title: "Fourth Panel", | |
| content: "I'm here to ensure the League of Shadow fulfills its duty to restore balance to civilization. You yourself fought the decadence of Gotham for years with all your strength, all your resources, all your moral authority. And the only victory you achieved was a lie. Now, you understand? Gotham is beyond saving and must be allowed to die." | |
| }, | |
| { | |
| title: "fifth panel", | |
| content: 'helloooo!' | |
| } | |
| ] | |
| // Remove panel from HTML | |
| // <!-- Remove this--> | |
| // <div class="panel"> | |
| // <div class="panel-bar"> | |
| // <h3>Title of Panel</h3> | |
| // <div class="panel-buttons"> | |
| // <button class="panel-btn-open">▼</button> | |
| // <button class="panel-btn-close hide-btn">Close</button> | |
| // </div> | |
| // </div> | |
| // <div class="panel-content"> | |
| // Content of panel | |
| // </div> | |
| // </div> | |
| // <!-- Remove this--> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @lightblue: #9bbeff; | |
| @blue: #1b6cff; | |
| @orange: #ffae1b; | |
| * { | |
| box-sizing: border-box; | |
| color: #191B1F; | |
| } | |
| body { | |
| font-family: Lato, sans-serif; | |
| } | |
| .container { | |
| max-width: 500px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding-top: 2rem; | |
| } | |
| .main-content { | |
| background: @lightblue; | |
| padding: 10px; | |
| box-shadow: inset 1px 1px 10px 10px rgba(@blue, 0.1); | |
| h2, p { | |
| color: white; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| padding: 10px; | |
| } | |
| p { | |
| font-size: 18px; | |
| } | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| } | |
| p { | |
| margin: 20px 0; | |
| line-height: 1.25; | |
| } | |
| header { | |
| width: 100vw; | |
| height: 15vh; | |
| padding-top: 2rem; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-evenly; | |
| align-items: start; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| border: 2px solid @orange; | |
| padding: 10px 10px; | |
| color: black; | |
| transition: all 0.2s ease-in-out; | |
| border-radius: 5px; | |
| } | |
| nav a:hover, | |
| { | |
| color: white; | |
| background: @orange; | |
| box-shadow: 1px 1px 10px 10px rgba(@lightblue, 0.1); | |
| } | |
| .accordion { | |
| background: #fff; | |
| box-shadow: 1px 1px 10px 5px rgba(@lightblue, 0.2); | |
| } | |
| .panel { | |
| color: #64656A; | |
| padding: 30px; | |
| border-top: 2px solid @orange; | |
| } | |
| .panel:first-child{ | |
| border-top: none; | |
| } | |
| .panel:last-child{ | |
| border-bottom: 2px solid @orange; | |
| } | |
| .panel-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| h3{ | |
| color: @blue; | |
| font-size: 20px; | |
| } | |
| } | |
| .panel-buttons button { | |
| cursor: pointer; | |
| background: @lightblue; | |
| width: 35px; | |
| height: 35px; | |
| border: none; | |
| border-radius: 50%; | |
| padding: 5px; | |
| } | |
| .hide-btn { | |
| display: none; | |
| } | |
| .panel-content { | |
| height:0; | |
| opacity:0; | |
| margin-top: 15px; | |
| transition: 1s; | |
| } | |
| .toggle-on { | |
| height:100px; | |
| opacity:1; | |
| transition:1s; | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment