Skip to content

Instantly share code, notes, and snippets.

@paulinafischer

paulinafischer/build-a-product-landing-page.markdown

Created December 27, 2019 11:25
Show Gist options
  • Save paulinafischer/509b2b0b85811f6c4f825efdc2943b0d to your computer and use it in GitHub Desktop.
Save paulinafischer/509b2b0b85811f6c4f825efdc2943b0d to your computer and use it in GitHub Desktop.
Download ZIP
Build a Product Landing Page
Raw
build-a-product-landing-page.markdown
Raw
index.html
<div class="container-fluid">
<header id="header">
<nav id="nav-bar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#header-img"><img id="header-img" class="img-responsive" src="https://pbs.twimg.com/profile_images/1013563961633959936/X5epMthl_400x400.jpg" alt="image" style="width:30x;height:30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="text-center">Welcome to IBM</h1>
<h5 class="text-center">We Love Technology</h5>
</div>
</header>
<section class="container-fluid">
<div class="page-header">
<h2 id="features" class="text-center">Features</h2>
</div>
<div class="embed-responsive embed-responsive-21by9">
<embed id="video" width="100%" height="auto"
src="https://www.youtube.com/embed/KsBoQ-WFr6w">
</div>
</section>
<section>
<div class="page-header">
<h2 id="pricing" class="text-center">Pricing</h2>
</div>
<div class="flex-container">
<div>$1</div>
<div>$2</div>
<div>$3</div>
</div>
</section>
<section>
<div class="page-header">
<h2 id="contact" class="text-center">Contact</h2>
</div>
<div id= "form_box" class="container">
<form id="form">
<div class="form-row">
<div class="form-group col-md-6">
<label id="name-label" for="name">Name</label>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="col">
<label for="lastname">Last Name</label>
<input id="lastname" type="text" class="form-control" placeholder="Last name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label id="email-label" for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="occupation">Occupation</label>
<input type="text" class="form-control" id="occupation" placeholder="occupation">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="dropdown">State</label>
<select id="dropdown" class="form-control">
<option selected>Choose...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="form-group col-md-2">
<label id="number-label" for="number">Zip</label>
<input type="number" class="form-control" id="number" min="10000" max="99999">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comments</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</section>
</div>
<footer class="page-footer font-small blue">
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://paulinafischer.github.io/"> Paulina Fischer</a>
</div>
</footer>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
.flex-container {
display: flex;
flex-direction: row;
background-color: #4682B4;
justify-content: center;
border-radius:5px;
}
.flex-container > div {
background-color: snow;
width: 300px;
margin: 12px;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius:5px;
}
section{
padding:15px;
}
h2{
padding-bottom:20px;
}
.jumbotron{
margin-top:50px;
background:lightblue;
}
#form_box{
background:lightblue;
padding:20px;
border-radius:10px;
}
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
h1{
color:#4169E1;
font-size: 60px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
h1{
color:darkcyan;
font-size: 30px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment