hariomkushwaha/home.html

## home.html
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="https://www.betterbuys.com/wp-content/uploads/2016/08/IPM-Global-logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --primary-color: #333;
  --secondary-color: #444;
  --overlay-color: rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Catamaran', sans-serif;
  line-height: 1.6;
  color: #333;
  font-size: 1.1rem;
  background-image:url(https://d1f5hsy4d47upe.cloudfront.net/96/96a30c7c1b1739bf171c245df4c11763_w.jpg);
  background-position: center;
  background-size: cover;
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
}

a {
  color: #444;
  text-decoration: none;
}

ul {
  list-style: none;
}


.container {
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 0 2rem;
}


.section-a {
  margin: 7rem 0;
}

.section-a .container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1rem;
  align-items: center;
  justify-content: center;
}

.section-a h1 {
  font-size: 4rem;
  color: var(--primary-color);
}

.section-a p {
  margin: 1rem 0;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding-left: 113px;
 height: 57px;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #629ff4;
    border-radius: 50px 20px;
    width: 120px;
}


.btn {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  border-radius: 30px;
}

.btn:hover {
  background: var(--secondary-color);
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--overlay-color);
}


</style>
</head>
<body>

<ul>
  <li><a href="{% url 'profill'%}">IPM</a></li>
 <!--  <li><a href="{% url 'jira'%}">Jira</a></li>
  <li><a href="{% url 'Confluence'%}">Confluence</a></li>
  <li><a href="{% url 'Github'%}">Github</a></li>
  <li><a href="{% url 'mailsearcher'%}">Email</a></li> -->

  <li style="float:right;padding-right: 40px"><a class="active" href="{% url 'index'%}">Login</a></li>
</ul>

    <!-- Showcase -->
    <section class="section-a">
      <div class="container">
         <img src="https://voice.mozilla.org/dist/871870523847f9da7958e1b2e7e69831.png" alt="" />
        <div>
          <h1 style="font-size:78px;text-shadow: 2px 4px 2px black, 0 0 25px #629ff4, 0 0 15px #629ff4;">IPM the future tool</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
            repudiandae rerum libero ipsum asperiores omnis mollitia, nostrum
            commodi placeat ea itaque modi corrupti corporis nam voluptas aut
            reprehenderit eaque culpa.
          </p>
          <a href="#" class="btn">Read More</a>
        </div>

      </div>
    </section>


<script>
$(function() {
        const $gallery = $('.gallery a').simpleLightbox();
      });
TaxiNewsSig("sig")ocument.getElementById("mySidenav").style.width = "0";
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="shortcut icon" href="https://www.betterbuys.com/wp-content/uploads/2016/08/IPM-Global-logo.png">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	:root {
	--primary-color: #333;
	--secondary-color: #444;
	--overlay-color: rgba(0, 0, 0, 0.7);
	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	body {
	font-family: 'Catamaran', sans-serif;
	line-height: 1.6;
	color: #333;
	font-size: 1.1rem;
	background-image:url(https://d1f5hsy4d47upe.cloudfront.net/96/96a30c7c1b1739bf171c245df4c11763_w.jpg);
	background-position: center;
	background-size: cover;
	}

	h1,
	h2,
	h3,
	h4 {
	line-height: 1.3;
	}

	a {
	color: #444;
	text-decoration: none;
	}

	ul {
	list-style: none;
	}



	.container {
	max-width: 1100px;
	margin: auto;
	overflow: hidden;
	padding: 0 2rem;
	}



	.section-a {
	margin: 7rem 0;
	}

	.section-a .container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 1rem;
	align-items: center;
	justify-content: center;
	}

	.section-a h1 {
	font-size: 4rem;
	color: var(--primary-color);
	}

	.section-a p {
	margin: 1rem 0;
	}

	ul {
	list-style-type: none;
	margin: 0px;
	padding-left: 113px;
	height: 57px;
	overflow: hidden;
	background-color: #333;
	}

	li {
	float: left;
	}

	li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	li a:hover:not(.active) {
	background-color: #111;
	}

	.active {
	background-color: #629ff4;
	border-radius: 50px 20px;
	width: 120px;
	}






	.btn {
	display: inline-block;
	background: var(--primary-color);
	color: #fff;
	padding: 0.8rem 1.5rem;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	border-radius: 30px;
	}

	.btn:hover {
	background: var(--secondary-color);
	}

	.overlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--overlay-color);
	}







	</style>
	</head>
	<body>

	<ul>
	<li><a href="{% url 'profill'%}">IPM</a></li>
	<!-- <li><a href="{% url 'jira'%}">Jira</a></li>
	<li><a href="{% url 'Confluence'%}">Confluence</a></li>
	<li><a href="{% url 'Github'%}">Github</a></li>
	<li><a href="{% url 'mailsearcher'%}">Email</a></li> -->

	<li style="float:right;padding-right: 40px"><a class="active" href="{% url 'index'%}">Login</a></li>
	</ul>

	<!-- Showcase -->
	<section class="section-a">
	<div class="container">
	<img src="https://voice.mozilla.org/dist/871870523847f9da7958e1b2e7e69831.png" alt="" />
	<div>
	<h1 style="font-size:78px;text-shadow: 2px 4px 2px black, 0 0 25px #629ff4, 0 0 15px #629ff4;">IPM the future tool</h1>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
	repudiandae rerum libero ipsum asperiores omnis mollitia, nostrum
	commodi placeat ea itaque modi corrupti corporis nam voluptas aut
	reprehenderit eaque culpa.
	</p>
	<a href="#" class="btn">Read More</a>
	</div>

	</div>
	</section>








	<script>
	$(function() {
	const $gallery = $('.gallery a').simpleLightbox();
	});
	TaxiNewsSig("sig")ocument.getElementById("mySidenav").style.width = "0";
	}
	</script>

	</body>
	</html>