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

Jiarong-Cao-Sprint-Challenge-User-Interface retro, still working on tablet part. #1326

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+272 −7
Open

Jiarong-Cao-Sprint-Challenge-User-Interface retro, still working on tablet part. #1326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea637ec
Sprint-Challenge-User-Interface retro, still working on tablet part.
jjiarongcao1 May 18, 2020
6caa5f1
Sprint Challege for user interface, finished tablet part, also modifi…
jjiarongcao1 May 18, 2020
30527e9
Self study questions added.
jjiarongcao1 May 20, 2020
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
12 changes: 12 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This Is the About Page!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id sequi et, quis tenetur dignissimos possimus quam provident temporibus culpa magni perspiciatis qui voluptate ipsam laborum nostrum. Vero corporis esse repellat!</p>
</body>
</html>
35 changes: 32 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,25 @@
</head>

<body>
<header>
<div class="navigation">
<div class="logo">
<img src="assets/lambda-black.png">
</div>
<ul class="bar">
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class="image2">
<img src="assets/jumbo.jpg">
</div>
</header>

<div class="container">

<section class="top-content">
Expand All @@ -30,7 +49,7 @@ <h2>The Past</h2>
<h2>Why Did It Have To Be Boxes...</h2>

<div class="boxes">
<div class="box">Box 1</div>
<!-- <div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
Expand All @@ -39,7 +58,17 @@ <h2>Why Did It Have To Be Boxes...</h2>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
<div class="box">Box 10</div> -->
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
</div>

</section>
Expand All @@ -64,7 +93,7 @@ <h2>Moon</h2>
<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="about.html">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
Expand Down
14 changes: 14 additions & 0 deletions self-study-questions.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
If you were to describe semantic HTML to the next cohort of students, what would you say?
It's an organized markup with defined, meaning elements to set up the webpage.

What are the 4 areas of the box model?
The content, padding, margin, and the border.

While using flexbox, what axis does the following property work on: align-items: center?
The vertical cross axis.

Explain why git is valuable to a team of developers.
It would be easy for different developers to involve in the same project. For example, what codes were modified by which developer.

Define mobile-first design in your own words.
Set up a certain screen size, and when the screen size is stretched and matched that set screen size, the layout of the webpage will change.
218 changes: 214 additions & 4 deletions style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,57 @@ table {

* {
box-sizing: border-box;

}
html {
margin: 0 15%;
}

html, body {
height: 100%;
font-family: 'Roboto', sans-serif;
}


h1, h2, h3, h4, h5 {
font-size: 18px;
margin-bottom: 15px;
font-family: 'Rubik', sans-serif;
font-size: 1.3rem;
margin: 20px 0;
}

p {
line-height: 1.4;
}

.container {
width: 800px;
margin: 0 auto;
header .navigation {
display: flex;
height: 120px;
align-items: center;
}

header .navigation .bar {
flex-grow: 1;
display: flex;
justify-content: space-around;
margin-top: 20px;
margin-left: 10px;
}

header .navigation .bar a {
text-decoration: none;
color: black;
}

header .navigation .bar li {
display: flex;
align-items: center;
}

header .image2 img {
width: 100%;
height: auto;
}

.top-content {
Expand All @@ -82,7 +113,8 @@ p {
.top-content .text-container {
width: 48%;
padding: 0 1%;
padding-bottom: 20px;
padding-bottom: 20px;
text-align: left;
}

.middle-content {
Expand Down Expand Up @@ -112,6 +144,38 @@ p {
justify-content: center;
}

.middle-content #box1{
background-color: #358080;
}
.middle-content #box2{
background-color: #FCD84A;
}
.middle-content #box3{
background-color: #5F9EA0;
}
.middle-content #box4{
background-color: #F17D4D;
}
.middle-content #box5{
background-color: #DD353D;
}
.middle-content #box6{
background-color: #3F8B24;
}
.middle-content #box7{
background-color: #9A41CC;
}
.middle-content #box8{
background-color: #EE66B3;
}
.middle-content #box9{
background-color: #4D2582;
}
.middle-content #box10{
background-color: #2A8FF7;
}


.bottom-content {
display: flex;
margin: 0 2% 20px;
Expand Down Expand Up @@ -143,4 +207,150 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
}


@media(max-width: 900px) {
header .navigation {
height: 90px;
}

header .navigation .bar {
font-size: 19px;
}

.top-content {
flex-direction: column;
}

.top-content .text-container {
width: 100%;
padding: 20px 10px;
}

.top-content .text-container h2 {
margin-bottom: 5px;
font-size: 25px;
}

.middle-content .boxes .box {
display: flex;
justify-content: center;
height: 200px;
width: 35%;
}

.bottom-content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
}

.bottom-content .text-container h2 {
margin-bottom: 3px;
font-size: 25px;
}

.bottom-content .text-container {
max-width: 45%;
font-size: 19px;
}

footer {
display: flex;
flex-direction: center;
justify-content: center;

}

footer nav {
margin-top: 25px;
margin-bottom: 25px;
display: flex;
flex-direction: center;
justify-content: space-around;
font-size: 25px;
}

footer nav a {
margin: 11px;
}



}

@media(max-width: 500px) {
header .navigation {
margin: 40px 0;
flex-direction: column;
height: auto;
}

header .navigation .bar {
flex-direction: column;
font-size: 2.0rem;
margin-top: 5px;
margin-left: 20px;
align-items: center;
margin: 10px 0;
margin-top: 30px;
}

header .navigation .bar li {
margin: 5px;
}

header .image2 {
height: auto;
width: 100%;
}

.top-content {
flex-direction: column;
flex-flow:row wrap;
max-width: 80%;

}

.middle-content .boxes {
margin-left: 120px;
margin-right: 120px;
}

.middle-content .boxes .box {
width: 100%;
height: 100px;
margin: 10px 5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.bottom-content{
margin-left: 20px;
flex-direction: column;
align-items: center;
max-width: auto;
}

.bottom-content .text-container {
max-width: 100%;
}

footer {
display: flex;
flex-direction: center;
}

footer nav{
display: flex;
flex-direction: column;
width: 90%;
line-height: 1.5;
padding-bottom: 20px;
font-size: 30px;
padding-left: 40px;
}
}