Notes
Notes - notes.io |
@import url('http://fonts.googleapis.com/css?family=Bree+Serif')
body
background url('http://i.imgur.com/VM0LduR.png')
padding-top 50px
.title
font-family 'Bree Serif'
margin-left 45px
font-size 1.8em
.description
margin-left 45px
margin-right 45px
color #678889
font-size .8em
text-shadow 1px 1px 0 rgba(256,256,256,1.0)
margin-bottom 20px
#container
width 300px
height 350px
background #f3f3f3
padding-top 30px
margin auto
border-radius 5px
border 1px solid #fff
position relative
.loginInput
display block
width 70%
height 40px
margin auto
margin-top 10px
margin-bottom 10px
box-sizing border-box
transition all 0.30s ease-in-out
border 1px solid #ddd
border-radius 5px
outline none
padding: 0 25px
font-size 1.2em
text-shadow 1px 1px 0 rgba(256,256,256,1.0)
&:hover
background-color #dfe9ec
&:focus
box-shadow: 0 0 5px rgba(81, 203, 238, 1)
border: 1px solid rgba(81, 203, 238, 1)
background-color #dfe9ec
&:nth-child(3)
margin-bottom 20px
#footer
position absolute
top 285px
right 0
left 0
bottom 0
background-color #d4dedf
overflow hidden
padding-top 30px
border-top 1px solid #fff;
text-align center
#register
display inline
padding-right 50px
font-family 'Bree Serif'
font-size 1.2em
text-shadow 0px 1px 0 rgba(256,256,256,0.5)
.register
text-decoration none
color black
&:hover
color #3f9db8
#circle
display inline
margin 0 auto
text-align center
font-size 1.2em
color #fff
width 100px
height 30px
font-family 'Bree Serif'
border-radius 5px
padding 5px 15px
background #56c2e1
border 1px solid #46b3d3
border-radius 5px
transition all 0.30s ease-in-out
cursor pointer
&:hover
background #3f9db8
border 1px solid rgba(256,256,256,0.75)
box-shadow inset 0 1px 3px rgba(0,0,0,0.5);
#anim
display none
margin 0
&:checked + #circle
color transparent
padding-top 30px
padding-right 20px
font-size 0
border-radius 50%
border-color #488214
background-color #BCED91
background-repeat no-repeat
background-position center center
background-image url('http://i.imgur.com/RbhLLwJ.gif')
HTML kodları;
#container
h1.title Login Form
p.description Fill out the form below to sell your soul to the css overlord.
input(placeholder='Username').loginInput
input(placeholder='Password', type='Password').loginInput
#footer
span#register
a(href='#').register Register
input#anim(type="checkbox" name="animation")
label#circle(for='anim') Login
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
