WIP: Dropdown
Table of contents
Evaluation
#1 - Main Website
Screenshot
Elements
- Link
- Horizontal rule
- List
Attributes
Typography
- font-family:
Source Sans Pro
- font-weight:
400
- font-size:
18px
Colors
- text-color:
#ffffff
- background:
#4a86cf
On Hover
- text-color:
#8ed5ff
Spacing
- letter-spacing:
1px
- line-height:
68px
- padding:
0 15px
- margin:
0
Screenshot
Elements
- Link
- Horizontal rule
- List
Attributes
Typography
- font-family:
Source Sans Pro
- font-weight:
400
- font-size:
18px
Colors
- text-color:
#ffffff
- background:
#4a86cf
On Hover
- text-color:
#8ed5ff
Spacing
- letter-spacing:
1px
- line-height:
68px
- padding:
0 15px
- margin:
0
#2 - Extensions
Screenshot
Elements
- Input
- Button
- Link
- Horizontal rule
- List
Attributes
Typography
- font-family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
- font-size:
14px
Colors
- background:
#ffffff
- text-color:
#555555
- border:
#cccccc
- shadow:
rgba(0, 0, 0, 8%)
- buttons:
- GNOME Blue
#337ab7
- GNOME Green
#5cb85c
- GNOME Blue
Spacing
- right:
0
- left:
auto
- margin-top:
18px
- margin-right:
-15px
- margin-left:
-15px
- display:
block
- padding:
15px 15px
- min-width:
220px
- position:
absolute
- border:
1px solid
- line-height:
1.6
- border-radius:
6px
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
- font-size:
11.2px
Colors
- background:
#eeeeec
- text-color:
#555555
On Hover
- text-color:
#3465a4
- background-color:
#f4f4f4
Spacing
- padding:
0.2em 0.4em
- margin:
0 0.6em
- border-radius:
4px
- text-decoration:
none
- line-height:
1.6
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
- font-size:
14px
Colors
- background:
#ffffff
- text-color:
#2e3436
- border-color:
rgba(0, 0, 0, .15)
Spacing
- border-radius:
6px
- margin-top:
18px
- right:
0
- left:
auto
- display:
block
- padding:
15px 15px
- min-width:
220px
- position:
absolute
- list-style:
none
- border:
1px solid
#3 - Events Portal
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif
- font-size:
13px
Colors
- background:
#f9f9f9
- border-color:
#dfdfdf
- box-shadow:
#e1e1e1
- text-color:
#4a86cf
On Hover
- text-color:
#777
Spacing
- display:
block
- top:
88.6px
- left:
1155.74px
- border:
1px solid
- margin-top:
0
- padding:
0
- position:
absolute
- border-radius:
2px
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif
- font-size:
13px
Colors
- background:
#f9f9f9
- border-color:
#dfdfdf
- box-shadow:
#e1e1e1
- text-color:
#4a86cf
On Hover
- text-color:
#777
Spacing
- display:
block
- top:
88.6px
- left:
1346.99px
- border:
1px solid
- margin-top:
0
- padding:
0
- position:
absolute
- border-radius:
2px
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Roboto', sans-serif
- font-size:
13px
Colors
- background:
#f9f9f9
- border-color:
#dfdfdf
- box-shadow:
#e1e1e1
- text-color:
#4a86cf
On Hover
- text-color:
#777
Spacing
- display:
block
- top:
39.1px
- left:
1335.48px
- border:
1px solid
- margin-top:
0
- padding:
0
- position:
absolute
- border-radius:
2px
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Liberation Sans', sans-serif
- font-size:
13px
Colors
- text-color:
#454545
- background:
#ffffff
- link-color:
#0b63a5
Spacing
- position:
relative
- line-height:
12px
- padding:
15px 5px 0 5px
- text-align:
center
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Liberation Sans', sans-serif
- font-size:
13px
Colors
- text-color:
#555555
- background:
#ffffff
- border-color:
#dfdfdf
Spacing
- text-align:
center
- position:
relative
- padding:
5px 9px
- line-height:
12px
- width:
10px
- height:
10px
- border:
1px solid
- border-radius:
2px
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
'Liberation Sans', sans-serif
- font-size:
13px
Colors
- text-color:
#999
- background:
#333333
- border-color:
#555
On Hover
- text-color:
#f9f9f9
Spacing
- display:
block
- top:
50px
- left:
240.225px
- border:
1px solid
- box-shadow:
1px 1px 1px
- padding:
0
- position:
absolute
- border-radius:
2px
- padding:
0.1em 1em !important
- line-height:
1.7rem
#4 - Planet
None
#5 - Discourse
Screenshots
Elements
- Link
- List
- Button
Attributes
Typography
- font-family:
Source Sans Pro,Cantarell,Droid Sans,Ubuntu,DejaVu Sans,Arial,sans-serif
- font-size:
0.938em
Colors
- text-color:
#dddddd
- border-shadow:
#rgb(0 0 0 / 15%)
- background-color:
#222
On Hover
- background:
#4c3319
Spacing
- position:
absolute
- right:
-10px
- border:
1px solid
- box-shadow:
0 12px 12px
- padding:
0.5em
- flex-direction:
column
- line-height:
1.4
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
Source Sans Pro,Cantarell,Droid Sans,Ubuntu,DejaVu Sans,Arial,sans-serif
- font-size:
0.938em
Colors
- text-color:
#0f82af
- border-shadow:
#rgb(0 0 0 / 15%)
- background-color:
#222
On Hover
- background:
#4c3319
Spacing
- position:
absolute
- right:
-10px
- border:
1px solid
- box-shadow:
0 12px 12px
- padding:
0.5em
- flex-direction:
column
- line-height:
1.4
- list-style:
none
- margin:
0
Screenshot
Elements
- Link
- List
- Input
- Image
Attributes
Typography
- font-family:
Source Sans Pro,Cantarell,Droid Sans,Ubuntu,DejaVu Sans,Arial,sans-serif
- font-size:
0.938em
Colors
- background:
#222222
- border-color:
#313131
- text-color:
#909090
- box-shadow-color:
#00000033
On Hover
- background:
#052e3d
Spacing
- position:
fixed
- min-width:
220px
- max-width:
300px
- inset:
0px auto auto 0px
- margin:
0px
- transform:
translate3d(205px, 127px, 0px)
- flex-direction:
column
- border:
1px solid
- box-shadow:
0 2px 3px 0
- border-radius:
0
- box-sizing:
border-box
- line-height:
1.4
- flex:
1 0 auto
- padding:
0.5em
Screenshot
Elements
- Link
- List
- Input
- Image
Attributes
Typography
- font-family:
Source Sans Pro,Cantarell,Droid Sans,Ubuntu,DejaVu Sans,Arial,sans-serif
- font-size:
0.938em
Colors
- background:
#222222
- border-color:
#313131
- text-color:
#909090
- box-shadow-color:
#00000033
On Hover
- background:
#052e3d
Spacing
- position:
fixed
- min-width:
220px
- max-width:
300px
- inset:
0px auto auto 0px
- margin:
0px
- transform:
translate3d(332px, 127px, 0px)
- flex-direction:
column
- align-items:
center
- justify-content:
center
- border-radius:
0
- border:
1px solid
- box-shadow:
0 2px 3px 0
- box-sizing:
border-box
- line-height:
1.4
- flex:
1 0 auto
- padding:
0.5em
#6 - Developer Center
Screenshot
Elements
- Link
- List
Attributes
Typography
- font-family:
Cantarell, -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- font-size:
15.75px
Colors
- background:
rgba(0,0,0,0)
- text-color:
#9ca0a5
- text-color:
#2b8cee
Spacing
- display:
flex
- flex-direction:
column
- list-style:
none
- margin:
1px 0
- padding:
0
- line-height:
1.6
- position:
relative
- list-style:
none
- display:
inline-block
#7 - Wiki
None
#8 - Apps
None
#9 - Forty
None
#10 - Os
None
#11 - Circle
None
#12 - Release
None
Edited by Pooja Patel