MansiAyer · Mahalakshmi08 · Oct 31, 2020 · Oct 31, 2020 · Oct 31, 2020 · Oct 31, 2020
diff --git a/1.css b/1.css
@@ -0,0 +1,34 @@
+body{
+	background-color:lavender;
+}
+img{
+	display:block;
+	margin-left:auto;
+	margin-right:auto;
+	padding: 5px;
+	height:425px;
+	width:750px;
+}
+
+p{
+	text-align:center;
+	font: italic bold 16px/30px Georgia, serif;
+	padding-top:15px;
+	color:#B2056C;
+}
+
+#more {display: none;}
+
+button {
+  background-color: black;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-left: 560px;
+  cursor: pointer;
+
+}
diff --git a/1.html b/1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html5>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>My Hometown</title>
+		<link rel="stylesheet" type="text/css" href="1.css">
+
+
+	</head>
+
+	<body>
+		<p>	My Hometown is a small city in the state of Tamil Nadu. Tamil Nadu is a state in the south-eastern part of the Indian Peninsula.<br>
+				Tamil Nadu has some of the most remarkable temple architecture in the country, and a living tradition of <br>
+									music, dance, folk arts and fine arts.</p>
+
+			<img src="images/1.jpg">
+
+		<p>Our village is a peaceful, noiseless, pollution free and a beautiful place.For its location and cool environment,<br>
+		one can enjoy the beauty of nature.Every year, during our summer vacations we used to visit our village. Due to scarce population,<br>
+		people do not reside too cloose to one another. Even our cottage is at a distance from other cottages.Flowers,fruits,trees,small plants<br>
+		and vegetables surround our cottage.All this makes the surrounding look green and fresh. One can see mountain at a distance touching the clouds<br>
+		This further beautifies the surrounding.<span id="dots">...</span><span id="more">It takes 2 days to reach our town by train. During our travel,me<br>
+		and my elder brother would always fight for the window seat. The journey would be completely tiring but excited to see our grandparents who would be<br>
+		waiting to receive us.Living among such friendly and simple people is certainly a real pleasure.</span></p>
+		<button onclick="myFunction()" id="myBtn">Read more</button>
+
+
+	<script>
+		function myFunction() {
+		  var dots = document.getElementById("dots");
+		  var moreText = document.getElementById("more");
+		  var btnText = document.getElementById("myBtn");
+
+		  if (dots.style.display === "none") {
+			dots.style.display = "inline";
+			btnText.innerHTML = "Read more"; 
+			moreText.style.display = "none";
+		  } else {
+			dots.style.display = "none";
+			btnText.innerHTML = "Read less"; 
+			moreText.style.display = "inline";
+		  }
+		}
+	</script>	
+
+	</body>
+</html>
diff --git a/1.jpg b/1.jpg
diff --git a/balloon.jpg b/balloon.jpg
diff --git a/greet.css b/greet.css
@@ -0,0 +1,71 @@
+body{
+	margin-left:400px;
+	margin-top:175px;
+	padding: 50px;
+}
+
+p{
+	font-size:80px;
+}
+
+.flip-card {
+  background-color: transparent;
+  width: 500px;
+  height: 500px;
+  perspective: 1000px;
+}
+
+.balloon {
+  background-image:url(balloon.jpg);
+  background-repeat: no-repeat;
+  width: 1200px;
+  height: 500px;
+  background-size: contain;
+  position: absolute;
+  bottom: 0%;
+  animation: mov 10s infinite;
+  left: 45%;
+}
+
+
+
+
+@keyframes mov {
+  from {bottom: -20%; left: 80px; }
+  to {bottom: 100%; left: 220px; }
+}
+
+
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-card-front {
+  background-color: #bbb;
+  color: black;
+}
+
+.flip-card-back {
+  background-color: #CFB53B	;
+  color: white;
+  transform: rotateY(180deg);
+}
diff --git a/greet.html b/greet.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" type="text/css" href="greet.css">
+	<title>Greeting Card</title>
+</head>
+<body>
+
+
+<div class="flip-card">
+  <div class="flip-card-inner">
+    <div class="flip-card-front">
+      <img src="hbd.jpg" style="width:500px;height:500px;">
+    </div>
+    <div class="flip-card-back">
+      <p>A million magic wishes for you!!!!</p> 
+    </div>
+  </div>
+</div>
+
+
+<div class="balloon">
+</div>
+
+
+
+</body>
+</html>
diff --git a/hbd.jpg b/hbd.jpg
diff --git a/todo.html b/todo.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+		<script src="https://code.jquery.com/jquery-3.4.1.js"
+			integrity=
+			"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
+			crossorigin="anonymous"></script>
+
+	<style>
+		.container {
+			width: 80%;
+			height: auto;
+			font-size: 25px;
+		}
+
+		.foot {
+
+			top:10%;
+			left: 10%;
+			width: 60%;
+			text-align: center;
+		}
+		.example_f {
+				background-color:#008CBA;
+				border: none;
+				color: #FFFFFF;
+				text-align: center;
+				font-size: 23px;
+				padding: 10px;
+				width: 180px;
+				transition: all 0.4s;
+				cursor: pointer;
+				margin: 1px;
+				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+				display:inline;
+				margin-left:2.5rem;
+			}
+			.example_f span {
+				cursor: pointer;
+				display: inline-block;
+				position: relative;
+				transition: 0.4s;
+				color: #FFFFFF;
+
+			}
+			.example_f span:after {
+				content: '\00bb';
+				position: absolute;
+				opacity: 0;
+				top: 0;
+				right: -20px;
+				transition: 0.5s;
+				color: #FFFFFF;
+
+			}
+			.example_f:hover span {
+				padding-right: 25px;
+			}
+			.example_f:hover span:after {
+				opacity: 1;
+				right: 0;
+			}
+			body {
+
+						background: lavender;
+			}
+
+			.input1{
+				height:50px;
+			}
+			.container1{
+	              padding: 20px;
+	              width: 600px;
+	              margin: 0 auto;
+	              margin-top: 40px;
+	              background: white;
+	            }
+
+	</style>
+
+</head>
+
+<body>
+	<center>
+
+		<div class="foot container1">
+			<div class="row">
+				<div class="col-sm-1">  </div>
+				<div class="col-sm-10">
+					<!-- Input for tasks -->
+					<h3><b>TO DO LIST</b></h3><BR>
+					<div class="input-group">
+						<input type="text"
+							class="form-control input1"
+							placeholder="Add Task"
+							id="text">
+						<div class="input-group-btn ">
+							<button class="example_f"><span>Add</span>
+						</button>
+						</div>
+					</div><br>
+					<div class="container">
+					</div>
+				</div>
+			</div>
+		</div>
+</center>
+
+	<script>
+		$(document).ready(function() {
+			$('.example_f').click(function() {
+				if ($('#text').val().length != 0) {
+					var x = $('.container').html();
+					var y =
+		`<div  class="alert alert-info alert-dismissible fade in">
+	<a href="#" class="close" data-dismiss="alert" aria-label="close"><i style="font-size:28px" class="fa">&#xf014;</i></a>
+						` + $('#text').val() + `</div>`;
+					$('.container').html(y + x);
+					$('#text').val("");
+				} else alert("Enter something!");
+			});
+
+			$(document).on('click', '.alert', function() {
+				if ($(this).css('text-decoration-line') == "none")
+					$(this).css('text-decoration-line', 'line-through ');
+				else
+					$(this).css('text-decoration-line', 'none');
+			});
+		});
+	</script>
+</body>
+
+</html>
diff --git a/tt.css b/tt.css
@@ -0,0 +1,31 @@
+h4{
+	text-align: center;
+}
+
+.center{
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+
+}
+
+.left{
+	margin-left: auto;
+	margin-right: auto;
+	text-align: left;
+}
+
+table,th,td{
+	border: 1px solid black;
+	padding: 10px;
+	border-collapse: collapse;
+}
+
+.lun{
+	writing-mode: vertical-rl;
+	text-orientation: upright;
+}
+
+body{
+	border-style: groove;
+}