Profile Card (Grey) 1.1
To customize, swap "grey" for your preferred color :]
user_1649912
html
11/03/2024 9:19 AM
8.5 KB
110
No Index
<div class="container mt-5">
<!-- Profile Picture and Bio Section -->
<div class="card-bg">
<div class="row">
<!-- Profile Picture -->
<div class="col-md-4">
<img src="https://i.imgur.com/3vGENUD.jpeg" alt="Profile Picture" style="border-radius: 50%;">
</div>
<div class="col-md-8 d-flex flex-column align-items-center">
<!-- Name -->
<div class="row mb-2 text-center">
<div class="col-md-6">
<span class="badge col-grey" style="font-size: 1.1rem;">Name</span>
</div>
<!-- Pronouns -->
<div class="col-md-6">
<span class="badge col-grey" style="font-size: 1.1rem;">Pronouns</span>
</div>
</div>
<!-- Bio Text -->
<p class="text-center">Bawk bawk bawk! bawk? bawk... Bawk bawk?! Bawk bawk bawk!! Bawk? Ba-bawk? .... bawk.... bawk.... Bawk bawk cluck bawk. Cluck!</p>
</div>
</div>
</div>
<!-- Connections Section -->
<div class="card-bg mt-4">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Connections</span> <br>
<!-- Partner Info -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem;">Partner</span>
</div>
<div class="col-md-8 col-12">
<p><a href="PARTNER URL HERE">[Partner Name]</a></p>
</div>
</div>
<!-- Friend 1 Info -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem;">Friend 1</span>
</div>
<div class="col-md-8 col-12">
<p><a href="FRIEND 1 URL HERE">[Friend 1 Name]</a></p>
</div>
</div>
<!-- Friend 2 Info -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem;">Friend 2</span>
</div>
<div class="col-md-8 col-12">
<p><a href="FRIEND 2 URL HERE">[Friend 2 Name]</a></p>
</div>
</div>
</div>
<!-- Likes Section -->
<div class="card-bg mt-4">
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Likes</span>
</div>
<div class="col-md-8 col-12">
<p>[Likes]</p>
</div>
</div>
<!-- Dislikes Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Dislikes</span>
</div>
<div class="col-md-8 col-12">
<p>[Dislikes]</p>
</div>
</div>
<!-- Personality Traits Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Personality Traits</span>
</div>
<div class="col-md-8 col-12">
<p>[Personality Traits]</p>
</div>
</div>
<!-- Favorite Color Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Favorite Color</span>
</div>
<div class="col-md-8 col-12">
<p>[Favorite Color]</p>
</div>
</div>
<!-- Favorite Food Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Favorite Food</span>
</div>
<div class="col-md-8 col-12">
<p>[Favorite Food]</p>
</div>
</div>
<!-- Hobbies Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Hobbies</span>
</div>
<div class="col-md-8 col-12">
<p>[Hobbies]</p>
</div>
</div>
<!-- Job Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Job</span>
</div>
<div class="col-md-8 col-12">
<p>[Job]</p>
</div>
</div>
<!-- Theme Song Section -->
<div class="row mb-2">
<div class="col-md-4 col-12">
<span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Theme Song</span>
</div>
<div class="col-md-8 col-12">
<p><a href="THEME SONG URL HERE">[Theme Song Title]</a></p>
</div>
</div>
</div>
<!-- Gallery Section -->
<div class="card-bg mt-4">
<span class="badge col-grey" style="font-size: 1.1rem;">Gallery</span> <br>
<div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;">
<!-- Container for images -->
<!-- Image 1 -->
<div>
<img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
</div>
<!-- Image 2 -->
<div>
<img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
</div>
<!-- Image 3 -->
<div>
<img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
</div>
</div>
</div>
<br>
</div>Editor is loading...
Leave a Comment