Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid" style="margin: auto; max-width: 800px;">
- <!-- image and about section -->
- <div class="row no-gutters">
- <div class="card-group">
- <!-- image/s! one is visible on desktop, the other is visible on mobile -->
- <div class="card border-0 bg-faded" style="border-radius: 0; background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position; center;"> <!-- this one is visible on desktop -->
- <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="card-img d-sm-none" style="object-fit: cover;"> <!-- this one is visible on mobile -->
- </div>
- <!-- about section -->
- <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
- <!-- header -->
- <div style="line-height: 0.5em;">
- <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> username <i class="fad fa-sparkles"></i></h1>
- <p class="text-center text-secondary">info | info | info</p>
- </div>
- <hr style="width: 50%;">
- <!-- content -->
- <p>
- Talk a bit about yourself here! the image will scale with the text :-)<br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- <hr style="width: 50%;">
- <!-- links -->
- <div class="btn-group" role="group" aria-label="links" style="margin: auto;">
- <a href="#" class="btn btn-outline-primary btn-sm"><i class="fad fa-code"></i> link</a>
- <a href="#" class="btn btn-outline-primary btn-sm"><i class="fas fa-user"></i> link</a>
- <a href="#" class="btn btn-outline-primary btn-sm"><i class="fad fa-link"></i> link</a>
- </div>
- </div>
- </div>
- </div>
- <!-- art status and self-promo-->
- <div class="row no-gutters">
- <div class="card-group">
- <hr style="width: 100%;">
- <!-- art status -->
- <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
- <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> art status <i class="fad fa-sparkles"></i></h1>
- <table class="table table-bordered table-hover table-sm">
- <tbody>
- <tr>
- <th scope="row">commissions:</th>
- <td><a href="#">status</a></td>
- </tr>
- <tr>
- <th scope="row">art trades:</th>
- <td><a href="#">status</a></td>
- </tr>
- <tr>
- <th scope="row">requests:</th>
- <td><a href="#">status</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- self promo -->
- <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
- <div style="line-height: 0.5em;">
- <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> [self-promo/other info] <i class="fad fa-sparkles"></i></h1>
- </div>
- <p>Talk about the stuff you make here!! maybe add a couple links and things? this can be comics, characters, anything really! Alternatively you could put trivia or other info here too, it depends on what you're after!</p>
- </div>
- </div>
- </div>
- <!-- social media links -->
- <div class="row no-gutters">
- <hr style="width: 100%;">
- <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
- <div class="row" style="margin: auto; text-align: center; max-width: 600px;">
- <div class="col"><a href="#" class="text-secondary"><i class="fab fa-instagram fa-2x"></i></a></div>
- <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitch fa-2x"></i></a></div>
- <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitter fa-2x"></i></a></div>
- <div class="col"><a href="#" class="text-secondary"><i class="fab fa-tumblr fa-2x"></i></a></div>
- <div class="col"><a href="#" class="text-secondary"><i class="fab fa-youtube fa-2x"></i></a></div>
- <div class="col"><a href="https://toyhou.se/~forums/16.htmlcss-graphics/139364.the-snail-s-shell-html-codes" class="text-secondary"><i class="fad fa-code fa-2x"></i></a></div> <!-- this is the code credit! you can move/reformat it but please keep it intact!! -->
- </div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment