Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid p-0 mb-5" style="max-width: 800px;">
- <div class="row no-gutters">
- <div class="col-12 mb-2">
- <!--- top bar pattern --- use a seamless pattern -->
- <div style="background-image: url(IMG_URL);
- background-repeat: repeat; background-attachment: fixed; min-height: 100px;"></div>
- </div>
- <div class="col-md-4 pr-md-1 mb-2">
- <div class="card-block bg-faded h-100 text-center">
- <!-- main icon -- use a 200 x 200 square image so it can become a circle -->
- <img src="IMG_URL"
- class="d-block mx-auto rounded-circle p-2 bg-faded mb-1" style="margin-top: -80px; max-height: 200px;" />
- <p class="text-primary mb-1" style="font-size: 14pt;">
- <!-- you name & adjectives -->
- Your Name</p><p class="small text-muted">
- age . gender . adjective</p>
- <hr />
- <p class="small">
- <!-- small blurb for left column -->
- Write like one to two sentences here. Keep it short this is a little box.
- </p>
- <hr />
- <p class="mb-0">
- <!-- social icons -- use font awesome icons -- dont forget to fill in links -->
- <a href="DA_LINK" target="_BLANK"><i class="fab fa-deviantart fa-fw" /></a>
- <a href="FA_LINK" target="_BLANK"><i class="fas fa-paw fa-fw" /></a>
- <a href="TWITTER_LINK" target="_BLANK"><i class="fab fa-twitter fa-fw" /></a>
- <a href="TUMBLR_LINK" target="_BLANK"><i class="fab fa-tumblr fa-fw" /></a>
- <!-- credit link -- leave this -->
- <a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
- </p>
- </div>
- </div>
- <div class="col-md-8 pl-md-1 mb-2">
- <!-- main content block -- will scroll when filled ----------------->
- <div class="card-block pb-1 bg-faded mb-2" style="height: 230px; overflow: auto; font-size: 10pt;">
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget
- lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna.
- </p>
- </div>
- <div class="card-block bg-faded">
- <div class="row text-center">
- <!--------- featured characters -------------------->
- <div class="col-md-3 col-6 mb-md-0 mb-4">
- <a href="CHARACTER_LINK" target="_BLANK">
- <img src="IMG_URL"
- class="d-block mx-auto" style="max-height: 200px;" />
- </a>
- </div>
- <div class="col-md-3 col-6 mb-md-0 mb-4">
- <a href="CHARACTER_LINK" target="_BLANK">
- <img src="IMG_URL"
- class="d-block mx-auto" style="max-height: 200px;" />
- </a>
- </div>
- <div class="col-md-3 col-6">
- <a href="CHARACTER_LINK" target="_BLANK">
- <img src="IMG_URL"
- class="d-block mx-auto" style="max-height: 200px;" />
- </a>
- </div>
- <div class="col-md-3 col-6">
- <a href="CHARACTER_LINK" target="_BLANK">
- <img src="IMG_URL"
- class="d-block mx-auto" style="max-height: 200px;" />
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment