Coop Relationship Tracker

HTML
<link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> <body> <div class="meg-reltrack-coop-out"> <div class="meg-reltrack-coop-inner"> <div class="meg-reltrack-coop-title"> Cooper's Relationships </div> <div class="meg-reltrack-coop-bottom"> <div class="meg-reltrack-coop-shipout"> <div class="meg-reltrack-coop-shipname"> <a href="">name here</a> </div> <div class="meg-reltrack-coop-description"> description of ship here </div> <div class="meg-reltrack-coop-threads"> <a href="">thread name</a> / Description here </div> <div class="meg-reltrack-coop-threads"> <a href="">thread name</a> / Description here </div> </div> <div class="meg-reltrack-coop-shipout"> <div class="meg-reltrack-coop-shipname"> <a href="">name here</a> </div> <div class="meg-reltrack-coop-description"> description of ship here </div> <div class="meg-reltrack-coop-threads"> <a href="">thread name</a> / Description here </div> <div class="meg-reltrack-coop-threads"> <a href="">thread name</a> / Description here </div> </div> </div> </div> </div> </body>
CSS
.meg-reltrack-coop-out { width: 350px; background: url(https://i.postimg.cc/ZqBzpN1V/profileapppicture.jpg); padding: 25px; border: 1px solid #0C1840; margin: auto; } .meg-reltrack-coop-inner { background: rgba(255,255,255, .7); padding: 15px; border: 1px solid #ffffff; } .meg-reltrack-coop-title { font-family: 'Cormorant', serif; text-transform: uppercase; letter-spacing: 2px; font-style: italic; font-size: 20px; font-weight: bold; border-bottom: 1px solid #0C1840; text-align: center; margin-bottom: 15px; } .meg-reltrack-coop-bottom { background: ; border: 1px solid #ffffff; padding-left: 5px; padding-right: 5px; } .meg-reltrack-coop-shipout { background: rgba(0,0,0, .4); border: 1px solid #ffffff; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; margin: 5px 0px 5px 0px; height:; } .meg-reltrack-coop-shipname { font-style: italic; font-family: 'Cormorant', serif; border-bottom: 1px solid #0C1840; text-transform: uppercase; color: #0C1840; } .meg-reltrack-coop-shipname a{ color: #0C1840; text-decoration: none; } .meg-reltrack-coop-description { font-family: 'Poppins', sans-serif; text-transform: lowercase; padding: 2px; font-size: 11px; text-align: justify; } .meg-reltrack-coop-threads { font-family: 'Poppins', sans-serif; text-transform: lowercase; font-size: 11px; padding-left: 5px; } .meg-reltrack-coop-threads a{ font-style: italic; font-family: 'Cormorant', serif; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; text-decoration: none; color: #ffffff; } .meg-reltrack-coop-threads span{ font-family: 'Poppins', sans-serif; }
JAVASCRIPT
Expand for more options Login