andrefqms/an-umbrella-corporation-page.markdown

## an-umbrella-corporation-page.markdown

      
    Raw
  

              an-umbrella-corporation-page.markdown
            
          
    An Umbrella Corporation Page

A page about The Umbrella Corporation, a international pharmaceutical company in the Resident Evil universe franchise.
A Pen by André Filipe Queiroz on CodePen.
License.

  
## index.html
<html>
  <header  id="header">
    <img id="header-img" src="http://www.nureek.com/zozo/products_pages/umbrella-corporation.png" alt="logo" >
     <nav id="nav-bar">
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#works">How It Works</a>
       <a class="nav-link" href="#about-us">About us</a>
     </nav>
  </header>

  <section id="features">
    <div>
      <h2>Preserving the Health of the People</h2>
        <p>As a major international company of cosmetics, foods and medical supplies, we care about all clients around the globe with  our unique care and treatment we have.</p>
    </div><br>
  </section>

  <section id="works">
    <div>
      <h2>Our business is life itself</h2>
        <p> The company is also presented as having producing cosmetics, consumer products, and foods. Umbrella established multiple research facilities to help develop various bio-organic products.Also Umbrella use genetic engineering applicating in medicine, research, industry and agriculture and can be used on a wide range of plants, animals and micro organisms.</p>
    </div><br>
    </section>
  <section id="about-us">
    <div>
      <h2>About us</h2>
        <p>The Umbrella Corporation is an international pharmaceutical company. Founded in 1968 by prominent British royal descendants Oswell E. Spencer and Edward Ashford, along with Dr. James Marcus.</p>
    </div><br>
    </section>
   <section id="video"">
    <iframe width="485" height="320" id="video" src="https://www.youtube.com/embed/L80J94mEMeM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </section>

  <section id="date">
   <h2>Leave your email for information or products</h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" id="email" type="email" placeholder="Enter your email" required/>
    <input id="submit" type="submit" value="Get Started" class="btn"></input>
  </form>
</section><br>
 <footer>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Contact</a>
    <span>Copyright 2016, Original Trombones</span>
  </footer>
</html>

## style.css
html{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  background: lightgray;
  margin:10px;
  color: black;
}
#header{
	width: 100%;
	background-color: none;
  display:inline-block;
}
/* Style the top navigation bar */
#nav-bar {
  overflow: auto;
  background-color: none;
  margin-top: 30px;
  position: relative;
  bottom: 0;
  left: 120;
  padding-bottom: 30px;
  width: 51%;
}

/* Style the topnav links */
#nav-bar a {
  float: center;
  display: inline-block;
  color: black;
  text-align: right;
  padding: 20px 50px 25px 50px;
  text-decoration: none;
  font-size: 25px;
  font-weight: 600;
}
#nav-bar a:hover {
  background-color: white;
  border-radius: 15px;
}
#header-img {
  background-color: none;
  padding: 1em;
  float: left;
}
#form{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}
#video{
   margin-top: 20px;
}
p{
  padding-left: 90px;
  padding-right: 90px;

}
#date{
   margin-top: 50px;
}
 input[type="email"] {
    max-width: 275px;
    width: 100%;
    padding: 5px;
  }
#submit{

  margin-top: 10px;
  align-self: center;
  background-color: green;
  border: none;
  width: 140px;
  height: 50px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 16px;
}
#submit:hover {
  background-color: darkgreen;
  transition: background-color 1s;
  cursor: pointer;
}
footer {
   @media (max-width: 100px) {
    margin-top: 10px;
  }
  margin-top: 30px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;

}
	<html>
	<header id="header">
	<img id="header-img" src="http://www.nureek.com/zozo/products_pages/umbrella-corporation.png" alt="logo" >
	<nav id="nav-bar">
	<a class="nav-link" href="#features">Features</a>
	<a class="nav-link" href="#works">How It Works</a>
	<a class="nav-link" href="#about-us">About us</a>
	</nav>
	</header>

	<section id="features">
	<div>
	<h2>Preserving the Health of the People</h2>
	<p>As a major international company of cosmetics, foods and medical supplies, we care about all clients around the globe with our unique care and treatment we have.</p>
	</div><br>
	</section>

	<section id="works">
	<div>
	<h2>Our business is life itself</h2>
	<p> The company is also presented as having producing cosmetics, consumer products, and foods. Umbrella established multiple research facilities to help develop various bio-organic products.Also Umbrella use genetic engineering applicating in medicine, research, industry and agriculture and can be used on a wide range of plants, animals and micro organisms.</p>
	</div><br>
	</section>
	<section id="about-us">
	<div>
	<h2>About us</h2>
	<p>The Umbrella Corporation is an international pharmaceutical company. Founded in 1968 by prominent British royal descendants Oswell E. Spencer and Edward Ashford, along with Dr. James Marcus.</p>
	</div><br>
	</section>
	<section id="video"">
	<iframe width="485" height="320" id="video" src="https://www.youtube.com/embed/L80J94mEMeM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	</section>

	<section id="date">
	<h2>Leave your email for information or products</h2>
	<form id="form" action="https://www.freecodecamp.com/email-submit">
	<input name="email" id="email" type="email" placeholder="Enter your email" required/>
	<input id="submit" type="submit" value="Get Started" class="btn"></input>
	</form>
	</section><br>
	<footer>
	<a href="#">Privacy</a>
	<a href="#">Terms</a>
	<a href="#">Contact</a>
	<span>Copyright 2016, Original Trombones</span>
	</footer>
	</html>
	html{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	text-align: center;
	background: lightgray;
	margin:10px;
	color: black;
	}
	#header{
	width: 100%;
	background-color: none;
	display:inline-block;
	}
	/* Style the top navigation bar */
	#nav-bar {
	overflow: auto;
	background-color: none;
	margin-top: 30px;
	position: relative;
	bottom: 0;
	left: 120;
	padding-bottom: 30px;
	width: 51%;
	}

	/* Style the topnav links */
	#nav-bar a {
	float: center;
	display: inline-block;
	color: black;
	text-align: right;
	padding: 20px 50px 25px 50px;
	text-decoration: none;
	font-size: 25px;
	font-weight: 600;
	}
	#nav-bar a:hover {
	background-color: white;
	border-radius: 15px;
	}
	#header-img {
	background-color: none;
	padding: 1em;
	float: left;
	}
	#form{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20px;
	}
	#video{
	margin-top: 20px;
	}
	p{
	padding-left: 90px;
	padding-right: 90px;

	}
	#date{
	margin-top: 50px;
	}
	input[type="email"] {
	max-width: 275px;
	width: 100%;
	padding: 5px;
	}
	#submit{

	margin-top: 10px;
	align-self: center;
	background-color: green;
	border: none;
	width: 140px;
	height: 50px;
	border-radius: 10px;
	text-transform: uppercase;
	font-weight: 700;
	color: white;
	font-size: 16px;
	}
	#submit:hover {
	background-color: darkgreen;
	transition: background-color 1s;
	cursor: pointer;
	}
	footer {
	@media (max-width: 100px) {
	margin-top: 10px;
	}
	margin-top: 30px;
	background-color: white;
	padding: 20px;
	border-radius: 10px;

	}