cottage
created by:8byte
HTMLBootstrapCharacter
Copy
<!---
==== Cottage
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="container" style="max-width: 875px;">
<div class="row no-gutters">
<!--- roof --->
<div class="col-12 p-1">
<div class="container p-0" style="background:url(https://i.pinimg.com/564x/0a/f8/b8/0af8b8b47693a072e3ed89a1f5ab13be.jpg); background-position: center; background-size: cover; height: 50px;"></div>
</div>
<!--- bedroom/design --->
<div class="col-md-4 col-12 p-1">
<div class="container p-0" style="height:300px; background:url(https://i.pinimg.com/564x/4c/db/77/4cdb77a817c40086d8ae0199b600008e.jpg); background-size: cover;" id="BEDROOM">
<!--- landing --->
<div class="collapse fade show h-100 w-100" style="background:rgba(0,0,0,0);" id="BNONE" data-parent="#BEDROOM">
<a href="#BCARD" class="btn btn-outline-warning h-100 w-100" style="border: 0; opacity: 0.5" data-toggle="collapse"></a>
</div>
<!--- info --->
<div class="collapse fade h-100 w-100 overflow-auto p-3 bg-warning text-center" style="border-radius: 5px;" id="BCARD" data-parent="#BEDROOM">
<h1 class="text-dark" style="text-transform:uppercase;"><i class="far fa-seedling"></i> Design</h1>
<!--- copy/paste and delete as needed --->
<div class="row no-gutters" style="height: 15px;">
<div class="col h-100" style="background-color:#241F19;"></div>
<div class="col h-100" style="background-color:#727660;"></div>
<div class="col h-100" style="background-color:#DAE4E3;"></div>
<div class="col h-100" style="background-color:#E5989B;"></div>
<div class="col h-100" style="background-color:#F3B61F;"></div>
</div>
<!--- moodboard --->
<div id="carousel1" class="carousel slide mx-auto p-1" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url(IMGURL);height:175px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(IMGURL);height:175px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(IMGURL);height:175px;background-position:center center;background-size:cover"></div>
</div>
</div>
</div>
<!--- return --->
<a class="tooltipster" data-placement="top" title="back" href="#BNONE" data-toggle="collapse"><i class="fas fa-tshirt"></i></a>
</div>
</div>
</div>
<!--- playroom/general --->
<div class="col-md-5 col-12 p-1">
<div class="container p-0" style="height:300px; background:url(https://i.pinimg.com/564x/9b/db/2e/9bdb2ecea2d381470be35ef00b245b74.jpg); background-size: cover;" id="PLAYROOM">
<!--- landing --->
<div class="collapse fade show h-100" style="background:rgba(0,0,0,0);" id="PNONE" data-parent="#PLAYROOM">
<a href="#PCARD" class="btn btn-outline-warning mx-auto h-100 w-100" style="border: 0; opacity: 0.5" data-toggle="collapse"></a>
</div>
<!--- info --->
<div class="collapse fade h-100 overflow-auto p-3 bg-warning text-center" style="border-radius: 5px;" id="PCARD" data-parent="#PLAYROOM">
<!--- focal image --->
<div class="rounded-circle bg-dark p-1 mx-auto mb-2" style="height: 150px; width: 150px;">
<img src="IMGURL" class="rounded-circle w-100 h-100">
</div>
<h1 class="text-dark font-italic" style="text-transform: uppercase;">Name</h1>
<p class="text-dark mb-3">age . pronouns . adjective</p>
<!--- return --->
<a class="tooltipster" data-placement="top" title="back" href="#PNONE" data-toggle="collapse"><i class="fas fa-dove"></i></a>
</div>
</div>
</div>
<!--- bathroom/trivia --->
<div class="col-md-3 col-12 p-1">
<div class="container p-0" style="height:300px; background:url(https://i.pinimg.com/564x/3f/61/53/3f61536bdd02405de7483f6af03f219c.jpg); background-size: cover;" id="BATHROOM">
<!--- landing --->
<div class="collapse fade show h-100" style="background:rgba(0,0,0,0);" id="BRNONE" data-parent="#BATHROOM">
<a href="#BRCARD" class="btn btn-outline-warning mx-auto h-100 w-100" style="border: 0; opacity: 0.5" data-toggle="collapse"></a>
</div>
<!--- info --->
<div class="collapse fade h-100 overflow-auto p-3 bg-warning text-center" style="border-radius: 5px;" id="BRCARD" data-parent="#BATHROOM">
<h1 class="text-dark" style="text-transform:uppercase;"><i class="far fa-edit"></i> Notes</h1>
<h2 class="text-dark text-left" style="font-size: 18px;"><i class="fas fa-heart"></i> Likes</h2>
<ul class="list-unstyled text-dark text-left">
<li><i class="far fa-heart"></i> One</li>
<li><i class="far fa-heart"></i> Two</li>
<li><i class="far fa-heart"></i> Three</li>
</ul>
<h2 class="text-dark text-left" style="font-size: 18px;"><i class="fas fa-heart-broken"></i> Dislikes</h2>
<ul class="list-unstyled text-dark text-left">
<li><i class="far fa-heart-broken"></i> One</li>
<li><i class="far fa-heart-broken"></i> Two</li>
<li><i class="far fa-heart-broken"></i> Three</li>
</ul>
<h2 class="text-dark text-left" style="font-size: 18px;"><i class="fas fa-puzzle-piece"></i> Trivia</h2>
<ul class="list-unstyled text-dark text-left">
<li><i class="far fa-puzzle-piece"></i> One</li>
<li><i class="far fa-puzzle-piece"></i> Two</li>
<li><i class="far fa-puzzle-piece"></i> Three</li>
</ul>
<!--- return --->
<a class="tooltipster" data-placement="top" title="back" href="#BRNONE" data-toggle="collapse"><i class="fas fa-bath"></i></a>
</div>
</div>
</div>
<!--- kitchen/bio --->
<div class="col-md-5 col-12 p-1">
<div class="container p-0" style="height:310px; background:url(https://i.pinimg.com/564x/27/e4/fe/27e4fe50d20ad51dba043ed874214e47.jpg); background-size: cover;" id="KITCHEN">
<!--- landing --->
<div class="collapse fade show h-100" style="background:rgba(0,0,0,0);" id="KNONE" data-parent="#KITCHEN">
<a href="#KCARD" class="btn btn-outline-warning mx-auto h-100 w-100" style="border: 0; opacity: 0.5" data-toggle="collapse"></a>
</div>
<!--- info --->
<div class="collapse fade h-100 overflow-auto p-3 bg-warning text-center" style="border-radius: 5px;" id="KCARD" data-parent="#KITCHEN">
<h1 class="text-dark" style="text-transform:uppercase;"><i class="far fa-books"></i> Bio</h1>
<p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod arcu id neque efficitur pharetra. Nunc eget erat euismod, faucibus elit nec, cursus urna. In vehicula lorem in magna gravida euismod. Vestibulum dictum sem in nisi fringilla, sit amet blandit lacus rutrum. Vivamus ultricies, ex ut sagittis elementum, enim lectus facilisis sem, quis condimentum sem ante ut risus.</p>
<!--- return --->
<a class="tooltipster" data-placement="top" title="back" href="#KNONE" data-toggle="collapse"><i class="fas fa-utensil-spoon"></i></a>
</div>
</div>
</div>
<!--- living room/links --->
<div class="col-md-7 col-12 p-1">
<div class="container p-0" style="height:310px; background:url(https://64.media.tumblr.com/6ffd442c311451ddf1d14988bbd87de7/4b5a1044f1d0ef46-f4/s2048x3072/08625032ee6841a23344ee3a3452bf3a96518403.jpg); background-size: cover;" id="LIVINGROOM">
<!--- landing --->
<div class="collapse fade show h-100" style="background:rgba(0,0,0,0);" id="LRNONE" data-parent="#LIVINGROOM">
<a href="#LRCARD" class="btn btn-outline-warning mx-auto h-100 w-100" style="border: 0; opacity: 0.5" data-toggle="collapse"></a>
</div>
<!--- info --->
<div class="collapse fade h-100 overflow-auto p-3 bg-warning text-center" style="border-radius: 5px;" id="LRCARD" data-parent="#LIVINGROOM">
<h1 class="text-dark" style="text-transform:uppercase;"><i class="far fa-home-heart"></i> Links</h1>
<div class="row no-gutters">
<!--- link one --->
<div class="col-md-4 col-6 p-1">
<a href="#LINK" class="text-dark font-italic">
<img class="rounded-circle btn-danger w-100" src="IMGURL" style="padding: 3px; ">
Name <br>
<!--- add and remove as needed --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
</a>
</div>
<!--- link two --->
<div class="col-md-4 col-6 p-1">
<a href="#LINK" class="text-dark font-italic">
<img class="rounded-circle btn-danger w-100" src="IMGURL" style="padding: 3px; ">
Name <br>
<!--- add and remove as needed --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
</a>
</div>
<!--- link three --->
<div class="col-md-4 col-6 p-1">
<a href="#LINK" class="text-dark font-italic">
<img class="rounded-circle btn-danger w-100" src="IMGURL" style="padding: 3px; ">
Name <br>
<!--- add and remove as needed --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
</a>
</div>
</div><br>
<!--- return --->
<a class="tooltipster" data-placement="top" title="back" href="#LRNONE" data-toggle="collapse"><i class="fas fa-loveseat"></i></a>
</div>
</div>
<!--- end --->
</div>
</div>
<div class="text-right">HTML by @8byte</div>
</div>