Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="box">
    <img class = "2020main" src ="https://i.imgur.com/fFMHB6q.jpg"/>
  <div class="2020buttons">
	  <a class="button" href="#popup1">Unique</a>
    <a class="button" href="#popup2">Shocker</a>
    <a class="button" href="#popup3">Strategic</a>
    <a class="button" href="#popup4">Extreme</a>
    <a class="button" href="#popup5">Virtual-Insanity</a>
    <a class="button" href="#popupawake">Awakening</a>
    <a class="button" href="#popup6">Eventful</a>
    <a class="button" href="#popup7">Learning</a>
    <a class="button" href="#popup8">Home-Based</a>
    <a class="button" href="#popup9">Transformation</a>
    <a class="button" href="#popup10">Delicate</a>
    <a class="button" href="#popup11">Muted</a>
    <a class="button" href="#popup12">Disconnected</a>
    <a class="button" href="#popup13">Adapt</a>
    <a class="button" href="#popup14">Grateful</a>
    <a class="button" href="#popup15">Unexpected</a>
    <a class="button" href="#popup16">Change</a>
    <a class="button" href="#popup17">Pandemic</a>
    <a class="button" href="#popup18">Divided-but-united</a>
    <a class="button" href="#popup19">Reflective</a>
    <a class="button" href="#popup20">Eye-opening</a>
    <a class="button" href="#popup21">Beginning</a>  
  </div>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<a class="popup-button">Unique</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left" id = "overflow"> 
         <h1 id="content-head">Graham Parker | <span id = "content-italics">Chief Executive Officer</span></h1>
         <p id= "content-maintext">“This is a year like no other in terms of an unprecedented global pandemic, suffering, lockdowns, worry, and concern. However, with a robust and agile team and a very united togetherness, we have grown, matured, delivered, won, and continued evolving the product and business. The pandemic highlights just how essential it is for companies globally to be connected, efficient, and digitized. I wouldn't say we set out to capitalize on this, but we have seen that through both the good and the bad times, well-managed and agile businesses with a clear vision and roadmap can adapt and scale, and this is what we have done. We haven't had to adjust our business product or model as it was already geared for success and aligned with market needs; however, we as people have adapted, stuck to our core beliefs and vision, and continue to deliver through these uncharted turbulent times.” </p>
       </div>
       <div class="content-right" id = "overflow"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“My hope for 2021 is a steady and controlled return to a 'new normal,' being able to get back to our daily lives and understand these types of infectious diseases that are unlikely to simply going away. Instead, we have to learn to live with them. From a Gravity perspective, we will continue to scale and deliver best-in-class solutions to enable businesses to recover and scale themselves. We have a big focus on sustainability, circular economy, and delivering next-generation requirements today, offering a real value chain proposition. Through data-driven solutions, Gravity aims to provide users the ability to make decisions with absolute certainty. My role is to lead the company, deliver the vision and grow market share. To achieve this, I am responsible for ensuring the team is equipped to deliver by ensuring we have the right people, the right tools, and the freedom to communicate, share, evaluate, and execute openly. We have done this exceptionally well throughout the years, not least of all in 2020.”
</p>
       </div>
     </div>
	</div>
</div>

<div id="popup2" class="overlay">
	<div class="popup">
		<a class="popup-button">Shocker</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Gavin Webber | <span id = "content-italics">Chief Product Officer</span></h1>
         <p id= "content-maintext">“COVID came to play in 2020, and it kicked our ass! 2020 was a shocker because of the destruction it's left in its path. Brutal!” </p>
       </div>
       <div class="content-right" id=" gav-overflow"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“My hope for 2021 is to be reunited with overseas family and friends again. Oh, and for WALES to win the rugby!</br> 
From a business perspective, the pandemic has confirmed that we're in the right space, at the right time, and offering the right type of services. My hope for 2021 is that a significant shift in SCM mindset occurs, and businesses realize they can't operate in the same fashion as they have for the last 30 years. Hopefully, we'll be there when they do.“

</p>
       </div>
     </div>
	</div>
</div>

<div id="popup3" class="overlay">
	<div class="popup">
		<a class="popup-button">Strategic</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Matt Nodurfth | <span id = "content-italics">Chief Technology Officer</span></h1>
         <p id= "content-maintext">“2020 gave us plenty of reasons to go back to the drawing board and plan for success.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Capitalize on the plans laid for 2021 with massive growth and scale. </p>
       </div>
     </div>
	</div>
</div>

<div id="popup4" class="overlay">
	<div class="popup">
		<a class="popup-button">Extreme</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Nick Daly | <span id = "content-italics">Head of Customer Success</span </h1>
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Continued growth and resilience.“</p>
           </div> 
    </div>
	</div>
</div>

<div id="popup5" class="overlay">
	<div class="popup">
		<a class="popup-button">Virtual-Insanity</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Frederique van de Poll | <span id = "content-italics">Head of HR</span></h1>
         <p id= "content-maintext">“No one ever saw this year coming, and it was in all aspects insane! The whole world went upside down, with virtual becoming the new normal. Luckily Gravity adapted and could cope during these strange times, and we're still here!”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Growth and happiness.“
</p>
       </div>
     </div>
	</div>
</div>
    

<div id="popupawake" class="overlay">
	<div class="popup">
		<a class="popup-button">Awakening</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Dave Graham | <span id = "content-italics">Head of One Commercial Team</span></h1>
         <p id= "content-maintext">“I know it was a challenging year for all; however, it was also a year when the world woke up to the realization that they did not have adequate control or visibility of their supply chains and that they, therefore, had to digitize. Obviously, this is not the silver bullet; however, it is a huge change in our potential clients' thought process, which allows us to continue the message we are pushing, but this time to far more receptive ears.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“This coming year is full of excitement and opportunity. It is exciting due to the North American market's potential growth, where we are directing specific focus. The OCT team will be growing due to this focus, which brings a broader experience to the team, improving our knowledge. Therefore, providing opportunities to grow in a region that we know has the potential to be our largest. Therefore, my hopes for 2021 are that we fully grab this opportunity to take full advantage and propel our company into the global player/leader that we all know it has the potential to be“

</p>
       </div>
     </div>
	</div>
</div> 
    
<div id="popup6" class="overlay">
	<div class="popup">
		<a class="popup-button">Eventful</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Hian Tan | <span id = "content-italics">Head of Finance</span></h1>
         <p id= "content-maintext">“I will describe 2020 as eventful. The obvious reason being that Covid 19 changed the world drastically. However, this also presents new opportunities for Gravity as people begin to realize the vulnerability of their supply chains.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“For all, I hope for peace, good health, and a gradual return to normalcy in life. For Gravity, I hope for stellar growth in the business and great cohesion amongst the company staff.“

</p>
       </div>
     </div>
	</div>
</div> 

<div id="popup7" class="overlay">
	<div class="popup">
		<a class="popup-button">Learning</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Bena Ip | <span id = "content-italics">Head of Marketing</span></h1>
         <p id= "content-maintext">“2020 was a difficult year for everyone, not only for personal life but also within the business environments. Some learned how to use video chat to communicate with loved ones, some learned how to play games with friends virtually, and for business, virtual meetings and events played a big part in 2020. Employers who learned that employees working from home could also ensure businesses run as normal. People are learning to work and enjoy life under this pandemic year with something new in their life for sure.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“I am hoping everyone can get reunited with their family and friends both at home and abroad in 2021 and that businesses can again continuously work together as teams, enabling them to grow, especially within Gravity. “
</p>
       </div>
     </div>
	</div>
</div>
    
<div id="popup8" class="overlay">
	<div class="popup">
		<a class="popup-button">Home-Based</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Andy Ling | <span id = "content-italics">Senior Product Manager</span></h1>
         <p id= "content-maintext">“Since 2020, all work, school, and entertainment activities became home, and it's been a huge challenge for everybody to utilize their available resources to support this new living model.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“We must do our best to overcome this challenging moment together as individuals, groups, and families as every one of our contributions is equally important.“
</p>
       </div>
     </div>
	</div>
</div>
    
    <div id="popup9" class="overlay">
	<div class="popup">
		<a class="popup-button">Transformation</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Emily Poon | <span id = "content-italics">Business Intelligence Developer</span></h1>
         <p id= "content-maintext">“With the COVID-19 pandemic, 2020 was an extraordinary year for the entire world, and it has reshaped business practices and personal lifestyles in many ways.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“The rollout of coronavirus vaccines is probably one of the essential things from my perspective; however, even more importantly, I hope the whole world would be COVID-free and stay away from the pandemic.“
</p>
       </div>
     </div>
	</div>
</div>
    
 <div id="popup10" class="overlay">
	<div class="popup">
		<a class="popup-button">Delicate</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Gregory Yap | <span id = "content-italics">Back End Developer</span></h1>
         <p id= "content-maintext">“2020 has shown that despite how globalized and connected our world is, it just takes one contagious virus to cause havoc globally.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“More awareness that life and society are fragile, taking this chance to rebuild societies and businesses so they can be more sustainable, and safer for the environment and people.“
</p>
       </div>
     </div>
	</div>
</div>
    
    <div id="popup11" class="overlay">
	<div class="popup">
		<a class="popup-button">Muted</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Geoffrey Wong | <span id = "content-italics">Front End Developer</span></h1>
         <p id= "content-maintext">“Emotionally, in my memories, and on zoom.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“To be able to go to outdoor festivals and concerts.“
</p>
       </div>
     </div>
	</div>
</div>
    
    <div id="popup12" class="overlay">
	<div class="popup">
		<a class="popup-button">Disconnected</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Florence Kwok | <span id = "content-italics">Digital and Graphic Designer</span></h1>
         <p id= "content-maintext">“It was as if the whole world stopped communicating in a non-virtual context. I’ve always been a half-analog person, enjoying pen and paper crafting and being physically present at live concerts, so I was a bit uncomfortable having to do everything using a screen. I can’t touch anything tangible, making my perception of “reality” so obscure.”
“In 2020, regarding digital marketing, my team and I have made various improvements on our website, with an ongoing SEO/SEM focus into 2021. As for content marketing, we produced over 40 resources including blog posts, case studies, brochures/one-pagers, and videos.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“I hope the vaccination helps to control the spread of Covid-19, that one day we won't have to put on a mask all the time, and I hope I can learn to adapt to the necessary changes in life.“
</p>
       </div>
     </div>
	</div>
</div>
    
    <div id="popup13" class="overlay">
	<div class="popup">
		<a class="popup-button">Adapt</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Geoffrey Wong | <span id = "content-italics">Front End Developer</span></h1>
         <p id= "content-maintext">“2020 saw a big change. Being unable to socialize has made me adapt to the current environment.”</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Release the Kraken. Everyone is hoping for some release in 2021, being able to travel and return to our old lives.“
</p>
       </div>
     </div>
	</div>
</div>

 <div id="popup14" class="overlay">
	<div class="popup">
		<a class="popup-button">Grateful</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left" id = "overflow"> 
         <h1 id="content-head">Harshada Khare | <span id = "content-italics">Product Manager</span></h1>
         <p id= "content-maintext">“When looking back at 2020, we realize things are very different, and it hasn't been a good year. It was an unprecedented, challenging, and tough year for all of us on different levels. 2020 brought with it plenty of suffering, but the answer to suffering isn’t bitterness - it’s thankfulness. </br>
Regardless of the challenges we faced in 2020, I feel extraordinarily gratified from personal and professional perspectives. I happened to join Gravity right before the pandemic hit, and fortunately, we're in a space & industry which hasn't been impacted by COVID 19 much. 2020 has enabled me the time to reconnect with my passions - mainly art and music, exploring the city I have been calling "home" (Hong Kong) for the last seven years like never before, along with the opportunity to reflect on my health, relationships, and goals in life.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“I hope for the world to heal, recover, and for all of us to be reunited with our families and loved ones. I also hope for outstanding success in all aspects of Gravity.“
</p>
       </div>
     </div>
	</div>
</div>

 <div id="popup15" class="overlay">
	<div class="popup">
		<a class="popup-button">Unexpected</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Maurice Willis | <span id = "content-italics">Web Developer</span></h1>
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Getting back into traveling with the restrictions around the world relaxing as the vaccine rolls out.“
</p>
       </div>
     </div>
	</div>
</div>

 <div id="popup16" class="overlay">
	<div class="popup">
		<a class="popup-button">Change</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Silje Jackson | <span id = "content-italics">Implementation Manager</span></h1>
         <p id= "content-maintext">“I joined Gravity in July and have enjoyed my journey immensely.” 
         </br> </br>
“I have some happy customers onboarded and some more 'nearly there' despite the tough conditions getting experienced throughout our customer base. I've enhanced our learning material to support our customer's onboarding process further.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“The implementation team grew from one to two people in January, and we hope to provide a positive impact for Gravity's customers in 2021.“
</p>
       </div>
     </div>
	</div>
</div>

 <div id="popup17" class="overlay">
	<div class="popup">
		<a class="popup-button">Pandemic</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left" id = "overflow"> 
         <h1 id="content-head">Preksha Srivastava | <span id = "content-italics">Development Operations Engineer</span></h1>
         <p id= "content-maintext">“The pandemic forced us to re-evaluate our relationship with physical space and how we occupy it. As experts learned more about the spread of the virus, "6 feet" became the golden number: the distance we should stay away from others to prevent the spread of Covid-19, yes, but also an acceptable way in which to navigate socialization in the new world.” </br> </br>
    “I became an awesome 'bedtime story teller'! When lockdown started, my daughter and son wanted me to tell between five and ten new stories every day, so I had to search on Google or read from books or sometimes use my imagination! I now think I can write a children's bedtime storybook. My daughter and son now know more about our culture, traditions and have learned good habits from these stories. Thank you, 2020, for giving me enough time to learn more personally so I can teach my children.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“I wish 2021 will bring us more wisdom, discipline, and better health.“
</p>
       </div>
     </div>
	</div>
</div>

<div id="popup18" class="overlay">
	<div class="popup">
		<a class="popup-button">Divided-but-united</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Niral Prajapati | <span id = "content-italics">Full Stack Developer</span></h1>
         <p id= "content-maintext">“Social distance made us all divided, but our spirit kept us united.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Hoping the society heals quickly and with the same spirit.“
</p>
       </div>
     </div>
	</div>
</div>

<div id="popup19" class="overlay">
	<div class="popup">
		<a class="popup-button">Reflective</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Shivam Suri | <span id = "content-italics">Front End Developer</span></h1>
         <p id= "content-maintext">“2020 was a difficult year for many, but it also told us a lot about ourselves. Hopefully, we can learn and grow from the 2020 experience individually, on a personal level, as well as a society.”
</p>
       </div>
       <div class="content-right" id ="overflow"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Onwards and Upwards! 2020 may be over, but the events of 2020 will have a long-lasting effect. However, a gradual approach to normalcy will hopefully lead us to a better place. 2020 was a decent year for me as living in Hong Kong, and within a bubble of privilege, I wasn't affected severely by COVID 19. Staying at home was a welcomed change from the usually fast-paced life on Hong Kong Island. I started developing new hobbies like cooking and running. I was also able to connect more with family and friends not based in Hong Kong. Professionally, I had a chance to reflect and understand my goals and aspirations for the future, and I was able to take steps to meet them.“
</p>
       </div>
     </div>
	</div>
</div>

<div id="popup20" class="overlay">
	<div class="popup">
		<a class="popup-button">Eye-opening</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Stefan Marinica | <span id = "content-italics">Product Manager</span></h1>
         <p id= "content-maintext">“The world stopped, and we had to give forethought to priorities on both a personal and business level.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“I'd like to think that change is important. That's why, instead of looking over my shoulder to how things were in 2019, I'm rather enthusiastic to see how we as a society find new ways to grow connections while keeping each other safe.“
</p>
       </div>
     </div>
	</div>
</div>

<div id="popup21" class="overlay">
	<div class="popup">
		<a class="popup-button">Beginning</a>  
		<a class="close" href="#">&times;</a>
    
		 <div class="content">
       <div class="content-left"> 
         <h1 id="content-head">Kristine Samonte | <span id = "content-italics">Finance Manager</span></h1>
         <p id= "content-maintext">“2020 has been crazy for everyone, but we began to pause from the hustle and bustle of life and appreciate every little thing we have and discover more about ourselves and our loved ones.”
</p>
       </div>
       <div class="content-right"> 
         <h1 id="content-head">What are you hopeful for in 2021?</h1>
         <p id= "content-maintext">“Hoping to gain back the Covid-free environment so we can all reunite with our family and friends.“
</p>
       </div>
     </div>
	</div>
</div>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

body{
  overflow: hidden;
}

.box {
  width:auto;
  max-height: 300px;
  border: 2px solid #fff;
  background-clip: padding-box;
  margin: 0 auto;
}

.button {
  font-size: 0.9em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 3px 10px 3px 10px;
  margin-top: 10px;
  margin-right: 5px;
  color: #282828;
  border: 1px solid #01B0E7;
  border-radius: 45px;
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
  display: inline-block;
}

img.\32 020main {
  display: inline-block;
  float:left;
  max-height:100%;
  max-width:40%;
  
}

.\32 020buttons {
  display: inline-block;
  vertical-align:top;
  text-align: center;
  width: 55%;
  justify-content: center;
  margin-top: 10px;
}

.button:hover {
  background: transparent linear-gradient(90deg, #00B0E9 0%, #58A63E 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  color: white;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 500ms;
  visibility: hidden;
  opacity:0;
}
.overlay:target{
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 15px auto;
  margin-bottom:15px;
  padding: 20px;
  padding-bottom: 25px;
  max-width: 680px;
  height:315px;
  position: relative;
  transition: all 5s ease-in-out;
  padding-top: 30px;
  background-color: rgba(0,0,0);
  opacity: 0.85;
}

.popup .close {
  position: absolute;
  right: 15px;
  top: 1px;
  transition: all 100ms;
  font-size: 50px;
  text-decoration: none;
  color: #FFFFFF;
}
.popup .close:hover {
  color: #A9A9A9;
}
.popup .content {
  max-height: 100%;
}

@media screen and (max-width: 480px){
  
  body {
    overflow: auto !important;
  }
  img.\32 020main {
    float: none !important;
    margin: 0 auto;
    display: none;
    visibility:hidden;
  }
  
  .\32 020buttons {
  vertical-align:top;
  text-align: center;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  }
  
  .popup{
    display:block;
    width: 90%;
    margin-top: 5%;
    height:230px;
    
  }
  .content {
    display: flex !important;
    height:180px;
    
  }
    #overflow.content-left {
    width: 100%;
}
  #overflow.content-right {
    width: 100%;
}
  #content-left {
    width:100%;
    height:100px;
  }
  
  #content-right {
    width:100%;
    height:100px;
  }
}

.popup-button {
  font-size: 1.2em;
  font-weight: 800;
  font-family: 'Open Sans', sans-serif;
  padding: 3px 15px 3px 15px;
  letter-spacing: 0.56px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #00B0E9 0%, #58A63E 100%);
  border-radius: 45px;
  top:-10px;
  opacity: 1 !important;
}

#content-head {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0px;
  font-size: 13px;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-top: 10px;
  margin-left: 7px;
}

.content-left {
  overflow: hidden;
  max-height: 280px;
  overflow-x: hidden;
}

.content-right {
    overflow: hidden;
  max-height: 280px;
  overflow-x: hidden;
}

#content-italics {
  font-family: 'Open Sans', sans-serif;
  color: #FFFFFF;
  letter-spacing: 0px;
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
}

#content-maintext {
    font-family: 'Open Sans', sans-serif;
  font-weight:300;
  color: #d3d3d3;
  letter-spacing: 0px;
  font-size: 13px;
  line-spacing: 1px;
  
}

#overflow.content-left {
  overflow: scroll !important;
  overflow-x: hidden !important;
}

#overflow.content-right {
  overflow: scroll !important;
  overflow-x: hidden !important;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #898989 0% 0% no-repeat padding-box;
  border-radius: 50px;
}
!

JS
!
999px

Console