Skip to content

Instantly share code, notes, and snippets.

@rbeauchamp12

rbeauchamp12/index.html

Created February 5, 2017 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbeauchamp12/e1064cf0699f3f122a38648f95e7b1e3 to your computer and use it in GitHub Desktop.
Save rbeauchamp12/e1064cf0699f3f122a38648f95e7b1e3 to your computer and use it in GitHub Desktop.
Download ZIP
R'beau Photography Sample website
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>R'Beau Photography</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- /////////////// Header Section /////////////////////////////// -->
<header class="w3-display-container w3-content">
<img class="w3-image" src="./images/prsunset.jpg" alt="PR sunset">
<div class="w3-display-middle w3-padding-xlarge w3-border w3-wide w3-text-Black w3-center">
<h1 class="w3-hide-medium w3-hide-small w3-xxlarge">R'Beau Photography</h1>
<h5 class="w3-hide-large">Robert Beauchamp</h5>
<h3 class="w3-hide-medium w3-hide-small">Photographer</h3>
</div>
<!-- Navbar Section (at the bottom of the header image) -->
<ul class="w3-navbar w3-light-grey w3-round w3-display-bottommiddle w3-hide-small">
<li><a href="#">HOME</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</header>
<!-- Navbar on small screens -->
<ul class="w3-navbar w3-light-grey w3-hide-large w3-hide-medium">
<li><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- (page Content) -->
<div class="w3-content w3-padding-xlarge w3-margin-top" id="portfolio">
<!-- ////////////////// Portfolio section Begins /////////////////////////////// -->
<img src="./images/opensky.jpeg" alt="Black and White" class="w3-image" width="1000" height="500">
<img src="./images/raindropleaves.jpeg" alt="Rain Drops" class="w3-image w3-margin-top" width="1000" height="500">
<img src="./images/rainpelets.jpeg" alt="Rain Pelets" class="w3-image w3-margin-top" width="1000" height="500">
<!-- //////////////////// portfolio sections ends ///////////////-->
<!-- ////////////////////// contact form begins /////////////// -->
<div class="w3-black w3-padding-xlarge w3-padding-32 w3-margin-top" id="contact">
<h3 class="w3-center">Contact</h3>
<hr>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus.</p>
<form action="form.asp" target="_blank">
<div class="w3-group">
<label>Name</label>
<input class="w3-input w3-border" type="text" required name="Name">
</div>
<div class="w3-group">
<label>Email</label>
<input class="w3-input w3-border" type="text" required name="Email">
</div>
<div class="w3-group">
<label>Message</label>
<input class="w3-input w3-border" required name="Message">
</div>
<button type="submit" class="w3-btn w3-btn-block w3-padding-12 w3-dark-grey">Send</button>
</form>
<br>
<p class="w3-center">Sample Design By Robert Beauchamp</p>
</div>
</div>
</body>
</html>
Raw
style.css
.w3-display-container{
max-width:1500px;
height: 500px;
}
.w3-image{
height:500px ;
width: 1500px;
}
.w3-hide-large{
white-space: nowrap;
}
.w3-navbar{
bottom: -16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment