/* Change values in root section for easy customisation */ :root { /*Basic*/ --background-color: #fafff5; --borders: 1px groove #81d07c; --content-background: white; /*Images*/ --background-image: url("https://blumchen.cafe/Graphics/Templates/clover-bg1.gif"); --header-image:url("https://blumchen.cafe/Graphics/Templates/clover-header1.png"); --container-image: url("https://blumchen.cafe/Graphics/Templates/clover-1.gif"); /*Moving background around the main content*/ --list-icon:url("https://blumchen.cafe/Graphics/Templates/icon.gif"); /*Text*/ --title-color: #fc6db9; --text-color: green; --font: Ms Gothic; --font-size: 14px; --link-color: #fc6db9; --link-color-hover: #fc6db9; /*Sidebar*/ --sidebar-background:#ebffd6; /*Update box*/ --updatebox-borders: 1px dashed #fc6db9; --updatebox-font-colour: #fc6db9; --updatebox-background: white; /*Color or image*/ /*Footer*/ --footer-background:#b8e4b4; } body { background: var(--background-color); background-image: var(--background-image); background-size:92%; /* Specific sizing for the template bg image, feel free to change */ font-family:var(--font); font-size:var(--font-size); color:var(--text-color); padding:30px; } img {/* Styling images */ image-rendering: pixelated; max-width: 100%; } a {/* Styling links */ color:var(--link-color); text-decoration:none; } a:hover{ color:var(--link-color-hover); } ::selection { color: white; background: #fca2d2; } #all { height:850px; width:900px; margin:auto; } #header { height:300px; width:898px; background-image:var(--header-image); background-position:center; background-size:cover; border:var(--borders); border-top-left-radius:35px; border-top-right-radius:35px; box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb; } #title { font-size: 35px; font-family: 'Simsun'; filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d); float:right; margin-top:240px; right:490px; color:var(--title-color); position:absolute; letter-spacing: -1px; } #navigation { height:177px; width:223px; background: #fff; border-bottom:var(--borders); box-sizing:border-box; padding:0px; } ul { margin:0px; padding:0px; } #navigation li { background: rgb(177,228,128); background: -moz-linear-gradient(0deg, rgba(177,228,128,1) 0%, rgba(203,245,162,1) 9%, rgba(211,248,174,1) 25%, rgba(231,255,207,1) 50%, rgba(234,255,213,1) 75%, rgba(235,255,215,1) 88%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(0deg, rgba(177,228,128,1) 0%, rgba(203,245,162,1) 9%, rgba(211,248,174,1) 25%, rgba(231,255,207,1) 50%, rgba(234,255,213,1) 75%, rgba(235,255,215,1) 88%, rgba(255,255,255,1) 100%); background: linear-gradient(0deg, rgba(177,228,128,1) 0%, rgba(203,245,162,1) 9%, rgba(211,248,174,1) 25%, rgba(231,255,207,1) 50%, rgba(234,255,213,1) 75%, rgba(235,255,215,1) 88%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b1e480",endColorstr="#ffffff",GradientType=1); width:100%; padding:5px; list-style-image: var(--list-icon); list-style-position: inside; font-size:17px; box-sizing:border-box; border-bottom: 1px solid #679967; } #updatebox { height:230px; width:200px; margin:10px; background:var(--updatebox-background); border:var(--updatebox-borders); color:var(--updatebox-font-colour); box-sizing:border-box; padding:5px; } #updatebox li { list-style-type: hiragana-iroha; } #updatebox li:nth-child(even) { color: green; } #container { height:548px; width:675px; border-right:var(--borders); background:var(--container-image); animation:bg 900s linear infinite; box-sizing:border-box; display:inline-block; padding:25px; } #main { border:var(--borders); background:var(--content-background); height:498px; width:625px; box-sizing:border-box; padding:15px; } #main p { text-align: justify; } table.facts { border: 1px solid #6FB06A; border-radius: 20px; background-color: #EBFFD6; width: 45%; height: 200px; text-align: center; border-collapse: collapse; float:right; } table.facts td, table.facts th { border: 1px dashed #6FB06A; padding: 3px 2px; } table.facts tr:nth-child(even) { background: #FCD7E7; color: #fc6db9; } table.facts thead { background: #FC90CA; background: -moz-linear-gradient(top, #fdacd7 0%, #fc9bcf 66%, #FC90CA 100%); background: -webkit-linear-gradient(top, #fdacd7 0%, #fc9bcf 66%, #FC90CA 100%); background: linear-gradient(to bottom, #fdacd7 0%, #fc9bcf 66%, #FC90CA 100%); border: 1px solid #fc6db9; } table.facts thead th { font-size: 15px; font-weight: normal; color: #FCFCFC; text-align: center; border-left: 1px solid #fc6db9; } #footer { width:900px; height:55px; background:var(--footer-background); color:#fc6db9; text-align:center; border:var(--borders); margin:auto; padding:10px; box-sizing: border-box; border-bottom-left-radius:35px; border-bottom-right-radius:35px; } @keyframes bg { from { background-position: 0 0; } to { background-position: -10000px -5000px; }} .left { background:var(--sidebar-background); float:left; width:223px; /* 25% of layout size, minus the width of border */ border-right:var(--borders); overflow:hidden; border-left:var(--borders); } .left img{ max-width:225px; /* Prevents images from clipping outside the sidebar */ margin:10px; /* Stops images in sidebar from touching, feel free to delete if you want */ } .right { float:right; height:100%; width:675px; overflow:hidden; } Blumchen's Clover Template
  • 18/09/2024: My fourth update... I'm running out of ideas now 。゚(。ノωヽ。)゚。
  • 17/09/2024: My third update! I added some links!
  • 16/09/2024: My second update! I added a header!
  • 15/09/2024: My first update! Welcome to my site~ (Add new updates by adding (li) declarations above. A scrollbar will appear when you fill this box)
  • Hi there! Thank you for downloading my layout. Please remember to keep the credits as I worked very hard on this :-) Email me if you need any help customising your layout, or if you encounter any issues with the code (but please check online first). I am a self-taught coder, so I'm sure some of my code can be un-orthodox in nature, I am no professional! If you would like to support me, consider commissioning me - at this point, I am accepting commissions for layouts, buttons, blinkies and a few other various graphics. Have a lovely day !!

    This is a left section. Put whatever you want here. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    Fun Facts!~
    Likes text text text text text text text text text text text text text text text text text text text text
    Dislikes text text text text text text text text text text text text text text text text text text text text
    Hobbies text text text text text text text text text text text text
    Interests text text text text text text text text text text text text text text text text text text text text