Ajax Loader
×

Untitled

HTML
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>Geer Creations</title>
5
    <!-- Icon -->
6
    <link rel="shortcut icon" href="logo-inverse.ico" >
7
    <!-- Fonts -->
8
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
9
        <!-- Bootstrap core CSS -->
10
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
11
        <!-- Custom styles -->
12
        <link href="main.css" rel="stylesheet">    
13
  </head>
14
    <body>
15
    <div class="page">
16
      <div class="navbar navbar-default navbar-static-top">
17
        <div class="container">
18
          <div class="navbar-header">
19
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
20
              <span class="sr-only">Toggle navigation</span>
21
              <span class="icon-bar"></span>
22
              <span class="icon-bar"></span>
23
              <span class="icon-bar"></span>
24
            </button>
25
            <a class="navbar-brand" href="#"><img style="max-width:50px; margin-top: -7px;" src="http://i1284.photobucket.com/albums/a579/Ian_Geer/logo-inverse_zps3767ce84.png"></a>
26
          </div>
27
          <div class="collapse navbar-collapse" id=".navbar-ex1-collapse">
28
            <ul class="nav navbar-nav">
29
              <li class="active"><a href="#">Home</a></li>
30
              <li><a href="#">Browse</a></li>
31
              <li><a href="#">Contact</a></li>
32
            </ul>
33
            <ul class="nav navbar-nav navbar-right">
34
              <li><a href="#">Sign Up</a></li>
35
              <li><a href="#">Login</a></li>
36
            </ul>
37
          </div>
38
        </div>
39
      </div>
40
    </div>
41
    <div class="jumbotron">
42
      <div class="container">
43
        <h1>We combine strategy, creative thinking, & technology to drive results.</h1>
44
        <button type="button" class="btn btn-default btn-lg">Learn More</button>
45
      </div>
46
    </div>
47
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
48
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
49
    </body>
50
</html>
 
CSS
body {
1
body {
2
  font-family: 'Ubuntu', sans-serif;
3
}
4
.navbar {
5
  background-color: #fff;
6
  border: none;
7
  padding-top: 10px;
8
}
9
.navbar .nav {
10
  margin-top: 5px;
11
}
12
.navbar-default .navbar-nav > .active > a,
13
.navbar-default .navbar-nav > .active > a:hover,
14
.navbar-default .navbar-nav > .active > a:focus {
15
  color: #ff9721;
16
  background-color: #fff;
17
  font-weight: 700;
18
}
19
.navbar-default .navbar-nav > li > a {
20
  -webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
21
  transition: color .2s;
22
  color: #6E6E6E;
23
  background-color: transparent;
24
}
25
.navbar-default .navbar-nav > li > a:hover,
26
.navbar-default .navbar-nav > li > a:focus {
27
  -webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
28
  transition: color .2s;
29
  color: #ff9721;
30
  background-color: transparent;
31
}
32
h1 {
33
  color: #fff;
34
  text-align: center;
35
}
36
.jumbotron {
37
  padding-top: 190px;
38
  padding-bottom: 173px;
39
  margin-right: auto;
40
  margin-left: auto;
41
  width: 100%;
42
  background-color: #170D00;
43
  color: #fff;
44
  text-align: center;
45
}
46
.jumbotron h1 {
47
  font-size: 3em;
48
}
49
.form-control {
50
  margin-top: 5px;
51
  border-radius: 20px;
52
}
53
.btn {
54
  -webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
55
  transition: color .5s, border .5s;
56
  margin-top: 50px;
57
  color: #fff;
58
  background-color: transparent;
59
  border: 2px solid #fff;
60
  width: 220px;
61
}
62
.btn:hover,
63
.btn:focus {
64
  -webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
65
  transition: color .5s, border .5s;
66
  margin-top: 50px;
67
  color: #ff9721;
68
  background-color: transparent;
69
  border: 2px solid #ff9721;
70
  width: 220px;
71
}
 

Untitled

CSSDeck G+