diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..8f89d6a Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index f44229f..aaf137f 100644 --- a/index.html +++ b/index.html @@ -10,78 +10,7 @@
-

Sign up with your email address

-
-
- - - - - - - - - - -
-
- Date of birth - - - - - - -
-
- - - - - - - - -
-
- We may send you emails with news or promotions occasionally. Go to your Email notifications page to control the - messages we send. -
- - -
-
- - -
-
-
- - -
- Recaptcha logo -
re captcha
-
Privacy - Terms
-
-
- -
-

Already have an account? Log in

\ No newline at end of file diff --git a/style.css b/style.css index 4561b6a..3ebb5de 100644 --- a/style.css +++ b/style.css @@ -19,13 +19,16 @@ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary /* Spotify green: #1DB954 -liiiight gray: #f9f9f9 -border color: rgb(223, 224, 230); +Liiiight gray for captcha background: #f9f9f9 +Input border color: rgb(223, 224, 230); + +Other colors, if you want: Medium gray:#88898c "Black": #1c1c1f "DarkGray": #222326 */ + /* Use the 'Lato' font loaded in the head of the HTML document */ body{ font-family: 'Lato', sans-serif; @@ -34,151 +37,5 @@ body{ margin: 0 auto; max-width:425px; } +/*Write your styles here*/ -h2{ - text-align: center; - font-weight: 700; - margin: 20px 0 0 0 ; - font-size: 18px; -} -/* Use ::after for the select arrow */ - -input[type=text], -input[type=email], -input[type=password], -select{ - height: 48px; - padding: 0 13px; - width: 100%; - margin: 10px 0; - border:0; - border:1px solid rgb(223, 224, 230); -} - -a{ - color:#1DB954; -} -form{ - text-align:center; -} -fieldset{ - border:none; - text-align:left; -} -.dob legend{ - color:#88898c; -} -.dob input[type=text]{ - margin-top:0; -} -.dob input[type=text]:first-of-type, .dob input[type=text]:last-of-type{ - width: 25%; - float:left; -} -.dob select{ - width: calc(50% - 36px); - margin: 0 18px; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - float: left; - color:#88898c; - position: relative; - background-image: url(assets/br-down.png); - background-repeat: no-repeat; - background-position: 95% center; -} - -.gender{ - margin-bottom:10px ; -} -.gender input{ - margin-right:8px; -} -.gender label{ - margin-right:20px; -} -button[type=submit]{ - background-color: #1DB954; - border:none; - color:white; - text-transform: uppercase; - min-width: 320px; - padding:10px 20px; - border-radius:500px; - margin: 0 auto; -} - -.tos{ - font-size: 12px; -} - -.tosItem{ - position: relative; - margin:10px 0; -} -.tosItem input{ - position: absolute; - top:0; - left:0; -} -.tosItem label { - position: relative; - left:20px; - font-size: 12px; -} - -.captcha{ - background-color:#f9f9f9; - border:2px solid rgb(223, 224, 230); - width: 85%; - position: relative; - margin: 0 auto 20px auto; - -} -.captcha input{ - -webkit-appearance:none; - width:30px; - height:30px; - background:white; - border-radius:5px; - border:2px solid rgb(223, 224, 230); - margin:30px 10px 10px 10px; - float: left; -} -.captcha input:focus{ - box-shadow:0px 0px 3px blue; -} -.captcha input:active{ - box-shadow:0px 0px 3px red; -} -.captcha input:checked::after{ - content:'✔️'; - padding-left:2px; - line-height:1.8; -} -.captcha label{ - float: left; - margin-top:35px; -} -.captcha figure{ - float:right; - margin:15px 15px; -} -.captcha figure img{ - width:40%; -} -figcaption{ -font-size:0.8em -} -figcaption span{ - text-transform: uppercase; -} -.captcha a{ - color:#222326; - font-size: 0.7em; -} - -.login{ - text-align: center; -} \ No newline at end of file