Skip to content

Instantly share code, notes, and snippets.

/gist:5fd2c76bfc0b5902ba33 Secret

Created Nov 6, 2015
Embed
What would you like to do?
=============HTML================
<!DOCTYPE html>
<html>
<head>
<title>Apartments for rent in Chisinau Moldova - MoldovaRent.com</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="head-container">
<div class="wrapper">
<a href="index.html" id="logo">
Moldova<b>Rent</b>
</a>
<a href="" id="choose-lang">English
<img src="images/arrow-down.png">
</a>
<div id="top-links">
<a href="login.html">Log In</a>
<a href="register.html">Sign Up</a>
<button type="button">List your space</button>
</div>
</div>
</div>
<div id="content-container">
<div id="bgChange">
<img src="images/bg1.jpg">
<img src="images/bg2.jpg">
<img src="images/bg3.jpg">
</div>
<div id="search-container">
<h1>Welcome to Moldova</h1>
<h5>Find the best accommodation at the best price</h5>
<div id="input-fields">
<select id="city">
<option>Chisinau</option>
</select>
<input type="text" id="check-in" placeholder="Check In">
<input type="text" id="check-out" placeholder="Check Out">
<select id="guests">
</select>
<button type="button" class="search-button">Search</button>
</div>
</div>
<footer>
<div class="wrapper">
<a href="about.html">About us</a>
<a href="help.html">Help</a>
<a href="terms.html">Terms and conditions</a>
<a href="contact.html">Contact</a>
<span id="copyright">&copy; MoldovaRent</span>
</div>
</footer>
</div>
</body>
</html>
=============CSS================
body {
padding: 0;
margin: 0;
line-height: 1;
font-family: Arial,Helvetica,sans-serif;
-webkit-animation: bgChange 20s infinite;
animation: bgChange 20s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bgChange {
0% {
background-image: url("images/bg1.jpg");
width: 1366px;
}
50% {
background-image: url("images/bg2.jpg");
width: 1366px;
}
100% {
background-image: url("images/bg3.jpg");
width: 1366px;
}
}
/* Standard syntax */
@keyframes bgChange {
0% {
background-image: url("images/bg1.jpg");
width: 1366px;
}
50% {
background-image: url("images/bg2.jpg");
width: 1366px;
}
100% {
background-image: url("images/bg3.jpg");
width: 1366px;
}
}
#head-container {
position: relative;
width: 100%;
min-width: 600px;
background: #FFF;
border-bottom: 1px solid #CCC;
padding: 10px;
box-shadow: 2px 2px 6px -2px #A0A0A0;
z-index: 1000;
}
.wrapper {
margin: 0 auto;
width: 1108px;
}
#logo {
color: #1F7FEA;
text-decoration: none;
font-size: 28px;
transition: text-shadow 1s;
}
#logo:hover {
text-shadow: 1px 1px 2px #000;
}
#choose-lang {
color: #555555;
text-decoration: none;
font-size: 12px;
margin-left: 20px;
cursor: pointer;
}
#choose-lang img {
width: 9px;
color: #000;
}
#top-links {
float: right;
}
#top-links a {
text-decoration: none;
color: #474747;
font-size: 14px;
margin-right: 10px;
padding: 3px;
}
#top-links button {
color: #FFF;
font-weight: bold;
font-size: 15px;
text-align: center;
cursor: pointer;
background: #17A539;
border: none;
border: 1px solid #22B345;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #50CC59, #17A539);
padding: 7px 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
box-shadow: inset 1px 0 0 rgba(255,255,255,.125),inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
/*background-image: linear-gradient(to bottom, #d80d1f 0%, #7d000e 100%);*/
}
#top-links button:focus {
outline: none;
}
#bgChange img {
width: 1366px;
height: auto;
}
#search-container {
width: 747px;
background-color: rgba(0, 116, 228, 0.5);
color: #FFF;
text-align: center;
margin: 0 auto;
margin-top: 100px;
padding: 10px;
border-radius: 2px;
position: absolute;
top: 20%;
}
footer {
position: absolute;
width: 100%;
height: 28px;
background-color: rgba(0, 0, 0, 0.5);
padding-top: 17px;
font-size: 14px;
bottom: 0;
z-index: 1000;
}
footer a {
color: #F3F3F3;
font-size: 14px;
text-decoration: none;
margin-right: 35px;
outline: 0;
}
#copyright {
float: right;
color: #F3F3F3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment