Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - page 'the news' 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=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">
- <!-- normalize -->
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <style>
- :root {
- --background:#ffffff;
- --text:#333;
- --links: #ae8cdb;
- --links-hover: #7b368c;
- --borders:#eee;
- --icons: #e991bd;
- }
- .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;}
- * {
- box-sizing: border-box;
- }
- .divider {
- width: 70%;
- margin:4rem auto 0;
- position: relative;
- }
- .divider:after {
- content: '\f111';
- font-family: 'Font Awesome 5 Free';
- color: var(--icons);
- font-weight: 900;
- font-size: 10px;
- position: absolute;
- left:calc(50% - 5px);top:calc(-5px - 5px);
- border:5px solid var(--background);
- border-radius: 100%;
- }
- /* container */
- main {
- width: 90vw;
- margin:5rem auto;
- max-width: 30rem;
- }
- /* header */
- header {
- text-align: center;
- }
- /* icon navigation */
- #icon-navigation {
- margin:2rem 0;
- font-size: 1.2rem;
- }
- #icon-navigation a {color: var(--icons );}
- #icon-navigation * {
- margin:0;
- padding: 0;
- }
- #icon-navigation ul,#navigation-links, #navigation-tags, #social-navigation{
- list-style: none;
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- }
- #navigation-links li, #navigation-tags li, #social-navigation li{
- margin:1rem
- }
- /* header image */
- #header-image img{
- border-radius: 5px;
- }
- /* header icon */
- #header-icon img{
- width: 90%;
- max-width: 10rem;
- margin:-15% auto 0;
- aspect-ratio: 1 / 1;
- border-radius: 100%;
- border:10px solid var(--background);
- z-index: 10;
- position: relative;
- }
- /* title */
- h1{
- font-weight: 400;
- font-family: 'Lora', serif;
- margin-bottom: 0;
- }
- /* username */
- h2{
- font-weight: 400;
- margin:0;
- font-size: 1rem;
- color: #999;
- }
- /* about section */
- #details-section {
- margin-top: 2rem;
- text-align: center;
- font-weight: 500;
- }
- #details-section .fa-circle {
- font-size: .4rem;
- vertical-align: middle;
- margin:0 .7rem;
- color: var(--icons);
- }
- #about-text {
- margin-top: 4rem;
- }
- /* navigation sections */
- #navigation-links,#navigation-tags {
- margin-top: 4rem;
- }
- #navigation-links li {
- border:1px solid var(--icons);
- padding: .7rem;
- border-radius: 3px;
- }
- #social-navigation {
- margin-top: 4rem;
- font-size: 1.4rem;
- }
- </style>
- </head>
- <body>
- <main>
- <header>
- <nav id="icon-navigation"><ul>
- <!-- home button -->
- <li><a title="home" href="/"><i class="fa-solid fa-home"></i></a></li>
- <!-- inbox button -->
- <li><a title="inbox" href="/ask"><i class="fa-solid fa-envelope"></i></a></li>
- <!-- follow button -->
- <li><a title="follow" href="https://www.tumblr.com/follow/{user}"><i class="fa-solid fa-plus"></i></a></li>
- <!-- dashboard -->
- <li><a title="dashboard" href="https://www.tumblr.com/dashboard"><i class="fa-brands fa-tumblr"></i></a></li>
- </ul></nav>
- <figure id="header-image"><img src="HEADER IMAGE URL" alt=""></figure>
- <figure id="header-icon"><img src="ICON IMAGE URL" alt=""></figure>
- <h1>title</h1>
- <h2>@{user}</h2>
- </header>
- <section id="about-section">
- <article id="details-section">
- name
- <i class="fa-solid fa-circle"></i>
- age
- <i class="fa-solid fa-circle"></i>
- pronouns
- </article>
- <article id="about-text">
- <!-- please wrap your paragraphs around <p></p> -->
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam assumenda ut nostrum ratione adipisci porro ab reprehenderit nulla nesciunt. Earum illum eveniet doloribus possimus eaque at reiciendis quis velit amet.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam assumenda ut nostrum ratione adipisci porro ab reprehenderit nulla nesciunt. Earum illum eveniet doloribus possimus eaque at reiciendis quis velit amet.</p>
- </article>
- </section>
- <hr class="divider">
- <section id="navigation-section">
- <nav id="navigation-links">
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- <li><a href="">link</a></li>
- </nav>
- <hr class="divider">
- <nav id="navigation-tags">
- <li><a href="">#tag</a></li>
- <li><a href="">#tag</a></li>
- <li><a href="">#tag</a></li>
- </nav>
- <hr class="divider">
- <nav id="social-navigation">
- <!-- find more icons at https://fontawesome.com/icons -->
- <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
- <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
- <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
- <li><a href=""><i class="fa-brands fa-snapchat"></i></a></li>
- <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li>
- </nav>
- </section>
- </main>
- <!-- 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>
- <!-- icons font -->
- <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement