Skip to content

Commit

Permalink
you're doing great
Browse files Browse the repository at this point in the history
  • Loading branch information
@GoesToEleven
GoesToEleven committed Apr 20, 2017
1 parent a546f91 commit 8729ead
Show file tree
Hide file tree
Showing 19 changed files with 294 additions and 5 deletions.
35 changes: 35 additions & 0 deletions 000_temp/09_SPRING-2017/013_doc-flow/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>

<header>header</header>
<main>
<article>
<h1>Heading of Article</h1>
<section>section 1</section>
<section>
sdas dfgdf<h2>holy cow we're in section 2</h2>asdas
<p>section 2</p>
</section>
<aside>here's an aside</aside>
<section>section 3</section>
</article>
</main>

<div>this is my div <a href="https://www.google.com">google</a> <img src="../../../000_img/pup.jpg" alt=""></div>

<br>

<a href="https://www.google.com">google</a> <img src="../../../000_img/pup.jpg" alt="">

<footer>footer</footer>

<div id="pf"></div>

</body>
</html>
18 changes: 18 additions & 0 deletions 000_temp/09_SPRING-2017/013_doc-flow/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
header, main, article, h1, section, aside, h2, p, div, footer {
padding: 0;
margin: 0;
box-sizing: border-box;
}

* {
border: 1px solid hotpink;
}

#pf {
position: fixed;
top:0;
right:0;
background-color: red;
height: 100px;
width: 100px;
}
15 changes: 15 additions & 0 deletions 000_temp/09_SPRING-2017/014_block-nest/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>

<div>
<span>here is my span</span>
</div>

</body>
</html>
3 changes: 3 additions & 0 deletions 000_temp/09_SPRING-2017/014_block-nest/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
span {
border: 1px solid red;
}
14 changes: 14 additions & 0 deletions 000_temp/09_SPRING-2017/015/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div>one</div>
<div>two</div>
<div id="deviate">three</div>
<div id="manga">four</div>
</body>
</html>
30 changes: 30 additions & 0 deletions 000_temp/09_SPRING-2017/015/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
body {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
/* formatting */
height: 500px;
border: 5px solid red;
}

div {
/* formatting */
width: 300px;
height: 100px;
margin: 1em;
border: 1px solid red;
background-color: darkgray;
text-align: center;
}

#deviate {
align-self: flex-start;
/*flex-basis: 500px;*/
flex-grow: 1;
flex-shrink: 1;
}

#manga {
flex-shrink: 2;
flex-grow: 2;
}
14 changes: 14 additions & 0 deletions 000_temp/09_SPRING-2017/016/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="mq-600plus.css" media="(min-width:600px)">
</head>
<body>

<h1>Here is some text</h1>

</body>
</html>
4 changes: 4 additions & 0 deletions 000_temp/09_SPRING-2017/016/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
h1 {
color: blue;
font-weight: bold;
}
3 changes: 3 additions & 0 deletions 000_temp/09_SPRING-2017/016/mq-600plus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: red;
}
31 changes: 31 additions & 0 deletions 000_temp/09_SPRING-2017/017_flex-media-query/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taco Shop</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="mq-600plus.css" media="(min-width:600px)">
</head>
<body>

<main>
<nav>
<a href="#">Home</a>
<a href="#">Menu</a>
<a href="#">Beers</a>
<a href="#">Hours</a>
<a href="#">Eat</a>
</nav>
<section>
<h1>Taco Mucho Grande Calibre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut, deleniti deserunt dolores earum illum libero modi neque nobis placeat, praesentium quia, reiciendis sapiente? Accusantium fugiat labore libero nemo sit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut, deleniti deserunt dolores earum illum libero modi neque nobis placeat, praesentium quia, reiciendis sapiente? Accusantium fugiat labore libero nemo sit.</p>
<h2>Two Amigos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, fugit, sequi! Adipisci eaque exercitationem libero maxime mollitia. A aliquam beatae eius ipsam libero obcaecati quaerat quidem ratione. Ab, autem itaque.</p>
<h2>Quality Ingredients</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam animi blanditiis, cum doloremque eius, ipsum iste iure laboriosam minima molestiae perspiciatis quos recusandae reiciendis repudiandae sit, unde velit voluptas.</p>
</section>

</main>

</body>
</html>
35 changes: 35 additions & 0 deletions 000_temp/09_SPRING-2017/017_flex-media-query/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
html, body, main, nav, a, section, h1, p, h2 {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}

main {
display: flex;
flex-direction: column;
padding-top: 10px;
border: 5px solid black;
}

nav {
width: 100%;
text-align: center;
}

a {
text-decoration: none;
padding: 5px 10px;
border: 1px solid black;
border-radius: 20px;
background-color: rgba(79,188,227,.5);
}

a:hover {
background-color: rgba(79,188,227,.8);
}

section {
width: 100%;
padding: 10px;
}
13 changes: 13 additions & 0 deletions 000_temp/09_SPRING-2017/017_flex-media-query/mq-600plus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
main {
flex-direction: row;
}

nav {
width: 25%;
display: flex;
flex-direction: column;
}

section {
width: 75%;
}
26 changes: 26 additions & 0 deletions 000_temp/09_SPRING-2017/018_steve/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taco Shop</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="mq-600plus.css" media="(min-width:600px)">
</head>
<body>

<main>
<nav class="menu">
<div class="menu-item">tacos</div>
<div class="menu-item">burritos</div>
<div class="menu-item">chimichangas</div>
<div class="menu-item">beer</div>
<div class="menu-item">locations</div>
</nav>
<section>
<h1>Taco Mucho Grande</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis corporis doloremque dolores excepturi inventore laudantium non quae, suscipit temporibus voluptatum. Animi ducimus id inventore magni nisi praesentium quis rem repudiandae!</p>
</section>
</main>

</body>
</html>
20 changes: 20 additions & 0 deletions 000_temp/09_SPRING-2017/018_steve/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
main {
display: flex;
flex-direction: column;
}

nav, section {
border: 1px solid red;
padding: 10px;
}

.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: none;
}

.menu-item {
border: none;
}
9 changes: 9 additions & 0 deletions 000_temp/09_SPRING-2017/018_steve/mq-600plus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
main {
flex-direction: row;
}

.menu {
flex-direction: column;
border-bottom: 1px solid red;
border-right: none;
}
19 changes: 19 additions & 0 deletions 031_flexbox/01_container/00_live-coding/02_making-a-flex-container/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,25 @@
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Expand Down
2 changes: 1 addition & 1 deletion 031_flexbox/01_container/01/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ div {
border: 1px solid red;
background-color: darkgray;
text-align: center;
}
}
2 changes: 1 addition & 1 deletion 032_media-queries/00_live-coding/mq_600-plus.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
p {
color: red;
color: green;
}
6 changes: 3 additions & 3 deletions 032_media-queries/04_combo/02_multiple-media-types-not-work/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" href="print.css" media="print" >

<!-- this doesn't work - you can't have multiple media types -->
<link rel="stylesheet" media="screen and print" href="multiple.css">
<link rel="stylesheet" href="multiple.css" media="screen and print" >

<!-- this does work -->
<link rel="stylesheet" media="all" href="multiple.css">
<link rel="stylesheet" href="multiple.css" media="all">
</head>
<body>

Expand Down

0 comments on commit 8729ead

Please sign in to comment.