Skip to content

Instantly share code, notes, and snippets.

@hustKiwi

hustKiwi/dabblet.css

Last active September 8, 2019 09:03
Show Gist options
  • Save hustKiwi/17d8bc2309a3670f0e7a3aae3045962c to your computer and use it in GitHub Desktop.
Save hustKiwi/17d8bc2309a3670f0e7a3aae3045962c to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
#blurred-bg {
background: url('https://images.unsplash.com/photo-1565396257124-2c1627e8b3b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2851&q=80') no-repeat center center;
background-size: cover;
height: 350px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
filter: blur(3px);
}
#name {
background: transparent;
text-align: center;
padding-top: 100px;
}
#name h1 {
color: #fff;
font-size: 60px;
}
#name h1 span {
color: #94a3ba;
font-size: 24px;
display: block;
font-weight: lighter;
}
#name img {
width: 260px;
height: 260px;
border-radius: 50%;
padding: 10px;
background: #edeff5;
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
</head>
<body>
<div id="blurred-bg"></div>
<div id="name">
<h1>John Roberts<span>BUSINESS EXPERT</span></h1>
<img
src="https://static.wixstatic.com/media/86f442ff0674441faadc2994b1b33e77.jpg/v1/crop/x_130,y_160,w_1320,h_1311/fill/w_496,h_488,al_c,q_80,usm_0.66_1.00_0.01/86f442ff0674441faadc2994b1b33e77.webp"
alt="John Roberts"
/>
</div>
<div id="about-me">
<h2>ABOUT ME</h2>
<ul>
<li>
<a href="https://www.linkedin.com/company/wix-com" target="_blank"
>LinkedIn</a
>
</li>
<li>
<a href="https://twitter.com/wix" target="_blank">Twitter</a>
</li>
<li>
<a href="https://www.facebook.com/wix" target="_blank">Facebook</a>
</li>
</ul>
<div>
<p>
I'm a paragraph. Click here to add your own text and edit me. It’s
easy. Just click “Edit Text” or double click me to add your own
content and make changes to the font. Feel free to drag and drop me
anywhere you like on your page. I’m a great place for you to tell a
story and let your users know a little more about you.
</p>
<p>
I'm a paragraph. Click here to add your own text and edit me. It’s
easy. Just click “Edit Text” or double click me to add your own
content and make changes to the font. Feel free to drag and drop me
anywhere you like on your page. I’m a great place for you to tell a
story and let your users know a little more about you.
</p>
<p>
I'm a paragraph. Click here to add your own text and edit me. It’s
easy. Just click “Edit Text” or double click me to add your own
content and make changes to the font. Feel free to drag and drop me
anywhere you like on your page. I’m a great place for you to tell a
story and let your users know a little more about you.
</p>
<p>
I'm a paragraph. Click here to add your own text and edit me. It’s
easy. Just click “Edit Text” or double click me to add your own
content and make changes to the font. Feel free to drag and drop me
anywhere you like on your page. I’m a great place for you to tell a
story and let your users know a little more about you.
</p>
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment