Pirates of the Caribbean

<!--Hi! Thankyou for using my code! This is a backstory code set to the theme of Pirates of the Caribbean, which was the easiest theme to roll with with a "pirates theme" request 😉

A couple notes before we start:

✨ I use fonts.google.com for my font styles, and I style a lot with CSS, though I assure you, I do use HTML too.

✨ This is a BACKSTORY code

✨ Please do NOT change or edit my credit at the bottom of this code. I work hard on making these codes for you guys to use, and I'd hate to see my credit taken from my codes.

Have fun, and please don't hesitate to message me if you need help with anything! ✨✨ Love, Alex-->

<link href="https://fonts.googleapis.com/css2?family=Antic+Slab&family=Inconsolata:wght@300&family=Libre+Caslon+Display&family=Pirata+One&display=swap" rel="stylesheet">

<style>

.box {
	line-height:160%;
	width:700px;
	border-radius:10px;
	border:2px solid #000;
	background:url(https://displate.com/displates/200862/zoom/2018-05-15/a3bdcde4e0ae65956e49a7305114f0d1_d82c9d3d9dd89199d0d5a8ce32f18701.jpg);
	background-size:cover;
	padding:20px;
	margin:0px auto;
}

.name {
	font-family:'Pirata One';
	font-size:50px;
	text-align:center;
	color:#8b0000;
	padding:40px 60px 2px 80px;
	text-shadow:1px 2px #666;
}

.quote {
	font-family:'Libre Caslon Display';
	font-size:20px;
	color:#fff;
	text-align:right;
	margin:2px 40px 80px 60px;
}

.info {
	background:#fff;
	padding:20px;
	font-family:'Antic Slab';
	font-size:15px;
	color:#000;
	border-radius:10px;
}

.section {
	font-family:'Pirata One';
	color:#FBD4FB;
	float:right;
	margin-left:50px;
	font-size:25px;
}

.credit {
	font-family:'Inconsolata';
	font-size:12px;
	text-align:center;
}

.credit:hover span{
	transition:1s;
	letter-spacing:1px;
	text-shadow:1px 2px 3px #666;
	cursor:pointer;
}

</style>

<!--PFP-->

<img src="https://i.pinimg.com/originals/92/8a/82/928a82d3365bc4af761eec9251b82602.gif" style="width:100px;height:100px;border-radius:140px;display:block;padding:7px;border:2px solid #8b0000;margin:0px auto -60px auto;position:relative;">

<!--Start main box-->

<div class="box">

<!--Gif/title box-->

<div style="height:100px;width:640px;border-radius:10px;border:2px solid #000;margin:0px auto;background:url(https://media3.giphy.com/media/Xzn9CqnwWZKMM/giphy.gif)center;background-size:cover;">
<div class="name">Captain Jack Sparrow</div>
<div class="quote">"You sir, will pay tribute to your new captain."</div></div>

<!--End gif/title box-->
<br>
<img src="https://freepngimg.com/thumb/pirates_of_the_caribbean/33931-6-pirates-of-the-caribbean-transparent-image.png" style="height:200px;float:left;margin-top:-150px;margin-left:-50px;transform:rotate(20deg);"/>

<details style="background:#eee;width:640px;margin:0px auto;">
<summary style="padding:20px 30px;color:#000;text-transform:uppercase;font-family:'Pirata One';text-size:15px;letter-spacing:3px;font-weight:bold;cursor:pointer;border-radius:10px;border:2px solid #000;">Parental Units
</summary>

<div class="info">

Parental units information here:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Suspendisse in est ante in nibh mauris. Sit amet tellus cras adipiscing enim. Ut consequat semper viverra nam libero justo. Hac habitasse platea dictumst quisque. Nulla facilisi etiam dignissim diam. At auctor urna nunc id. Turpis in eu mi bibendum neque egestas congue. Purus ut faucibus pulvinar elementum integer enim neque. Cras adipiscing enim eu turpis egestas pretium. Vestibulum lorem sed risus ultricies. Pretium lectus quam id leo in vitae turpis. Tellus integer feugiat scelerisque varius morbi enim. Id velit ut tortor pretium. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.<br><br>

Cursus vitae congue mauris rhoncus. Mauris sit amet massa vitae. Interdum consectetur libero id faucibus nisl. Ut tellus elementum sagittis vitae et. Metus aliquam eleifend mi in nulla. Eros in cursus turpis massa tincidunt dui ut ornare. Varius duis at consectetur lorem donec massa sapien faucibus. Congue mauris rhoncus aenean vel elit. At elementum eu facilisis sed. Suscipit tellus mauris a diam maecenas sed. Iaculis urna id volutpat lacus laoreet non curabitur. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mi ipsum faucibus vitae aliquet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Et malesuada fames ac turpis egestas integer. Sed risus ultricies tristique nulla aliquet. At elementum eu facilisis sed odio morbi quis. Ipsum a arcu cursus vitae congue.<br><br>

Facilisi etiam dignissim diam quis. Et leo duis ut diam. Aliquet sagittis id consectetur purus ut faucibus. Ut ornare lectus sit amet est placerat in egestas erat. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Morbi tincidunt ornare massa eget egestas purus viverra. Cras adipiscing enim eu turpis egestas. Id aliquet risus feugiat in ante metus dictum at. Vitae ultricies leo integer malesuada nunc vel risus commodo. Laoreet sit amet cursus sit. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque aliquam vestibulum morbi blandit cursus. Aliquam sem et tortor consequat id porta. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Aliquet lectus proin nibh nisl. At urna condimentum mattis pellentesque id. Phasellus faucibus scelerisque eleifend donec. Scelerisque fermentum dui faucibus in ornare quam viverra. Massa eget egestas purus viverra accumsan. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing.<br><br>

</div></details>
<br>

<details style="background:#eee;width:640px;margin:0px auto;">
<summary style="padding:20px 30px;color:#000;text-transform:uppercase;font-family:'Pirata One';text-size:15px;letter-spacing:3px;font-weight:bold;cursor:pointer;border-radius:10px;border:2px solid #000;">Childhood Adventures
</summary>

<div class="info">

Childhood information here:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Suspendisse in est ante in nibh mauris. Sit amet tellus cras adipiscing enim. Ut consequat semper viverra nam libero justo. Hac habitasse platea dictumst quisque. Nulla facilisi etiam dignissim diam. At auctor urna nunc id. Turpis in eu mi bibendum neque egestas congue. Purus ut faucibus pulvinar elementum integer enim neque. Cras adipiscing enim eu turpis egestas pretium. Vestibulum lorem sed risus ultricies. Pretium lectus quam id leo in vitae turpis. Tellus integer feugiat scelerisque varius morbi enim. Id velit ut tortor pretium. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.<br><br>

Cursus vitae congue mauris rhoncus. Mauris sit amet massa vitae. Interdum consectetur libero id faucibus nisl. Ut tellus elementum sagittis vitae et. Metus aliquam eleifend mi in nulla. Eros in cursus turpis massa tincidunt dui ut ornare. Varius duis at consectetur lorem donec massa sapien faucibus. Congue mauris rhoncus aenean vel elit. At elementum eu facilisis sed. Suscipit tellus mauris a diam maecenas sed. Iaculis urna id volutpat lacus laoreet non curabitur. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mi ipsum faucibus vitae aliquet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Et malesuada fames ac turpis egestas integer. Sed risus ultricies tristique nulla aliquet. At elementum eu facilisis sed odio morbi quis. Ipsum a arcu cursus vitae congue.<br><br>

Facilisi etiam dignissim diam quis. Et leo duis ut diam. Aliquet sagittis id consectetur purus ut faucibus. Ut ornare lectus sit amet est placerat in egestas erat. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Morbi tincidunt ornare massa eget egestas purus viverra. Cras adipiscing enim eu turpis egestas. Id aliquet risus feugiat in ante metus dictum at. Vitae ultricies leo integer malesuada nunc vel risus commodo. Laoreet sit amet cursus sit. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque aliquam vestibulum morbi blandit cursus. Aliquam sem et tortor consequat id porta. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Aliquet lectus proin nibh nisl. At urna condimentum mattis pellentesque id. Phasellus faucibus scelerisque eleifend donec. Scelerisque fermentum dui faucibus in ornare quam viverra. Massa eget egestas purus viverra accumsan. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing.<br><br>

</div></details>
<br>

<details style="background:#eee;width:640px;margin:0px auto;">
<summary style="padding:20px 30px;color:#000;text-transform:uppercase;font-family:'Pirata One';text-size:15px;letter-spacing:3px;font-weight:bold;cursor:pointer;border-radius:10px;border:2px solid #000;">Teenager Perks and Problems
</summary>

<div class="info">

Teenager information here:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Suspendisse in est ante in nibh mauris. Sit amet tellus cras adipiscing enim. Ut consequat semper viverra nam libero justo. Hac habitasse platea dictumst quisque. Nulla facilisi etiam dignissim diam. At auctor urna nunc id. Turpis in eu mi bibendum neque egestas congue. Purus ut faucibus pulvinar elementum integer enim neque. Cras adipiscing enim eu turpis egestas pretium. Vestibulum lorem sed risus ultricies. Pretium lectus quam id leo in vitae turpis. Tellus integer feugiat scelerisque varius morbi enim. Id velit ut tortor pretium. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.<br><br>

Cursus vitae congue mauris rhoncus. Mauris sit amet massa vitae. Interdum consectetur libero id faucibus nisl. Ut tellus elementum sagittis vitae et. Metus aliquam eleifend mi in nulla. Eros in cursus turpis massa tincidunt dui ut ornare. Varius duis at consectetur lorem donec massa sapien faucibus. Congue mauris rhoncus aenean vel elit. At elementum eu facilisis sed. Suscipit tellus mauris a diam maecenas sed. Iaculis urna id volutpat lacus laoreet non curabitur. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mi ipsum faucibus vitae aliquet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Et malesuada fames ac turpis egestas integer. Sed risus ultricies tristique nulla aliquet. At elementum eu facilisis sed odio morbi quis. Ipsum a arcu cursus vitae congue.<br><br>

Facilisi etiam dignissim diam quis. Et leo duis ut diam. Aliquet sagittis id consectetur purus ut faucibus. Ut ornare lectus sit amet est placerat in egestas erat. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Morbi tincidunt ornare massa eget egestas purus viverra. Cras adipiscing enim eu turpis egestas. Id aliquet risus feugiat in ante metus dictum at. Vitae ultricies leo integer malesuada nunc vel risus commodo. Laoreet sit amet cursus sit. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque aliquam vestibulum morbi blandit cursus. Aliquam sem et tortor consequat id porta. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Aliquet lectus proin nibh nisl. At urna condimentum mattis pellentesque id. Phasellus faucibus scelerisque eleifend donec. Scelerisque fermentum dui faucibus in ornare quam viverra. Massa eget egestas purus viverra accumsan. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing.<br><br>

</div></details>
<br>

<details style="background:#eee;width:640px;margin:0px auto;">
<summary style="padding:20px 30px;color:#000;text-transform:uppercase;font-family:'Pirata One';text-size:15px;letter-spacing:3px;font-weight:bold;cursor:pointer;border-radius:10px;border:2px solid #000;">School Sucks
</summary>

<div class="info">

School years information here:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Suspendisse in est ante in nibh mauris. Sit amet tellus cras adipiscing enim. Ut consequat semper viverra nam libero justo. Hac habitasse platea dictumst quisque. Nulla facilisi etiam dignissim diam. At auctor urna nunc id. Turpis in eu mi bibendum neque egestas congue. Purus ut faucibus pulvinar elementum integer enim neque. Cras adipiscing enim eu turpis egestas pretium. Vestibulum lorem sed risus ultricies. Pretium lectus quam id leo in vitae turpis. Tellus integer feugiat scelerisque varius morbi enim. Id velit ut tortor pretium. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.<br><br>

Cursus vitae congue mauris rhoncus. Mauris sit amet massa vitae. Interdum consectetur libero id faucibus nisl. Ut tellus elementum sagittis vitae et. Metus aliquam eleifend mi in nulla. Eros in cursus turpis massa tincidunt dui ut ornare. Varius duis at consectetur lorem donec massa sapien faucibus. Congue mauris rhoncus aenean vel elit. At elementum eu facilisis sed. Suscipit tellus mauris a diam maecenas sed. Iaculis urna id volutpat lacus laoreet non curabitur. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mi ipsum faucibus vitae aliquet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Et malesuada fames ac turpis egestas integer. Sed risus ultricies tristique nulla aliquet. At elementum eu facilisis sed odio morbi quis. Ipsum a arcu cursus vitae congue.<br><br>

Facilisi etiam dignissim diam quis. Et leo duis ut diam. Aliquet sagittis id consectetur purus ut faucibus. Ut ornare lectus sit amet est placerat in egestas erat. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Morbi tincidunt ornare massa eget egestas purus viverra. Cras adipiscing enim eu turpis egestas. Id aliquet risus feugiat in ante metus dictum at. Vitae ultricies leo integer malesuada nunc vel risus commodo. Laoreet sit amet cursus sit. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque aliquam vestibulum morbi blandit cursus. Aliquam sem et tortor consequat id porta. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Aliquet lectus proin nibh nisl. At urna condimentum mattis pellentesque id. Phasellus faucibus scelerisque eleifend donec. Scelerisque fermentum dui faucibus in ornare quam viverra. Massa eget egestas purus viverra accumsan. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing.<br><br>

</div></details>
<br>

<details style="background:#eee;width:640px;margin:0px auto;">
<summary style="padding:20px 30px;color:#000;text-transform:uppercase;font-family:'Pirata One';text-size:15px;letter-spacing:3px;font-weight:bold;cursor:pointer;border-radius:10px;border:2px solid #000;">Introduction to Adulting
</summary>

<div class="info">

Adulthood information here:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Suspendisse in est ante in nibh mauris. Sit amet tellus cras adipiscing enim. Ut consequat semper viverra nam libero justo. Hac habitasse platea dictumst quisque. Nulla facilisi etiam dignissim diam. At auctor urna nunc id. Turpis in eu mi bibendum neque egestas congue. Purus ut faucibus pulvinar elementum integer enim neque. Cras adipiscing enim eu turpis egestas pretium. Vestibulum lorem sed risus ultricies. Pretium lectus quam id leo in vitae turpis. Tellus integer feugiat scelerisque varius morbi enim. Id velit ut tortor pretium. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.<br><br>

Cursus vitae congue mauris rhoncus. Mauris sit amet massa vitae. Interdum consectetur libero id faucibus nisl. Ut tellus elementum sagittis vitae et. Metus aliquam eleifend mi in nulla. Eros in cursus turpis massa tincidunt dui ut ornare. Varius duis at consectetur lorem donec massa sapien faucibus. Congue mauris rhoncus aenean vel elit. At elementum eu facilisis sed. Suscipit tellus mauris a diam maecenas sed. Iaculis urna id volutpat lacus laoreet non curabitur. Nisl suscipit adipiscing bibendum est ultricies integer quis. Mi ipsum faucibus vitae aliquet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Et malesuada fames ac turpis egestas integer. Sed risus ultricies tristique nulla aliquet. At elementum eu facilisis sed odio morbi quis. Ipsum a arcu cursus vitae congue.<br><br>

Facilisi etiam dignissim diam quis. Et leo duis ut diam. Aliquet sagittis id consectetur purus ut faucibus. Ut ornare lectus sit amet est placerat in egestas erat. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Morbi tincidunt ornare massa eget egestas purus viverra. Cras adipiscing enim eu turpis egestas. Id aliquet risus feugiat in ante metus dictum at. Vitae ultricies leo integer malesuada nunc vel risus commodo. Laoreet sit amet cursus sit. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Neque aliquam vestibulum morbi blandit cursus. Aliquam sem et tortor consequat id porta. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Aliquet lectus proin nibh nisl. At urna condimentum mattis pellentesque id. Phasellus faucibus scelerisque eleifend donec. Scelerisque fermentum dui faucibus in ornare quam viverra. Massa eget egestas purus viverra accumsan. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing.<br><br>

</div></details>

</div>











<div class="credit"><span>Code by Alex @ <a href="https://alex-codes.tumblr.com" style="text-decoration:none;color:#8b0000">Alex-Codes</a></span></div><br><br>







<iframe width="0" height="0" src="https://www.youtube.com/embed/lNRjt4rCymM?autoplay=1&amp;loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>