Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - about #3 'sunday' 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!
- CREDITS:
- grid tutorial by egg https://egg.design/post/166303648392/css-grid-tutorial-in-my-snotgirl-theme-and-my
- -->
- <!DOCTYPE html>
- <html>
- <head>
- <title>{Title}</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width">
- <link rel="shortcut icon" href="{favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet">
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <style type="text/css">
- .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
- .tmblr-iframe:hover {opacity:.8;}
- ::-webkit-scrollbar-thumb:vertical {border-left:2px solid #88a08a;}
- ::-webkit-scrollbar {width:6px}
- ::-webkit-scrollbar-track-piece{margin:5px 0;}
- body, figure{margin: 0;padding: 0}
- html{font-size: 13px}
- body {font: 1.1rem 'Open Sans', sans-serif;color:#333}
- a {text-decoration: none;color:#88a08a/*links color*/; }
- a:hover {color:#164c1a;} /* links hover color*/
- b {font-weight: 600}
- /* main */
- main {
- width: 70rem;
- max-width: 95vw;
- margin: 5rem auto 2rem;
- }
- /* nav */
- nav ul,nav li {list-style-type:none;margin:0;padding:0;}
- #uppernav {margin:0 0 5rem 4rem}
- #uppernav a{color:#88a08a;letter-spacing: .05rem}
- #uppernav ul li{
- display: inline-block;
- font:600 1.1rem 'Open Sans', sans-serif;
- border-bottom: 1px solid #ddd;
- margin-right: 4rem;
- text-transform: uppercase;
- transition-duration: .2s}
- #uppernav ul li:hover{
- background: #e3efe4;
- border:0;}
- #uppernav ul li:hover a{color:#555;}
- figure.himg {
- width: 25rem;
- height: 25rem;
- display: inline-block;
- vertical-align: middle;}
- img.himg{width: 100%;height:100%;border-radius: 100%}
- figcaption {
- display: inline-block;
- vertical-align: middle;
- margin-left: 3rem}
- #name{
- font-size: 2.7rem;
- font-weight: 600;
- margin:0;}
- #info{
- font-size: 1.2rem;
- margin-bottom: 0;
- letter-spacing: .03rem}
- #quote {
- font-size: 1rem;
- font-style: italic;
- letter-spacing: .02rem;
- margin:2rem 0 0;
- line-height: 170%}
- #quote a {text-decoration: underline;}
- /* navs */
- #lowernav {
- /* make sure the total sum of the column count and column gap aren't greater than the width */
- column-count: 3; /* change the number of rows*/
- column-gap: 2rem; /* space between each nav. also changes the width of the navs, the greater the numer the smaller the nav will be*/
- width: 70rem; /* change the width of the space where the each nav is*/
- max-width: 95vw;
- margin: 5rem auto 0;}
- #lowernav nav {
- margin:0 0 3rem;
- padding: 0;
- break-inside: avoid;
- }
- #lowernav ul li{
- margin:2.4rem 0;
- font-size: 1.1rem;
- text-transform: uppercase;
- box-sizing: border-box;
- letter-spacing: .03rem;
- text-align: center;
- display: block;
- }
- #lowernav ul li span:hover{
- box-sizing: border-box;
- border:1px solid #bbb;
- padding: .6rem;}
- .navtit {
- font-size: 1.5rem;
- text-transform: uppercase;
- margin: 0 0 1rem;
- color:#444;
- letter-spacing: .05rem;
- text-align:center;
- }
- #lowernav ul li span{
- border:1px solid #fff;
- padding: .6rem;
- transition-duration: .6s;
- }
- /* MEDIA */
- @media only screen and (min-width:0) and (max-width:760px) {
- #uppernav {
- margin:0 0 4rem 0;
- text-align: center;}
- #uppernav ul li {margin:0;}
- #uppernav ul{display: block;width: 90vw;margin:auto;text-align-last: justify;}
- figure.himg {
- width: 15rem;
- margin: auto;
- display: block;}
- img.himg{
- width: 100%;
- border-radius: 100%;
- margin: auto}
- figcaption {
- text-align: center;
- margin:1rem auto 0;
- display: block;}
- #name{
- font-size: 2.7rem;
- font-weight: 600;
- text-align: center;}
- #info{
- font-size: 1.2rem;
- letter-spacing: .03rem;
- text-align: center;}
- }
- </style>
- </head>
- <body>
- <main>
- <header>
- <nav id="uppernav"><ul>
- <li><a href="/">index</a></li>
- <li><a href="/ask">askbox</a></li>
- <li><a href="https://tumblr.com">dashboard</a></li>
- </ul></nav>
- <figure class="himg"><img class="himg" src="IMG URL"/></figure>
- <figcaption>
- <p id="name">Name</p>
- <p id="info">information</p>
- <blockquote id="quote">
- <p>about, quote, or whatever</p>
- </blockquote>
- </figcaption>
- </header>
- <section>
- <article id="lowernav">
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- <nav><ul>
- <h2 class="navtit">title</h2>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- <li><span><a href="/">links</a></span></li>
- </ul></nav>
- </article>
- </section>
- </main>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement