Report Blog Entry
Hola este es mi primer diseño para los perfilees espero que les guste, me tarde bastante tiempo ya que soy principiante y no se mucho sobre codigos html y css pero hice lo mejor que pude, espero les gustee.
copia y pega en ¨About Me¨
----------------------------------------------Theme:-----------------------------------------------
<img src="https://i.pinimg.com/originals/42/1b/67/421b67cd9f18c775761e0b30dab64745.jpg" height="auto" width="100%"/>
<style>
h1 {
color: white;
}
h1, h2, h3, h4,p {color: white;}
:root {
--darker-blue: white;
</style>
<style>
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
width: 2px;
border: 1px dotted #8F7EA0;
}
::-webkit-scrollbar-thumb {
background-color: #8F7EA0;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #8F7EA0;
}
/* custom contact */
.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 me */
content: "✚"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* faves? */
content: "☑"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* chit chat */
content: "⥂"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forwardd */
content: "➨"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant chat */
content: "✉"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block */
content: "✘"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* group me */
content: "❧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☠"
}
/* this is the comments table scroll code.
you can delete this if you don't want a scroll box */
.comments-table {
display: block;
height: 400px!important;
overflow-y: scroll;
border: 0px dotted #000 !important;
outline: none !important;
border-radius: none;
padding:5px;
}
.comments-table td:first-child *{
color: var(--text);
}
.comments-table td{
border: 2px solid black;
padding:10px;
border-radius: 0px;
}
footer{
background: transparent;
}
footer a{
color: #8F7EA0;
}
footer p{
color: #8F7EA0;
}
/* . hidden things */
.blurbs .heading {display:none;} /* hides the blurbs title */
.profile .left .table-section:last-child {display:none;} /* hides the links section */
.url-info {display:none;} /* hides url box */
.details-table td:first-child{display:none;} /* hides general, music, etc titles */
.blurbs .inner .section:nth-child(2) {display:none;} /* hides the "who I'd like to meet" */
.blog-preview h4 {display:none;} /*hides blog names */
/* this is the grain that appears over the profile */
html:before {
animation: grain 8s steps(10) infinite;
background-image: url(https://c.tenor.com/Kn6zmdl2v3kAAAAC/stars-universe.gif);
content: "";
height: 300%;
left: -50%;
opacity:.2;
position: fixed;
top: -110%;
width: 300%;
pointer-events:none;
}
@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}
/* your interest and comments table row background color */
td{
background-color: transparent!important;
}
/* the hr code.
the hr is the horizontal line when you want to
separate important info or add a break in your paragraphs*/
hr{
height:1px;
background: #8F7EA0;
border: none!important;
}
body{
background-color: black;
text-align: center;
}
.container{
width:52%;
}
.online{
content:url(https://i.ibb.co/tb4gnD0/ii.png);
}
/* the search wrapper and button */
.search-wrapper input[type=text] {
background-color: rgba(0, 0, 0, 0.5) !important;
border: 1px solid #8F7EA0!important;
color:#8F7EA0!important;
}
button{
border: 0px solid #8200FF!important;
font-family: 'IM Fell DW Pica SC', serif;!important;
background-color:rgba(0, 0, 0, 0.5)!important;
color: #8F7EA0 !important;
}
/* the navigation is adjusted here */
nav{
background-color: transparent;
border: none;
text-align: center;
}
nav .top{
color: #8F7EA0; /* line that appears between help/login/signup */
}
nav .top, nav .links {
background-color: transparent;
}
nav .links{
border-top:1px solid #8F7EA0;
border-bottom:1px solid #8F7EA0;
}
@import url("https://fonts.google.com/specimen/Yeseva+One#standard-styles");
.w-40 h1{
font-family: Yeseva One;
font-size: 40px;
text-align: center;
background: url('https://lh5.googleusercontent.com/-h-uo-W1W1gs/U0FGWCMKSAI/AAAAAAAANQU/MTmwgtU-vqQ/s250-no/21.gif');
-webkit-background-clip: text;
-webkit-text-fill-color: #8F7EA0;
-webkit-text-stroke: 0px white;
}
/* the header section of the boxes */
.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading{
background: url('https://lh5.googleusercontent.com/-h-uo-W1W1gs/U0FGWCMKSAI/AAAAAAAANQU/MTmwgtU-vqQ/s250-no/21.gif');
background-size: contain;
border: 1px solid white;
font-family: 'IM Fell DW Pica SC', serif;
font-size: 12px!important;
font-weight: bold;
color:white;
text-align: center;
text-shadow: 1px 1px 5px white;
}
/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */
.profile-info {
background-color: transparent !important;
border:none !important;
}
/* adjusting images borders and adding styling if you want to */
.profile-pic img{
background: url('https://lh5.googleusercontent.com/-h-uo-W1W1gs/U0FGWCMKSAI/AAAAAAAANQU/MTmwgtU-vqQ/s250-no/21.gif');
background-size: 30%30%;
padding:5px;
}
main{
background: transparent;
border: transparent;
outline: none;
}
:root{
--headers: #8200FF;
--text: #8F7EA0;
--names: #6E19BF;
--links: #AB19BF;
--logo-blue: #fffffff;
--darker-blue: #F8F1FF;
--lighter-blue: #ffffff;
--even-lighter-blue: #8F7EA0;
--lightest-blue: #ffffff;
--dark-orange: #8F7EA0;
--light-orange: #ffffff;
--even-lighter-orange: #fffffff;
--green: #8F7EA0;
}
* {
font-family: monospace;
</style>
<style>
.blog-preview :not(:first-child) {
width: 110px;
text-align: center;
display: inline-block;
padding-right: 15px;
}
.blog-preview :not(:first-child):before {
content: "";
display: block;
width: 96px;
height: 60px;
background: url(https://64.media.tumblr.com/638678a2ad3aa7e77c3e4e90a8d33357/ea710a1c1fafebe8-2e/s640x960/a39698db72ad965cb3417ff668814e8adf761694.gifv);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym637.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym637.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/26/shiny-grey-star.html" target="_blank" title="Shiny Grey Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Shiny Grey Star" style="position:absolute; top: 0px; right: 0px;"/></a>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Melrose
Post this in layouts when that section is reopened. I like the color theme and the image you used. Very nicely made.
Thanks!!
by 𝔚𝔦𝔫𝔬𝔣𝔬𝔯𝔢𝔳𝔵𝔯; ; Report