So, Hi guys
I’m a veterinarian seeking for a career shift as a programmer, so not to get out of the topic i just finished the “Responsive Web” track (only 3 projects left)
so i want to ask about your opinions about my 2 finished projects.
Tell me if i went of in any place & help me write better codes.
The Survey Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">HunterXHunter Survey Form</h1>
<p id="description" ><b>Thank you for being such a great fan</b></p>
<div>
<form id="survey-form">
<label id="name-label" for="name"><b>Name</b></label><br>
<input id="name" type="text" name="name" placeholder="Enter your name" required><br>
<br>
<label id="email-label" for="email"><b>E-mail
</b></label><br>
<input id="email" type="email" name="email" placeholder="Enter your email" required><br>
<br>
<label id="number-label" for="number"><b>Number<b></label><br>
<input id ="number" type="number" name="number" placeholder="Enter your Number" min="0" max="9999999999"><br required>
<br>
<hr>
<label for="nen">
<b>Choose your favourite NEN type</b><br>
<select for="nen" id="dropdown">
<option value="Conjuration">Conjuration</option>
<option value="Manipulation">Manipulation</option>
<option value="Emission">Emission</option>
<option value="Transmutation">Transmutation</option>
<option value="Enhancement">Enhancement</option>
<option value="Specialization">Specialization</option>
</select>
<hr>
<b>choose your favourite arc:</b><br>
<fieldset>
<input id="h.e" type="radio" name="arc" value="hunter exam">
<label id="f1" for="hunter exam"> hunter Exam</label>
<br>
<input id="z.f" type="radio" name="arc" value="zoldyck family">
<label id="f2" for="zoldyck family"> Zoldyck Family</label>
<br>
<input id="h.a" type="radio" name="arc" value="Heavens Arena">
<label id="f3" for="Heavens Arena"> Heavens Arena</label>
<br>
<input id="y.c" type="radio" name="arc" value="Yorknew City">
<label id="f4" for="Yorknew City"> Yorknew City</label>
<br>
<input id="g.i" type="radio" name="arc" value="Greed Island">
<label id="f5" for="Greed Island"> Greed Island</label>
<br>
<input id="c.a" type="radio" name="arc" value="Chimera Ant">
<label id="f6" for="Chimera Ant"> Chimera Ant</label>
</fieldset>
<hr>
<b>Who is your facourite from our main characters</b>
<br>
<input id="J" type="Checkbox" name="hero1" value="gon">
<label id="h1" for="hero1">Gon</label>
<br>
<input id="k" type="Checkbox" name="hero2" value="killua">
<label id="h2" for="hero2">Killua</label>
<br>
<input id="R" type="Checkbox" name="hero3" value="kurapika">
<label id="h3" for="hero3">Kurapika</label>
<br>
<input id="L" type="Checkbox" name="hero4" value="Leorio">
<label id="h4" for="hero4">Leorio</label>
<br>
<label for="ideas"><br>Please tell us your ideas for a better series:</b></label>
<textarea id="idea" name="ideas" cols="30" rows="5" placeholder="please enter your ideas">
</textarea>
<br>
<button id="submit" type="submit"><b>Submit</b></button>
</form>
</div>
</body>
<style>
body{
background-color: rgb(16, 115, 148);
background-image: url("https://cdn.oneesports.gg/cdn-data/2022/06/Anime_HunterxHunter_HunterExamArc.jpg");
background-blend-mode: lighten;
background-attachment: fixed;
background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#description{
text-align: center;
color: white;
text-shadow: 2px 2px #131212;
}
h1{
text-align: center;
background-color: silver;
Color: white;
height: auto;
width: auto;
}
div{
background-color: hsl(240, 45%, 65%);
padding: 30px;
border: solid 3px;
opacity: 0.9;
}
button{
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 100%;
}
</style>
The Tribute Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Agatha Christie</h1>
<div id="img-div">
<img id ="image" src="https://images.gr-assets.com/authors/1589991473p8/123715.jpg" alt="Agatha Christie" title="Great Writer">
<figcaption id="img-caption" style ="text-align: center">
A great writer for all times</figcaption>
<hr>
</div>
<lu id="tribute-info">
<li><b>Birth :</b>
15 September 1890
Torquay, Devon, England.</li>
<br>
<li><b>Occupation :</b>Novelist, short story writer, play wright, poetmemoirist.</li>
<br>
<li><b>Notable Works :</b><br>
-Creation of characters Hercule Poirot and Miss Marple<br>
-Murder on the Orient Express<br>
-The Murder of Roger Ackroyd<br>
-Death on the Nile<br>
-The Murder at the Vicarage<br>
-Partners in Crime<br>
-The A.B.C. Murders<br>
-And Then There Were None<br>
-The Mousetrap<br>
</li>
<br>
<li><b>Death :</b>12 January 1976 (aged 85)
Winterbrook House, Wallingford, Oxfordshire, England.
</li>
<br>
</lu>
<footer>For more info about this amazing writer please visit this <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Agatha_Christie" title="Agatha Christie Wiki">
link
</a>
</main>
</body>
<style>
main{
border-style: solid;
}
h1{
text-align: center;
background-color: lightgray;
height: auto;
width: auto;
}
img{
width: auto;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
max-width: 100%;
max-height: auto;
}
lu{
line-height: 20px;
}
</style>