Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!--change the title of the page here! this will appear as the title at your current tab.-->
- <title>sumire: an about page.</title>
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}" />
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <!--
- Page #02: Sumire
- coded by pneuma-themes
- 1. Don't remove the credit.
- 2. Don't move the credit. Just leave it there.
- 3. Don't use as a base code.
- 4. Please enjoy! If you find any bugs, please contact me! c:
- -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script src="https://unpkg.com/@popperjs/core@2"></script>
- <script src="https://unpkg.com/tippy.js@6"></script>
- <head>
- <style type="text/css">
- @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");
- iframe.tmblr-iframe {
- display: none;
- }
- #tumblr-controls {
- position: fixed;
- }
- /*attention! to change the colors of the page, look below!*/
- /*change the colors of the page here!*/
- :root {
- --accent: #dad7f2;
- --body: #1f1f1f;
- --background: #fff;
- --border: #eee;
- --navigation-container-background: #232323;
- }
- body {
- margin: 0;
- padding: 0;
- font-family: "Lato";
- font-size: 13px;
- color: var(--body);
- background: var(--background)
- url("https://static.tumblr.com/r7bx1qs/6murd3ahd/tumblr_m0leqewfjp1r9g6hvo2_400.png")
- fixed;
- /*change the background image on the url inside the '' sign. if you don't want to use the background, leave the url blank!*/
- }
- a {
- text-decoration: none;
- color: var(--body);
- box-shadow: 0 -5px inset var(--accent);
- font-weight: 700;
- }
- .tippy-box {
- background: var(--accent);
- color: var(--body);
- font-size: 12px;
- }
- #container {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 0 auto;
- position: relative;
- margin-top: 75px;
- width: 70%;
- }
- #main-container {
- width: 80%;
- position: relative;
- height: 520px;
- padding: 20px;
- background: var(--background);
- box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
- backdrop-filter: blur(4px);
- -webkit-backdrop-filter: blur(4px);
- border-radius: 3px;
- }
- #header {
- width: 100%;
- position: absolute;
- top: 0;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- left: 0;
- height: 150px;
- /*change the header image here!*/
- background-image: url("https://static.tumblr.com/r7bx1qs/jc4rd55br/tumblr_mqretyucom1rl9td5o1_1280.png");
- background-size: cover;
- }
- #icon {
- width: 60px;
- height: 60px;
- z-index: 2;
- padding: 5px;
- margin: 0 auto;
- margin-top: 115px;
- background: var(--background);
- border-radius: 3px;
- }
- #icon img {
- border-radius: 3px;
- width: 60px;
- height: 60px;
- max-width: 60px;
- max-height: 60px;
- }
- #about-container {
- position: relative;
- margin-top: 180px;
- display: flex;
- justify-content: center;
- }
- #sidebar {
- width: 30%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- background: white;
- padding-right: 20px;
- }
- /*sidebar content*/
- #description {
- text-align: center;
- padding: 10px;
- text-transform: lowercase;
- }
- #quote-sign .lucide {
- text-align: center;
- width: 16px;
- height: 16px;
- padding: 10px;
- background: var(--accent);
- }
- #biodata-container {
- text-transform: lowercase;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- width: calc(100% - 20px);
- padding: 10px;
- margin-top: 20px;
- }
- .biodata-row {
- display: flex;
- align-items: center;
- width: 100%;
- padding: 10px;
- justify-content: space-between;
- border-bottom: 1px solid var(--border);
- }
- #biodata-container .biodata-row:last-child {
- border-bottom: none !important;
- }
- .biodata-label {
- padding: 5px;
- background: var(--accent);
- text-align: center;
- font-weight: 700;
- }
- #link-container {
- width: 50px;
- height: 500px;
- padding: 10px;
- margin: 0 auto;
- top: 85px;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: center;
- }
- .links a {
- display: block;
- border-radius: 100%;
- box-shadow: none !important;
- margin-bottom: 20px;
- background: var(--navigation-container-background);
- }
- .links .lucide {
- width: 20px;
- height: 20px;
- text-align: center;
- color: var(--accent);
- padding: 10px;
- }
- /*about part*/
- #about-text {
- width: 70%;
- padding-left: 20px;
- border-left: 1px solid var(--border);
- }
- #about-header {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- border-bottom: 1px solid var(--border);
- }
- .about-header-item {
- display: flex;
- align-items: center;
- margin-right: 10px;
- justify-content: space-between;
- text-transform: lowercase;
- font-style: italic;
- font-weight: 700;
- padding: 10px;
- }
- .about-header-item .lucide {
- width: 20px;
- color: var(--accent);
- padding: 5px;
- height: 20px;
- margin-right: 10px;
- }
- #about-text-body {
- padding: 10px;
- height: 260px;
- max-height: 260px;
- overflow-y: scroll;
- overflow-x: hidden;
- }
- #about-text-body i,
- em {
- color: var(--accent);
- }
- #about-text-body blockquote {
- border-left: 5px solid var(--accent);
- padding-left: 10px;
- }
- #about-text-body::-webkit-scrollbar {
- width: 2px;
- }
- #about-text-body::-webkit-scrollbar-thumb {
- background: var(--accent);
- height: auto;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="main-container">
- <div id="header">
- <div id="icon">
- <!--change the icon here!-->
- <img src="https://i.imgur.com/nPxbNDj.png" />
- </div>
- </div>
- <div id="about-container">
- <div id="sidebar">
- <div id="quote-sign">
- <i icon-name="quote"></i>
- </div>
- <div id="description">
- <!--this is where your description is.-->
- I confess I do not know why, but looking at the stars always makes
- me dream.
- <br />
- icon by <a href="//acuite.tumblr.com">@acuite</a>.
- </div>
- <div id="biodata-container">
- <!--this part can accomodate up to four rows. follow for further instruction.-->
- <!--to add more rows, you will have to copy the entirety of this from here-->
- <div class="biodata-row">
- <div class="biodata-label">name</div>
- rizu
- </div>
- <!--to here-->
- <div class="biodata-row">
- <div class="biodata-label">age</div>
- 20+
- </div>
- <div class="biodata-row">
- <div class="biodata-label">pronouns</div>
- she/her/hers
- </div>
- <div class="biodata-row">
- <div class="biodata-label">timezone</div>
- GMT+7
- </div>
- <!--before this line-->
- </div>
- </div>
- <!--end sidebar-->
- <div id="about-text">
- <div id="about-header">
- <!--this is the update header. to add items, you can read below.-->
- <!--to add more items, copy from here-->
- <div class="about-header-item">
- <!--to change the icon, simply replace the name of the icon with whatever you want. -->
- <i icon-name="book-open"></i> The Orient Express
- </div>
- <!--to here-->
- <div class="about-header-item">
- <i icon-name="music"></i> Endwalker-Footfalls
- </div>
- <div class="about-header-item">
- <i icon-name="gamepad-2"></i> Final Fantasy XIV
- </div>
- <div class="about-header-item">
- <i icon-name="thermometer"></i> haze
- </div>
- <!--before this line-->
- </div>
- <div id="about-text-body">
- <!--this is your body text, you can write as much or as little as you want here!-->
- </div>
- </div>
- <!--end about-text-->
- </div>
- </div>
- <!--end main container-->
- <div id="link-container">
- <div style="margin-top: 10px">
- <div class="links">
- <a href="/" title="home"><i icon-name="home"></i></a>
- </div>
- <div class="links">
- <a href="/" title="ask"><i icon-name="mail"></i></a>
- </div>
- <div class="links">
- <!--to change the url, change where it says link 1 url here. the rest goes the same way.-->
- <a href="link 1 url" title="link 1">
- <!--to change the icon, simply replace the name of the icon with whatever you want. -->
- <i icon-name="hexagon"></i>
- </a>
- </div>
- <div class="links">
- <a href="link 2 url" title="link 2"><i icon-name="infinity"></i></a>
- </div>
- <div class="links">
- <a href="link 3 url" title="link 3"><i icon-name="octagon"></i></a>
- </div>
- <div class="links">
- <a href="//pneuma-themes.tumblr.com" title="sumire by pneuma-themes"
- ><i icon-name="code-2"></i
- ></a>
- </div>
- </div>
- </div>
- </div>
- <!--end container-->
- <script src="https://unpkg.com/lucide@latest"></script>
- <script>
- lucide.createIcons();
- </script>
- </body>
- <script>
- $(document).ready(function () {
- tippy("[title]", {
- // change these to your liking
- arrow: false,
- placement: "right", // top, right, bottom, left
- delay: 5, //ms
- offset: [0, 20], //px or string
- maxWidth: 300, //px or string
- // leave these as they are
- followCursor: false,
- allowHTML: true,
- theme: "custom",
- ignoreAttributes: true,
- content(reference) {
- const title = reference.getAttribute("title");
- reference.removeAttribute("title");
- return title;
- },
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement