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

ui iii rerun #1538

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

ui iii rerun #1538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b44da21
ui iii rerun
Mar 19, 2020
80410fd
moving on
Mar 19, 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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Once you have finished the home page using flex box module, go build the service

## Objectives

* [ ] Home Page Refactor:
* [ X ] Home Page Refactor:
* Note that the provided HTML is blank. This is because I want you to use your code from yesterday if possible. If you didn't finish, that's fine, just use the solution from yesterday
* Refactor the home page layout with flexbox where `inline-block` was used before.
* In your navigation elements, point the services `<a href=""></a>` to `services.html`
Expand Down
180 changes: 180 additions & 0 deletions great-idea/css/Services.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
/* http://meyerweb.com/eric/tools/css/reset/ -
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* Set every element's box-sizing to border-box */
* {
box-sizing: border-box;
border: 1px solid black;
}

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

h1, h2, h3, h4, h5 {
font-family: 'Bangers', cursive;
letter-spacing: 1px;
margin-bottom: 15px;
}

/* Copy and paste your work from yesterday here and start to refactor into flexbox */

/* ********* XXX Your code starts here! XXX ***********/

.top nav.topNav {
width: 79%;
margin: 25px auto;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.top nav.topNav a{
text-decoration: none;
color: gray;
}
.topImg{
width: 100%;
display: flex;
justify-content: center;
}
.task{
width: 70%;
margin-top: 15px;
margin-left: 200px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
h1{
font-size: 25px;
margin-top: 15px;
}
.borderline{
width: 70%;
display: flex;
justify-content: center;
border: 1px solid gray;
}
.theater {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 70%;
margin-left: 195px;
margin-top: 30px;
margin-bottom: 10px;
/*border: 1px dashed purple;*/
}
.theater div.screen{
width: 48%;
padding: 5px;
margin-bottom: 20px;
display: flex;
flex-flow: row wrap;
border: 1px solid gray;
background-color: lightgrey;
}
h3{
font-weight: bold;
font-size: 17px;
margin-top: 15px;
margin-left: 15px;
}
.parag{
margin-left: 15px;
margin-right: 15px;
}
.clicky {
background-color: white;
border: 1px solid black;
border-radius: 4px;
color: black;
padding: 10px 45px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 15px;
margin-left: 15px;
cursor: pointer;
}

.cover{
width: 70%;
display: flex;
margin-left: 195px;
margin-top: 30px;
flex-flow: row;
justify-content: space-between;
/*border: 1px solid blue;*/
}
h5{
font-weight: bold;
font-size: 17px;
}
.galron{
width: 85%;
}
.list{
display: block;
margin-top: 25px;
margin-left: 15px;
text-align: left;
line-height: 2;
}
.botPic{
width: 50%;

}
.copyright{
margin: 50px auto;
text-align: center;
}

118 changes: 115 additions & 3 deletions great-idea/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* http://meyerweb.com/eric/tools/css/reset/
/* http://meyerweb.com/eric/tools/css/reset/ -
v2.0 | 20110126
License: none (public domain)
*/
Expand Down Expand Up @@ -49,7 +49,8 @@ table {

/* Set every element's box-sizing to border-box */
* {
box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid green;*/
}

html, body {
Expand All @@ -63,4 +64,115 @@ h1, h2, h3, h4, h5 {
margin-bottom: 15px;
}

/* Copy and paste your work from yesterday here and start to refactor into flexbox */
/* Copy and paste your work from yesterday here and start to refactor into flexbox */

/* ******* XXX Your code starts here! XXX *********************/

.top{
}
.topNav{
width: 80%;
margin-top: 15px;
margin-left: 100px;
display: flex;
flex-flow: row;
justify-content: space-evenly;
align-items: center;
}
.topNav a{
text-decoration: none;
color: gray;
}
.title{
width: 60%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 45px;
margin-left: 280px;
margin-bottom: 60px;
font-size: 60px;
font-weight: bold;
font-style: italic;
text-align: center;
/*border: 1px solid green;*/
}
.clickHere {
background-color: white;
border: 1px solid black;
color: black;
padding: 5px 35px;
text-align: center;
text-decoration: none;
font-size: 12px;
margin-top: 5px;
}
h3{
font-size: 30px;
}
.borderline1{
width: 70%;
display: flex;
align-content: flex-start;
border: 1px solid gray;
}
.topText{
/*border: 2px solid greenyellow;*/
width: 70%;
margin-top: 35px;
margin-left: 195px;
display: flex;
justify-content: space-evenly;
justify-content: center;
}
.picMiddle{
width: 100%;
margin-top: 35px;
margin-left: 196px;
}
.bottomText{
width: 70%;
margin-top: 10px;
margin-left: 190px;
display: flex;
justify-content: space-evenly;
}
.services{
width: 35%;
height: 50px;
margin-top: 20px;
margin-right: 5px;
padding: 5px;
}
.product{
width: 35%;
height: 50px;
margin-top: 20px;
margin-right: 5px;
padding: 5px;
}
.vision{
width: 35%;
height: 50px;
margin-top: 20px;
margin-right: 5px;
padding: 5px;
}
.borderline2{
width: 70%;
margin-top: 125px;
display: flex;
justify-content: flex-start;
border: 1px solid gray;
}
.contact{
display: block;
margin-top: 75px;
margin-left: 195px;
text-align: left;
}
.copyright{
margin: 55px auto;
text-align: center;
}

Loading