Skip to content
This repository has been archived by the owner on Sep 3, 2024. It is now read-only.

Commit

Permalink
initial upload
Browse files Browse the repository at this point in the history
  • Loading branch information
Steffen Nilsen committed Aug 19, 2015
1 parent 8b9ae1c commit 4425c2a
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 40 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"dependencies": {
"jquery": "~2.1.4",
"bootstrap": "~3.3.4",
"plato": "~1.4.0"
"plato": "~1.4.0",
"slicknav": "~1.0.3"
}
}
85 changes: 67 additions & 18 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Cyb</title>
<title>Cybernetisk Selskap</title>

<!-- inject-vendor:css -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../bower_components/slicknav/dist/slicknav.min.css" />
<!-- endinject -->

<!-- inject:css -->
Expand All @@ -17,19 +18,28 @@
<body>
<div class="header">
<div class="container">
<div class="col-md-4">
<div class="float-left">
<h1>Cybernetisk Selskap</h1>
</div>
<div class="col-md-6">
<div class="btn-group" role="group">
<button type="button" class="btn">Bli Frivilig</button>
<button type="button" class="btn">Om Oss</button>
<button type="button" class="btn">Medlemsinfo</button>
<button type="button" class="btn">Events</button>
<button type="button" class="btn">Utlån</button>
<button type="button" class="btn">Kontakt oss</button>
</div>
<!-- <div id="menu">
<ul>
<li><a href="#">Bli Frivilig</a></li>
<li><a href="#">Om Oss</a></li>
<li><a href="#">Medlemsinfo</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Utlån</a></li>
<li><a href="#">Kontakt oss</a></li>
</ul>
</div> -->
<div id="menu" class="btn-group float-left" role="group">
<button type="button" class="btn btn-cyb">Bli Frivilig</button>
<button type="button" class="btn btn-cyb">Om Oss</button>
<button type="button" class="btn btn-cyb">Medlemsinfo</button>
<button type="button" class="btn btn-cyb">Events</button>
<button type="button" class="btn btn-cyb">Utlån</button>
<button type="button" class="btn btn-cyb">Kontakt oss</button>
</div>
<div id="menu-anchor"></div>
</div>
</div>
<div class="content">
Expand Down Expand Up @@ -79,13 +89,51 @@ <h1>Cybernetisk Selskap</h1>
</div>
</div>
</div>
<div class="marketing">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Bli Frivilig</h2>
<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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div align="center"><button type="button" class="btn">Bli Med</button></div>
<div class="content-rows">
<div class="content-row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<h2 class="text-center">Bli Frivilig</h2>
<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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div align="center"><button type="button" class="btn btn-cyb">Bli Med</button></div>
</div>
<div class="col-md-4 col-md-offset-2">
<h2 class="text-center">Om oss</h2>
<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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div align="center"><button type="button" class="btn btn-cyb">Les Mer</button></div>
</div>
</div>
</div>
</div>
<div class="content-row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<h2 class="text-center">Medlemsinfo</h2>
<div style="width: 100%; height: 200px; background-color: darkcyan; margin: 10px 0px;"></div>
<div align="center"><button type="button" class="btn btn-cyb">Bli Med</button></div>
</div>
<div class="col-md-4 col-md-offset-2">
<h2 class="text-center">Events</h2>
<div style="width: 100%; height: 200px; background-color: darkcyan; margin: 10px 0px;"></div>
</div>
</div>
</div>
</div>
<div class="content-row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<h2 class="text-center">Utlån</h2>
<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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div align="center"><button type="button" class="btn btn-cyb">Gå til utleieskjema</button></div>
</div>
<div class="col-md-4 col-md-offset-2">
<h2 class="text-center">Kontakt Oss</h2>
<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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div align="center"><button type="button" class="btn btn-cyb">Bli Med</button></div>
</div>
</div>
</div>
</div>
Expand All @@ -103,6 +151,7 @@ <h2>Bli Frivilig</h2>
<!-- inject-vendor:js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/slicknav/dist/jquery.slicknav.min.js"></script>
<!-- endinject -->


Expand Down
15 changes: 11 additions & 4 deletions src/scripts/site.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
(function() {
$(document).ready(activate);

function activate() {
$(document).ready(function() {
carousel();
}
menu();
});

function carousel() {
$('.carousel').carousel({
interval: 2000
});
}

function menu() {
$('#menu').slicknav({
label: '',
duplicate: false,
prependTo: '#menu-anchor'
});
}
})();
23 changes: 23 additions & 0 deletions src/styles/sass/menu.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.slicknav_menu {
display:none;
}

@media screen and (max-width: 40em) {
#menu {
display: none;
}

#menu-large {
display: none;
}

.slicknav_menu {
display: block;
}
}

#menu-anchor {
.slicknav_menu {
background-color: $base-color;
}
}
45 changes: 35 additions & 10 deletions src/styles/sass/scaffolding.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,50 @@
$line-width: 2px;

body {
background-color: $base-color;
}

.header {
background-color: $base-color;
color: $background-color;
border-bottom-color: $accent-color;
border-bottom-width: $line-width;
border-bottom-style: solid;

.btn-group {
margin-top: 25px;

.btn {
background-color: $accent-color;
}

.btn:hover {
background-color: $accent2-color;
}
}
}

.content {
padding-bottom: 60px;
}

.carousel-container {
padding-top: 10px;
background-color: $base-color;
}

.marketing {
background-color: $shadow2-color;
.content-rows {
.content-row {
padding-bottom: 20px;
padding-top: 10px;
}

.content-row:nth-child(odd) {
background-color: $shadow2-color;
}

.content-row:nth-child(even) {
background-color: $shadow-color;
}
}

.footer {
z-index: -1;
background-color: $base-color;
height: 60px;
border-top-color: $accent-color;
border-top-width: $line-width;
border-top-style: solid;
}
19 changes: 19 additions & 0 deletions src/styles/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,23 @@

@import "colors";
@import "carousel";
@import "menu";
@import "scaffolding";

.float-left {
float: left;
}

.float-right {
float: right;
}

.btn.btn-cyb {
background-color: $accent2-color;
color: $background-color;
}

.btn.btn-cyb:hover {
background-color: $accent-color;
color: $base-color;
}
60 changes: 53 additions & 7 deletions src/styles/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 4425c2a

Please sign in to comment.