Silvia's profile picture

Published by

published
updated

Category: SpaceHey

RETRO VIETNAM - PROFILE LAYOUT

profile design


<style> <!-- (c) Layout created by Silvia (https://spacehey.com/ilvia) --> @import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Gochi+Hand&family=Goudy+Bookletter+1911&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=SUSE+Mono:ital,wght@0,100..800;1,100..800&family=Varela+Round&family=Vina+Sans&display=swap'); :root{ --headers: #8A3F1F; --text: black; --names: #8A3F1F; --links: black; --borders: none; --font-family: 'Lora', serif; --curve: none; } h1, h3, h4, h5{color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ p, h2, .count {color: var(--text) !important;} /* color of text */ b:not(DIV.mood > P:nth-child(1) > B){color: var(--names)!important;} .profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */ nav label{color: var(--links) !important;} /* color of search */ .online{ color: black !important; text-transform: lowercase; } .logo { filter: brightness(0)!important;} .online img{ filter: brightness(0) !important; } .container {margin-left: 5%;} b {color: var(--headers);}  body{ background-image: url('https://i.pinimg.com/736x/05/69/79/0569798438188d2e21f06cdd9102479c.jpg'); background-color: #000; background-size: 20%, 100%; color: var(--text)!important; background-attachment: fixed; } nav{ background-color: rgba(200, 154, 61, 1); border: none; border-radius: 10px 10px 0px 0px; width: 110%; margin-top: 25px; } nav .top{ background: transparent; color:var(--links); } nav .top a, nav .links a{ color: var(--text); } nav .links{ background-color: transparent; border-radius: var(--curve); text-align: center; } nav .links a{ text-shadow: none; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " | "; color: black; } .search-wrapper input[type=text] { background-color: transparent !important; border: 1px solid var(--links) !important; color:var(--links) !important; border-radius: 2px; } button{ border-radius: var(--curve) !important; border: 0px solid var(--links) !important; font-family: var(--font-family) !important; background-color: transparent !important; color:var(--links) !important; } /* font family for the headers, navigtion links, links, body text */ h2, h3, h4, h5{ font-family: 'Vina Sans'; font-size: 18px!important; font-weight: 1; letter-spacing: 1px; } h1 { font-size: 24px !important; text-align: center; letter-spacing: 1px; font-family: 'Vina Sans'; border-bottom: 2px solid var(--headers);} a, p, b, nav label, .section{ font-family: var(--font-family) !important; font-size: 12px!important; font-weight: 1; letter-spacing: 1px; } hr{ height:1px; background: var(--links); border: none; } /* this is where you adjust the borders and background */ .blurbs, .friends, .blog-preview, .url-info{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: transparent!important; padding:5px; } .blog-preview p{ color: var(--text)!important; letter-spacing: 1px; } .contact{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: transparent!important; padding:5px; } .icon{ border:none !important; font-size: 10px; } td{ background-color: transparent!important; color: #2E2118; } main{ background: rgba(200, 154, 61, 1); border-radius: none!important; border: transparent !important; outline: none !important; width: 110%; } body { items-align: center;} .table-section{ border:none !important; background-color:transparent!important; border-radius: var(--curve) !important; } /* the header section of the boxes */ .heading, .blog-preview h4, .section h4{ background: none !important; } .profile-info { border-radius: var(--curve) !important; border: var(--borders) !important; background-color: transparent!important; padding:5px; } .friends-grid{ } .profile .friends .person{ width: 100px; } .profile .friends .person img{ width: 100px; height:100px; object-fit: cover; } .comments-table { border: none; border-radius: 8px; border-spacing: 5px; /* this changes the distance between boxes */ } #comments, .url-info, .table-section, .mood, .blog-preview{ margin-top:20px!important; } .mood{ margin-bottom:20px!important; } .comments-table td{ border: none; border-radius: 10px; background: none; background-size: 100%100%; } .comments-table td:first-child{ background: none; } footer{ background-color: rgba(200, 154, 61, 1); border: none; border-radius: 0px 0px 10px 10px; margin-top: 0px; width: 110%; margin-bottom: 25px; } ::-webkit-scrollbar { width: 2px; height: 3px; } ::-webkit-scrollbar-track { border-radius: var(--curve); border: 1px solid black; } ::-webkit-scrollbar-thumb { background: black; border-radius: var(--curve); } </style> <div style="float: ; max-height: 200px; position: fixed; right: 45px; bottom: 100px; z-index: 200;"> <img src="https://i.ibb.co/KjfYwyRP/Pngtree-aromatic-bowl-of-vietnamese-pho-20244875.png" height="320"></div>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )