Cafe Corner

Tags: cafe, coffee, simple, latte, icytea

Description:

Cafe themed Layout for those searching or a robust vibe!

If you like this layout then please comment below if you used it.

I want to read feedback from you all!

Disclaimer: I have taken my time to create a simple, yet effective layout for you to modify to your heart's content. You do not need to credit me on your profile publicly. However, do not repost it as your own layout design.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*Fonts used: Permanent Marker and Carter One*/

@import url('https://fonts.googleapis.com/css2?family=Carter+One&family=Permanent+Marker&display=swap');
p{
  font-family: 'Carter One', cursive;
  font-size: 120%;
}
h1{
  font-family: 'Permanent Marker', cursive;
  font-weight: 700;
  font-size: 300%;  
}
h2,h3,h4,h5{
  font-family: 'Permanent Marker', cursive;
  font-weight: 200;
  font-size: 165%;  
}

/*Base colors and banner sources*/
/* Table of each section of the site in colors */
:root {
  --logo-blue: #9c846b;
  --darker-blue: #9c846b;
  --lighter-blue: #9c846b;
  --even-lighter-blue: #7e5f40;
  --lightest-blue: #6d5338;
  --light-orange: #333333;
  --dark-orange: #333333;
  --even-lighter-orange: #7e5f40;
  --green: #333333;
  --red: #333333;

   --pdg_commentsSticker: url(https://cdn.discordapp.com/attachments/851127897115852801/955171146439987251/computer_cafe.gif);
  --pdg_profileInfo: url(https://cdn.discordapp.com/attachments/851127897115852801/954779533175816313/cafe.gif);

}

/* Gif Background */
body{
   background-image: url(https://cdn.discordapp.com/attachments/851127897115852801/954779533175816313/cafe.gif) !important;

        background-repeat: no-repeat !important;
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
}



</style>

<a class="two" href="https://layouts.spacehey.com/icytea" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; width: 200px; height: 200px;">IcyTea's Layouts</div></a>

<style>
/* LINK COLORS */
a:link {
  font-family: 'Carter One', cursive;
  font-size: 16px;
  color: #FFFFFF;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  font-family: 'Carter One', cursive;
  font-size: 16px;
  color: #FFFFFF;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  font-family: 'Carter One', cursive;
  font-size: 16px;
  color: #333333;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  font-family: 'Carter One', cursive;
  font-size: 16px;
  color: #333333;
  background-color: transparent;
  text-decoration: underline;
}

body{
  font-family: Permanent Marker;
  background-color: #333333;
}

.mood a{
 font-family: Permanent Marker, cursive;
}

span.count, .details-table td:first-child {
  color: #333333;
  font-size: 18px;
}

.blog-preview p {
  padding: 5px 10px;
  color: white;
    font-family: Permanent Marker, cursive;
    font-size: 1.2rem;
    font-weight: bold;
}

.blog-preview p a:hover,
.blog-preview p a:active,
.blog-preview p a:focus, {
  color: #8debff!important;
}


table.details-table {
  border-collapse: collapse;
  border: 1px transparent;
}

table.details-table td {
        background-color:transparent!important;
	padding:3px;
	color: #FFFFFF;
        border-color: black;
        border-width: 2px;
}

/* Adjust Navigation Section Here ref: #fff1de, #333333*/

nav img.logo{
    filter: brightness(0) saturate(100%) invert(15%) sepia(51%) saturate(3801%) 
    hue-rotate(222deg) brightness(7%) contrast(67%); !important;
}
nav {
  border-radius: 15px 15px 0 0;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
}
nav .links a{
    color: #333333!important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ☕";
}


.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border: none;
}


.profile h1 {
  font-family: Permanent Marker, cursive;
  font-size: 3rem;
}

.heading h4{
font-family: Permanent Marker, cursive;
}

.profile-pic {
  border-radius: 500px;
  overflow: hidden;
}

.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -10px 8px 0 #0006;
	color: white;
	padding:4em 0;
}
.profile-info h3 a {
	color: white;
        font-size: 1.4rem;
}

.profile .comments-table:after {
	background-image: var(--pdg_commentsSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 75px;
	width: 75px;
	content: " ";
	transform: rotate(-2deg) scale(5) translateX(-4rem) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}



.heading {
  padding: 5px 0 !important;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color:#9c846b !important;
  text-align: center;
  color: #333333 !important;
  border-bottom: 3px solid;
}

/* Main Text */
main {
	background:#d2ab82;
	padding:2px;
	color: #333333;
        font-size: 16px;
}

/* ADJUST WIDTH OF PAGE HERE */

.container {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px;
  width: 90%;
  max-width: 1100px;

}

footer {
  font-size: 20px;
  border-radius: 5px;
  background: #9c846b !important;
  display: block !important;
}


table.comments-table td {
        background-color:transparent!important;
	padding:2px;
	color:#FFFFFF;
        border-color: #333333;
        border-width: 0px;
}

.comments-table td:first-child img {
  width: 80px;
  border-radius: 500px;
}

.comments-table tr td:last-child {
	height: 150px;
	display: block;
	overflow-y: scroll;
}
.profile .friends .person img {
  border-radius: 500px;
  overflow: hidden;
  color: #2986cc!important;
}

.blog-preview p {
  font-size: 1.5rem;
  font-weight: 500;
}

a.addme {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

table,
td,
tr {
  border-color: transparent;
  border-collapse: collapse;
}

.comment-replies {
  border-color: black;
  border-width: 1px;
  margin: 5px;
  background-color: #16537e;
}

button {
  margin: 5px;
}



/* CUSTOMIZE SCROLLBAR HERE */

             ::-webkit-scrollbar {
    width: 7px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(195 144 90,1);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }


/* Contact IcyTea (https://spacehey.com/icytea) on SpaceHey if issues arise! */

table{background:none !important; line-height:15px !important;}
table ul li a {color: #000000 !important;}
}
</style>


<style>

.online{content:url(https://cdn.discordapp.com/attachments/851127897115852801/955171146196725870/coffee_online_logo.gif);
    width: 50px;
    height: 73px;
}
</style>

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 19 of 19 comments ( View all | Add Comment )

matias	1727607398 using Report Comment
Arcus :3 🏳️‍⚧️	1727177122 Using : 3 Report Comment
Gigi	1725832630 Using : 3 Report Comment
Gigi	1725832626 Using : 3 Report Comment
𑁍ܓ🌼˚₊	1724030957 Using!! Report Comment
Rayyi10101	1706662476 using :) Report Comment
rubysittta	1705875152 using ! Report Comment
🍉☆maaurn☆🍉	1705514212 uzin !! :3 Report Comment
AfroAnonymous	1705139986 using Report Comment
buggy	1701042975 its adorable! def using lol, it reminds me of Coffee Talk xD Report Comment yeeesss by Laydamerfor; 1701354541; Report
rem	1700968814 using this! so cute <3 Report Comment
meowkkelsen	1699315279 usando! Report Comment
Albedo	1682455540 using! Report Comment
autumnandspice	1674320488 tysm for this template ! its so cute !! Report Comment
채영	1664988929 yayy Report Comment
ᓚᘏᗢ GR1MM	1651898138 using!! tysm :D Report Comment
liv🦄	1648259339 Putting it in my profile rn, absolutely love it its adorbs!! Report Comment
Max_Yoshi ✧･ﾟ: ✧･ﾟ:	1648023281 This layout is amazing!, I can't wait to use it, TYSM for this! o((^▽^))o Report Comment
Jadelyn	1647823026 I love it Report Comment