Code Tag
Table of contents
Evaluation
#1 - Main Website
None
#2 - Extensions
Screenshot 1
Elements used:
<code>
<code>
Typography:
- font-size:
90%
; - font-family:
Menlo, Monaco, Consolas, "Courier New", monospace
;
Color:
- background:
rgba(0,0,0,0.1)
; - color:
#c7254e
;
Spacing:
- padding:
1px
; - border-radius:
4px
; - padding:
1px
; - line-height:
1.6
;
#3 - Events Portal
None
#4 - Planet!
Screenshot 1
Elements used:
<pre>
<code>
<pre>
Typography:
- font-size:
13px
; - font-family:
Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace
;
Color:
- color:
#777
; - background-color:
#f5f5f5
;
Spacing:
- margin:
auto 1em auto 1em
; - padding-left:
1em
; - padding:
9.5px
; - display:
block
; - line-height:
1.42857
;
Other CSS:
- word-break:
break-all
; - word-wrap:
break-word
;
Border:
- border:
1px solid #ccc
; - border-left:
5px solid #ddd
; - border-radius:
2px
;
<code>
Typography:
- font-size:
inherit
;
Color:
- color:
inherit
; - background-color:
transparent
;
Spacing:
- padding:
0
;
Other CSS:
- white-space:
pre-wrap
;
Border:
- border-radius:
0
;
Screenshot 2
Elements used:
<blockquote>
<code>
<blockquote>
Typography:
- font-size:
17.5px
;
Color:
- color:
#777
; - background-color:
#d9edf7
;
Spacing:
- margin:
auto 1em auto 1em
; - padding-left:
1em
; - padding:
15px
;
Border:
- border:
1px solid transparent
; - border-left:
5px solid #ddd
; - border-radius:
2px
; - border-color:
#bce8f1
;
<code>
Typography:
- font-size:
90%
; - font-family:
Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace
;
Color:
- color:
#c7254e
; - background-color:
#f9f2f4
;
Spacing:
- padding:
2px 4px
;
Border:
- border-radius:
2px
;
#5 - Discourse
Screenshot 1
Elements used:
<code>
<code>
Typography:
- font-size:
1em/15.008px
; - font-family:
Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace
;
Color:
- color:
#c7c7c7
; - background:
#333
;
Spacing:
- line-height:
1.4
;
Screenshot 2
Elements used:
<pre>
<code>
<pre>
Typography:
- font-family:
Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace
; - font-size:
1em/15.008px
;
Spacing:
- margin:
1em 0px
; - line-height-large:
1.4
; - width:
690px
;
<code>
Color:
- color:
#c7c7c7
; - background:
#3c3c3c
;
Spacing:
- padding:
0.5em/7.504px
;
#6 - Developer Center
Screenshot 1
Elements used:
<code>
<code>
Typography:
- font-stack--monospace:
"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace
; - font-weight:
400
; - font-size--small--2:
81.25%
;
Color:
- background:
#1a1c1e
; - color:
rgb(255 255 255 / 80%)
; - border-color:
#303335
;
Spacing:
- border-radius:
0.2em
; - border:
1px solid
; - padding:
0.1em 0.2em
; - line-height:
1.5
;
Screenshot 2
Elements used:
<pre>
<pre>
Typography:
- font-stack--monospace:
"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace
; - font-size--small--2:
81.25%
; - font-weight:
400
;
Color:
- background:
#202020
; - color:
#d0d0d0
;
Spacing:
- line-height:
1.5
; - width:
720px
; - padding:
0.625rem 0.875rem
;
#7 - Wiki
None
#8 - Apps
None
#9 - Forty
None
#10 - Os
None
#11 - Circle
None
#12 - Release
Screenshot 1
Elements used:
<kbd>
<kbd>
Typography:
- font-family:
monospace
; - font-size:
70%/12.6px
; - font-weight:
400
;
Color:
- background-color:
rgb(0 0 0 / 30%)
; - color:
#ffffff
;
Spacing:
- padding:
0.2rem 0.4rem/3.6px 7.2px
; - border-radius:
2px
; - line-height:
1.6
;
Screenshot 2
Elements used:
<code>
<code>
Typography:
- font-family:
monospace
; - font-size:
18px
; - font-weight:
400
;
Color:
- color:
#ffffff
;
Spacing:
- line-height:
1.6
; - width:
auto
;
Mockups
Edited by Pooja Patel