123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
<html>
<body>
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  <title>For Ms. Posley</title>
  <img class="MsPosley" src="https://www.instagram.com/p/BI5TShpAUGA/media/?size=m" alt="MsPosley">
    <p class= "title2">In remembrance of</p>
  <p class= "title">Ms. Kimberly Posley</p>
    
  <div class="tab" id="tab">
      <button class="tablinks" type="button" onclick="openTopic(event, 'home')" id="Topic">About Her</button>
      <button class="tablinks" type="button" onclick="openTopic(event, 'classroom')" id="Topic">Her Impact</button>
      <button class="tablinks" type="button" onclick="openTopic(event, 'outreach')" id="Topic">Her Outreach</button>
   <button class="tablinks" type="button" onclick="openTopic(event, 'legacy')" id="Topic">Her Legacy</button>
    <button class="tablinks" type="button" onclick="openTopic(event, 'intro')" id="Topic" style="display:none"></button>
  </div>
  <div id="intro" class="tabcontent">This website was made in loving memory of Ms. Kimberly S. Posley. This is the first project completed by Girls Who Code, one of the clubs she sponsored.</div>
  <br>
  <div id="home" class="tabcontent" style="display:none">
    <img src="https://www.instagram.com/p/BPLooZHglid/media/?size=m" alt="delta" class="fun"><img src="https://www.instagram.com/p/BTP_ULrAg5J/media/?size=m" alt="Ms. Posley at DSA" class="gif">
    <h4 id="strong"><strong>Biography</strong></h4><p>
    Ms. Posley was a sponsor, teacher, and inspiration at Dekalb school of the Arts. In addition to teaching Business Education, she volunteered and donated extensively in her free time. She earned her Bachelor of Business Administration (BBA) degree in Accounting from the University of West Florida. Soon after, she earned her Master of Arts (M.A.) degree in Special Education and Teaching at Jackson State University. Her teaching career began in 2014, and ended with her passing on November 23, 2018. She will be greatly missed.</p>  <p>Ms. Posley loved her family, her Delta Sigma Theta Sorority sisters, her students, and her colleagues. She selflessly extended herself to everyone she met and even those that she never had met. As a role-model for the students as DSA, impact-filled life must be remembered.</p>
 </div>
 <div id="classroom" class="tabcontent" style="display:none"><p id="strong"><strong>Business Education</strong></p><img class="business" src="https://www.instagram.com/p/BA0vlvpO7Zn/media/?size=m" alt="business"><p>Ms. Posley only taught business education to a few lucky people; in other words, the eighth graders. She taught her students how to identify parts of a word document, create google forms, craft power points, make tables and graphs, and  how to type accurately and efficiently. The business and technological terms she taught were applicable to our daily lives. <p> <p>Ms.Posley's teaching gave her students a platform off of which to realize our dreams. A prime example of this is the clothing business one of our peers, Jae B., founded recently. A couple of days after Ms. Posley passed she explained how having to learn economic concepts and having to write a business plan allowed her to run a successful business. </p><br>
   <p id="strong"><strong>Dress For Success</strong></p><img src="https://www.instagram.com/p/BRjHE_TAuzB/media/?size=m" alt="dress" class="dress"><p>Ms. Posley's way of shaping her students into professional young men and women was an event called <em>'Dress for Success'</em>. On wednesdays, she had her 8th grade students wear business attire. This activity helped them see themselves as the put-together and influential adults Ms. Posley hoped for them to be.</p><p>Ms. Posley often showed how proud she was of her students to the DSA community. Dressing for success was not so difficult a task for the students, being that Ms. Posley led by example. </p></div>
 <div id="outreach" class="tabcontent" style="display:none"><p class="classoverview">
   <h4 id="strong"><strong>Beta Club</strong></h4><p> Beta club is an organization dedicated to leadership furthered by community service. As the sponsor, Ms. Posley organized events for students, such as donation drives with Lady T's Ministry and campus clean-up days. She also directed the funds collected by the Beta Club to derserving charities and hospitals.</p>
    <img class="beta" src="https://www.instagram.com/p/BLow9prgsbI/media/?size=m"><img class="beta2" src="https://scontent-ort2-1.xx.fbcdn.net/v/t1.0-9/11937456_1705951676316217_4177572048088677817_n.jpg?_nc_cat=109&_nc_ht=scontent-ort2-1.xx&oh=9018cbcefc6494d246d438b2049166cb&oe=5CA67002"> 
   <img src="https://www.instagram.com/p/BgW2zzvBwP5/media/?size=l" alt="2017 Beta officers" class="beta3">
   <br><h4 id="strong"><strong>Girls Who Code</strong></h4><p>Girls Who Code is an all girls club that teaches girls about women in computer science that have made an impact. The goal of GWC is to close the gender gap in STEM fields by giving high school students a way to make a difference. In Girls Who Code, our new president Naylah C., has taught us about Hypertext Markup Language ( HTML), and Cascading Style Sheets (CSS). With this knowledge, we have made websites and practice Front-End web development. Ms. Posley became our sponsor in 2018 along side Mr. Henner, a mathematics teacher. Together, they have done an amazing job of making sure we have a meeting space, computers, and guest speakers such as Dr. Faith Wallace.</p><img src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/45984653_2231900823721297_5993557729774403584_n.jpg?_nc_cat=109&_nc_ht=scontent-atl3-1.xx&oh=a4b289e5beb268b489a2d8a706a641c2&oe=5CACFAEB" alt="Dr.Wallace and Posley" class="gwc"><img src="https://scontent-ort2-1.xx.fbcdn.net/v/t1.0-9/46013218_2231898843721495_3820534299266908160_n.jpg?_nc_cat=105&_nc_ht=scontent-ort2-1.xx&oh=3cc5df216e25e877a088daea0ec2146f&oe=5CA18D61" alt="Dr.Wallace Workshop" class="gwc">
  
    <h4 id="strong"><strong>Di Phi 2.0</strong></h4><img src="https://www.instagram.com/p/BQJOWbUggpH/media/?size=m" alt="diphi" class="diphi"><p>Di Phi 2.0 is a student run step team at DSA re-founded in the 2014-2015 school year by Kalen R. and Jada W. Ms. Posley became their sponsor in the year of 2015-2016 and has been dedicated to the role ever since. Ms. Posley has helped Di Phi with finances, organizing shows, and getting uniforms. With the sponsorship of Ms. Posley, Di Phi 2.0 has put together ground shaking shows for many DSA events such as Teacher vs. Student Basketball Games, Junior Talent Show, Fringe Festival, and Students of the Performing Arts (SPA) meetings. With the leadership of the students and the sponsorship of Ms. Posley, Di Phi 2.0 went on to win the Junior Talent Show 2017- 2018 with the choreography of Hadiyah G.</p>
   <img src="https://www.instagram.com/p/BCox7-RO7es/media/?size=m" alt="diphi" class="diphiposley">
  </div>
  
 <div id="legacy" class="tabcontent" style="display:none">
    <p> This website was made to honor our wonderful teacher, club leader, and friend Ms.Posley.Her positive light and ecouragement pushed us to do our best at DSA. She was involved in many positive things for the community such as food drives and donations for the homeless.Ms. Posley touched a lot of hearts while she was        here at DSA. We asked some of the students        and staff about how they felt about her.</p><br>
  
    <p class="quote"><em>I walked into her classroom and I almost       expected her just to come walking through the     door and begin teaching. It was so sad to see     her gone.</em>  Cameron H.- 8th</p><br>
      
  <p class="quote"><em>She was passionate about her work, community service, and helping people grow. The first time I came in Girls Who Code, she was adamant about learning as much as she could and helping us do the same.</em> <br>Anna A. - 8th</p><br>
   <p class="quote"><em>She was great. She was honest. She actually      cared about our wellbeing.</em>  Julia H. -          8th</p><br>
   <p class="quote"><em> Ms. Posley was such a kind hearted and giving person. When I was hungry, she would give me snacks, and I so greatly appreciated that.</em> anonymous</p><br>
  <p class="quote"><em>Every time you walk into her class she puts      on this big smile. She has the biggest            personality compared to the other teachers. She    was like a second mother to her eighth graders.</em>   <br> Chelsea G. - 8th</p><br>
  <p class="quote"><em>One time she was telling me I was being too     loud in class. After class I went to apoligize      to her and kept telling me that I did not need    to apoligize but she told me to do better next    time. The next class she told me I was            improving. She acknowledges growth and when you    do something right.</em> <br>Jasmine A.- 8th</p><br>
   <p class="quote"><em> She may not have known but her kindness is setting me up for a possible future in management.</em> anonymous</p><br>
  <p class="quote"><em>I didn't really know her but I knew that she was a huge part of the DSA community. I pass her classroom everyday and I can still feel her presence in the halls. I see how much of an impact she has left on this school. She will truly be missed.
    </em> Morgan</p><br>
     <p class="quote"><em>She was the best and was always so cheerful. You couldn't miss her spirit when she walked through the halls. Even though I didn't know her for a long time, I will still miss her.</em> <br> Trinity C. </p>
   <br></br>    
   <p class="quote"><em>Ms. Posley seemed kind of strict at first, but she really grew on me. before all the teachers had found out that I was transitioning, she found out, and without even blinking an eye, started calling me by the correct name and pronouns. It was a small act of kindness, but it really stuck with me.</em>- Lucas </p><br>
   <p class="quote"><em> She said 'Give me a hug because you haven't seemed like yourself lately; you are one of my favorite gentelmen here.'</em> anonymous</p><br>
   <p class="quote"><em>Although I never had Ms. Posley as a teacher, she was always a very prevalent part in my life. When I was younger she drove me to Global Village- a program that helped refugee girls- and we sometimes got food afterwards. Later on in my life. when I got into a major car accident,she always asked me-everyday- how I was doing, and she constantly made an effort to care. Last year, when I had a panic attack and couldn't stop crying she let me stay in her room and she comforted me, and last month- at The Alumni Dinner at Callenwalde Fine Arts Center, we shared a laugh as I took photographs of her and she posed like a model. I will always remember her as a loving, beautiful, and caring woman to me, and to all. Rest in peace Ms. Posley.</em> <br>Eliza M.</p><br></br>
  <p class="quote"><em>Ms. Posley was a wonderful sponsor and a generous teacher. She always did what was best for students, especially behind the scenes. Every time I left her room, she told me she was thankful for my work and that she loved the beta club officers. My last memories of her include her encouraging to speak up at meetings. In our last officer meeting I remeber her coming in late with her arms full of presents and balloons. It was a coworker's birthday and we laughed over the cover of a magazine in the gift bag. She said 'who wouldn't want Idris Elba for their birthday?' referring to the cover. She was so warm and kind and cared sincerely about the sucess and well being of her friends and students. </em> <br>Lilly K., secretary of Beta Club</p><br></br>
  <p class="quote"><em>You will forever be missed and loved my friend Kim Posley.</em> <br>Love Ron Turner</p><br></br>
  <p class="quote"><em>Ms. Posley is one of the best given people I know. 
    I will never forget her selflessness, her compassionate words and actions, and her "I love you Dr. Pottinger". she gave warm encouragement to students, faculty and anyone she met. I will miss her on the AIDS Walk, Lady T's Homeless Shelter projects, the Atlanta Food Bank Drive- and more. Gone too soon, KP! Rest in Peace. We will make sure your spirit of kindness, citizenship, mentorship and energy live on.</em> <br>Dr. Pottinger, Beta Club Co-Sponsor</p><br></br>
  </div>
  <br>
  <img class= "gwclogo" src="https://d4804za1f1gw.cloudfront.net/wp-content/uploads/sites/28/2016/11/30051859/girls-who-code-logo.jpg" alt="Girls Who Code Logo"><br>
  <p class="creds">Made in loving       memory of Ms. Posley by <strong>Girls Who Code</strong> at DSA. Last updated: Dec 3</p>

  </body>
  </html>
            
          
!
            
               body {
  text-align: left;
  font-family: 'Merriweather',
  
  cursive;
  background-color: white;
  border-width: 10px;
  border-color: red;
  border-style: double double solid double;
  padding-left: 80px;
  padding-right: 80px;
  padding-top:20px;
}


.title {
  font-size: 55px;
  text-shadow: 1.5px 1.5px lightgrey;
  line-height: .05cm;
  text-align: center;
  font-family: 'Great Vibes';
}
.title2 {
  font-size: 35px;
  text-shadow: 1.5px 1.5px pink;
  text-align: center;
  font-family: 'Great Vibes';
}

button{
  display: inline-block;
  text-align: center;
  padding-right: 0px;
}
.tablinks{
  color: white;
  background-color: red;
  border-style: none none double none;
  border-color: black;
  border-width: 7px;
  font-family: 'Great Vibes';
  font-size: 27px;
  text-align: right;
  padding-left: 20px;
  padding-right: 20.5px;
}

button:hover{
  background-color: white;
  color: black;
  border-color: red;
}


.MsPosley {
  width: 300px;
  border-style: outset;
  border-width: 15px;
  border-color: red;
  display: block;
  margin-left: auto;
  margin-right: auto;
   
}
.classoverview {
  font-family: 'VT323', monospace;
  font-size: 22px;
  text-align: center;
}
.quoteoverview {
  font-family: 'Great Vibes', serif;
  font-size: 25px;
  text-shadow: .5px .5px pink;
}
.quote {
  border-style: none none none solid;
  border-color: red;
  border-width: 8px;
}

.gwclogo {
  width: 120px;
  border-style: double;
  border-color:red;
  border-width: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.active{
  background-color: white;
  color: black;
  border-style: none none souble none;
  border-color: red;
  border-width: 7px;
  font-family: 'Great Vibes';
  font-size: 27px;
  padding-bottom: 0px;
}

.creds {
  font-family: 'Merriweather', serif;
  font-size: 11px;
  text-align: center;
}

.tabcontent {
  font-family: 'Merriweather', serif; 
}

.business{
  float: left;
  border-style: none none none double;
  border-color: red;
  border-width: 10px;
  width: 200px;
  margin: 10px;
}

.beta {
  width: 300px;
  border-style: none none double none;
  border-color: red;
  border-width: 10px;
  margin: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#lega {
  text-align: cennter;
  padding-right: 80px;
}

.beta2{
  border-style: none none double none;
  border-color: red;
  border-width: 10px;
  margin: 10px;
  width: 245px;
  display: block;
  margin-left: auto;
  margin-right: auto;
 
}
}

p {
  text-align:left;
}

#strong {
  text-align: center;
  line-height: 0px;
}

#tab, .tab{
  background-color: red;
  text-align: center;
  display: block;
  margin-left: -80px;
  margin-right: -80px;
  border-width: 10px;
  border-color: red;
}

.beta3{
  width: 300px; 
  border-style: none none double none;
  border-color: red;
  border-width: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gif{
  float:right;
  width: 200px;
  border-style: none double none none;
  border-color: red;
  border-width: 10px;
  margin: 10px;
}

.diphi{
  float: left;
  border-style: none none none double;
  border-color: red;
  border-width: 10px;
  margin: 10px;
}

.diphiposley{
  border-style: none double none none;
  border-color: red;
  border-width: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.dress{
  float:right;
  border-style: none double none none;
  border-width: 10px;
  border-color: red;
  width: 210px;
  margin: 10px;
}

.fun{
  float: left;
  border-style: none none none double;
  border-width: 10px;
  border-color: red;
  width: 160px;
  margin: 10px;
}

.gwc{
  width: 300px;
  border-style: double none double none;
  border-color: red;
  border-width: 10px;
  margin: 10px;
}

#intro {
  font-size: 35px;
  text-align: center;
  margin-top: 50px;
  color: black;
  text-shadow: 3.2px 1.5px lightpink;
}

/* code that is here, until the first @media block, will apply to any screen size */
#somethingorother {
  width: 800px ;
}

@media screen and (max-width: 320px) {
  /* comes into effect for screens less than or equal to 320 pixels */
  #somethingorother {
    width: 120px ;
  }
}
@media screen and (min-width: 321px) and (max-width: 480px) {
  /* comes into effect for screens between 321 and 480 pixels (inclusive) */
.MsPosley {
    width: 200px ;
    display: block; 
    margin-left: auto;
    margin-right: auto;
  }
  
  .title{
    font-size: 35px;
  
  }
  
  .title2{
    font-size: 30px;
  }
}
@media screen and (min-width: 481px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  #somethingorother {
    width: 480px ;
  }
}


            
          
!
            
              function openTopic(evt, Topic) {
    var i, tabcontent, tablinks;

 
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(Topic).style.display = "block";
    evt.currentTarget.className += " active";
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console