Lab 4 HTML

mail@pastecode.io avatar
unknown
html
a year ago
5.1 kB
5
Indexable
Lab 4
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>My Resume</title>
        <script src = "http://161.246.5.61/Lab.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="table">
            <div class="col30">
                <div class="profile">
                    <img src="winter.jpg" alt="Picture" width="200" height="200">
                    <br>
                    <br>
                    <br>
                    <hr>
                    <label for="profile"><strong>Profile:</strong></label>
                    <br>
                    <textarea id="profile" name="profile" rows="4" required></textarea>
                </div>
                <div class="address">
                    <label for="address"><strong>Address:</strong></label>
                    <hr>
                    <input type="text" id="street" placeholder="Maple Street" required>
                    <br>
                    <br>
                    <br>
                    <input type="text" id="city" placeholder="California" required>
                    <br>
                    <br>
                    <br>
                    <select id="country" name="country" required>
                        <option value="">Select a country</option>
                    </select>
                    <script>
                        populateCountries();
                    </script>
                </div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div class="contact">
                    <label for="contact"><strong>Contacts:</strong></label>
                    <hr>
                    <label for="reference"><strong>Reference:</strong></label>
                    <br>
                    <br>
                    <br>
                    <textarea id="ref" name="ref" rows="4" required></textarea>
                    <br>
                    <br>
                    <label for="col"><strong>Favorite Colour:</strong></label>
                    <br>
                    <br>
                    <input type="color" id="favColour" required>
                    <br>
                    <br>
                    <br>
                    <div class="button">
                        <input type="submit" value="Submit" onclick="displayResume()" class="submit-btn">
                    </div>
                </div>
            </div>
            <div class="col70">
                <div class="personalinfo">
                    <label for="personalinfo"><strong>Personal Information:</strong></label>
                    <hr>
                    <label for="name"><strong>Name:</strong></label>
                    <br>
                    <br>
                    <input type="text" id="name" name="name" placeholder="John Doe" required>
                    <br>
                    <br>
                    <label for="age"><strong>Age:</strong></label>
                    <br>
                    <br>
                    <input type="range" id="age" name="age" min="0" max="100" required onchange="updateAgeValue()">
                    <span id="ageValue">0</span>
                    <script>
                        updateAgeValue();
                    </script>
                    <br>
                    <br>
                    <label for="email"><strong>Email:</strong></label>
                    <br>
                    <br>
                    <input type="email" id="email" name="email" placeholder="myEmail@gmail.com" required>
                    <br>
                    <br>
                    <label for="phone"><strong>Phone:</strong></label>
                    <br>
                    <br>
                    <input type="tel" id="phone" name="phone" placeholder="092-345-6789" required>
                </div>
                <div class="education">
                    <label for="education"><strong>Education:</strong></label>
                    <hr>
                    <label for="university"><strong>University:</strong></label>
                    <br>
                    <br>
                    <input type="text" id="university" placeholder="KMITL" required>
                    <br>
                    <br>
                    <label for="degree"><strong>Degree:</strong></label>
                    <br>
                    <br>
                    <input type="text" id="degree" placeholder="Software Engineering" required>
                    <br>
                    <br>
                    <label for="year"><strong>Year of Graduation:</strong></label>
                    <br>
                    <br>
                    <input type="date" id="graduationYear" required>
                </div>
                <div class="skill">
                    <label for="skills"><strong>Skills:</strong></label>
                    <br>
                    <br>
                    <textarea id="skills" name="skills" rows="4" required></textarea>
                </div>
            </div>
        </div>
    </body>
</html>