-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3543bb1
commit 718e5d5
Showing
10 changed files
with
245 additions
and
12 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
|
|
||
| body { | ||
| margin: 0; | ||
| background: #eeeeee; | ||
| font-family: 'Raleway', sans-serif; | ||
| } | ||
|
|
||
| /************/ | ||
| /*question 1*/ | ||
| /************/ | ||
|
|
||
| /*Edit and add the necessary code for all of question 1, Navbar Madness, below */ | ||
|
|
||
| #q1-navbar { | ||
| background: #364156; | ||
| color: white; | ||
| } | ||
|
|
||
| #q1-navbar a{ | ||
| text-decoration: none; | ||
| color: white; | ||
| text-align: column; | ||
| } | ||
| .nav--button { | ||
| display: inline-block; | ||
| margin-left: 10px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /************/ | ||
| /*question 2*/ | ||
| /************/ | ||
|
|
||
| /* No selectors given :o */ | ||
|
|
||
| /* Add the necessary code for all of question 2, flexbox-ception, below */ | ||
| #q2-container { | ||
| display: flex; | ||
| flex-direction: center; | ||
| align-items: center; | ||
| text-align: center; | ||
| justify-content:space-around; | ||
| } | ||
| .q2-big-box { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| .q2-tiny-box { | ||
| width:50px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| /*************************/ | ||
| /*OTHER CODE THAT WE USED*/ | ||
| /*************************/ | ||
|
|
||
| /*Question 1 stuff*/ | ||
| #q1-navbar { | ||
| position: fixed; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .q1-section { | ||
| width: 100%; | ||
| height: 400px; | ||
| opacity: 0.5; | ||
| } | ||
| .q1-section:nth-child(odd) { | ||
| background-color: #EE6352; | ||
| } | ||
| .q1-section:nth-child(even) { | ||
| background-color: #F79D84; | ||
| } | ||
|
|
||
| /*Question 2 stuff*/ | ||
| #q2-body { | ||
| background-color: #C7EAE4; | ||
| } | ||
| #q2-container { | ||
| width: 100vw; | ||
| height:100vh; | ||
| } | ||
|
|
||
| .q2-big-box { | ||
| background-color: #A7E8BD; | ||
| border: 4px solid white; | ||
| border-radius: 4px; | ||
| width: 200px; | ||
| height: 200px; | ||
| } | ||
|
|
||
| .q2-tiny-box { | ||
| border: 2px solid white; | ||
| border-radius: 4px; | ||
| background-color: #FCBCB8; | ||
| font-size: 0.5em; | ||
| padding: 8px 4px; | ||
| margin: 2px; | ||
| } | ||
|
|
||
|
|
||
| /*index*/ | ||
|
|
||
|
|
||
| #index { | ||
| display: grid; | ||
| grid-template-columns: 240px; | ||
| grid-template-rows: 200px; | ||
| justify-content: center; | ||
| align-items: content; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| #index a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .question { | ||
| background: #62C370; | ||
| padding: 18px; | ||
| font-size: 16px; | ||
| margin-bottom: 6px; | ||
| border-radius: 2px; | ||
| text-align: center; | ||
| font-weight: 700; | ||
| color: #4a4a4a; | ||
| cursor: pointer; | ||
| box-shadow: 2px 2px 10px -3px black; | ||
| color: white; | ||
| } | ||
|
|
||
| .question:hover { | ||
| box-shadow: 2px 2px 10px -5px black; | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .title { | ||
| color: #333333; | ||
| background: #eeeeee; | ||
| box-shadow: none; | ||
| display: grid; | ||
| justify-self: center; | ||
| font-size: 36px; | ||
| width: 400px; | ||
| height: 100px; | ||
| margin-top: 24px; | ||
| cursor: auto !important; | ||
| } | ||
|
|
||
| .title:hover { | ||
| box-shadow: none !important; | ||
| opacity: 1 !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,14 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| Lab 1 | ||
| </body> | ||
| </html> | ||
| <head> | ||
| <title>Lab 5 Contents</title> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet"> | ||
| <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="index"> | ||
| <div class="question title">Lab 5: Flexbox Your Flexbox!</div> | ||
| <a href="q1.html" target="_blank"><div class="question">Question 1</div></a> | ||
| <a href="q2.html" target="_blank"><div class="question">Question 2</div></a> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Lab 5 | Q1</title> | ||
| <link rel="stylesheet" type="text/css" href="assets/css/style.css"/> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div id="q1-navbar"> | ||
| <!-- Code Here --> | ||
| <div class="navbar--button--area"> | ||
| <div class="nav--button"> | ||
| <a href=""class="navbar-item"> | ||
| Home | ||
| </a> | ||
| </div> | ||
| <div class="nav--button"> | ||
| <a href=""class="navbar-item"> | ||
| About | ||
| </a> | ||
| </div> | ||
| <div class="nav--button"> | ||
| <a href=""class="navbar-item"> | ||
| Contact | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="q1-section"></div> | ||
| <div class="q1-section"></div> | ||
| <div class="q1-section"></div> | ||
| <div class="q1-section"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Lab 5 | Q2</title> | ||
| <link rel="stylesheet" type="text/css" href="assets/css/style.css"/> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet"> | ||
| </head> | ||
| <body id="q2-body"> | ||
| <section id="q2-container"> | ||
| <div class="q2-big-box"> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| </div> | ||
| <div class="q2-big-box"> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| </div> | ||
| <div class="q2-big-box"> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| <div class="q2-tiny-box">flexbox</div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters