Skip to content

Commit

Permalink
Merge pull request #12 from pcreglow/10--enter-css
Browse files Browse the repository at this point in the history 
TIY-Assignments: 10--enter-css
  • Loading branch information
@pcreglow
pcreglow committed May 20, 2015
2 parents e8ef7b2 + 81f13d1 commit 45e0905
Show file tree
Hide file tree
Showing 13 changed files with 402 additions and 127 deletions.
1 change: 1 addition & 0 deletions FullWidthTabs/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
bower_components
19 changes: 19 additions & 0 deletions FullWidthTabs/bower.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "FullWidthTabs",
"version": "0.0.0",
"homepage": "https://github.com/pcreglow/TIY-Assignments",
"authors": [
"Phillip Creglow <phillipcreglow@msn.com>"
],
"license": "CC0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4"
}
}
72 changes: 72 additions & 0 deletions FullWidthTabs/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,75 @@

body {
font-family: Arial, sans-serif;
color: cornflowerblue;
}


.content section[id^="section-"] {
display: none;
padding-left: 1em;
padding-right: 1em;
}

.content section[id^="section"]:first-of-type {
display: block;
}

.content section[id^="section-"]::after {
content: " ";
display: table;
clear: both;
}

.mediabox {
width: 33%;
float: left;
padding-right: 1em;
padding-left: 1em;
box-sizing: border-box;
}

.mediabox img {
width: 100%;
}






































/*@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?pvm5gj');
Expand Down
258 changes: 138 additions & 120 deletions FullWidthTabs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,144 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<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.0">
<title>Blueprint: Responsive Full Width Tabs</title>
<meta name="description" content="Blueprint: Responsive Full Width Tabs" />
<meta name="keywords" content="responsive tabs, full width tabs, template, blueprint" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />-->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!--[if IE]>

<head>
<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.0">
<title>Blueprint: Responsive Full Width Tabs</title>
<meta name="description" content="Blueprint: Responsive Full Width Tabs" />
<meta name="keywords" content="responsive tabs, full width tabs, template, blueprint" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="tabs" class="tabs">
<nav>
<ul>
<li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li>
<li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li>
<li><a href="#section-3" class="icon-food"><span>Food</span></a></li>
<li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li>
<li><a href="#section-5" class="icon-truck"><span>Order</span></a></li>
</ul>
</nav>
<div class="content">
<section id="section-1">
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Sushi Gumbo Beetroot</h3>
<p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Pea Sprouts Fava Soup</h3>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
</div>
<div class="mediabox">
<img src="img/03.png" alt="img03" />
<h3>Turnip Broccoli Sashimi</h3>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
</div>
</section>
<section id="section-2">
<div class="mediabox">
<img src="img/04.png" alt="img04" />
<h3>Asparagus Cucumber Cake</h3>
<p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
<div class="mediabox">
<img src="img/05.png" alt="img05" />
<h3>Magis Kohlrabi Gourd</h3>
<p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Ricebean Rutabaga</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>
</div>
</section>
<section id="section-3">
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Noodle Curry</h3>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Leek Wasabi</h3>
<p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Green Tofu Wrap</h3>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
</div>
</section>
<section id="section-4">
<div class="mediabox">
<img src="img/03.png" alt="img03" />
<h3>Tomato Cucumber Curd</h3>
<p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Mushroom Green</h3>
<p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="mediabox">
<img src="img/04.png" alt="img04" />
<h3>Swiss Celery Chard</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>
</div>
</section>
<section id="section-5">
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Radish Tomato</h3>
<p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Fennel Wasabi</h3>
<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Red Tofu Wrap</h3>
<p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
</div>
</section>
</div><!-- /content -->
</div><!-- /tabs -->
<script src="js/CBPFWTabs.js"></script>
<script>
new CBPFWTabs( document.getElementById( 'tabs' ) );
<script src=http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js></script>
<script src="js/scripts.js"></script>
</script>
</head>

<body>
<div id="tabs" class="tabs">
<nav>
<ul>
<li>
<a href="#section-1" class="icon-shop">
<span>Shop</span>
</a>
</li>
<li>
<a href="#section-2" class="icon-cup">
<span>Drinks</span>
</a>
</li>
<li>
<a href="#section-3" class="icon-food">
<span>Food</span>
</a>
</li>
<li>
<a href="#section-4" class="icon-lab">
<span>Lab</span>
</a>
</li>
<li>
<a href="#section-5" class="icon-truck">
<span>Order</span>
</a>
</li>
</ul>
</nav>
<div class="content">
<section id="section-1">
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Sushi Gumbo Beetroot</h3>
<p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Pea Sprouts Fava Soup</h3>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
</div>
<div class="mediabox">
<img src="img/03.png" alt="img03" />
<h3>Turnip Broccoli Sashimi</h3>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
</div>
</section>
<section id="section-2">
<div class="mediabox">
<img src="img/04.png" alt="img04" />
<h3>Asparagus Cucumber Cake</h3>
<p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
<div class="mediabox">
<img src="img/05.png" alt="img05" />
<h3>Magis Kohlrabi Gourd</h3>
<p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Ricebean Rutabaga</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>
</div>
</section>
<section id="section-3">
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Noodle Curry</h3>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Leek Wasabi</h3>
<p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Green Tofu Wrap</h3>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
</div>
</section>
<section id="section-4">
<div class="mediabox">
<img src="img/03.png" alt="img03" />
<h3>Tomato Cucumber Curd</h3>
<p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Mushroom Green</h3>
<p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="mediabox">
<img src="img/04.png" alt="img04" />
<h3>Swiss Celery Chard</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>
</div>
</section>
<section id="section-5">
<div class="mediabox">
<img src="img/02.png" alt="img02" />
<h3>Radish Tomato</h3>
<p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
</div>
<div class="mediabox">
<img src="img/06.png" alt="img06" />
<h3>Fennel Wasabi</h3>
<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
</div>
<div class="mediabox">
<img src="img/01.png" alt="img01" />
<h3>Red Tofu Wrap</h3>
<p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
</div>
</section>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src=http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js></script>
<script src="js/scripts.js"></script>

</body>

</body>
</html>
5 changes: 4 additions & 1 deletion NestedAccordion/bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
"tests"
],
"dependencies": {
"lodash": "~3.8.0"
"lodash": "~3.8.0",
"normalize.css": "~3.0.3",
"modernizr": "~2.8.3",
"jquery": "~2.1.4"
}
}
Loading

0 comments on commit 45e0905

Please sign in to comment.