Cards Evaluation
Table of contents
Evaluation
#1 - Main Website
Screenshot 1
Elements used:
<image>
<h2>
<p>
<image>
Spacing:
- padding:
0
; - border:
0
; - outline:
0
; - card-margin-left:
44px
; - card-margin-right:
44px
;
<h2>
Typography:
- font-weight:
500
; - font-size:
24px
; - font-family:
Source Sans Pro
;
Color:
- color:
#4a86cf
;
Spacing:
- text-padding-left:
52.4861
; - text-padding-right:
52.4861
; - line-height:
1.8
; - margin:
0 0 20px
; - card-width:
1112px
;
<p>
Typography:
- font-family:
Source Sans Pro
; - font-size:
16px
; - font-weight:
400
;
Color:
- color:
#494949
;
Spacing:
- margin:
0 0 20px
; - line-height:
24px
;
Screenshot 2
Elements used:
<h3>
<p>
<h3>
Typography:
- font-family:
Source Sans Pro
; - font-size:
18px
; - font-weight:
600
;
Color:
- color:
#333
;
Spacing:
- line-height:
1.2
; - margin:
0 0 20px
; - card-width:
584px
;
<p>
Typography:
- font-family:
Source Sans Pro
; - font-weight:
400
; - font-size:
16px
;
Color:
- color:
#494949
;
Spacing:
- line-height:
24px
; - margin:
0 0 20px
;
Screenshot 3
Elements used:
<h3>
<p>
<button>
<h3>
Typography:
- font-family:
Source Sans Pro
; - font-weight:
600
; - font-size:
18px
;
Color:
- color:
#333
;
Spacing:
- margin:
0 0 20px
; - line-height: 1.2;
- card-width:
378.663px
;
<p>
Typography:
- font-family:
Source Sans Pro
; - font-size:
16px
; - font-weight:
400
;
Color:
- color:
#494949
;
Spacing:
- margin:
0 0 20px
; - line-height:
24px
<button>
Typography:
- font-size:
1.125em
; - font-family:
Source Sans Pro
; - font-size:
18px
;
Color:
- background-color:
#4a86cf
; - color:
#fff
;
Spacing:
- line-height:
27px
; - padding:
14px 26px
; - border-radius: 10px;
#2 - Extensions
Screenshot 1
Elements used:
<image>
<link>
<datetime>
<p>
<image>
Spacing:
- card-width:
450px
; - width:
70px
; - position:
absolute
; - margin-left:
-90px
; - vertical-align:
middle
;
<link>
Typography:
- font-family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
; - font-size:
14px
; - font-weight:
700
;
Color:
- color:
#283e5e
; - visited-color:
color: #5d396e
;
Spacing:
- text-decoration:
underline
; - line-height:
1.6
;
<datetime>
Typography:
- font-family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
; - font-size:
14px
;
Color:
- color:
#999
;
Spacing:
- line-height:
1.6
;
<p>
Typography:
- font-family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif
; - font-size:
14px
;
Color:
- color:
#555
;
Spacing:
- margin:
0.4em 0 1em
; - line-height:
1.6
;
#3 - Events Portal
None
#4 - Planet
None
#5 - Discourse
Screenshot 1
Elements used:
<table>
<h3>
<text>
<table>
Color:
- border-bottom-color:
#313131
; - border-left-color: #0088CC;
Spacing:
- border-bottom:
1px solid
; - display:
table-row
; - border-spacing:
0
; - table-width:
537px
; - border-left: 6px solid;
- padding-left: 10px;
-
vertical-align: top;
- padding: 12px 5px;
<h3>
Typography:
Color:
Spacing:
<text>
Typography:
Color:
Spacing:
#6 - Developer Center
Screenshot
Elements
Image
Link
Typography
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- line-height:
1.6
- h3-font-size:
1.17em
- p-font-size:
18px
- h3-font-weight:
800
- h3-font-weight:
400
Colors
- color:
#f6f5f4
- background:
#5e5c64
Spacing
- flex-direction:
column
- width:
450px
- margin:
1rem 1rem
- line-height:
1.25
- justify-content:
center
- image-margin-left:
75px
- image-margin-right:
75px
- text-margin-left:
27px
- text-margin-right:
27px
- h3-margin-top:
1rem
- h3-margin-bottom:
0.5rem
- p-margin-bottom:
18px
- transform:
scale(1.05)
Screenshot
Elements
List
Link
Typography
- h3-font-size:
1.17em
- p-font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- p-font-weight:
400
- p-font-weight:
800
Colors
- background:
#241f31
- color:
white
Spacing
- padding:
1em
- flex-direction:
row
- justify-content:
center
- align-items:
center
- width:
432px
- text-align:
center
- line-height:
1.6
- color:
#1a5fb4
- transform:
scale(1.05)
- background-color:
#292432
- border-radius:
1rem
- transition:
all 300ms ease-out
- background-color:
rgb(61, 56, 70)
#7 - Wiki
None
#8 - Apps
Screenshot
Elements
List Image Link
Typography
- font-family:
Cantarell, sans-serif
- heading-font-size:
1.2em
- subheading:
16px
Colors
- text-color:
#deddda
- secondary-text-color:
#c0bfbc
- background-color:
#2d283c
Spacing
- box-sizing:
border-box
- display:
flex
- align-items:
center
- flex-direction:
column
- text-align:
center
- hyphens:
auto
- padding:
20px 15px
- height:
100%
- border-radius:
7px
- content-width:
217.5px
- height:
187.175px
- image-height:
64px
- image-margin-bottom:
0.7em
- background:
#241f31
- filter:
none
- transition:
0.3s filter
Screenshot
Elements
List
Link
Image
Badge
Typography
- font-family:
Cantarell, sans-serif
- font-size:
17px
Colors
- text-color:
#deddda
- background-color:
#2d283c
- link-color:
#99C1F1
Spacing
- margin:
0
- padding:
0
- list-style:
none
- display:
grid
- grid-template-columns:
repeat(auto-fill, minmax(300px, 1fr))
- column-gap:
25px
- row-gap:
50px
- width:
730px
- height:
167px
- align-items:
flex-start
- image-width:
80px
- icon-shadow:
drop-shadow(0 1.3px 1.6px rgba(0,0,0,.25)) drop-shadow(0 6.4px 11.2px rgba(0,0,0,.14))
- image-border-radius:
50%
- margin-inline-end:
30px
Screenshot
Elements
Link Image
Typography
- font-family:
Cantarell, sans-serif
- font-size:
17px
- h4-font-weight:
700
Colors
- text-color:
#deddda
Spacing
- display:
flex
- padding:
1em/17px
- border-radius:
7px
- cursor:
pointer
- width:
331px
Image
- padding:
10px
- height:
24px
- width:
24px
- margin-inline-end:
20px
- border-radius:
50%
- background:
#3f9fdf
- background-color:
#2d283c
- transition:
0.3s background-color
#9 - Os
None
#11 - Circle
Screenshot
Elements
- list
- link
- Image
Typography
- font-size:
18px
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- font-weight:
400
Colors
- background-color:
#0000000d
- color:
#deddda
Spacing
- display:
block
- border-radius:
10px
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- display:
flex
- text-decoration:
none
- flex-direction:
row
- justify-content:
flex-start
- align-items:
center
- width:
100%
- text-align:
left
- padding:
1em/18px
- background-color:
#3d3846
- transition-property:
all
- transition-duration:
200ms
- transition-timing-function:
ease-in-out
- transition-delay:
0s
- background-color:
#000000
Screenshot
Elements
- List
- Link
Typography
- font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- font-weight:
400
- font-weight:
bold
Colors
- background-color:
#0000000d
- color:
#deddda
Spacing
- display:
block
- border-radius:
10px
- font-size:
18px
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
- display:
block
- text-decoration:
none
- font-size:
0.9rem
- flex-direction:
row
- justify-content:
center
- align-items:
center
- width:
100%
- text-align:
center
- padding:
1em
- background-color:
#3d3846
- background-color:
#000000
#12 - Release
Mockups
Edited by Pooja Patel