Skip to content

Instantly share code, notes, and snippets.

@andrefqms

andrefqms/an-umbrella-corporation-page.markdown

Last active January 7, 2019 07:54
Show Gist options
  • Save andrefqms/6ed3856cd90c2476a12d6a6126540dca to your computer and use it in GitHub Desktop.
Save andrefqms/6ed3856cd90c2476a12d6a6126540dca to your computer and use it in GitHub Desktop.
Download ZIP
An Umbrella Corporation Page
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.

Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment