Foodie Layout

Tags: food, sweets, food, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

    ⇘ Main Banner: https://images.gr-assets.com/hostedimages/1478418702ra/21069836.gif

    ⇘ Headings: https://media.giphy.com/media/MJkPUQgZZHZ5jYHwlF/giphy.gif

    ⇘ Comments Table: https://thumbs.gfycat.com/BountifulAcceptableHadrosaurus-max-1mb.gif

    ⇘ Footer: https://media.giphy.com/media/3o7btUDtnx3gTwIlmo/giphy.gif

    ⇘ Online: https://dl.glitter-graphics.com/pub/104/104612yc95mk61m5.gif

    ⇘ Body: https://media.giphy.com/media/3o7btUDtnx3gTwIlmo/giphy.gif

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=250) -->

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

a:hover{
    cursor: url('https://cdn.custom-cursor.com/db/pointer/32/cupcake_pointer.png'), auto;
}
* {
    cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Apple_Pie_Cursor.png'), auto; 
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
</style>

<style>
/* layout */  

:root{
    --headers: #451043;
    --text: #451043; 
    --names: #451043;
    --links: #451043;
    --hover: #451043;  
    --font-family: 'Gochi Hand', cursive;
    --curve: 500px;
}

/* text colors */

h3, h4, h5{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.profile .friends .person p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--headers) !important;} /* color of search */
.section h4 {background-image: url('https://media.giphy.com/media/MJkPUQgZZHZ5jYHwlF/giphy.gif');border-radius:20px;!important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

/* profile name */

h1 {
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    font-family: 'Gochi Hand', cursive;
    font-size:40px !important;
    letter-spacing:0.1em !important;
    text-shadow: 2px 2px #B65B48 !important;
}

/* font family */

h2, h3, h5, a, p, nav label, .section{ 
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px black !important;
    font-size: 13px!important;
}

h4 {font-family: 'Gochi Hand', cursive!important;
}

/* padding for round corners */

h1, h2, h3, h4, h5, p {padding-left:5px !important;}

h4 {background:!important;padding-bottom: 2px !important;}

/* profile photo */
.profile-pic img{
    outline:none !important;
    border-radius: 50px;
}

nav .top {
    background: wheat;
}
nav .links {
    background: wheat;
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(5649%) hue-rotate(279deg) brightness(90%) contrast(101%); !important;}


/* online icon*/

.online {content: url(https://dl.glitter-graphics.com/pub/104/104612yc95mk61m5.gif);}


/* background image */

body {
    background-image: url("https://media.giphy.com/media/3o7btUDtnx3gTwIlmo/giphy.gif");
    background-color:black;
    background-position: center top;
    background-repeat: repeat;
}   
main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
    border-radius: 2px;
    margin-top: -6px;
	background-image: url('https://images.gr-assets.com/hostedimages/1478418702ra/21069836.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
	height: 200px;
	}
}
/* boxes */

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: 15px !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .contact, .blog-preview{
    border-radius: 15px!important;
    padding: 2px !important;
    border: var(--borders) !important;
}

/* table-section work */ 

.table-section{
    border:none !important;
    background-color:transparent!important;
    border-radius: 15px !important;
}
.heading{
    background: url('https://media.giphy.com/media/MJkPUQgZZHZ5jYHwlF/giphy.gif') !important;
    padding-bottom: 2px !important;
    text-align: center;
}

/* friends photos */

.profile .friends .person img{
    border-radius: 30px;
}

.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
}

/* comment photos */

.inner img{
    outline:none !important;
}

/* interest table */

td {background-color: transparent!important;}

/* center background section */

main{
    border-radius: 15px!important;
    background-image:url('https://wallpaperaccess.com/full/4650982.jpg'); !important;
    background-size: contain;
    border: transparent !important;
    outline: none !important;
}

/* exceptions */

.icon{border:none !important;}
.mood{margin-bottom 10px !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: 15px!important;}
.comment-replies{border:5px dotted #451043;}
.comments-table{border-radius: 15px !important;border:none !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}

.profile-info{
    background-image: url('https://pbs.twimg.com/media/CmAw-AtXEAEoaXD.jpg');
    background-size: cover;
    background-position: center;
}

.comments-table {
    height: 400px!important;
    overflow-y: scroll;
    border: 5px dotted #451043 !important;
    padding:5px;
}
.comments-table td{
        border:  none;
        border-radius: 10px;
        border-bottom: 5px dotted #451043;
}

.comments-table td:first-child{
    background-image: url('https://thumbs.gfycat.com/BountifulAcceptableHadrosaurus-max-1mb.gif') !important;
    background-size: cover;
    border-right: 5px dotted #451043;
    border-bottom: 5px dotted #451043;
}
.comments-table td:first-child img {
    border-radius: 15px;
}

/* color the search bar */

.search-wrapper input[type=text] {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid var(--headers) !important;
    color:var(--names) !important;
    border-radius: 5px !important;
}
button{
    border-radius: 10px !important;
    border: 2px solid var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(255, 255, 255, 0.5) !important;
    color:var(--headers) !important;
}
.url-info{display:none !important;}
.blurbs .heading{display: none!important;}

hr {
    border:none;
    height:2px;
    background-color: tan;
    border-radius: 25px;
}

footer {
    background-image: url(https://media.giphy.com/media/3o7btUDtnx3gTwIlmo/giphy.gif); 
    background-position: center top;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 20px;
    width: 2px;
    border: 1px dotted tan;
}

::-webkit-scrollbar-thumb {
    background: wheat; 
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: tan;  
}
</style>

<br/>
<div style="text-align:center">
    <img src="https://64.media.tumblr.com/77a6c58798643caa9bf36af0bc5aaefd/tumblr_nbnyp5ryjq1ro861co1_400.gifv" width="400"/>
</div>
<hr/>
<div style="text-align:center">
    <img src="https://i.imgur.com/qHqODCt.gif" width="400"/>
</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 29 comments ( View all | Add Comment )

Clanvy	1779306376 This layout reminds me of OneShot, or at least the first part. Cool Report Comment
ema	1776423915 Using thank you !! Report Comment
Ev.	1772560676 USSINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG Report Comment
Ev.	1772560663 USSINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG Report Comment
JonesPixel99	1769429709 using part of the code Report Comment
pluto___1	1767903797 USIIIIIIIIIIIIIIIING <33333 Report Comment
loggy	1765884492 Using Report Comment
squibblefart	1765465596 using!! Report Comment
dummy1	1756973526 Using! Report Comment
acs59	1753846271 I used only the headers code Report Comment
☆Leona☆	1752583293 usingg <3 Report Comment
endie1	1751995953 Stealing parts of this, TY! Report Comment
plangie	1745739989 using!!! so cute Report Comment
isadora :)	1745563477 using ! Report Comment
terrorizingmeows	1739703545 using!!!1!!111! Report Comment
dRac0Z1.	1736910117 using!!! :) Report Comment
King	1733381772 Using bits! Report Comment
lea!(ᴗ͈ˬᴗ͈)ꕤ.ﾟ	1731538574 USING!! Report Comment
Jude	1731252011 USING <33 Report Comment
kipka	1729770513 using Report Comment