Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TIY-Assignments: 10--enter-css #12

Merged
merged 9 commits into from
May 20, 2015
Merged

TIY-Assignments: 10--enter-css #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b4e6ed2
Added normalize.css
pcreglow May 19, 2015
03eef88
Merge branch 'master' of https://github.com/pcreglow/TIY-Assignments …
pcreglow May 19, 2015
6a18d73
Removed bullets, upgraded fonts, padding & margin for h3, h4
pcreglow May 20, 2015
eea1815
Ignore bower_components
pcreglow May 20, 2015
f840e08
Added normalize.css
pcreglow May 20, 2015
59871a6
Added bower.json, normalize and jquery
pcreglow May 20, 2015
0d53e9b
ViewModeSwitch: Added color, border, width, float
pcreglow May 20, 2015
abed5ee
Added icons to NestedAccordion
pcreglow May 20, 2015
81f13d1
Added bower-components, modified css with class example
pcreglow May 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions FullWidthTabs/.gitignore
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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