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;
}
