Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [div class=container]
- [div=height:265.25px;width:365.25px;position:relative;float:right;left:-12px;top:-20px;][div class=bigimage][div class=bigimghover][div=font-size:28px;font-style:oblique;font-weight:bold;color:#e0d7f4;letter-spacing:1px;position:relative;top:110px;left:100px;]name here[/div][/div][/div]
- [/div]
- [div class=window1Open][div=font-size:41px;color:#AD8CFF;position:absolute;left:12.5px;top:-6px;][fa]fa-file-image[/fa][/div][nobr]
- [/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
- [/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:9.5px;top:45px;letter-spacing:0.5px;][font=Quicksand]LOOKS[/font][/div]
- [/div]
- [div class=window2Open][div=font-size:40px;color:#8795E8;position:absolute;left:13px;top:-6px;][fa]fa-file-alt[/fa][/div][nobr]
- [/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
- [/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:1px;top:45px;letter-spacing:0.5px;][font=Quicksand]PERSONA[/font][/div]
- [/div]
- [div class=window3Open][div=font-size:40.5px;color:#C774E8;position:absolute;left:12.5px;top:-6px;][fa]fa-file-archive[/fa][/div][nobr]
- [/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9.5px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
- [/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:19.5px;top:45px;letter-spacing:0.5px;][font=Quicksand]BIO[/font][/div]
- [/div]
- [div class=window4Open][div=font-size:40.5px;color:#FF6AD5;position:absolute;left:10px;top:-6px;][fa]fa-heart[/fa][/div][nobr]
- [/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
- [/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:5px;top:45px;letter-spacing:0.5px;][font=Quicksand]OPENME[/font][/div]
- [/div]
- [div class=wcontainer0][div class=window0Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window0][div class=scroll0][nobr]
- [/nobr]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.
- Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
- [/div][/div][/div]
- [div class=wcontainer1][div class=window1Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window1][div class=scroll1][nobr]
- [/nobr][div=height:125.5px;width:264.6px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:100%;margin:auto;][/div]
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.
- Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
- [/div][/div][/div]
- [nobr][/nobr]
- [div class=wcontainer2][div class=window2Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window2][div class=scroll2][nobr]
- [/nobr][div=height:200px;width:198.5px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:140%;margin:auto;][/div]
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.
- Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
- [/div][/div][/div]
- [nobr][/nobr]
- [div class=wcontainer3][div class=window3Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window3][div class=scroll3][nobr]
- [/nobr][div=height:165.5px;width:264.6px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:100%;margin:auto;][/div]
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.
- Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
- [/div][/div][/div]
- [nobr][/nobr]
- [div class=wcontainer4][div class=window4Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window4][div class=scroll4][nobr]
- [/nobr][div class=fancy]uxie♡[/div]
- [font=IBM Plex Sans]uxie, back at it again with another messy cs code
- (why do u only do cs codes)
- i can't really say i tried something that new this time but i've been slowly figuring it out. this one only took me like, what, 5 hours? haha. ): the layout and general aesthetic (is there even one) is credited to my good friend /u/roommate. her ideas r fresh and great and good for me bc im uncreative af
- ive been harassing her 2 give me layout ideas as of late bc she's p new to coding while i am (???) not. so it's fun.
- she's getting p good at it actually monkaS
- anyways, as always, this code is free to use as long as you keep this cool little thing here. notice i always do this 4 the ones i spend way too much time on lol. it might be a bit laggy when ur editing it bc there's [b]so much text[/b] oops. have fun with it, try not to edit too much it might break? i hope not. i've been trying to get mine to break less • ͜ > •
- for the background i lit just googled vaporwave background LOL
- [url='http://www.colourlovers.com/palette/3636765/seapunk_vaporwave']palette used[/url] (w/ a few edits from me ofc)
- ya
- enjoy!
- [size=9px]disclaimer: this code isn't mobile friendly nor tablet-friendly (bIG SAD) bc the dimensions are way too big!! the stuff itself might not fuck up, but a lot of things'll be cut off, so it's recommended it only be viewed on pc. then again, you couldn't see this part if you were on mobile or tablet, i'm p sure ?[/size]
- [/font]
- [/div][/div][/div]
- [/div]
- [nobr]
- [class=container]
- height:450px;
- width:500px;
- background:url('https://i.pinimg.com/originals/19/d2/94/19d294b86b157c57856ecd786461b8d2.jpg');
- background-size:160%;
- background-position: 40% 20%;
- margin:auto;
- position:relative;
- [/class]
- [class=bigimage]
- height:250px;
- width:350px;
- background:url('https://i.pinimg.com/736x/ba/cb/11/bacb11047a9b3afcade21503ead60f65--s-anime-retro-anime.jpg');
- background-size:100%;
- border:8px solid #c773d1;
- [/class]
- [class=bigimghover]
- height:250px;
- width:350px;
- background-color:#8795E8;
- position:absolute;
- opacity:0;
- transition:0.8s;
- [/class]
- [class name=bigimghover state=hover]
- opacity:0.8;
- transition:0.8s;
- [/class]
- [comment]windows[/comment]
- [class=wcontainer0]
- height:140px;
- width:290px;
- position:absolute;
- top:270px;
- left:100px;
- [/class]
- [class=window0Close]
- height:17px;
- width:17px;
- background-color:#e53d3d;
- position:absolute;
- top:2.3px;
- left:274.5px;
- z-index:6;
- border-radius:1.8px;
- [/class]
- [class=window0]
- border:5px solid #d5d6f2;
- border-top:22px solid #d5d6f2;
- height:120px;
- width:280px;
- border-radius:1.5px;
- overflow:hidden;
- padding:3px;
- background:white;
- box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34);
- [/class]
- [class=scroll0]
- padding-right:7.6px;
- margin-top:2.5px;
- height:127px;
- width:277px;
- overflow-y:scroll;
- [/class]
- [class name=scroll0]
- font-size:10.5px;
- color:black;
- text-align:justify;
- [/class]
- [class=wcontainer1]
- height:160px;
- width:290px;
- position:absolute;
- left:420px;
- top:15px;
- transform: scale(0.1,0.1);
- opacity:0;
- [/class]
- [class=window1]
- border:5px solid #d5d6f2;
- border-top:22px solid #d5d6f2;
- height:130px;
- width:280px;
- border-radius:1.5px;
- overflow:hidden;
- padding:3px;
- background:white;
- box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
- [/class]
- [class=scroll1]
- padding-right:7.6px;
- margin-top:2.5px;
- height:127px;
- width:277px;
- overflow-y:scroll;
- [/class]
- [class name=scroll1]
- font-size:10.5px;
- color:black;
- text-align:justify;
- [/class]
- [class=wcontainer2]
- height:230px;
- width:215px;
- position:absolute;
- left:-218px;
- top:128px;
- transform: scale(0.1,0.1);
- opacity:0;
- [/class]
- [class=window2]
- border:5px solid #d5d6f2;
- border-top:22px solid #d5d6f2;
- height:200px;
- width:215px;
- border-radius:1.5px;
- overflow:hidden;
- position:relative;
- padding:3px;
- background:white;
- [/class]
- [class=scroll2]
- padding-right:7px;
- margin-top:2.5px;
- height:197px;
- width:212px;
- overflow-y:scroll;
- [/class]
- [class name=scroll2]
- font-size:10.5px;
- color:black;
- text-align:justify;
- [/class]
- [class=wcontainer3]
- height:200px;
- width:290px;
- position:absolute;
- left:480px;
- top:198px;
- transform: scale(0.1,0.1);
- opacity:0;
- [/class]
- [class=window3]
- border:5px solid #d5d6f2;
- border-top:22px solid #d5d6f2;
- height:170px;
- width:280px;
- border-radius:1.5px;
- overflow:hidden;
- padding:3px;
- background:white;
- box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
- [/class]
- [class=scroll3]
- padding-right:7.6px;
- margin-top:2.5px;
- height:167px;
- width:277px;
- overflow-y:scroll;
- [/class]
- [class name=scroll3]
- font-size:10.5px;
- color:black;
- text-align:justify;
- [/class]
- [class=wcontainer4]
- height:170px;
- width:280px;
- position:absolute;
- left:180px;
- top:120px;
- transform: scale(0.1,0.1);
- opacity:0;
- z-index:6;
- [/class]
- [class=window4]
- border:5px solid #cedae5;
- border-top:22px solid #cedae5;
- height:160px;
- width:160px;
- border-radius:1.5px;
- overflow:hidden;
- padding:3px;
- background:white;
- box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
- [/class]
- [class=scroll4]
- padding-right:8px;
- margin-top:2.5px;
- height:157px;
- width:157px;
- overflow-y:scroll;
- [/class]
- [class name=scroll4]
- font-size:10.5px;
- color:black;
- text-align:justify;
- [/class]
- [class name=fancy]
- font-size:35px;
- color:#ff9ee3;
- text-shadow:1.5px 2px #cd6cd8;
- position:absolute;
- left:-15px;
- top:165px;
- font-style:oblique;
- font-weight:bold;
- letter-spacing:1px;
- [/class]
- [class=boxshadow]
- box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
- [/class]
- [comment]buttons[/comment]
- [class=window1Close]
- height:17px;
- width:17px;
- background-color:#e53d3d;
- position:absolute;
- top:2.3px;
- left:274.5px;
- z-index:6;
- border-radius:1.8px;
- [/class]
- [class=window2Close]
- height:17px;
- width:17px;
- background-color:#e53d3d;
- position:absolute;
- top:2.8px;
- left:209.5px;
- z-index:6;
- border-radius:1.8px;
- [/class]
- [class=window3Close]
- height:17px;
- width:17px;
- background-color:#e53d3d;
- position:absolute;
- top:2.3px;
- left:274.5px;
- z-index:6;
- border-radius:1.8px;
- [/class]
- [class=window4Close]
- height:17px;
- width:17px;
- background-color:#e53d3d;
- position:absolute;
- top:2.3px;
- left:155px;
- z-index:6;
- border-radius:1.8px;
- [/class]
- [class=windowX]
- font-size:15px;
- color:white;
- font-weight:bold;
- position:relative;
- left:3.3px;
- top:-2.5px;
- cursor:pointer;
- [/class]
- [class=window1Open]
- height:60px;
- width:60px;
- cursor:pointer;
- position:relative;
- margin-left:25px;
- top:-60px;
- [/class]
- [class=window2Open]
- height:60px;
- width:60px;
- cursor:pointer;
- position:relative;
- margin-left:25px;
- top:-60px;
- [/class]
- [class=window3Open]
- height:60px;
- width:60px;
- cursor:pointer;
- position:relative;
- margin-left:25px;
- top:-60px;
- [/class]
- [class=window4Open]
- height:60px;
- width:60px;
- cursor:pointer;
- position:relative;
- margin-left:25px;
- top:-60px;
- [/class]
- [comment]button scripts[/comment]
- [script class=window1Open on=click]
- addClass windowOpen wcontainer1
- addClass boxshadow window1
- removeClass windowClose wcontainer1
- [/script]
- [script class=window2Open on=click]
- addClass windowOpen wcontainer2
- addClass boxshadow window2
- removeClass windowClose wcontainer2
- [/script]
- [script class=window3Open on=click]
- addClass windowOpen wcontainer3
- addClass boxshadow window3
- removeClass windowClose wcontainer3
- [/script]
- [script class=window4Open on=click]
- addClass windowOpen wcontainer4
- addClass boxshadow window4
- removeClass windowClose wcontainer4
- [/script]
- [script class=window1Close on=click]
- addClass windowClose wcontainer1
- removeClass windowOpen wcontainer1
- removeClass boxshadow window1
- [/script]
- [script class=window2Close on=click]
- addClass windowClose wcontainer2
- removeClass windowOpen wcontainer2
- removeClass boxshadow window2
- [/script]
- [script class=window3Close on=click]
- addClass windowClose wcontainer3
- removeClass windowOpen wcontainer3
- removeClass boxshadow window3
- [/script]
- [script class=window4Close on=click]
- addClass windowClose wcontainer4
- removeClass windowOpen wcontainer4
- removeClass boxshadow window4
- [/script]
- [comment]animations[/comment]
- [class=windowOpen]
- animation-name: {post_id}windowOpen;
- animation-duration:0.8s;
- animation-fill-mode:forwards;
- [/class]
- [class=windowClose]
- animation-name: {post_id}windowClose;
- animation-duration:0.5s;
- animation-fill-mode:forwards;
- [/class]
- [animation=windowOpen]
- [keyframe=0]
- opacity:0;
- transform: scale(0.05,0.05);
- [/keyframe]
- [keyframe=1]
- opacity:1;
- [/keyframe]
- [keyframe=100]
- opacity:1;
- transform: scale(1,1);
- [/keyframe]
- [/animation]
- [animation=windowClose]
- [keyframe=0]
- opacity:1;
- transform: scale(1,1);
- [/keyframe]
- [keyframe=99]
- opacity:0;
- [/keyframe]
- [keyframe=100]
- opacity:0;
- transform: scale(0.05,0.05);
- [/keyframe]
- [/animation]
- [/nobr]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement