Skip to content

Instantly share code, notes, and snippets.

@MladenMladenov

MladenMladenov/About.html

Last active August 29, 2015 14:25
Show Gist options
  • Save MladenMladenov/23c66c670ade363b69b8 to your computer and use it in GitHub Desktop.
Save MladenMladenov/23c66c670ade363b69b8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
About.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onResize="changeImage();">
<div id = "container">
<div id = "header">
<h1>Indispler Team</h1>
</div>
<img src="WebsiteImage.jpg" id="websiteimage1">
<div class="tabs">
<ul class="tab-links">
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Indispler.html">Home</a></li>
<li class="active"><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/About.html">About</a></li>
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Contacts.html">Contacts</a></li>
</ul>
<div class="tab-content">
<div id="About" class="tab active">
<h1>About us</h1>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<div id = "footer">
Indispler Team 2015
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
Contacts.html
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onResize="changeImage();">
<div id = "container">
<div id = "header">
<h1>Indispler Team</h1>
</div>
<img src="WebsiteImage.jpg" id="websiteimage1">
<div class="tabs">
<ul class="tab-links">
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Indispler.html">Home</a></li>
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/About.html">About</a></li>
<li class="active"><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Contacts.html">Contacts</a></li>
</ul>
<div class="tab-content">
<div id="Contacts" class="tab active">
<h1>Contact us</h1>
<p>Get in touch with us.
Sofia, Bulgaria
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<div id = "footer">
Indispler Team 2015
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
Homepage.html
<!DOCTYPE html>
<html>
<head>
<title> Indispler Team</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onResize="changeImage(WebsiteImage);">
<div id = "container">
<div id = "header">
<h1>Indispler Team Project</h1>
</div>
<img src="WebsiteImage.jpg" id="websiteimage1">
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Indispler.html">Home</a></li>
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/About.html">About</a></li>
<li><a href="file:///C:/Users/Mladen/Desktop/IndisplerTeamProject/Contacts.html">Contacts</a></li>
</ul>
<div class="tab-content">
<div id="Homepage" class="tab active">
<h1>Home Page</h1>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
<div id = "footer">
Indispler Team 2015
</div>
</div>
</body>
</div>
</div>
</div>
</html>
Raw
style.css
body{
background-image: url(C:/Users/Mladen/Desktop/Backround.jpg);
background-repeat: no-repeat;
background-position: right top;
}
a{
text-decoration: none;
}
h1 {
margin: 0;
}
#container{
background-color: #BAD1D1;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: #4F92EC;
color: white;
text-align: center;
padding: 10px;
}
#content: {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
#nav ul{
list-style-type: none;
padding: right;
}
.selected: {
font-style: bold;
}
#main{
width: 600px;
float: right;
}
#footer{
clear: both;
padding: 20px;
background-color: #4F92EC;
color: white;
text-align: left;
}
#websiteimage1{
display: block;
margin-left: auto;
margin-right: auto;
}
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:active {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment