nabi nuh

<span>Nuh</span>

</label>

<input type="checkbox" value="noah" id="nabi noah" />

<label for="nabi noah">

<span>Noah</span>

</label>

</div>

</div>

</div>

[END]

</div>

<div css={ styles.answer }>

<div css={ styles.content }>

<p css={ styles.answerTitle }>

Jawaban:

</p>

<div css={ styles.codeWrapper }>

<div css={ styles.codeBlock }>

<span css={ styles.code }>

&lt;input <span css={ styles.codeHighlight }>type="checkbox"</span> value="nuh" id="nabi nuh" /&gt;

</span>

</div>

<div css={ styles.codeBlock }>

<span css={ styles.code }>

&lt;input <span css={ styles.codeHighlight }>type="checkbox"</span> value="noah" id="nabi noah" /&gt;

</span>

</div>

</div>

</div>

</div>

<hr css={ styles.breaker } />

<h3 css={ styles.subtitle }>

Soal No. 2

<span css={ styles.subtitleSmall }>

(2 poin)

</span>

</h3>

<div css={ styles.question }>

<p css={ styles.questionTitle }>

Bagaimana cara mengubah input text menjadi input password?

</p>

[START]

<div css={ styles.codeWrapper }>

<div css={ styles.codeBlock }>

<span css={ styles.code }>

&lt;input type="<span css={ styles.codeHighlight }>text</span>" value="<span css={ styles.codeHighlight }>password-anda</span>" id="password" /&gt;

</span>

</div>

</div>

[END]

</div>

<div css={ styles.answer }>

<div css={ styles.content }>

<p css={ styles.answerTitle }>

Jawaban:

</p>

<div css={ styles.codeWrapper }>

<div css={ styles.codeBlock }>

<span css={ styles.code }>

&lt;input <span css={ styles.codeHighlight }>type="password"</span> value="<span css={ styles.codeHighlight }>password-anda</span>" id="password" /&gt;

</span>

</div>

</div>

</div>

</div>

</div>

);

}

export default Soal2;

const styles = {

container: css`

max-width: 540px;

margin: 0 auto;

`,

title: css`

font-size: 24px;

font-weight: bold;

text-align: center;

margin-bottom: 16px;

`,

subtitle: css`

font-size: 18px;

font-weight: bold;

margin-bottom: 8px;

`,

subtitleSmall: css`

font-size: 14px;

font-weight: normal;

margin-left: 8px;

font-style: italic;

`,

question: css`

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

padding: 12px 15px;

border-radius: 5px;

font-size: 16px;

line-height: 28px;

background-color: #f5f5f5;

margin-bottom: 16px;

`,

questionTitle: css`

font-size: 14px;

font-weight: bold;

margin-bottom: 4px;

line-height: 24px;

`,

codeWrapper: css`

border: 1px solid #f0f0f0;

background-color: #FFFAFA;

border-radius: 5px;

margin-bottom: 8px;

`,

codeBlock: css`

padding: 4px 8px;

`,

code: css`

font-family: Courier;

font-size: 14px;

`,

codeHighlight: css`

background-color: #BBDEFB;

font-style: italic;

`,

answer: css`

background-color: #F1F8E9;

padding: 12px 15px;

border-radius: 5px;

font-size: 16px;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

line-height: 28px;

margin-bottom: 8px;

`,

breaker: css`

margin: 16px 0;

`,

answerTitle: css`

font-size: 14px;

font-weight: bold;

line-height: 24px;

margin-bottom: 4px;

`

};

Baca Artikel Lainnya :

1. Roti 88
2. Halo
3. form
4. Halo
5. Halo