harsimranmaan/index.css

## index.css
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

 td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

 tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
body{
  font-family: Arial, Helvetica, sans-serif;
}
p{
    margin: 50px;
    width:100px;
    background-color: #04AA6D;
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    transform: rotate(-5deg) skewY(-10deg);
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Design time</title>
    <script>
        function handleClick() {
            console.log("hello")
            var name = document.getElementById("name").value;
            var lang = document.getElementById("lang").value;
            alert(`Your name: ${name}\nLanguage: ${lang}`);
        }
    </script>
</head>

<body>
    <h1>Let's do CSS - Class IV</h1>
    <section>
        <h2>CSS</h2>
        <p>
                <span class="highlight">CSS (Cascading Style Sheets)</span> is used to describe the presentation styles for an
        HTML document.
        </p>

    </section>
    <section>
        <h2>Let's say hello</h2>
        <table>
            <tr>
                <th>EN</th>
                <th>Hello</th>
            </tr>
            <tr>
                <td>FA</td>
                <td>سلام</td>
            </tr>
            <tr>
                <td>HI</td>
                <td>नमस्ते</td>
            </tr>
            <tr>
                <td>JA</td>
                <td>こんにちは</td>
            </tr>
            <tr>
                <td>PA</td>
                <td>ਸਤ ਸ੍ਰੀ ਅਕਾਲ</td>
            </tr>
            <tr>
                <td>PS</td>
                <td>سلام</td>
            </tr>
            <tr>
                <td>RO</td>
                <td>Bună ziua</td>
            </tr>
            <tr>
                <td>TL</td>
                <td>Kamusta</td>
            </tr>
            <tr>
                <td>UR</td>
                <td>ہیلو</td>
            </tr>
            <tr>
                <td>ZH</td>
                <td>你好</td>
            </tr>
        </table>
    </section>
    <section>
        <h2>My shopping list</h2>
        <ul>
            <li>A christmas tree</li>
            <li>New clothes</li>
            <li>A sledge</li>
            <li>Snow shoes</li>
            <li>Gifts</li>
        </ul>
    </section>
    <section>
        <h2>User input</h2>
        <label for="name">Name</label>
        <input type="text" id="name" name="name"><br />
        <label for="lang">Choose a language</label>
        <select name="lang" id="lang">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="JavaScript">JavaScript</option>
        </select><br />
        <button onclick="handleClick()">Click me</button>
    </section>
</body>

</html>
	table {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
	}

	td, th {
	border: 1px solid #ddd;
	padding: 8px;
	}

	tr:nth-child(even){background-color: #f2f2f2;}

	tr:hover {background-color: #ddd;}

	th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #04AA6D;
	color: white;
	}
	body{
	font-family: Arial, Helvetica, sans-serif;
	}
	p{
	margin: 50px;
	width:100px;
	background-color: #04AA6D;
	color: white;
	padding-top: 4px;
	padding-bottom: 4px;
	transform: rotate(-5deg) skewY(-10deg);
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Design time</title>
	<script>
	function handleClick() {
	console.log("hello")
	var name = document.getElementById("name").value;
	var lang = document.getElementById("lang").value;
	alert(`Your name: ${name}\nLanguage: ${lang}`);
	}
	</script>
	</head>

	<body>
	<h1>Let's do CSS - Class IV</h1>
	<section>
	<h2>CSS</h2>
	<p>
	<span class="highlight">CSS (Cascading Style Sheets)</span> is used to describe the presentation styles for an
	HTML document.
	</p>

	</section>
	<section>
	<h2>Let's say hello</h2>
	<table>
	<tr>
	<th>EN</th>
	<th>Hello</th>
	</tr>
	<tr>
	<td>FA</td>
	<td>سلام</td>
	</tr>
	<tr>
	<td>HI</td>
	<td>नमस्ते</td>
	</tr>
	<tr>
	<td>JA</td>
	<td>こんにちは</td>
	</tr>
	<tr>
	<td>PA</td>
	<td>ਸਤ ਸ੍ਰੀ ਅਕਾਲ</td>
	</tr>
	<tr>
	<td>PS</td>
	<td>سلام</td>
	</tr>
	<tr>
	<td>RO</td>
	<td>Bună ziua</td>
	</tr>
	<tr>
	<td>TL</td>
	<td>Kamusta</td>
	</tr>
	<tr>
	<td>UR</td>
	<td>ہیلو</td>
	</tr>
	<tr>
	<td>ZH</td>
	<td>你好</td>
	</tr>
	</table>
	</section>
	<section>
	<h2>My shopping list</h2>
	<ul>
	<li>A christmas tree</li>
	<li>New clothes</li>
	<li>A sledge</li>
	<li>Snow shoes</li>
	<li>Gifts</li>
	</ul>
	</section>
	<section>
	<h2>User input</h2>
	<label for="name">Name</label>
	<input type="text" id="name" name="name"><br />
	<label for="lang">Choose a language</label>
	<select name="lang" id="lang">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JavaScript">JavaScript</option>
	</select><br />
	<button onclick="handleClick()">Click me</button>
	</section>
	</body>

	</html>