Ice Blue Layout

Tags: ice, blue, pastel, frozen, cold, white, layout, simple, winter

Description:

Simple ice blue layout made by me.

Profile pictures blur slightly when hovering over them.

Credit isn't needed but is appreciated, enjoy!

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Underdog&display=swap');

body{ 
background-image: url(https://images4.imagebam.com/f6/03/a0/ME5CLFN_o.jpg);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

.container{
margin: 0 auto;
}

main{
background-color: transparent;
}

nav{
margin: 2em 0em 0em 0em;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
}

nav .top{
background-color: rgba(133, 222, 255, .7);
border-right: 2px solid #D2F2FF;
border-top: 2px solid #D2F2FF;
border-left: 2px solid #D2F2FF;
}

nav .links{
background-color: rgba(119, 196, 227, .7);
border-right: 2px solid #D2F2FF;
border-bottom: 2px solid #D2F2FF;
border-left: 2px solid #D2F2FF;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

nav li::after{
display: none;
}

.profile .general-about{
background-color: rgba(119, 196, 227, .7);
border: 2px solid #D2F2FF;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
padding: 1em;
color: white;
}

.profile-pic img{
border: 1px solid white;
border-radius: 100%;
box-shadow: 2px 2px 5px white;
}

.profile-pic img:hover{
filter: blur(2px);
}

.general-about .profile-pic{
margin: 0;
}

.profile h1{
font-family: 'Underdog', cursive;
color: #296B7C;
font-size: 30px;
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
text-align: center;
padding: .5em;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
text-shadow: 2px 2px 5px white;
}

.profile .profile-info{
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
color: #4494A9;
}

.profile .blog-preview{
color: white;
text-align: center;
}

.profile .mood{
background-color: transparent;
text-align: center;
color: white;
padding: .5em;
margin: .5em 0em .5em 0em;
}

.profile .contact .heading,
.profile .table-section .heading{
padding: .5em;
font-family: 'Underdog', cursive;
font-size: 20px;
line-height: 1.5em;
color: #4494A9;
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
text-align: center;
padding: .5em;
text-shadow: 2px 2px 5px white;
}

.profile .table-section,
.profile .contact{
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
}

.profile .url-info{
color: white;
text-align: center;
background-color: transparent;
border: none;
}

table.details-table td {
background-color: transparent !important;
color: #296B7C !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
padding: .5em;
font-family: 'Underdog', cursive;
font-size: 20px;
line-height: 1.5em;
color: #4494A9;
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
text-align: center;
padding: .5em;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
text-shadow: 2px 2px 5px white;
}

.profile .blurbs .section h4{
color: #296B7C;
text-shadow: 2px 2px 5px white;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs .section p{
color: #296B7C;
text-align: center;
}

.profile .blurbs{
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
}

.profile .friends .inner{
text-align: center;
color: #296B7C;
}

.profile .friends .friends-grid p{
color: #296B7C;
}

.profile .comments-table{
color: #296B7C;
text-align: center;
background-color: rgba(133, 222, 255, .7);
border: 2px solid #D2F2FF;
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
}

.profile .comments-table .comment-replies{
box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);
background-color: rgba(119, 196, 227, .7);
border: 2px solid #D2F2FF;
color: #4494A9;
}

.profile .comments-table td{
background-color: transparent;
color: #296B7C;
padding: .5em;
}

.comments-table img{
border-radius: 100px;
}

.comments-table img:hover{
filter: blur(2px);
}

.person img{
border-radius: 100px;
}

.person img:hover{
filter: blur(2px);
}

footer{
background-color: transparent;
color: #296B7C;
}

a{
color: white;
text-shadow: 1px 1px 3px rgba(0, 23, 14, 0.3);
}

a:visited {
color: white;
text-shadow: 1px 1px 3px rgba(0, 23, 14, 0.3);
}

a:hover {
color: #2AB2D6;
text-shadow: 2px 2px 5px white;
}

a:active {
color: #86E6FF;
}

nav .links a:hover{
color: #2AB2D6;
text-shadow: 2px 2px 5px white;
}

.count{
color: #2AB2D6;
text-shadow: 2px 2px 5px white;
}

.online{
color: white;
font-family: 'Underdog', cursive;
text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);
font-weight: bold;
font-size: 150%;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

.online img{
display: none;
}

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

4ecstasy	1672789676 used this to create my layout ☆ ～('▽^人) Report Comment
Rex	1656535150 Will use Report Comment
Chloe Price	1650765565 I cant find where to type for about me and such! Report Comment Type your "about me" outside of the code copied from here. by BEEFSTEW; 1650785588; Report so what just at the bottom after all of the code?? by Chloe Price; 1650800363; Report Yes that works, or before it too. Anywhere outside of the < style > element. by BEEFSTEW; 1650830655; Report
Tietheguy216	1647458973 Thank u this looks amazing Report Comment
PJ	1637277410 Really like the icy look..thank you! Report Comment
Tinykakes Funsize Turner	1636660099 I love the blue color. My sister who passed away from covid19 blue was her favorite color. I would like to use this layout but I’m having a hard time receiving it or I’m not doing something right. Report Comment To use the layout, all you need to do is copy everything under the code, go to "edit profile", and then paste it under the "about me" section. I hope this helps, let me know if you're still having trouble, I'm sorry for your loss. by BEEFSTEW; 1636660504; Report Thank you so much I really appreciate it by Tinykakes Funsize Turner; 1636660616; Report Im going to use this layout and study it. Im learning how to code and I want to try an make my own. Thanks so much for the layout code :) by CyberBabeJaide; 1636718903; Report