First Full HTML, CSS, Bootstrap Web Page(From Coding Bootcamp)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
</head>
<body>
<div class='row'>
<div class='col-xs-8'>
<h2 class='text-primary text-center'>CatPhotoApp</h2>
</div>
<div class='col-xs-4'>
<a href='#'></a>
</div>
</div>
<br>
<br>
<div class='row'>
<div class='col-xs-4'>
<button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>
</div>
<div class='col-xs-4'>
<button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>
</div>
<div class='col-xs-4'>
<button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>
</div>
</div>
Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<br>
<div class='row'>
<div class='col-xs-6'>
<label><input type='radio' name='indoor-outdoor'> Indoor</label>
</div>
<div class='col-xs-6'>
<label><input type='radio' name='indoor-outdoor'> Outdoor</label>
</div>
</div>
<br>
<div class='row'>
<div class='col-xs-4'>
<label><input type='checkbox' name='personality'> Loving</label>
</div>
<div class='col-xs-4'>
<label><input type='checkbox' name='personality'> Lazy</label>
</div>
<div class='col-xs-4'>
<label><input type='checkbox' name='personality'> Crazy</label>
</div>
</div>
<br>
<div class='row'>
<div class='col-xs-7'>
<input type='text' class='form-control' placeholder='cat photo URL' required>
</div>
<div class='col-xs-5'>
<button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>
</div>
</div>
</form>
</body>
</html>
Written by donovan adams
Related protips
Have a fresh tip? Share with Coderwall community!
