Skip to content

Commit

Permalink
Add gender and sex symbols
Browse files Browse the repository at this point in the history
  • Loading branch information
@pauld0051
pauld0051 committed Dec 30, 2023
1 parent 3e1cdf5 commit 778fff7
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 0 deletions.
1 change: 1 addition & 0 deletions header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
<li><a class="dropdown-item" href="symbols_greek_lc.html">α Lowercase Greek</a></li>
<li><a class="dropdown-item" href="symbols_greek_uc.html">Ω Uppercase Greek</a></li>
<li><a class="dropdown-item" href="symbols_runic.html">ᚡ Runic</a></li>
<li><a class="dropdown-item" href="symbols_gender.html"><i class="fas fa-venus-mars"></i> Gender & Sex</a></li>
</ul>
</li>
</ul>
Expand Down
59 changes: 59 additions & 0 deletions symbols.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,65 @@ <h3>Runic Symbols</h3>
<label>Runic Belgthor Symbol (Golden Number 19)</label>
</div>
</section>
<h3>Gender Symbols</h3>
<section class="symbols-grid">
<div class="symbol-container">
<button class="symbol-btn" data-symbol="♂">♂</button>
<div class="copied-overlay">Copied!</div>
<label>Male</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="♀">♀</button>
<div class="copied-overlay">Copied!</div>
<label>Female</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚥">⚥</button>
<div class="copied-overlay">Copied!</div>
<label>Transgender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚲">⚲</button>
<div class="copied-overlay">Copied!</div>
<label>Non-Binary</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="∅">∅</button>
<div class="copied-overlay">Copied!</div>
<label>Agender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚢">⚢</button>
<div class="copied-overlay">Copied!</div>
<label>Bigender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚦">⚦</button>
<div class="copied-overlay">Copied!</div>
<label>Androgynous</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="☿">☿</button>
<div class="copied-overlay">Copied!</div>
<label>Intersex</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚹">🚹</button>
<div class="copied-overlay">Copied!</div>
<label>Male Restroom</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚺">🚺</button>
<div class="copied-overlay">Copied!</div>
<label>Female Restroom</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚻">🚻</button>
<div class="copied-overlay">Copied!</div>
<label>Unisex Restroom</label>
</div>

</section>
</main>

<footer>
Expand Down
106 changes: 106 additions & 0 deletions symbols_gender.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Pangram World" />
<meta property="og:description"
content="Check if you have a pangram, add symbols or adjust your text to bold, italic, or even alternating caps/lower case for Facebook and other social media platforms. Additionally, enrich your science and math emails with a variety of mathematical symbols and Greek letters." />
<meta property="og:image" content="https://www.pangram-world.com/images/pangram-logo-192.png" />
<meta property="og:url" content="https://www.pangram-world.com" />
<title>Greek Lowercase</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/cards.css">
<link rel="stylesheet" href="style/symbols.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<script src="scripts/main.js" defer></script>
<script src="scripts/bootstrap.bundle.js"></script>
<script src="https://kit.fontawesome.com/18fe617275.js" crossorigin="anonymous"></script>

<!-- Add any additional meta tags and scripts here -->
</head>
<body>
<!-- Main content area where your page content will go -->
<header id="globalHeader"></header>
<main>
<h2>Copy Symbols</h2>
<p>Suitable to copy and paste into <i class="fab fa-facebook facebook-icon"></i></p>
<small>Simply click the button of the symbol you want copied and it copies automatically then paste into your
favourite social media platform.</small>

<h3>Gender Symbols</h3>
<section class="symbols-grid">
<div class="symbol-container">
<button class="symbol-btn" data-symbol="♂">♂</button>
<div class="copied-overlay">Copied!</div>
<label>Male</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="♀">♀</button>
<div class="copied-overlay">Copied!</div>
<label>Female</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚥">⚥</button>
<div class="copied-overlay">Copied!</div>
<label>Transgender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚲">⚲</button>
<div class="copied-overlay">Copied!</div>
<label>Non-Binary</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="∅">∅</button>
<div class="copied-overlay">Copied!</div>
<label>Agender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚢">⚢</button>
<div class="copied-overlay">Copied!</div>
<label>Bigender</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="⚦">⚦</button>
<div class="copied-overlay">Copied!</div>
<label>Androgynous</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="☿">☿</button>
<div class="copied-overlay">Copied!</div>
<label>Intersex</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚹">🚹</button>
<div class="copied-overlay">Copied!</div>
<label>Male Restroom</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚺">🚺</button>
<div class="copied-overlay">Copied!</div>
<label>Female Restroom</label>
</div>
<div class="symbol-container">
<button class="symbol-btn" data-symbol="🚻">🚻</button>
<div class="copied-overlay">Copied!</div>
<label>Unisex Restroom</label>
</div>

</section>
</main>

<footer>
<p>&copy;
<script>document.write(new Date().getFullYear());</script> Paul Davis. All Rights Reserved.
</p>
<!-- Add additional footer content such as links or contact information here -->
</footer>
<script src="scripts/toUnicodeVariant.js"></script>
<script src="scripts/symbols.js"></script>

</body>
</html>

0 comments on commit 778fff7

Please sign in to comment.