Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Hello, wildlings!
- A very simple placeholder code with a couple of images and a scrolling stat box.
- Follow the dimensions of the images, otherwise, they won't fit properly.
- Feel free to change colors!
- Please do not steal this code.
- Leave the credit! <3 Happy Writing!
- — — — — — — — — — — — — — —
- <style>
- @import url('https://fonts.googleapis.com/css2?family=Galada&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
- body {
- cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
- background-color: #E8CBB2;
- }
- ::-webkit-scrollbar {
- display: none;
- }
- ::selection {
- background: ;
- color: white;
- }
- a {
- color: #996232;
- }
- a:hover {
- color: #77411B;
- }
- .container {
- position: absolute;
- margin: auto;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
- height: 500px;
- width: 500px;
- background-color: #E8CBB2;
- }
- .wilder {
- position: fixed;
- bottom: 0px;
- right: 10px;
- }
- .image1 {
- position: fixed;
- margin: auto;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
- height: 500px;
- width: 313px;
- background: url(https://placehold.co/313x500.png);
- background-size: 100%;
- border: 5px solid #E8CBB2;
- }
- .image2 {
- position: fixed;
- margin: auto;
- top: 450px;
- bottom: 0px;
- left: 0px;
- right: 300px;
- height: 140px;
- width: 250px;
- background: url(https://placehold.co/250x140.png);
- background-size: 100%;
- border: 5px solid #E8CBB2;
- z-index: 1;
- }
- .name {
- position: absolute;
- margin: auto;
- top: 25px;
- bottom: 0px;
- left: 250px;
- right: 0px;
- font-family: galada;
- font-size: 75px;
- font-weight: bold;
- letter-spacing: 3px;
- color: #181816;
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: #181816;
- opacity: 0.9;
- }
- .name2 {
- position: absolute;
- margin: auto;
- top: 100px;
- left: 350px;
- right: 0px;
- font-family: galada;
- font-size: 75px;
- font-weight: bold;
- letter-spacing: 3px;
- color: #181816;
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: #181816;
- opacity: 0.9;
- }
- .stats {
- position: absolute;
- top: 275px;
- left: -158px;
- height: 130px;
- width: 250px;
- overflow: auto;
- }
- .stats li {
- display: block;
- background: #E8CBB2;
- padding: 5px;
- margin: 5px;
- font-family: poppins;
- color: #181816;
- font-size: 12px;
- font-weight: bold;
- text-align: right;
- border-radius: 5px 0px 0px;
- }
- </style>
- <!-- MUSIC PLAYER #02 by glenthemes
- ♬ glenthpvs.tumblr.com/player02 --->
- <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
- <link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
- <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
- <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
- <style element="glenplayer02">
- :root {
- --MusicPlayer-Position:bottom left;
- --MusicPlayer-Edge-Offset:10px;
- --MusicPlayer-Buttons-Size:15px;
- --MusicPlayer-Buttons-Color:#181816;
- --MusicPlayer-Buttons-Fill:yes;
- }
- </style>
- <div glenplayer02>
- <div controls></div>
- <i class="aa-line-icons" icon-name="music-2"></i>
- <!-- HOW TO CHANGE THE MUSIC -->
- <!-- linktr.ee/direct_file_links -->
- <audio src="MUSIC_LINK" volume="100%"></audio>
- </div><!--don't delete this line-->
- <!--end music player-->
- <div class="wilder"><a target="_blank" href="https://pastebin.com/u/wilderanima" title="code by wilder."><img src="https://i.imgur.com/hCJmFVu.png" width="75px;"></a></div>
- <div class="container">
- <div class="image1"></div>
- <div class="image2"></div>
- <div class="name">FirstName</div>
- <div class="name2">LastName</div>
- <div class="stats">
- <li>it scrolls! add as many as you'd like.</li>
- <li><a>link</a> example!</li>
- <li>words</li>
- <li>words</li>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement