DEV Community

Mardeleine Barasa
Mardeleine Barasa

Posted on

Assignment

<!DOCTYPE html>







My first google classroom assignment

<br>
/* Basic CSS styling for illusion purposes*/<br>
body {<br>
font-family: Arial, sans-serif;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> h1 {
color: #221616;
text-align: left;
} 
form {
    width: 90%;
    background-color: #dbdcdc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
}

input, select, textarea {
    width: 75%;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid #e6e5e5;
    border-radius: 5px;
    box-sizing: border-box;
}

button[type="reset"] {
    display: inline-block;
    width: 7.5%;
    padding: 2.5px;
    background-color: #f4f2f2;
}

button[type="submit"]:hover {
    background-color: #ebedeb;
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;h1&gt;My first google classroom assignment&lt;/h1&gt;

&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;My User Information&lt;/legend&gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="fullname"&amp;gt;Full name:&amp;lt;/label&amp;gt;
        &amp;lt;input type="fullname" id="fullname" name="fullname" required&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="course"&amp;gt;Course:&amp;lt;/label&amp;gt;
        &amp;lt;input type="course" id="course" name="course" required&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="email"&amp;gt;Email:&amp;lt;/label&amp;gt;
        &amp;lt;input type="email" id="email" name="email" required&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="password"&amp;gt;Password:&amp;lt;/label&amp;gt;
        &amp;lt;input type="text" id="password" name="password" required&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="gender"&amp;gt;Gender:&amp;lt;/label&amp;gt;
        &amp;lt;select name="gender" id="gender"&amp;gt;
           &amp;lt;option value="male"&amp;gt;Male&amp;lt;/option&amp;gt;
           &amp;lt;option value="female"&amp;gt;Female&amp;lt;/option&amp;gt;
           &amp;lt;option value="other"&amp;gt;Other&amp;lt;/option&amp;gt;
        &amp;lt;/select&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="classes attended"&amp;gt;Classes attended:&amp;lt;/label&amp;gt;
        &amp;lt;select name="classes attended" id="classes attended"&amp;gt;
            &amp;lt;option value="physical"&amp;gt;Physical&amp;lt;/option&amp;gt;
            &amp;lt;option value="online"&amp;gt;Online&amp;lt;/option&amp;gt;
            &amp;lt;option value="hybrid"&amp;gt;Hybrid&amp;lt;/option&amp;gt;
        &amp;lt;/select&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label&amp;gt;
            &amp;lt;input type="checkbox" id="student details" name="student details"&amp;gt;
            Confirm all details correct
        &amp;lt;/label&amp;gt;
    &amp;lt;/section&amp;gt;

    &amp;lt;section&amp;gt;
        &amp;lt;label for="mark awarded"&amp;gt;Mark awarded:&amp;lt;/label&amp;gt;
        &amp;lt;textarea name="mark awarded" id="mark awarded" cols="10" rows="4"&amp;gt;&amp;lt;/textarea&amp;gt;
    &amp;lt;/section&amp;gt;

&amp;lt;/fieldset&amp;gt;

&amp;lt;button type="reset"&amp;gt;Reset&amp;lt;/button&amp;gt;
&amp;lt;button type="submit"&amp;gt;Submit&amp;lt;/button&amp;gt;
Enter fullscreen mode Exit fullscreen mode

&lt;/form&gt;
</code></pre></div>
<p></body><br>
</html></p>

Top comments (0)