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

☆⇒crzy⇒☆	1763954904 using Report Comment
NocturneCoffeeBar	1758670114 this is so cute !! totally using Report Comment
Cocoa	1754785417 using tysm for this Report Comment
astro	1748224936 what a lovely code, using !! Report 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
misi	1699315279 usando! Report Comment
Albedo	1682455540 using! Report Comment
autumnandspice	1674320488 tysm for this template ! its so cute !! Report Comment
채영	1664988929 yayy Report Comment
𝒲ill	1651898138 using!! tysm :D Report Comment