eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Task3

Browse Source
This commit is contained in:
RobinB27
2025-10-07 17:13:53 +02:00
parent eb5884b878
commit dda35eb377
2 changed files with 120 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
task_1_html_css/src/contact.html
View File

@@ -5,6 +5,7 @@
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Document</title>
<link href="default.css" rel="stylesheet" />
<link href="layout.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
@@ -40,7 +41,54 @@
</section>
<main>
<!-- TODO add form here-->
<form>
<ul>
<li>
<h2>Name</h2>
</li>
<li>
<input type="text" placeholder="Jane Doe">
</li>
<li>
<h2>Email address</h2>
</li>
<li>
<input type="email" placeholder="jane.doe@example.com">
</li>
<li>
<h2>Birthday</h2>
</li>
<li>
<input type="date" placeholder="">
</li>
<li>
<h2>Do you consent to our terms?</h2>
</li>
<li>
<div>
<input type="radio">
<label>Yes</label>
</div>
<div>
<input type="radio">
<label>Yes</label>
</div>
</li>
<li>
<h2>Please provide a joke:</h2>
</li>
<li>
<input type="text" placeholder="Go on, get creative.">
</li>
<li>
</li>
<li>
<button class="bluebutton">Submit</button>
<button>Reset</button>
</li>
</ul>
</form>
</main>
<footer>

75
task_1_html_css/src/layout.css
View File

@@ -14,10 +14,27 @@ body {
}
/* I only found out using the "large" display as a base is
* a bad practice after writing this. I realize this is suboptimal.
*/
@media screen and (width <= 500px) {
ul {
/* hide dot on all ul's */
list-style-type: none;
}
/* I only found out using the "large" display as a base is bad while doing this.
* So yes, this is very janky.
*/
@media screen and (width > 1000px) {
form {
width: 60%
}
}
@media screen and (width <= 1000px) {
form {
width: 80%;
}
}
@media screen and (width <= 700px) {
/* new sidebar size for small display */
body {
grid-template-columns: 12% 1fr;
@@ -26,6 +43,56 @@ body {
body > section > ul > li > a > span {
display: none;
}
form {
width: 100%;
}
}
.bluebutton {
background-color: rgb(173, 115, 250);
color: white;
}
.bluebutton:hover {
background-color: rgb(187, 149, 233)
}
body > main > form {
& ul {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
& li {
display: flex;
flex-direction: column;
margin: 1rem;
& h2 {
font-size: large;
color: cornflowerblue;
font-weight: normal;
}
& input {
padding: 5px;
border-width: 2px;
border-style: solid;
border-color: rgb(219, 207, 207);
border-radius: 5px;
}
& button {
width: 10rem;
margin: 5px;
padding: 10px;
border: none;
border-radius: 10px;
}
& div {
padding: 0.5rem;
}
}
}
}