Beginner Level - Completely Customizable Minimalist Template

Tags: #christian #minimalist #customizable #template #darkmode #dark #mode #aesteticallypleasing #aestetic #pleasing #functional #layout #simple #gif #black #grey #white #greyscale #scene #loop #layouts
Description:

This is my current layout, a mix between two templates from Leo and cristiana (properly cited below) with my own code and modifications stitching them together. This code is NOT optimized, but is intended to be a beginner template for anyone getting started. I have labeled each section of code with its use and application so that this code can be easily adapted to create any style or theme. No credit to me is required, but please comment and give kudos to this post so that Leo and cristiana can receive the credit for their work on this layout. Leo: "Fly Away" - https://layouts.spacehey.com/layout?id=3840 cristiana "Customizable Polaroids to Add to Any Layout" - https://layouts.spacehey.com/layout?id=1866
Preview:

click on the image for a larger preview
Code:

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

I live in the Twilight Zone. I like sheep, goats, baby cows, elk, vaporwave dystopias, cathedrals, spacetravel, modest agricultural traditionalism, tech, pianos, machine engineering, and inexplicable circumstances, amongst various other interests. I dislike cheese, spiritual immaturity, and petroleum based dyes...


<style>

/* 𝗧𝗵𝗶𝘀 𝗽𝗼𝗿𝘁𝗶𝗼𝗻 𝗼𝗳 𝘁𝗵𝗲 𝗰𝗼𝗱𝗲 𝗶𝘀 𝗮 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗱 𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗼𝗳 𝗮 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗺𝗮𝗱𝗲 𝗯𝘆 𝗟𝗲𝗼 - 𝗵𝘁𝘁𝗽𝘀://𝗹𝗮𝘆𝗼𝘂𝘁𝘀.𝘀𝗽𝗮𝗰𝗲𝗵𝗲𝘆.𝗰𝗼𝗺/𝗹𝗮𝘆𝗼𝘂𝘁?𝗶𝗱=𝟯𝟴𝟰𝟬 */ 

/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗽𝗮𝗴𝗲 */ 
body { 
background-color: rgba(0, 0, 0, 1);
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗳𝗼𝗻𝘁 𝗼𝗳 𝘆𝗼𝘂𝗿 '𝗔𝗕𝗢𝗨𝗧 𝗠𝗘' 𝗮𝗻𝗱 '𝗪𝗛𝗢 𝗜'𝗗 𝗟𝗜𝗞𝗘 𝗧𝗢 𝗠𝗘𝗘𝗧' 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 */ 
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bebas+Neue&display=swap');
.profile .blurbs .section h4{
font-family: 'Archivo Narrow', sans-serif;
text-transform:uppercase !important;
line-height: 2 !important;
}
</style>

<style> 
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝗔𝗟𝗟 𝗼𝗳 𝘁𝗵𝗲 𝘁𝗲𝘅𝘁 𝘆𝗼𝘂 𝗶𝗺𝗽𝘂𝘁 𝘁𝗵𝗮𝘁 𝗶𝘀𝗻'𝘁 𝗮 𝗹𝗶𝗻𝗸 𝗼𝗿 𝗵𝗲𝗮𝗱𝗲𝗿 */ 
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bebas+Neue&display=swap');
p{
font-family: 'Archivo Narrow', sans-serif;
font-size: 18px !important;
line-height: 1.5 !important;
color:#ffffff;
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝘀𝗶𝘇𝗲 𝗮𝗻𝗱 𝗳𝗼𝗻𝘁 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗻𝗮𝗺𝗲 𝗮𝗯𝗼𝘃𝗲 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
h1{
font-size: 52px !important;
font-family: 'Bebas Neue', sans-serif;	
text-transform:uppercase !important;
padding-left: 8px !important;
}
</style> 

<style> 
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝗼𝗹𝗼𝗿 𝗴𝗿𝗮𝗱𝗶𝗲𝗻𝘁 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗻𝗮𝗺𝗲 */
.profile h1{
background: -webkit-linear-gradient(#ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗴𝗿𝗮𝗱𝗶𝗲𝗻𝘁 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝗔𝗟𝗟 𝘆𝗼𝘂𝗿 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 𝗲𝘅𝗰𝗲𝗽𝘁 '𝗦𝗣𝗔𝗖𝗘𝗛𝗘𝗬 𝗨𝗥𝗟' */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
h4{
font-size: 24px !important;
font-family: 'Bebas Neue', sans-serif;	
text-transform:uppercase !important;
padding-left: 8px !important;
padding-right: 8px !important;
padding-top: 5px !important;
border-radius:15px;
background: -webkit-linear-gradient(#ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
</style> 

<style>
/* 𝗧𝗵𝗶𝘀 𝗺𝗮𝗻𝗮𝗴𝗲𝘀 𝘁𝗵𝗲 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗯𝗮𝗿 𝗮𝗻𝗱 𝗹𝗶𝗻𝗸𝘀 𝗮𝘁 𝘁𝗵𝗲 𝘁𝗼𝗽 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
nav{ 
font-size: 12.5px !important;
font-family: 'Bebas Neue;
text-transform:none;
padding-left:0px;
text-align: center;
padding-bottom: 8px !important;
}
/* 𝗧𝗵𝗶𝘀 𝗶𝘀 𝗮 𝘀𝗽𝗮𝗰𝗲𝗿 𝘁𝗵𝗮𝘁 𝘀𝗲𝗽𝗮𝗿𝗮𝘁𝗲𝘀 𝗹𝗶𝗻𝗸𝘀 𝗮𝘁 𝘁𝗵𝗲 𝘁𝗼𝗽 */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "--";
    color: rgba(0, 0, 0, 1);
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗲𝗻𝘁𝗲𝗿𝘀 𝘆𝗼𝘂𝗿 '𝗔𝗕𝗢𝗨𝗧 𝗠𝗘,' '𝗪𝗛𝗢 𝗜'𝗗 𝗟𝗜𝗞𝗘 𝗧𝗢 𝗠𝗘𝗘𝗧,' '[𝗡𝗔𝗠𝗘] 𝗛𝗔𝗦 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗙𝗥𝗜𝗘𝗡𝗗𝗦,' 𝗮𝗻𝗱 '𝗗𝗜𝗦𝗣𝗟𝗔𝗬𝗜𝗡𝗚 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗢𝗙 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗖𝗢𝗠𝗘𝗡𝗧𝗦' 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘁𝗵𝗲 '[𝗡𝗨𝗠𝗕𝗘𝗥]' 𝗶𝗻 '[𝗡𝗔𝗠𝗘] 𝗛𝗔𝗦 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗙𝗥𝗜𝗘𝗡𝗗𝗦,' 𝗮𝘀 𝘄𝗲𝗹𝗹 𝗮𝘀 𝘁𝗵𝗲 '[𝗡𝗨𝗠𝗕𝗘𝗥]'𝘀 𝗶𝗻 '𝗗𝗜𝗦𝗣𝗟𝗔𝗬𝗜𝗡𝗚 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗼𝗳 [𝗡𝗨𝗠𝗕𝗘𝗥] 𝗖𝗢𝗠𝗠𝗘𝗡𝗧𝗦' */
    .count {
        color: #ffffff;
    }
</style>

<style>
   a:hover {
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝗹𝗶𝗻𝗸𝘀 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝗵𝗼𝘃𝗲𝗿 𝗼𝘃𝗲𝗿 𝘁𝗵𝗲𝗺 */ 
     color: #ffffff; 
   } 
   a{
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝗔𝗟𝗟 𝗹𝗶𝗻𝗸𝘀 */ 
     color: #ffffff; 
   }
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝘂𝗿𝘀𝗼𝗿 𝗼𝗻 𝘆𝗼𝘂𝗿 𝘀𝗰𝗿𝗲𝗲𝗻 */
* { 
    cursor: url('https://external-media.spacehey.net/media/sZ-P8ITxDc5WDNkzy36iwDJfiskIQVR4ATUA-0x68DJo=/https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur'), auto; 
}
a:hover {
    cursor: url(https://external-media.spacehey.net/media/swuFkRTJOkp9EVgnjIKDNJXhawLZMRjOSm2nYy1BmAcE=/https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), auto;
}
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗺𝗮𝗶𝗻 𝗯𝗼𝘅 𝘁𝗵𝗮𝘁 𝗵𝗼𝗹𝗱𝘀 𝗮𝗹𝗹 𝘆𝗼𝘂𝗿 𝘁𝗲𝘅𝘁, 𝗯𝗹𝘂𝗿𝗯𝘀, 𝗮𝗻𝗱 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 𝗼𝗻 𝘁𝗵𝗲 𝗽𝗮𝗴𝗲 */
main {
background: rgba(255, 255, 255, 0.15);
border-radius:15px;
border: 13px solid rgba(0, 0, 0, 0.25)
}
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘆𝗼𝘂𝗿 '𝗕𝗟𝗨𝗥𝗕𝗦,' '𝗙𝗥𝗜𝗘𝗡𝗗 𝗦𝗣𝗔𝗖𝗘,' 𝗮𝗻𝗱 '𝗖𝗢𝗠𝗠𝗘𝗡𝗧' 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 */
.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:rgba(0, 0, 0, 0.25);
text-transform:lowercase !important;
text-align: center;
color: white;
border-radius:15px;
border: 7px solid rgba(0, 0, 0, 1);
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗳𝗿𝗶𝗲𝗻𝗱'𝘀 𝗻𝗮𝗺𝗲𝘀 */
.profile .friends .person p {
color: #ffffff;  
}
.profile .friends .person p:hover {
color: #ffffff;  
}
</style>

<style> 
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 '𝗟𝗔𝗧𝗘𝗦𝗧 𝗕𝗟𝗢𝗚 𝗘𝗡𝗧𝗥𝗜𝗘𝗦' 𝗯𝗼𝘅 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: left;
padding-left: 8px !important;
font-family: 'Josefin Sans', sans-serif;
background-color:rgba(0, 0, 0, 0.25);
color: white;
border-radius:15px;
border: 7px solid rgba(0, 0, 0, 1);
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝘀𝗵𝗮𝗽𝗲 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗳𝗿𝗶𝗲𝗻𝗱'𝘀 𝗶𝗰𝗼𝗻𝘀 */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(255, 255, 255, 0.71);
border: 3px solid rgba(255, 255, 255, 1)
}
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘁𝗵𝗲 '𝗰𝗼𝗻𝘁𝗮𝗰𝘁,' '𝗶𝗻𝘁𝗲𝗿𝗲𝘀𝘁𝘀,' 𝗮𝗻𝗱 '𝗹𝗶𝗻𝗸𝘀' 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
border-radius:15px;
background-color: rgba(0, 0, 0, 1);
text-align: center;
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗲𝘃𝗲𝗹 𝗮𝗻𝗱 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘆𝗼𝘂𝗿 '𝗰𝗼𝗻𝘁𝗮𝗰𝘁𝘀' 𝗯𝗼𝘅 */
.profile .contact {
border-radius:15px;
background-color: rgba(0, 0, 0, 1);
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗳𝗼𝗿𝗺𝗮𝘁𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁𝘀 */
.profile .friends .comments-table td {
background-color: rgba(0, 0, 0, 0.25);
border: 0px solid rgba(255, 255, 255, 0.65);  
}
.comments-table td*{
    
    
}
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗳𝗼𝗿𝗺𝗮𝘁𝘀 𝘆𝗼𝘂𝗿 '𝗜𝗡𝗧𝗘𝗥𝗘𝗦𝗧𝗦' 𝗮𝗻𝗱 '𝗟𝗜𝗡𝗞𝗦' 𝘀𝘂𝗯-𝗯𝗼𝘅𝗲𝘀 */
.profile .table-section .details-table td {
border-radius:15px;
background-color:rgba(0, 0, 0, 1);
text-align: center;
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗲𝗱𝗶𝘁𝘀 𝘁𝗵𝗲 𝗹𝗶𝗻𝗸𝘀 𝗶𝗻 𝘁𝗵𝗲 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗯𝗮𝗿 𝗮𝘁 𝘁𝗵𝗲 𝘁𝗼𝗽 */
nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 255, 255, 1);
}
</style>

<style>
nav .top{
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗼𝗳 𝘁𝗵𝗲 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗯𝗼𝘅 𝗮𝘁 𝘁𝗵𝗲 𝘁𝗼𝗽 */
background-color: transparent;
}
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗶𝘀 𝘁𝗵𝗲 𝗳𝗹𝗼𝗮𝘁𝗶𝗻𝗴 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝗻𝗮𝗺𝗲, 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲, 𝗮𝗻𝗱 𝘆𝗼𝘂𝗿 𝗳𝗿𝗶𝗲𝗻𝗱'𝘀 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲𝘀 */
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
/* 𝗧𝗵𝗶𝘀 𝗿𝗲𝗽𝗹𝗮𝗰𝗲𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲 */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/originals/ec/53/28/ec5328247e4dd1873c4cd1f02e760a1b.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 140px; height: 140px; } 
.profile-pic:after{ 
border-radius:15px;
  border: 3px solid  rgba(255, 255, 255, 1);  
  box-shadow: 1px 0px 10px 2px rgba(255, 255, 255, 0.46);
 }   
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗶𝘀 𝘁𝗵𝗲 𝗰𝗼𝗱𝗲 𝘁𝗵𝗮𝘁 𝗮𝗽𝗽𝗹𝗶𝗲𝘀 𝘁𝗵𝗲 𝗳𝗹𝗼𝗮𝘁𝗶𝗻𝗴 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝘆𝗼𝘂𝗿 𝗻𝗮𝗺𝗲, 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲, 𝗮𝗻𝗱 𝗳𝗿𝗶𝗲𝗻𝗱'𝘀 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲𝘀 */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
</style>


<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗼𝗿𝗱𝗲𝗿 𝗳𝗼𝗿 𝘁𝗵𝗲 '𝗖𝗢𝗡𝗧𝗔𝗖𝗧𝗜𝗡𝗚 [𝗡𝗔𝗠𝗘]' 𝗮𝗻𝗱 '𝗦𝗣𝗔𝗖𝗘𝗛𝗘𝗬 𝗨𝗥𝗟' 𝗵𝗲𝗮𝗱𝗲𝗿𝘀 */
.profile .url-info {
border: 0px solid rgba(0, 0, 0, 1);    
}
.profile .contact {
border: 0px solid rgba(0, 0, 0, 1);  
padding-bottom: 3px !important;   
padding-top: 3px !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
.profile .table-section {
border: 0px solid rgba(0, 0, 0, 1);     
}

</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗼𝗿𝗱𝗲𝗿 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗳𝗶𝗹𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁𝘀 */
table.comments-table {
border: 7px solid rgba(0, 0, 0, 1);     
border-radius:15px; 
}    
</style>

<style>

/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗦𝗽𝗮𝗰𝗲𝗛𝗲𝘆 𝗹𝗼𝗴𝗼 𝗶𝗻 𝘁𝗵𝗲 𝘁𝗼𝗽 𝗹𝗲𝗳𝘁 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗯𝗼𝘅 */
nav img.logo{filter: brightness(1000%) saturate(0%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); !important;}

</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗲𝗺𝗼𝗷𝗶𝘀 𝗶𝗻 𝘁𝗵𝗲 '𝗖𝗢𝗡𝗧𝗔𝗖𝗧𝗜𝗡𝗚 [𝗡𝗔𝗠𝗘]' 𝘀𝗲𝗰𝘁𝗶𝗼𝗻 𝗹𝗶𝗻𝗸𝘀 */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "⬜"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "⬜"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "⬜"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "⬜"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "⬜"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "⬜"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "⬜"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "⬜"
}   
</style>

<style>
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗰𝗼𝗹𝗼𝗿 𝗼𝗳 𝘁𝗵𝗲 𝗯𝗼𝘁𝘁𝗼𝗺 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗯𝗼𝘅 */
footer {
color: white !important;
background-color: rgba(0, 0, 0, 0.82);
  }    
</style>

<style>

/* 𝗧𝗵𝗶𝘀 𝗽𝗼𝗿𝘁𝗶𝗼𝗻 𝗼𝗳 𝘁𝗵𝗲 𝗰𝗼𝗱𝗲 𝗶𝘀 𝗮 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗱 𝘃𝗲𝗿𝘀𝗶𝗼𝗻 𝗼𝗳 𝗮 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗺𝗮𝗱𝗲 𝗯𝘆 𝗖𝗿𝗶𝘀𝘁𝗶𝗮𝗻𝗮 - 𝗵𝘁𝘁𝗽𝘀://𝗹𝗮𝘆𝗼𝘂𝘁𝘀.𝘀𝗽𝗮𝗰𝗲𝗵𝗲𝘆.𝗰𝗼𝗺/𝗹𝗮𝘆𝗼𝘂𝘁?𝗶𝗱=𝟭𝟴𝟲𝟲 */ 

/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝗶𝗺𝗮𝗴𝗲𝘀 𝗽𝗿𝗲𝘀𝗲𝗻𝘁 𝗼𝗻 𝘁𝗵𝗲 𝘀𝗶𝗱𝗲𝗯𝗮𝗿𝘀; 𝗲𝗮𝗰𝗵 𝗮𝗿𝗲 𝗹𝗮𝗯𝗲𝗹𝗲𝗱 */ 
:root {
    --image1: url("#");
    --image2: url("#");
    --image3: url("#");
    --image4: url("#");
    --image5: url("#");
    --image6: url("#");
/* 𝗹𝗲𝗳𝘁 𝘁𝗼𝗽 */
    --image7: url("https://i.pinimg.com/originals/2d/7e/5c/2d7e5c2a992fa93846a9e477c3dc12ec.jpg");
/* 𝗹𝗲𝗳𝘁 𝗺𝗶𝗱𝗱𝗹𝗲 */
    --image8: url("https://i.pinimg.com/originals/09/88/a4/0988a4854c13e075c9106744ab9f0bdb.jpg");
/* 𝗹𝗲𝗳𝘁 𝗯𝗼𝘁𝘁𝗼𝗺 */
    --image9: url("https://i.pinimg.com/originals/f5/75/f3/f575f30c813a3f6be909f0b50fb3eacf.jpg");
    --image10: url("#");
/* 𝗿𝗶𝗴𝗵𝘁 𝘁𝗼𝗽 */
    --image11: url("https://i.pinimg.com/originals/ed/af/f8/edaff85dca72737b35cb21686c6ebfce.jpg");
/* 𝗿𝗶𝗴𝗵𝘁 𝗺𝗶𝗱𝗱𝗹𝗲 */
    --image12: url("https://i.pinimg.com/originals/a1/87/79/a187793ddc3800ad1ddac8901d2f3922.jpg");
/* 𝗿𝗶𝗴𝗵𝘁 𝗯𝗼𝘁𝘁𝗼𝗺 */
    --image13: url("https://i.pinimg.com/originals/6a/70/03/6a7003e6fb3c1f0e6592e92b28646263.jpg");
    --image14: url("#");
}
.container {
    margin-top: 0px;
}
.side-photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 110px;
    width: 270px;
}
.banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    padding: 30px;
}
.side-photos.leftside {
    left: 42px;
}
.side-photos.rightside {
    right: 42px;
}
/* 𝗧𝗵𝗶𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝘁𝗵𝗲 𝘀𝗶𝘇𝗲 𝗮𝗻𝗱 𝗮𝘀𝗽𝗲𝗰𝘁 𝗿𝗮𝘁𝗶𝗼 𝗼𝗳 𝘁𝗵𝗲 𝗶𝗺𝗮𝗴𝗲𝘀 𝗼𝗻 𝘁𝗵𝗲 𝘀𝗶𝗱𝗲𝗯𝗮𝗿 */ 
.polaroid {
    background: white;
    height: 266px;
    width: 214px;
    box-shadow: 5px 5px 10px #515151;
    padding: 12px;
}
.banner:hover, .side-photos:hover {
    z-index: 1;
}
.polaroid:hover {
    z-index: 1;
} 
.banner.polaroid:not(div:first-child) {
    margin-left: -10px;
}
.side-photos.polaroid {
   margin-top: -10px;
}
.image {
    height: 190px;
    width: 190px;
    background-color: grey;
    background-size: cover;
    background-position: center;
}
#image1 {
   background-image: var(--image1);
}
#image2 {
   background-image: var(--image2);
}
#image3 {
   background-image: var(--image3);
}
#image4 {
   background-image: var(--image4);
}
#image5 {
   background-image: var(--image5);
}
#image6 {
   background-image: var(--image6);
}
#image7 {
   background-image: var(--image7);
}
#image8 {
   background-image: var(--image8);
}
#image9 {
   background-image: var(--image9);
}
#image10 {
   background-image: var(--image10);
}
#image11 {
   background-image: var(--image11);
}
#image12 {
   background-image: var(--image12);
}
#image13 {
   background-image: var(--image13);
}
#image14 {
   background-image: var(--image14);
}
.skewleft {
    transform: rotate(20deg);
}
.skewright {
    transform: rotate(-20deg);
}
.caption {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 64px;
    overflow: hidden;
    text-align: center;
    line-height: 24px;
    color: #0f2440;
}
#credit {
    position: fixed;
    bottom: 3px;
    left: 3px;
    font-family: sans-serif;
    font-size: 10px;
    color: black;
    background: white;
    padding: 2px;
    border-radius: 2px;
    z-index: 5;
    letter-spacing: 1px;
}


@media screen and (max-width: 800px) {

.container {
    margin-top: 525px;
}
.polaroid {
    height: 125px;
    width: 100px;
    padding: 10px;
}
.image {
    width: 80px;
    height: 80px;
}
.caption {
    height: 33px;
    font-size: 10px;
    line-height: 14px;
    margin: 1px 0;
}
.side-photos {
    flex-direction: row;
    top: 150px;
}
.side-photos.leftside {
    left: 30px;
    top: 275px;
}
.side-photos.rightside {
    right: 60px;
    top: 400px;
}
.banner {
    height: auto;
    flex-wrap: wrap;
}

}
</style>

<div class="side-photos leftside">
    <div class="">
        <div class="image" id="image7"></div>
        <div class="caption"></div>
    </div>
    <div class="">
        <div class="image" id="image8"></div>
        <div class="caption"></div>
    </div>
    <div class="">
        <div class="image" id="image9"></div>
        <div class="caption"></div>
    </div>
</div>
<div class="side-photos rightside">
    <div class="">
        <div class="image" id="image11"></div>
        <div class="caption"></div>
    </div>
    <div class="t">
        <div class="image" id="image12"></div>
        <div class="caption"></div>
    </div>
    <div class="">
        <div class="image" id="image13"></div>
        <div class="caption"></div>
    </div>
</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 0 of 0 comments ( View all | Add Comment )