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="timeline">
  <!--   to create more timeline copy the code between these comments, remember to remove no-border class and info1 class
-->
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">1982</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>CBA (COALITION FOR A BETTER ACRE)</h2>
    <span>Established by a group of residents, clergy, businesspeople, and nonprofit leaders dedicated to saving the Acre neighborhood from an urban renewal plan that would have displaced hundreds of residents.</span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>ACRE HOMEOWNERSHIP</h2>
    <span>CBA revitalizes 38 housing units in the Acre Triangle, making it possible for 24 low- and moderate-income families to become homeowners and providing safe, quality rental units for 14 others. The homeownership rate in the Acre Triangle neighborhood increased dramatically from 1% to 25%.
    </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1983</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1983-1989</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>SAVE THE NORTH CANAL APARTMENTS</h2>
    <span>After a six-year fight, residents successfully oppose a plan to demolish the failed 267-unit North Canal Apartments on Moody Street, taking ownership of the complex from Housing and Urban Development (HUD) - the first community takeover of an expiring use property in the United States. CBA raises $20 million to rehabilitate the apartments.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>ACRE FAMILY DAY CARE</h2>
    <span>CBA established Acre Family Day Care to train low-income women from many ethnic groups to start their own home-based business as family daycare providers. Today, Acre Family Childcare providers care for nearly 400 children every day, including overnight and weekend childcare for parents working 2nd and 3rd shifts. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1988</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">1990</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>MERRIMACK STREET APARTMENTS</h2>
    <span>This $2 million historic rehabilitation of a mixed-use property generated 12 rental apartments and six commercial storefronts at 442-460 Merrimack Street.</span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>ACRE YOUTH CENTER</h2>
    <span>CBA organizes youth and community members to petition for a youth center in the Acre. Later, with site control established, the youth work with an architect to design the space and help raise the funds for renovations. The Acre Youth Center is opened by the YWCA on Rock Street in 1995.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1991</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1992</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>ORGANIZING AGAINST SLUMLORD</h2>
    <span>CBA organizes tenants that live in Adams Street apartments owned by attorney Wendy Golenbock, one of Lowell’s notorious slum landlords, and successfully argue that she does not warrant Section 8 subsidization because she fails to maintain the apartments appropriately. Golenbock is later disbarred and imprisoned for bankruptcy fraud.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>ENTERPRISE DEVELOPMENT CENTER</h2>
    <span>CBA provides comprehensive business training to existing and start-up small businesses and loans.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1993</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">1994</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>95 ROCK STREET BUSINESS ENTERPRISES</h2>
    <span>CBA purchases the 42,000-square-foot mill building at 95 Rock Street to retain and create jobs for local and low-income individuals in light manufacturing. Today, the building is the home of UnWrapped Inc., a textile manufacturing company, employing almost 300 people, of whom many are Cambodian immigrants and Acre residents. CBA provided loan and equity financing to UnWrapped in 2001. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>FLETCHER STREET CONDOMINIUMS</h2>
    <span>These three-bedroom townhouses at 194-244 Fletcher Street are built of high quality modular construction for greater durability and lower maintenance. Eight homeownership units are developed on three previously troubled lots and sold to low-income first-time homebuyers. CBA acts as developer and general contractor for the project.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1996</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1997</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>TRIANGLE RENTAL</h2>
    <span>CBA led the $4 million residential and mixed-use rehabilitation development comprising 26 housing units and three commercial units. Two of the four buildings were restored to preserve their historical significance in the neighborhood. </span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>WORKFORCE DEVELOPMENT</h2>
    <span>CBA launches an economic development initiative designed to give low-income men and women the skills they need to get good-paying jobs in partnership with training institutions including UMass Lowell, the Institute for Environmental Training, consulting firm Change Dynamics and Greater Lowell Technical High School. An environmental jobs program prepares low-income minorities from Lowell in either an environmental construction or technician track, preparing them to perform hazardous waste cleanup or monitoring and sampling at hazardous waste sites.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1997</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">1998</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Welcome Home Project</h2>
    <span>CBA starts a mortgage assistance and homebuyer counseling program to assist low- and moderate-income first-time homebuyers. With help from the Neighborhood Reinvestment Corporation, $2 million is invested in homeownership in Lowell annually, creating new partnerships with banks and the Merrimack Valley Housing Partnership.</span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Acre Redevelopment Plan</h2>
    <span> CBA forms the Acre Task Force to foster an improved working relationship with the City of Lowell and to negotiate an Acre redevelopment plan with resident, city and business representatives. As a result, CBA secures a commitment that half of new homes developed in the Acre must be affordable to families earning 50 percent or less of the Lowell median income.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">1999</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2001</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Moody Street Center</h2>
    <span>CBA converts the historically significant former St. Joseph’s Convent at 517 Moody Street into a community center for North Canal residents, with two floors of office space above housing Maloney Properties, Community Teamwork’s Fuel Assistance Program, and CBA’s new offices.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>At Home in Lowell, 252 Fletcher St</h2>
    <span>At 252 Fletcher Street, a new duplex is built for two first-time homebuyers on a corner lot with off-street parking and yards. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2003</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2004</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Liberty Square Project</h2>
    <span>This $7 million development, in partnership with a private developer, leads to the renovation of four deteriorating buildings on highly visible streets, creating 33 units of affordable housing and five units of commercial space. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Suffolk Street Joint Venture with Residents First Development Corp</h2>
    <span>The Suffolk Street Joint venture project includes the development of five, three-bedroom duplexes for moderate-income homeownership and low-income rental. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2005</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2006</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Moody Street Playground</h2>
    <span>CBA worked with neighborhood youth to create a city-approved plan for improvements to the Moody Street Playground. The project was completed in 2009, and features a new basketball court, landscaping, lighting, and fencing. </span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>North Canal Apartments Renovations</h2>
    <span>CBA refinances and rehabilitates this 267-unit rental property, which is owned and managed by a partnership that includes CBA and the North Canal Tenant Council. The project is accomplished with significant resident participation and decision-making, preserving the affordability and sustainability of these apartments in perpetuity. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2007</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2008</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Home Preservation Center</h2>
    <span>CBA founded the Home Preservation Center (HPC), a one stop location to help homeowners experiencing difficulty meeting their mortgage payments and those in need of post-purchase education throughout the region. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>St. Joseph’s Apartments</h2>
    <span>The St. Joseph’s School project created 15 affordable one-, two-, and three-bedroom rental units, in the historic former St. Joseph’s School at 511 Moody St. The building is listed on the National Register of Historic Places. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2008</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2009</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Mill Cities Community Investments</h2>
    <span>In 2008, CBA and Lawrence Community Works (LCW), a Community Development Corporation (CDC) serving Lawrence, joined together to establish a Community Development Financial Institution (CDFI) to serve the Merrimack Valley. </span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>ACTION (Acre Coalition to Improve Our Neighborhood)</h2>
    <span>CBA staff works with community leader Dave Ouellette to create the Acre’s neighborhood group, giving residents a voice.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2009</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2010</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Acre High School Apartments</h2>
    <span>CBA completes the renovation of the former St. Joseph’s High School at 760 Merrimack Street into 22 units of permanently affordable rental housing. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2> Unity Place Apartments</h2>
    <span>Unity Place Apartments replaces two of the city’s most notorious blighted buildings with 23 one-, two-, and three-bedroom units of smart, green affordable housing on Moody Street. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2011</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2015</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Gorham Street Apartments</h2>
    <span>CBA’s first project outside of the Acre, this new 5-story building on the former site of St. Peter’s Church has 24 affordable units. </span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Welcome Home Apartments</h2>
    <span>Partnering with Veterans Northeast Outreach Center (VNEOC), CBA built 27 units of veterans-preference affordable housing on three parcels in Haverhill. It was CBA’s first project outside of Lowell</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2015</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2015</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>YES (Youth Educational Success)</h2>
    <span>An after-school program that serves 25 neighborhood kids in grades K-8 from 4 p.m. to 6 p.m. four days a week. The mission is to provide academic support and open the door to activities and experiences they otherwise would not be able to access. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2> Empower</h2>
    <span>A nine-week leadership class in partnership with Lowell Alliance established community leaders of different backgrounds to enrich community bonds and build engagement among the acre. Topics covered include interacting with local government, running meetings, and inclusion methods. Workshops are tailored to low-income residents of Lowell. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2015</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2016</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>6 Degrees</h2>
    <span>The "6 Degrees of the Acre" fundraiser is an annual event organized by the Coalition for a Better Acre. The fundraiser began in 2016 and aims to bring together community members, local businesses, and supporters to raise funds and awareness for the organization's projects. The name "6 Degrees" is derived from the concept of six degrees of separation, which shows how connected individuals are within a community. The Acre holds significant meaning for many people, whether their ancestors lived there, they have fond memories of activities in North Common, or they had their first job in the area. The name "6 Degrees of the Acre" reflects this interconnectedness of the community.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Asociacion Latina de Lowell</h2>
    <span> A group established with the purpose of reaching out to and empowering the Latino community to get involved in civic life.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2016</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2016</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>STEP (Supported Training Education Program)</h2>
    <span>This six-week program equips high school graduates and GED recipients with the skills they need for career success and places them in entry-level positions within medical device manufacturing companies. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>CHOP (Community Health Outreach Program) Dinners</h2>
    <span>A monthly dinner series bringing the community together over food to hold discussions about community health issues and topics. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2017</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2017</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2> Franco American School</h2>
    <span>CBA is working, in partnership with developer Brian McGowan, to redevelop the historic former school site to include market and affordable housing units, as well as some commercial space. CBA is also constructing a canal side park to house and preserve the grotto and 14 Stations of the Cross remaining on the site.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Gerson Building</h2>
    <span>In a second veterans’ housing project in Haverhill with VNEOC, CBA is planning to build 44 units of new, affordable housing with a preference for veterans at the site of the former Gerson Furniture Building. Construction is expected to break ground in spring 2018. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2017</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2017</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2> Lowell House</h2>
    <span>CBA announces plans to redevelop 555 Merrimack Street into a building with retail space on the ground floor and about two dozen sober-living apartments upstairs. Lowell House will move its clinical and day programs to a Lowell Community Health Center Building on Jackson Street. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Lowell High School Project Community Meeting</h2>
    <span>CBA held an informative meeting at Lowell High School to discuss the Lowell High Project and its impact on the community. Skanska USA/Perkin Eastman, Lowell’s project manager, presented the last few options for the project in the downtown area. This meeting also updated the community on the project’s future, and gave people the opportunity to express themselves through thoughts, ideas, or questions.

    </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2017</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2019</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Community Meetings on Election System Change</h2>
    <span>CBA teamed with the City of Lowell and community partners such as Lowell Votes, Working Cities Lowell, and Cambodian Mutual Assistance Association of Greater Lowell, to host events that discussed changes to the election system in Lowell. The events covered two options for the election system change: ranked choice voting and hybrid at-large/district representation. Lowell residents got the opportunity to obtain information, and consider their involvement in the change.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2> Dracut Centre School/Town Hall Annex Project</h2>
    <span>Dracut and CBA partnered to transform the Dracut Centre School/Town Hall Annex into housing which would serve and be affordable for veterans. CBA planned to develop nine units. The Department of Housing and Community Development (DHCD) chose CBA to work with Dracut. Veterans Assisting Veterans and Veterans Northeast Outreach Center were also partners in the project.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2019</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2020</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Gerson Building Completion</h2>
    <span>CBA completed the Gerson Building housing project, then on November 12, celebrated it with a socially distanced ribbon cutting ceremony. Capital One, Massachusetts Department of Housing and Community Development, Community Economic Development Assistance Corporation, and the City of Haverhill supported and funded the project.</span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>COVID-19 Emergency Response</h2>
    <span>CBA contacted over 700 individuals to ask about changes during the pandemic. Early outreach revealed a 15% increase in job loss among members and difficulty accessing food. CBA responded by delivering food and essential items, distributing PPE, and connecting program participants with tablets, laptops, and printers. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2020</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2020</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>The Gerson Building</h2>
    <span>CBA developed 44-units of veterans’ preference housing on the site of the former Gerson Furniture store; CBA’s second veterans’ housing project in Haverhill with Veterans Northeast Outreach Center. The first-floor of the Gerson Building is commercial space designated for an educational institution.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Grotto Restoration</h2>
    <span>CBA developed a canal-side park at the site of the former Franco-American School Grotto and Stations of the Cross. Repairs and upgrades were made to preserve the grotto and 14 Stations of the Cross remaining on the site. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2021</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2021</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Walk-In Center</h2>
    <span>CBA developed a canal-side park at the site of the former Franco-American School Grotto and Stations of the Cross. Repairs and upgrades were made to preserve the grotto and 14 Stations of the Cross remaining on the site. </span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Whiting Street Garden Rebuild</h2>
    <span> CBA’s community garden undergoes a substantial rebuild to replace 12 beds and reconfigure plots after a housefire in a neighboring lot and years of disuse left the garden in disrepair.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2021</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2021</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2>Sewing and English classes</h2>
    <span> A sewing program with 10-week sessions is developed for non-English speakers. Participants can also enroll in ESOL (English for Speakers of Other Languages) at the CBA Walk-In Center.</span>
  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Health Access Program</h2>
    <span>Our team provides resources to our members, Acre residents, and Lowellians to empower them to manage their health independently. When there is a need in our community, the Health Access staff collectively responds to our communities needs by implementing programing based off of data and direct sources from our community members. Our team is made up of 3 public health professionals who are dedicated to serving this community. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2021</span>
    </div>
    <section class="bl no-border"></section>
    <section class="br no-border"></section>
  </div1>
  <div1 class="circle-container">
    <section class="tl no-border"></section>
    <section class="tr no-border"></section>
    <div class="flex">
      <span class="circle">2022</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info no-border">
    <h2>Empoderados and Latin Empowerment and Advocacy Program (LEAP)</h2>
    <span>The nine-week leadership development program designed by and for Latinos provides education and resources on how to create and lead grassroots change. The LEAP Coordinator facilitates the workshops with help from local leaders and former Empower participants.</span>

  </section>
  <section></section>

  <section></section>
  <section class="info">
    <h2>Dracut Centre School Complete</h2>
    <span> The historic preservation and renovation of the former four room school created 9-units of affordable housing. CBA’s first development project in Dracut has a preference for veterans and tenants who earn 80% of the Annual Median Income. </span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2022</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <!--   end of code to copy  -->

  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2022</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
  <section class="info">
    <h2> 555 Merrimack Project Breaks Ground</h2>
    <span>AConstruction begins at the former site of Lowell House Addiction Recovery and Treatment Center. CBA will bring 27 units of permanent housing to the Acre and provide supportive services, including recovery coaches and a full-time, on-site case manager for residents in partnership with Lowell House. The four-story development is projected to be complete by July 2023.</span>
  </section>
  <section></section>
  <section></section>
  <section class="info">
    <h2>555 MERRIMACK RIBBON CUTTING</h2>
    <span>The development project itself is a $13 million reinvestment in the Acre neighborhood and the Merrimack Street corridor. By replacing a dilapidated single story commercial building, CBA feels 555 Merrimack has improved the streetscape and helped catalyze additional reinvestment in the Merrimack Street corridor that has seen recent public (US DOT TIGER bridges) and private (Jeanne D’Arc Credit Union) in recent years.</span>
  </section>
  <div1 class="circle-container">
    <section class="tl"></section>
    <section class="tr"></section>
    <div class="flex">
      <span class="circle">2024</span>
    </div>
    <section class="bl"></section>
    <section class="br"></section>
  </div1>
!

CSS 

              
                @import "https://fonts.googleapis.com/css?family=Nunito:400, 700&display=swap";
$circle-color: #c3752f;
$line-color: #555ac0;
$bg: #ffffff;
$title: #24b47e;
$desc: #000000;

body {
  background: $bg;
  font-family: Montserrat, sans-serif;
}

.timeline {
  display: grid;
  grid-template-columns: 10% 80% 10%;

  section {
    min-height: 30px;
  }

  .info {
    background-clip: padding-box;
    border-top: 2px solid $line-color;

    h2 {
      color: $title;
      font-size: 1.5rem;
      margin-bottom: 1px;
    }
    span {
      color: $desc;
    }
  }

  .info:nth-of-type(2n) {
    padding-right: 2em;
    text-align: right;
    span {
      max-width: 64%;
      display: inline-block;
      animation: slideInRight 1.5s forwards 0s ease-in-out;
    }
  }

  .info:nth-of-type(2n + 1) {
    padding-left: 2em;
    text-align: left;
    span {
      max-width: 95%;
      display: inline-block;
      animation: slideInLeft 1.5s forwards 0s ease-in-out;
    }
  }
  .circle-container:nth-child(2n) {
    .tl {
      grid-area: tl;
      border-top: 2px solid $line-color;
      border-right: 2px solid $line-color;
      border-top-right-radius: 20px;
      margin-bottom: -2px;
    }
    .bl {
      grid-area: bl;
      border-bottom: 2px solid $line-color;
      border-right: 2px solid $line-color;
      border-bottom-right-radius: 20px;
      margin-bottom: -2px;
    }
  }
  .circle-container:nth-child(2n + 1) {
    .tr {
      grid-area: tr;
      border-top: 2px solid $line-color;
      border-left: 2px solid $line-color;
      border-top-left-radius: 20px;
      margin-bottom: -2px;
    }
    .br {
      grid-area: br;
      border-bottom: 2px solid $line-color;
      border-left: 2px solid $line-color;
      border-bottom-left-radius: 20px;
      margin-bottom: -2px;
    }
  }
}

.circle-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto 2.5em 2.5em auto;
  grid-template-areas:
    "tl tl tr tr"
    "cr cr cr cr"
    "cr cr cr cr"
    "bl bl br br";

  div {
    grid-area: cr;
  }
  // section {
  //   grid-area: tl;
  //   border-top: 2px solid red;
  //   border-right: 2px solid red;
  // }
}

.circle {
  width: 5em;
  height: 5em;
  background: $circle-color;
  border-radius: 50%;
  margin-left: 1em;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -1em;
}

.no-border {
  border-top: 0px !important;
  border-left: 0px !important;
  border-bottom: 0px !important;
  border-right: 0px !important;
}

@keyframes slideInRight {
  0% {
    transform: translateX(-50%);
    opacity: 0.1;
  }
  100% {
    transform: rotate(xx) translateX(0%);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(50%);
    opacity: 0.1;
  }
  100% {
    transform: rotate(xx) translateX(0%);
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .info span {
    padding-bottom: 1em;
  }
}
!

JS
!
999px

Console