Jump to content

  • A shipper with place for current ships

       (0 reviews)

    This shipper includes a sidebar for you to keep track of your current relationships with characters, including silly little icons that appear automatically. The mark up includes a description on how to add more relationship categories.

     

    You are free to edit however you like or adapt for other uses.

    Actual Template Responsive

    My Shipper

    Enemies

    Stuff goes here.

    Friends

    Stuff goes here.

    Lovers

    Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu a purus molestie consectetur quis et mi. Nulla ac felis aliquam, pharetra dui vel, congue elit. Sed eu ante ante. Donec libero erat, interdum eu lacus sit amet, dictum pellentesque ipsum. Vestibulum rutrum at ipsum ut vulputate. Curabitur tincidunt ullamcorper turpis, sed maximus tellus tristique quis. Aliquam nec blandit sapien. Maecenas ex lectus, semper et fringilla sed, dictum ac diam. Praesent nulla sem, bibendum at nunc euismod, maximus pulvinar magna. Integer dapibus, ipsum et tristique viverra, est nibh vulputate eros, in ultrices felis sem id odio. Pellentesque tempor magna diam, non rhoncus sapien egestas in. Pellentesque rutrum cursus neque, a condimentum libero scelerisque sodales. Aenean id ultrices massa.

    Anything Else

    You can keep on adding headers and other things. In hac habitasse platea dictumst. Sed sollicitudin, magna eget dignissim facilisis, ipsum purus malesuada mauris, id pharetra nisi massa mollis ipsum. Integer et suscipit dui. Nam vel ipsum pretium lorem laoreet ullamcorper ac luctus ex. Nulla elementum eros eget pretium commodo. Morbi tincidunt tincidunt ipsum, ac auctor libero. Etiam rhoncus et augue eget pellentesque. Mauris metus enim, varius vestibulum sapien vitae, rutrum varius nibh. Pellentesque fringilla magna a ligula tincidunt, eget rhoncus magna eleifend. In vitae est velit. Quisque at enim mi.

    Template code

    <head>
  <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
  <!-- You site probably already has font awesome, check with your administrator! If they do, you can delete the next bit.-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  
  <!-- if your site's default theme is already set up to be responsive, you can delete the next bit. Just ask your administrator if they have included the below code between their <head></head> tags. If yes, you can delete the code below.
If no you can delete the symbols that appear before <meta and after 1.0"> -->
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
</head>

<section class="kit-shipper">
  <h1>My Shipper</h1>
  <aside>
    <h3>So far...</h3>
    <p class="acquaintence"><a href="#">Name</a></p>
    <p class="love">Name Two</p>
    <p class="enemy">Name Three</p>
    <p class="enemy">Another Name</p>
    <p class="friend">My Friend</p>
  </aside>
  <div class="content">
    <h3>Enemies</h3>
    Stuff goes here.
    <h3>Friends</h3>
    Stuff goes here.
    <h3>Lovers</h3>
    Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu a purus molestie consectetur quis et mi. Nulla ac felis aliquam, pharetra dui vel, congue elit. Sed eu ante ante. Donec libero erat, interdum eu lacus sit amet, dictum pellentesque ipsum. Vestibulum rutrum at ipsum ut vulputate. Curabitur tincidunt ullamcorper turpis, sed maximus tellus tristique quis. Aliquam nec blandit sapien. Maecenas ex lectus, semper et fringilla sed, dictum ac diam. Praesent nulla sem, bibendum at nunc euismod, maximus pulvinar magna. Integer dapibus, ipsum et tristique viverra, est nibh vulputate eros, in ultrices felis sem id odio. Pellentesque tempor magna diam, non rhoncus sapien egestas in. Pellentesque rutrum cursus neque, a condimentum libero scelerisque sodales. Aenean id ultrices massa.
    <h3>Anything Else</h3>
    You can keep on adding headers and other things. In hac habitasse platea dictumst. Sed sollicitudin, magna eget dignissim facilisis, ipsum purus malesuada mauris, id pharetra nisi massa mollis ipsum. Integer et suscipit dui. Nam vel ipsum pretium lorem laoreet ullamcorper ac luctus ex. Nulla elementum eros eget pretium commodo. Morbi tincidunt tincidunt ipsum, ac auctor libero. Etiam rhoncus et augue eget pellentesque. Mauris metus enim, varius vestibulum sapien vitae, rutrum varius nibh. Pellentesque fringilla magna a ligula tincidunt, eget rhoncus magna eleifend. In vitae est velit. Quisque at enim mi.
  </div>
</section>

<style>
  section.kit-shipper {
  margin: 1% auto;
  padding: 0 1% 1% 1%;
  background:#efefef;
  border: 2px solid #fff;
  outline: 1px solid #fafafa;
  color: #1a1a1a;
  font-size: 1rem
}

section.kit-shipper h1,
section.kit-shipper h3 {
  font-family: 'Berkshire Swash', cursive;
  font-weight: 400
}

section.kit-shipper h1 {
  font-size: 1.5rem;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  margin-bottom: 3rem /* adjust this if the header is running into anything or it seems too spacious */
}

section.kit-shipper aside {
  background: #fafafa;
  border: 1px solid rgba(0,0,0, .25);
  padding: 1% 1% 0 1%;
  margin: 0 1% 1% 0;
  position: relative;
  float: left;
  clear: right
}

section.kit-shipper aside h3 {
  position: absolute;
  background: #fafafa;
  border: 1px solid rgba(0,0,0, .25);
  width: 70%; /* adjust if the so far is too thin */
  text-align: center;
  padding: 10px 1%;
  transform: rotate(5deg); /* increase this number for a greater rotation. Lower the number for less. */
  top: -3rem /* increase the number to make the so far appear higher. Decrease the number to 0 to lower it */
}

section.kit-shipper aside a {
  text-decoration: none;
  color: inherit
}

/* little pink buttons for the list.
Don't like them? Delete from here */

section.kit-shipper aside:before {
  content:"";
  display: block;
  height: 5px;
  width: 5px;
  background: mediumvioletred;
  border-radius: 100%;
  position: absolute;
  top: 2px;
  left: 2px
}

section.kit-shipper aside:after {
  content:"";
  display: block;
  height: 5px;
  width: 5px;
  background: mediumvioletred;
  border-radius: 100%;
  position: absolute;
  top: 2px;
  right: 2px
}

/* to here */

/* little sticky tape things for the so far.
Don't want them? Just delete from here */
section.kit-shipper aside h3:before {
  content: "";
  display: block;
  position: absolute;
  top: -.5rem;
  left: -.5rem;
  transform: rotate(-25deg);
  height: 1rem;
  width: 2rem;
  box-shadow: inset 0 0 10px rgba(255,255,255,.95);
  background: rgba(0,0,0, .10)
}

section.kit-shipper aside h3:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.5rem;
  right: -.5rem;
  transform: rotate(-5deg);
  height: 1rem;
  width: 2rem;
  box-shadow: inset 0 0 10px rgba(255,255,255,.95);
  background: rgba(0,0,0, .10)
}
/* to here */

p.acquaintence {
  color: #666;
}

p.acquaintence:after {
  padding-left: 5px;
  font-family: "Font Awesome 5 Free";
  content: "\f11a"
}

p.love {
  color: #DC143C
}

p.love:after {
  padding-left: 5px;
  font-family: "Font Awesome 5 Free";
  content: "\f004"
}

p.enemy {
  color: #556B2F;
}

p.enemy:after {
  padding-left: 5px;
  font-family: "Font Awesome 5 Free";
  content: "\f556"
}

p.friend {
  color: #C71585
}

p.friend:after {
  padding-left: 5px;
  font-family: "Font Awesome 5 Free";
  content: "\f5b8"
}
  
  /* you can add more relationship types if you want. Just create a new P class, similar to what appears under "so far..." already. Just change what appears between the quotes after <p class=
  
  now you can set your color as usual like:
  
  p.your_class {
  	color: #your_color
  }
  
  and now add the little icon by using the following code
  
  p.your_class:after {
  	padding-left: 5px;
  	font-family: "Font Awesome 5 Free";
  	content: "\f556"
  }
  
  Where the number after content:"\ is the UNICODE for the font awesome icon that you want. So the unicode for kiss wink heart (https://fontawesome.com/icons/kiss-wink-heart?style=regular) is f598
  */

@media screen and (max-width: 767px) {
  section.kit-shipper aside {
    float: none;
    clear: none;
    width: auto;
    transform: none;
    font-size: 1.5rem;
    top: 0;
    right: 0;
    margin: 1rem auto;
    padding: 1% 10px;
  }
  
  section.kit-shipper aside h3 {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto
  }
  
  section.kit-shipper aside p {
  font-size: .75em; /* adjust until legible for phones. Or delete */
  }
}
</style>
    Go to codes Plotters

    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept