CopperWire
/
thesatanictempleatlanta.com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="description"
      content="The Atlanta Chapter of The Satanic Temple"
    />
    <meta name="keywords" content="atlanta tst the satanic temple georgia" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Justin Gilman" />
    <title>The Satanic Temple Atlanta</title>

    <meta property="og:title" content="The Satanic Temple Atlanta" />
    <meta
      property="og:description"
      content="The Atlanta Chapter of The Satanic Temple"
    />
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet"> 
    <style type="text/css">
      html,
      body {
        background-color: black;
		font-family: 'Montserrat', sans-serif;
      }

      a {
        color: white;
        transition: color 0.5s ease-in;
		position: relative;
      }

	  a:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 4px;
		bottom: 0;
		left: 0;
		background-color: crimson;
		visibility: hidden;
		transform: scaleX(0);
		transition: all 0.5s ease-in-out;
	  }

      a:hover {
        color: crimson;
        background-size: 20px 2px, 0 2px, 100% 2px;
        background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
      }

	  a:hover:before {
		visibility: visible;
		transform: scaleX(1);
	  }

      .hero {
        padding-top: 66px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 640px;
        height: 640px;
      }

      .hero img {
        width: 100%;
      }

	  .links {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 34px;
      }

      .donate {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 34px;
		margin-bottom: 66px;
      }

	  @media screen and (max-width: 639px) {
        .hero {
          width: 100%;
          height: auto;
        }

		.links {
			font-size: 24px;
		}

		.donate {
			font-size: 24px;
		}
      }
    </style>
  </head>

  <body>
    <section class="hero">
      <img
        src="atlanta_tst.jpg"
        alt="An image of an inverted pentacle with a phoenix emerging from the flames in the center. It reads Atlanta curved over the top and The Satanic Temple curved beneath. At the top of the image it says Fight for your rights. At the bottom of the image it says Donate to support reproductive rights and separation of Church and State."
      />
    </section>
    <section class="links">
      <a href="https://www.flowcode.com/page/tstatl">Community Page</a>
    </section>
    <section class="donate">
      <a href="https://square.link/u/ObTjvqSg">Donate</a>
    </section>
    <!-- Domain owner: eyeofmidas (at) gmail.com -->
  </body>
</html>