tabbed edition of my Sugar template, for later use. can have as many tabs as you would like but i pre-coded four]

text Italics

header

Header
Hover

link good day!

[css=background:-webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(254,237,255,1)), color-stop(100%, rgba(200,171,219,1))); padding: 30px; border-radius: 15px][img]https://pokefarm.com/upload/fevinefollower/headers_for_comm/pastel/Drawing_9_.png[/img][sc=pastel][ ][sc=tabbed_interface horizontal] [ul][ ][li]Tab 1[/li][ ][li]Tab 2[/li][ ][li]Tab 3[/li][ ][li]Tab 4[/li][ ][/ul][ ][sc=tab] tabby![/sc][ ][sc=tab] also a tabby![/sc][ ][sc=tab]wow! a tabby![/sc][ ][sc=tab] ANOTHER tabby![/sc][/sc] [/sc][/css][size=10][url=https://www.designyourway.net/blog/resources/pastel-background-textures/] header[/url] | [url=https://pfq.link/@32J]coding[/url][/size] [style].pastel //double slashes are notes towards scorkaji, aka myself, in attempts to have more organized coding, feel free to remove them. { //basic text stuff goes here font-family: 'Poppins'; a:link, a:visited {color: black;} I {font-family:'Josefin Sans'; color:#2C2632;} //tables n stuff table {border-collapse: separate; border: none;} th {font-family:'Pacifico'; background: #190128; color: white; border-radius: 4px;} td {color:#73137C; background: white; transition:all .5s;} td:hover {background:#E3E3E3; color:#124D59;} //etc .expbar {color: #0E0E0F; background:#F3F369; border:none; border-radius: 20px; >div {background:#F5F5C0}; } .tabbed_interface { >ul {background:none; >li {margin:5px;padding: 2px;color:#0C2004; background:#D0A2E0; border: none; transition:all .4s;} >li.tab-active {background:#D3F7F7; color: black; margin:2px;} } } .panel {border: none; box-shadow: none; background: none; &>h3 {background:#DCFFCC; color:#0E2900;a:link{color:#0E2900;} border:none; border-radius:15px; font-family:'Poppins'} &>div {background:#FFF2CC; color:#291C00; box-shadow: none;} } //fonts @font-face { font-family: 'Modak'; font-style: normal; font-weight: 200; src: local('Modak'), url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v14/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } //gradients, at the bottom for my scrolling pleasure. h1,h2,h3 {background: -moz-linear-gradient(137deg, rgba(255,255,255,1) 0%, rgba(92,154,255,1) 31%, rgba(87,151,255,1) 32%, rgba(177,158,255,1) 53%, rgba(174,157,255,1) 54%, rgba(87,151,255,1) 83%, rgba(255,0,255,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255,0,255,1)), color-stop(17%, rgba(87,151,255,1)), color-stop(46%, rgba(174,157,255,1)), color-stop(47%, rgba(177,158,255,1)), color-stop(68%, rgba(87,151,255,1)), color-stop(69%, rgba(92,154,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(137deg, rgba(255,255,255,1) 0%, rgba(92,154,255,1) 31%, rgba(87,151,255,1) 32%, rgba(177,158,255,1) 53%, rgba(174,157,255,1) 54%, rgba(87,151,255,1) 83%, rgba(255,0,255,1) 100%); background: -o-linear-gradient(137deg, rgba(255,255,255,1) 0%, rgba(92,154,255,1) 31%, rgba(87,151,255,1) 32%, rgba(177,158,255,1) 53%, rgba(174,157,255,1) 54%, rgba(87,151,255,1) 83%, rgba(255,0,255,1) 100%); background: -ms-linear-gradient(137deg, rgba(255,255,255,1) 0%, rgba(92,154,255,1) 31%, rgba(87,151,255,1) 32%, rgba(177,158,255,1) 53%, rgba(174,157,255,1) 54%, rgba(87,151,255,1) 83%, rgba(255,0,255,1) 100%); background: linear-gradient(313deg, rgba(255,255,255,1) 0%, rgba(92,154,255,1) 31%, rgba(87,151,255,1) 32%, rgba(177,158,255,1) 53%, rgba(174,157,255,1) 54%, rgba(87,151,255,1) 83%, rgba(255,0,255,1) 100%); color: white;font-family:'Modak'; border-radius: 30px} .tab {border: none; box-shadow: none; padding: 15px;Color: black; background: -moz-linear-gradient(272deg, rgba(255,255,255,1) 0%, rgba(255,242,255,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,242,255,1))); /* safari4+,chrome */ background: -webkit-linear-gradient(272deg, rgba(255,255,255,1) 0%, rgba(255,242,255,1) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(272deg, rgba(255,255,255,1) 0%, rgba(255,242,255,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(272deg, rgba(255,255,255,1) 0%, rgba(255,242,255,1) 100%); /* ie10+ */ background: linear-gradient(178deg, rgba(255,255,255,1) 0%, rgba(255,242,255,1) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFF2FF',GradientType=0 ); /* ie6-9 */} .tooltip_content {background: -moz-linear-gradient(272deg, rgba(242,255,255,1) 0%, rgba(255,242,255,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,255,255,1)), color-stop(100%, rgba(255,242,255,1))); /* safari4+,chrome */ background: -webkit-linear-gradient(272deg, rgba(242,255,255,1) 0%, rgba(255,242,255,1) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(272deg, rgba(242,255,255,1) 0%, rgba(255,242,255,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(272deg, rgba(242,255,255,1) 0%, rgba(255,242,255,1) 100%); /* ie10+ */ background: linear-gradient(178deg, rgba(242,255,255,1) 0%, rgba(255,242,255,1) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2FFFF', endColorstr='#FFF2FF',GradientType=0 ); /* ie6-9 */ border: none; color: black; border-radius: 15px; box-shadow:none;} } [/style]