Skip to content

Instantly share code, notes, and snippets.

@seekingcat

seekingcat/index.html

Created August 10, 2017 23:27
Show Gist options
  • Save seekingcat/1d1d415edceb0eebde8375c142c0d1e6 to your computer and use it in GitHub Desktop.
Save seekingcat/1d1d415edceb0eebde8375c142c0d1e6 to your computer and use it in GitHub Desktop.
Download ZIP
Practice1
Raw
index.html
<div class="container-fluid">
<div class="container-fluid">
<nav class="navbar">
<ul>
<li><a href="#about">About</a>
<li><a href="#examples">Portfolio
<li><a href="#contact">Contact</a>
</ul>
</nav>
</div>
<div class="container-fluid" id="about">
<img src="http://www.wallpaperbetter.com/wallpaper/843/607/823/cat-wear-glasses-to-looking-for-something-1080P-wallpaper-middle-size.jpg" />
<p>Lorem ipsum dolor sit amet, eum id amet fugit singulis. Mea ut blandit incorrupte. Affert labores usu ea. Quidam suscipit mediocritatem ne nam, vix iuvaret tacimates cu. Eam ad summo impetus verterem, at vim mundi latine corpora.</p>
</div>
<div class="container-fluid" id="examples">
<h2>Portfolio</h2>
<div class = "row">
<div class="col-sm-4">
<img src="https://image.shutterstock.com/z/stock-vector-responsive-web-design-and-web-development-vector-illustration-flat-office-desk-style-icons-and-236339074.jpg" class="center-block" />
<br>
<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<br>
<a href="#" >Read More</a>
</div>
<div class="col-sm-4">
<img src = "https://image.shutterstock.com/z/stock-vector-responsive-web-design-and-web-development-vector-illustration-flat-office-desk-style-icons-and-236339074.jpg" class="center-block"/>
<br>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<br>
<a href="#">Read More</a>
</div>
<div class="col-sm-4">
<img src = "https://image.shutterstock.com/z/stock-vector-responsive-web-design-and-web-development-vector-illustration-flat-office-desk-style-icons-and-236339074.jpg" class="center-block" />
<br>
<p> "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
<br>
<a href="#" >Read More</a>
<br>
</div>
</div>
</div>
<br>
<div class="container-fluid" id="contact">
<h2>Get in touch</h2>
<br>
<form>
<input type="text" placeholder="Your name here"></p>
<input type="text" placeholder="Your email here"></p
<br>
<div>
<input type="text" placeholder="Your message here" class="textbox">
<div>
<br>
<br>
<input type="submit" value="Send by owl">
</form>
</div>
<div class="container-fluid" id="footer">
<p>123 Street Street</p>
<p>AnyTown</p>
<p>1A2B3C</p>
</div>
</div>
Raw
style.css
/*general styling*/
body {
background-color: black;
overflow-x: hidden;
padding: 0, 0;
}
div {
width: 100%;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-right: auto;
margin-left: auto;
}
p, a {
color: white;
font-family: 'Merriweather', serif;
font-size: 16px;
}
h2 {
color: white;
font-family: 'Merriweather', serif;
font-size: 36px;
text-align: center;
padding-bottom: 20px;
}
/*navbar styling*/
ul {
list-style-type: none;
overflow: hidden;
float: right;
}
li {
display: inline;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #e513bd;
text-decoration: none;
}
/*about section styling*/
#about {
background-color: #e513bd;
}
#about img {
width: 200px;
height: 200px;
display: block;
margin: auto;
border-radius: 100px;
padding-top: 20px;
}
#about p {
margin: 40px;
padding: 40px;
text-align: justify-all;
margin: auto;
}
/* portfolio styling*/
#examples {
padding-top: 30px;
}
img {
width: 80%;
margin:auto;
align:center;
padding-top:15px;
}
#examples p {
margin: auto;
width: 80%;
}
#examples a {
text-align:right;
display:block;
}
/* contact styling*/
#contact {
padding-top: 30px;
padding-bottom: 20px;
}
#contact form {
margin-left: 30px;
}
.textbox {
height: 200px;
width: 50%;
position:relative;
}
/*footer styling*/
#footer {
background-color: #e513bd;
margin-top:15px;
}
#footer p {
padding-top: 20px;
text-align: center;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment