Pastel Purple layout (its lavender really but eh)

Tags: cute, pastel, purple, layout, lavender, simple

Description:

Oh look, i made another layout, i would've gotten this done sooner, however i forgot to save the progress from the other night, so i remade it. I added credits of all the assets i have used, you can remove that and the garbled mess i wrote down earlier if you want, idm. if you use, please let me know!! i spent all night doing this

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by xXSJDoodlesXx (https://layouts.spacehey.com/layout?id=39948) -->

~~THIS GOES IN "ABOUT ME" SECTION~~

<p><img style="float: left; margin: 0px 1px 0px 0px;" src="https://i.pinimg.com/originals/20/c6/09/20c609f194dde4421224b94e9d3d5c6c.gif" width="200"/></p><center>name || age || prns<br/><br/> hi, i hope you like this layout, i thought a pretty pastel purple would be a nice theme for this layout.<br/> my inspirations for this layout design was the old deviantart custom boxes, i remember i always used the galaxy themes when i had core (before it was extortionate).<br style="clear:both"/>
<p><img style="float: right; margin: 0px 1px 0px 0px;" src="https://wordpress96421.files.wordpress.com/2016/09/tumblr_od23ulku4g1vcuylko1_400.gif?w=620" width="200"/>blah blah blah blah<br/>this is a fun way to talk about random stuff if you're interested to, idk what else to add, you could write anything, within reason, yknow? theres no qualms about it<br/><br/>why dont we just relax and turn on the radio, would you like AM or FM?<br/>its currently 6.49AM as im typing this, ive been doing this all early morning because i was fuckin stupid and forgot to save all of this stuff yesterday and i got really upset over it.<br/>also if my friends see this, hi guyyss, ily &lt;33 <br/> im trying to add as much text as i can to show the wrap-around text but i assume you get the point, idk<br style="clear:both"/></p>
<img src="https://64.media.tumblr.com/95d0df4fcef77da1f529091c97629505/c95a9eabe8fc6a53-85/s1280x1920/a0ee528b2f0f5de7ed1ed8e7fd22a4de8bec8dff.png"/><br/>
--credits-- <br/><br/>flipped layout design, wrap around text and custom online icon to Jody Marie<br/> splash text over contacts to CodeMonkey <br/> purple cursor to Zenith<br/>hiding blogs, blurbs, comments and url box to laura.jpg <br/>interest box labels; jennardson <br/> and a thank you to cory showing how to change contact icons, custom fonts, etc.

~~ THIS GOES IN THE "WHO I'D LIKE TO MEET SECTION" ~~

<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,700;0,800;1,400;1,800&display=swap');
body{font-family: 'Josefin Sans', sans-serif;}
</style>
<style>
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym629.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym629.png), auto !important;} /* End https://www.cursors-4u.com */
</style>

<style>
.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% {

transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}
</style>
<style>/* Flip Profile */
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: right;}
</style>
<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/cheri');
	.profile .left h1{ font-family: 'Cheri', sans-serif; font-size: 35px; color: #672f94; text-align: center; overflow-wrap: break-word; text-shadow: 3px 0px 0px #000;}
</style>

<style>/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;}
</style>
<style>
footer {

        border-radius: 100px;

        background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8778de9c-d957-4219-a12f-9b59b3dd6899/db9tpmn-a1b30bb5-b6bc-4dfa-af4e-0732a72bb219.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzg3NzhkZTljLWQ5NTctNDIxOS1hMTJmLTliNTliM2RkNjg5OVwvZGI5dHBtbi1hMWIzMGJiNS1iNmJjLTRkZmEtYWY0ZS0wNzMyYTcyYmIyMTkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.U7NpBjhBbWXRvfhzxKENyGoJScv_iaNF7Lox9BiV5Qo) !important;

        display: block !important;

}
</style>
<style>
main {
    border-radius: 50px 50px 50px 50px;
    border: 0px solid rgba(91, 194, 146);
    color: purple;
    background-color: lavender;
}
</style>
<style>
nav .top
{
    background:   !important;
    border-radius: 15px 15px 15px 15px;
      background-image: url(https://i.pinimg.com/originals/50/1d/49/501d49dc37935dc5c1fa42a676f785de.gif);
    background-repeat: repeat;
}
</style>
<style>
.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a:hover::before {
  content: "Click to add me as a friend!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}


.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a:hover::before {
  content: "Click to add me to favorites!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a:hover::before {
  content: "Send me a message!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a:hover::before {
  content: "Forward my profile to a friend!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a:hover::before {
  content: "Feel free to IM me! :D"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a:hover::before {
  content: "Block me... </3"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a:hover::before {
  content: "Add me to a group!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a:hover::before {
  content: "Report me... </3"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #DA70D6;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}
</style>
<style>
    .online {visibility: hidden;} 

    .online img { 

        content: url("https://i5.glitter-graphics.org/pub/364/364595vgqwlvfpt6.gif"); 

        animation-name: none; 

        visibility: visible; 

        height: 25px; /* CHANGE HEIGHT OF CUSTOM ONLINE ICON IMAGE */

        width: 85px; /* CHANGE WIDTH OF CUSTOM ONLINE ICON IMAGE */

		display: block;

		margin-left: auto;

		margin-right: auto;

    }
</style>
<style>

.blog-preview{display: none !important;}

</style>
<style>

.url-info{display: none !important;}

</style>
<style>

.blurbs .heading{display: none !important;}

</style>
<style>

 .blurbs .section h4{display: none !important;}

</style>
<style>

.comments-table{display: none !important;} 

</style>
<style>

.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img

{
border: 0px dotted gray !important;
outline: none !important;
}
</style>
<style>
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "💞"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🤘🏽"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "💬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "↗️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "📩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🛑"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "💎"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🚩"
</style>
<style>/* Headers Colors */
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: #DA70D6!important;
        color: #fff !important;
        text-align: center;
        border-bottom: 2px solid white;
border-radius: 10px 10px 10px 10px;
    }
	
	.profile .blurbs .section h4{color: #672f94; font-weight: bold;}
</style>
<style>
<style>
nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.0);
}

nav { background-image: url()
border-radius: 15px 15px 15px 15px; 
}
</style>
<style>
body {
  background-image: url('https://images.unsplash.com/photo-1585758942414-7a30b116f2af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFzdGVsJTIwcHVycGxlfGVufDB8fDB8fHww&w=1000&q=80');
background-repeat: repeat;
}</style>
<style>
:root {
    --topic1: "DNI";  /* EDIT INTEREST LABELS HERE */
    --topic2: "🎤🎵🎶";
    --topic3: "Movies & TV";
    --topic4: "🎮";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</style>
<style>
:root {
    --topic1: "DNI";  /* EDIT INTEREST LABELS HERE */
    --topic2: "🎤🎵🎶";
    --topic3: "Movies & TV";
    --topic4: "🎮";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</style>
<style>
.table-section {
background-image: url(https://w0.peakpx.com/wallpaper/155/369/HD-wallpaper-aesthetic-purple-galaxy-cute-purple-galaxy.jpg);
}
</style>
<style>
  .profile .table-section{
    border:2px solid #;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#DA70D6;
    border: 1px solid #DA70D6;
    border-radius: 15px 15px 15px 15px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #663399;
    text-shadow: 0px 0px 0px ;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
</style></center>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 24 comments ( View all | Add Comment )

sappho.saffyre	1738829506 Totally using this layout! Super pretty <3 looveee Report Comment
Makarios	1736662832 i love it, great job! gonna use it :D Report Comment
UnreliableMar	1736588993 using!!! so pretty Report Comment
Destiny	1724126047 Using! Report Comment
grath_maethv	1715618181 using!! SO PRETTY <3<3 Report Comment
♤𝔽𝕒𝕖_𝕥𝕙𝕖_𝕤𝕝𝕖𝕖𝕡𝕪♤ (broken pfp)	1708871496 Using :) Report Comment
🌼GaryMew🍄	1706145826 using it Report Comment
GIRLSTUCK	1703460875 using! Report Comment
Musorka	1702556795 Usin!TyTY!!!! Report Comment
💫AudreyStar💫	1702124302 Using! Report Comment
t s u k i ⛥	1698052485 Using, tysm! Report Comment
Lint	1697820583 I'm going to use this and see if it works with my page! Love the layout Report Comment
Ghosts	1697678787 Using! Tysm for the notes in the code, very helpful. Report Comment
B.RAMSELI	1694652567 this is really nice, I love it! thank you!! Report Comment
Sibir	1694293877 I forgot to comment on this earlier! This theme is beautiful, thank you so much! <3 Report Comment
hellokittylvr	1694226362 its so cute,im using! Report Comment
UrFavSweetheart	1694146659 this the best thing after sliced bread. LUV IT SOMUCHHH!!!! Report Comment
Amethyst	1694049931 really pretty ima use <3 Report Comment
SkeeteR	1694046209 so pretty !! def using !! Report Comment
ANOMALY MAKER	1694005587 this is real nice, i might use it Report Comment