Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - page 'ultra lento' by skye southcodes.tumblr.com
- - modify as you please but please do not touch the credit
- - any errors? need help? have questions? let me know!
- southcodes.tumblr.com/inbox
- - normalize css by https://github.com/necolas
- - fonts by google
- - icon font by http://fontawesome.io/icons/
- -->
- <!DOCTYPE html>
- <html>
- <head>
- <title>{title}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="{favicon}">
- <meta name="description" content="{MetaDescription}"/>
- <!-- fonts -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
- <!-- normalize -->
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <style>
- :root {
- --background:#fafafa;
- --box-background: #fff;
- --text:#333;
- --links: #8cb3db;
- --links-hover: #36608c;
- --borders:#eee;
- --icons: #36608c;
- --links-tags-background:#36608c;
- --links-tags-text:#fff;
- }
- .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
- .tmblr-iframe:hover {opacity:.8;}
- ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
- ::-webkit-scrollbar {width:6px}
- ::-webkit-scrollbar-track-piece{margin:5px 0;}
- pre {font-family:consolas;
- white-space: pre-wrap; /* css-3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4- */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word;} /* Internet Explorer 5.5+ */
- body, figure{margin:0;padding:0}
- html{font: 14px 'Karla', sans-serif;}
- body {font-size:14px;color:var(--text);background:var(--background);}
- a {text-decoration: none;color:var(--links);word-break:break-word;}
- a:hover {color:var(--links-hover);}
- blockquote {margin:0;padding:0;}
- img {max-width:100%;height: auto;display: block;margin:0}
- hr {border:0;border-top:1px solid var(--borders);margin:0;}
- nav, nav ul, nav ol, nav li {list-style-type:none;margin:0;padding:0;}
- * {box-sizing: border-box;}
- /* wrappers */
- #wrapper {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
- main {
- max-width: 25rem;
- width: 90vw;
- max-height: 90vh;
- padding:1rem;
- background-color: var(--box-background);
- border:1px solid var(--borders);
- border-radius: 7px;
- overflow: auto;
- }
- /* main navi */
- #page-navigation {
- padding:2rem 1rem 3rem;
- }
- #page-navigation ul{
- display: flex;
- text-align: center;
- }
- #page-navigation li{
- width: 100%;
- border-right:1px solid var(--borders);
- }
- #page-navigation a{
- width: 100%;color: var(--icons);
- }
- #page-navigation i{
- font-size: 1.1rem;
- }
- #page-navigation li:last-of-type {
- border-right:0;
- }
- /* header */
- /* images */
- figure.header-image {
- width: 100%;
- height: 12rem;
- }
- img.header-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 7px;
- }
- figure.header-icon{
- width: 6em;
- height: 6em;
- margin:-2.5rem auto 0;
- border: 5px solid var(--box-background);
- position: relative;
- z-index: 9999;
- border-radius: 100%
- }
- img.header-icon{
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 100%
- }
- /* titles */
- #blog-title {
- margin:1rem 0 0;
- font:600 1.7rem 'Montserrat', sans-serif;
- text-align: center;
- }
- #username {
- margin:.3rem 0 0;
- font:400 1rem 'Karla', sans-serif;
- text-align: center;
- color: #777;
- }
- /* details */
- #details {
- display: flex;
- justify-content: center;
- text-align: center;
- margin-top: 1.5rem;
- }
- #details i {
- display: block;
- margin-bottom: .7rem;
- color:var(--icons)
- }
- .detail-box {
- width: 100%;
- padding: 1rem .5rem;
- border-right: 1px solid var(--borders);
- }
- .detail-box:last-of-type {
- border-right:0;
- }
- /* about */
- #about {
- margin-top: 2rem;
- padding:1rem;
- background-color: #fafafa;
- }
- /* links */
- #links-divider {
- margin:2rem auto;
- width: 100%;
- max-width: 15rem;
- }
- #page-tags, #page-links{
- margin-top: 2rem;
- }
- #page-tags li, #page-links li{
- display: inline-block;
- padding:.6rem;
- background-color: var(--links-tags-background);
- margin:0 1rem 1rem;
- border-radius: 4px;
- }
- #page-tags a, #page-links a{
- color:var(--links-tags-text)
- }
- /* socials */
- #socials {
- margin: 3rem 0 2rem;}
- #socials ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- }
- #socials i {
- color: var(--icons);
- padding:7px;
- border-radius: 100%;
- font-size: 1.4rem;
- }
- </style>
- </head>
- <body>
- <div id="wrapper"><main>
- <header>
- <nav id="page-navigation"><ul>
- <li><a href="/" title="home"><i class="fa-solid fa-home"></i></a></li>
- <li><a href="/ask" title="inbox"><i class="fa-solid fa-envelope"></i></a></li>
- <li><a target="_blank" href="https://www.tumblr.com/dashboard" title="dashboard"><i class="fa-brands fa-tumblr"></i></a></li>
- </ul></nav>
- <figure class="header-image"><img src="HEADER IMAGE URL" alt="" class="header-image"></figure>
- <figure class="header-icon"><img src="ICON IMAGE URL" alt="" class="header-icon"></figure>
- <h1 id="blog-title">Title</h1>
- <h2 id="username">@{name}</h2>
- <section id="details">
- <div class="detail-box">
- <i class="fa-solid fa-user"></i>
- name
- </div>
- <div class="detail-box">
- <i class="fa-solid fa-calendar-days"></i>
- age
- </div>
- <div class="detail-box">
- <i class="fa-solid fa-circle-info"></i>
- pronouns
- </div>
- </section>
- </header>
- <section id="about">
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellat error voluptas iure quibusdam, magni molestias ad beatae alias ullam ut commodi perferendis. Tenetur id, sint ipsa totam quia error?</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellat error voluptas iure quibusdam, magni molestias ad beatae alias ullam ut commodi perferendis. Tenetur id, sint ipsa totam quia error?</p>
- </section>
- <nav id="page-links"><ul>
- <li><a href="link url">link 1</a></li>
- <li><a href="link url">link 2</a></li>
- <li><a href="link url">link 3</a></li>
- </ul></nav>
- <hr id="links-divider">
- <nav id="page-tags"><ul>
- <li><a href="tag url"># tag 1</a></li>
- <li><a href="tag url"># tag 2</a></li>
- <li><a href="tag url"># tag 3</a></li>
- </ul></nav>
- <nav id="socials"><ul>
- <!-- find more icons at http://fontawesome.io/icons/ -->
- <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
- <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
- <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
- <li><a href=""><i class="fa-brands fa-paypal"></i></a></li>
- </ul>
- </nav>
- </main></div>
- <!-- do not touch -->
- <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
- <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
- <!-- icons font -->
- <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
- <script>
- // $( document ).ready(function() {
- // });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement