madoka magica!

Tags: madoka magica, madoka, pink, cute, lovecore, cutecore, pastel, voxnaa

Description:

slightly simple madoka layout!!! ^____^

[the pc version looks better on an actual pc, i code on mobile and since firefox comes with a computer mode i use that instead-]

live view(open 4 limited time): https://spacehey.com/profile?id=1921099
CLOSED
mobile view:

working on pc view.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by  aerin 🍉 (autoplay) (https://layouts.spacehey.com/layout?id=38385) -->

<div style="float:  ; max-height: 1000px; position: fixed; right: 1px; bottom: 9px; z-index: 200;"><img src="https://media.tenor.com/APfI3AiwfyMAAAAi/modka.gif" width="300" height="500"/></div>


<style>
/*font*/
@font-face{
font-family: "rah";
src: url('https://dl.dropbox.com/scl/fi/cpanergv360fua7ijkc6n/PeaberryBase.ttf?rlkey=aygjs4tbi8aau3nmfxai2f693');

}

*, nav .links, nav > .top, .logout-btn, footer{
font-family: "rah";
color: black;

}

</style>

<style>
/*profile pic*/
.profile-pic, .profile-pic img{
height: 100px!important;

}

</style>

<style>
/*notif*/
nav .links li .icon{
content: url('https://noviecita.crd.co/assets/images/gallery05/b6382b23_original.gif?v=6711d211');

}

</style>

<style>
/*bg*/
body{
background-image: url('https://ishimori.crd.co/assets/images/gallery10/7b0f8073_original.jpg?v=5ccd831e');

}

</style>

<style>
/*prof switch*/
/*flip profile*/
.profile{
direction: rtl;

}

.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood{
direction: ltr;

}

</style>

<style>
/*madoka blog buddy*/
.blog-preview {
    background: url(https://media3.giphy.com/media/91rSUmuf9yliM/giphy.gif?cid=6c09b952svshm2auq1gej66teba3cbxjl05obvtbk4ll4a90&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=s) no-repeat 0% 50%;
    background-size: 100px auto;
    padding: 10px; 
    margin-bottom: -15px!important;
    height: 100px;
    overflow: hidden auto;

}

</style>

<style>
/*blog h4*/
.blog-preview h4::before{
    content: "Magical Journal!";
font-size: 15px;

}

.blog-preview h4{
font-size: 0px!important;

}

</style>

<style>
/*logo*/
.logo{
content: url('https://i.ibb.co/VWr5DFt/Madoka-Magica2.png');

}

</style>

<style>
/*div after gen abt*/
.mood:after{
content: "";
  height: 34px;
  background-image: url(https://i.ibb.co/F8YmGYp/X22ysP4.png);
  background-repeat: no-repeat;
  background-position-x: center;
display: block;

}

</style>

<style>
/*main bg & stuff*/
main .right{
 background: repeating-linear-gradient(45deg, #FFCBCF, #FFCBCF 10px, #FFB6BB 10px, #FFB6BB 20px)!important;
background-size: 4px 4px;
padding: 15px;

}

main{
border: 8px solid white;

}

</style>

<style>
/*blurbs h4*/
.blurbs .heading h4{
font-size: 0px;
color: black;

}

.blurbs .heading h4:before{
content: "Info!";
font-size: 15px;

}

</style>

<style>
/*hide borders*/
.profile-info, .url-info, .comments-table, .contact{
border: 0px solid!important;

}

</style>

<style>
/*"____ is ur friend/edit prof"*/
.profile-info{
background-color: white;
border-radius: 40px;
overflow: hidden;
color: black;

}

</style>

<style>
/*interests n links*/
.table-section:nth-of-type(odd){
height: 30px;
overflow-y: hidden;
transition: all 0.3s ease!important;
border: none!important;

}

.table-section:nth-of-type(odd):hover{
height: 170px;
overflow-y: auto;
transition: all 0.3s ease!important;

}

.table-section:nth-of-type(odd) h4{
font-size: 0px;

}

.table-section:nth-of-type(odd) h4:before{
content: "Interests!";
font-size: 20px;

}

.table-section:nth-of-type(even){
height: 30px;
overflow-y: hidden;
transition: all 0.3s ease!important;
border: none!important;

}

.table-section:nth-of-type(even):hover{
height: 170px;
overflow-y: auto;
transition: all 0.3s ease!important;

}

.table-section:nth-of-type(even) h4{
font-size: 0px;

}

.table-section:nth-of-type(even) h4:before{
content: "Links!";
font-size: 20px;

}

.table-section .heading{
background-color: white!important;
border-radius: 20px;
overflow: hidden;
color: black!important;

}

</style>

<style>
/*img hover*/
img:hover{
  animation: shake 0.5s; 
  animation-iteration-count: infinite; 
}
 
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>

<style>
/*contact h4*/
.contact .heading h4{
font-size: 0px;

}

.contact .heading h4:before{
content: "Contact Me!";
font-size: 15px;

}

</style>

<style>
/*friends & comments table h4*/
.friends .heading h4{
font-size: 0px;

}

</style>

<style>
/*url-info bg*/
.url-info{
font-size: 0px!important;
width: 100%;
	height: 300px ;
	display: block;
	content: "";
	background-image: url('https://media.tenor.com/0InQCYnhLucAAAAd/madoka-kaname-madoka-magica.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;

}

</style>

<style>
/*nav*/
nav > .top{
background: transparent;

}

nav .links{
background: transparent;

}

nav .links a, nav .links li .special a{
    text-shadow: none;
color: black;

}

</style>

<style>
/*comments & friends scroll*/
.friends .heading{
display: none;

}

.friends:nth-of-type(even){
height: 30px;
overflow-y: hidden;
transition: all 0.3s ease!important;
border: none!important;

}

.friends:nth-of-type(even):hover{
height: 170px;
overflow-y: auto;
transition: all 0.3s ease!important;

}

.friends:nth-of-type(odd){
height: 30px;
overflow-y: hidden;
transition: all 0.3s ease!important;
border: none!important;

}

.friends:nth-of-type(odd):hover{
height: 170px;
overflow-y: auto;
transition: all 0.3s ease!important;

}

</style>

<style>
/*root*/
:root{
--darker-blue: black;

}

</style>

<style>
/*table section, comment and friend bgs*/
.details-table{
    background: white radial-gradient(circle at 0 0, #FFCBCF 2px, transparent 0);
    background-size: 4px 4px;
    padding: 15px;

}

.comments-table{
    background: white radial-gradient(circle at 0 0, #FFCBCF 2px, transparent 0);
    background-size: 4px 4px;
    padding: 15px;

}

.friends-grid{
background-color: white;
    background-size: 4px 4px;
    padding: 15px;

}

.details-table td:first-child{
background-color: #FFB6BB;

}

.details-table td:last-child{
background-color: #FFB6BB;

}

#comments td:first-child{
background-color: #FFB6BB;
border: none!important;
}

#comments td:last-child{
background-color: #FFB6BB;
border: none!important;

}

</style>

<style>
/*contact*/
.contact .heading{
background-color: white!important;

}

.contact .inner a img{
font-size: 0px;

}

</style>

<style>
/*online*/
.online img{
content: url('https://wilardo.crd.co/assets/images/gallery20/2353a04a_original.gif?v=9648e3e8');

}

.online{
color: black;

}

</style>

<style>
/*blurbs*/
.blurbs .heading{
background-color: white!important;
border-radius: 20px;
overflow: hidden;

}

.blurbs h4 {
    font-size:0px;

}

</style>

<style>
/*count*/
.count{
color: white;

}

</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.