Skip to content

Commit 7d3af0a

Browse files
espenakespenak
committed
Started on header styles.
1 parent 19dec1b commit 7d3af0a

4 files changed

Lines changed: 114 additions & 205 deletions

File tree

‎index.html‎

Lines changed: 73 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -11,92 +11,91 @@
1111
facebookurl: https://www.facebook.com/DevilryProsjektet
1212
---
1313

14-
<!-- NAVBAR
15-
================================================== -->
16-
<div class="navbar-wrapper">
17-
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
18-
<div class="container">
19-
20-
<div class="navbar navbar-inverse">
21-
<div class="navbar-inner">
22-
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
23-
<span class="icon-bar"></span>
24-
<span class="icon-bar"></span>
25-
<span class="icon-bar"></span>
26-
</button>
27-
<a class="brand" href="#">Devilry</a>
28-
<div class="nav-collapse collapse">
29-
<ul class="nav">
30-
<li class="active"><a href="#">Home</a></li>
31-
<li><a href="#social">Get involved</a></li>
32-
<li><a href="#about">About</a></li>
33-
<li><a href="#help">Help/docs</a></li>
34-
<li><a href="#develop">Develop</a></li>
35-
</ul>
14+
15+
<div id="header">
16+
<div class="navbar-wrapper">
17+
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
18+
<div class="container">
19+
20+
<div class="navbar navbar-inverse">
21+
<div class="navbar-inner">
22+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
23+
<span class="icon-bar"></span>
24+
<span class="icon-bar"></span>
25+
<span class="icon-bar"></span>
26+
</button>
27+
<a class="brand" href="#">Devilry</a>
28+
<div class="nav-collapse collapse">
29+
<ul class="nav">
30+
<li class="active"><a href="#">Home</a></li>
31+
<li><a href="#social">Get involved</a></li>
32+
<li><a href="#about">About</a></li>
33+
<li><a href="#help">Help/docs</a></li>
34+
<li><a href="#develop">Develop</a></li>
35+
</ul>
36+
</div>
37+
</div>
3638
</div>
39+
3740
</div>
3841
</div>
3942

40-
</div>
41-
</div>
4243

4344

44-
45-
<!-- Carousel
46-
================================================== -->
47-
<div id="imageCarousel" class="carousel slide">
48-
<div class="carousel-inner">
49-
50-
<div class="item active">
51-
<img src="slideshowimages/frontpage.png" alt="">
52-
<div class="container">
53-
<div class="carousel-caption">
54-
<p>
55-
Devilry is a flexible and powerful system for handling electronic deliveries.
56-
</p>
57-
<!--<a class="btn btn-large btn-primary" href="#">Sign up today</a>-->
45+
<div id="imageCarousel" class="carousel slide">
46+
<div class="carousel-inner">
47+
48+
<div class="item active">
49+
<img src="slideshowimages/frontpage.png" alt="">
50+
<div class="container">
51+
<div class="carousel-caption">
52+
<p>
53+
Devilry is a flexible and powerful system for handling electronic deliveries.
54+
</p>
55+
<!--<a class="btn btn-large btn-primary" href="#">Sign up today</a>-->
56+
</div>
57+
</div>
5858
</div>
59-
</div>
60-
</div>
61-
62-
<div class="item">
63-
<img src="slideshowimages/courseadmin-assignmentoverview.png" alt="">
64-
<div class="container">
65-
<div class="carousel-caption">
66-
<p>
67-
Devilry is a complete tool for course administrators that want to have full control over their assignments, students and examiners.
68-
</p>
59+
60+
<div class="item">
61+
<img src="slideshowimages/courseadmin-assignmentoverview.png" alt="">
62+
<div class="container">
63+
<div class="carousel-caption">
64+
<p>
65+
Devilry is a complete tool for course administrators that want to have full control over their assignments, students and examiners.
66+
</p>
67+
</div>
68+
</div>
6969
</div>
70-
</div>
71-
</div>
72-
73-
<div class="item">
74-
<img src="slideshowimages/opensource.png" alt="">
75-
<div class="container">
76-
<div class="carousel-caption">
77-
<p>
78-
Devilry is powered on the principles of open source
79-
development.
80-
</p>
70+
71+
<div class="item">
72+
<img src="slideshowimages/opensource.png" alt="">
73+
<div class="container">
74+
<div class="carousel-caption">
75+
<p>
76+
Devilry is powered on the principles of open source
77+
development.
78+
</p>
79+
</div>
80+
</div>
8181
</div>
82-
</div>
83-
</div>
84-
85-
<div class="item">
86-
<img src="slideshowimages/community.png" alt="">
87-
<div class="container">
88-
<div class="carousel-caption">
89-
<p>An open community is essential for
90-
maintaining the highest level of quality.
91-
</p>
82+
83+
<div class="item">
84+
<img src="slideshowimages/community.png" alt="">
85+
<div class="container">
86+
<div class="carousel-caption">
87+
<p>An open community is essential for
88+
maintaining the highest level of quality.
89+
</p>
90+
</div>
91+
</div>
9292
</div>
93+
9394
</div>
95+
<a class="left carousel-control" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
96+
<a class="right carousel-control" href="#imageCarousel" data-slide="next">&rsaquo;</a>
9497
</div>
95-
96-
</div>
97-
<a class="left carousel-control" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
98-
<a class="right carousel-control" href="#imageCarousel" data-slide="next">&rsaquo;</a>
99-
</div><!-- /.carousel -->
98+
</div>
10099

101100

102101

‎less/header.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#header {
2+
//background-color: #333;
3+
//padding-top: 30px;
4+
//padding-bottom: 30px
5+
}

‎less/imageCarousel.less‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#imageCarousel {
2+
margin: 20px auto 20px auto;
3+
width: 702px;
4+
height: 429px;
5+
border: 1px solid #eee;
6+
7+
//.container {
8+
//position: relative;
9+
//z-index: 9;
10+
//}
11+
.item {
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
16+
.carousel-caption {
17+
font-size: @baseFontSize * 1.5;
18+
font-weight: 200;
19+
line-height: @baseLineHeight * 1.5;
20+
}
21+
}
22+
23+
.carousel-control {
24+
top: 160px;
25+
margin-top: 0;
26+
//height: 80px;
27+
//margin-top: 0;
28+
//font-size: 120px;
29+
//text-shadow: 0 1px 1px rgba(0,0,0,.4);
30+
//background-color: transparent;
31+
//border: 0;
32+
//z-index: 10;
33+
}
34+
}

‎less/styles.less‎

Lines changed: 2 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -11,139 +11,10 @@
1111
@import "../components/font-awesome/less/icons.less";
1212
@import "marketing";
1313
@import "featurette";
14-
15-
/* GLOBAL STYLES
16-
-------------------------------------------------- */
17-
/* Padding below the footer and lighter body text */
14+
@import "header";
15+
@import "imageCarousel";
1816

1917
body {
2018
padding-bottom: 40px;
2119
color: #5a5a5a;
2220
}
23-
24-
25-
26-
27-
28-
/* CUSTOMIZE THE CAROUSEL
29-
-------------------------------------------------- */
30-
31-
/* Carousel base class */
32-
#imageCarousel {
33-
margin: 20px auto 20px auto;
34-
width: 702px;
35-
height: 429px;
36-
border: 1px solid #eee;
37-
38-
//.container {
39-
//position: relative;
40-
//z-index: 9;
41-
//}
42-
.item {
43-
width: 100%;
44-
height: 100%;
45-
overflow: hidden;
46-
47-
.carousel-caption {
48-
font-size: @baseFontSize * 1.5;
49-
font-weight: 200;
50-
line-height: @baseLineHeight * 1.5;
51-
}
52-
}
53-
54-
.carousel-control {
55-
top: 160px;
56-
margin-top: 0;
57-
//height: 80px;
58-
//margin-top: 0;
59-
//font-size: 120px;
60-
//text-shadow: 0 1px 1px rgba(0,0,0,.4);
61-
//background-color: transparent;
62-
//border: 0;
63-
//z-index: 10;
64-
}
65-
}
66-
67-
68-
69-
/* RESPONSIVE CSS
70-
-------------------------------------------------- */
71-
72-
//@media (max-width: 979px) {
73-
74-
//.container.navbar-wrapper {
75-
//margin-bottom: 0;
76-
//width: auto;
77-
//}
78-
//.navbar-inner {
79-
//border-radius: 0;
80-
//margin: -20px 0;
81-
//}
82-
83-
//.carousel .item {
84-
//height: 500px;
85-
//}
86-
//.carousel img {
87-
//width: auto;
88-
//height: 500px;
89-
//}
90-
91-
//.featurette {
92-
//height: auto;
93-
//padding: 0;
94-
//}
95-
//.featurette-image.pull-left,
96-
//.featurette-image.pull-right {
97-
////display: block;
98-
//float: none;
99-
//max-width: 40%;
100-
//margin: 0 auto 20px;
101-
//}
102-
//}
103-
104-
105-
//@media (max-width: 767px) {
106-
107-
//.navbar-inner {
108-
//margin: -20px;
109-
//}
110-
111-
//.carousel {
112-
//margin-left: -20px;
113-
//margin-right: -20px;
114-
//}
115-
//.carousel .container {
116-
117-
//}
118-
//.carousel .item {
119-
//height: 300px;
120-
//}
121-
//.carousel img {
122-
//height: 300px;
123-
//}
124-
//.carousel-caption {
125-
//width: 65%;
126-
//padding: 0 70px;
127-
//margin-top: 100px;
128-
//}
129-
//.carousel-caption h1 {
130-
//font-size: 30px;
131-
//}
132-
//.carousel-caption .lead,
133-
//.carousel-caption .btn {
134-
//font-size: 18px;
135-
//}
136-
137-
//.marketing .span4 + .span4 {
138-
//margin-top: 40px;
139-
//}
140-
141-
//.featurette-heading {
142-
//font-size: 30px;
143-
//}
144-
//.featurette .lead {
145-
//font-size: 18px;
146-
//line-height: 1.5;
147-
//}
148-
149-
//}

0 commit comments

Comments
 (0)