diff --git a/.DS_Store b/.DS_Store index de73b75..0a1f00d 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git "a/Assignments/assignment-03/MASP_Sa\314\203o_Paulo_(cropped).jpg" "b/Assignments/assignment-03/MASP_Sa\314\203o_Paulo_(cropped).jpg" new file mode 100644 index 0000000..4fc0104 Binary files /dev/null and "b/Assignments/assignment-03/MASP_Sa\314\203o_Paulo_(cropped).jpg" differ diff --git a/projects/project-02/css/style.css b/projects/project-02/css/style.css index a98d385..40bac92 100644 --- a/projects/project-02/css/style.css +++ b/projects/project-02/css/style.css @@ -1,170 +1,170 @@ - - -body { - font-family: 'Nunito Sans', sans-serif; - height: 100%; -} - -header { - display: block; - font-size: 10pt; - overflow: hidden; - - position: fixed; /* Set the navbar to fixed position */ - top: 0; /* Position the navbar at the top of the page */ - width: 100%; -} - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -ul.container { -display: flex; -flex-wrap: nowrap; -justify-content: space-around; -list-style: none; -background: white; -margin: 0; -line-height: 60px; -} - -ul { - display: block; - list-style-type: disc; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0px; - margin-inline-end: 0px; - padding-inline-start: 40px; -} - -a:link { text-decoration: none; color: black;} - - -a:visited { text-decoration: none; color: black;} - - -a:hover { text-decoration: none; } - - -a:active { text-decoration: none; } - -li { -display: list-item; -text-align: -webkit-match-parent; -list-style: none; -text-decoration: none; -} - -.homeicon{ - width: 8%; - height: 8%; - object-fit: cover; -} - -.grid-container { - margin: 20px; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(6, 1fr); - grid-gap: 20px; -} - - - -.figure{ - display: block; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 40px; - margin-inline-end: 40px; - -} - -video { - width: 100%; - height: 100%; - object-fit: cover; -} - - - -.item{ - width: 100%; - height: 80%; - object-fit: cover; -} - - -.item--1{ - - - - grid-column-start: 1; - grid-column-end: 2; - - grid-row-start: 1; - grid-row-end: 3; -} - -.item--2{ - - - - grid-column-start: 3; - grid-column-end: 4; - - grid-row-start: 1; - grid-row-end: 3; -} - -.item--3{ - - - - grid-column-start: 1; - grid-column-end: 2; - - grid-row-start: 3; - grid-row-end: 5; -} - - - -.item--4{ - - - grid-column-start: 3; - grid-column-end: 4; - - grid-row-start: 3; - grid-row-end: 5; -} - -.item--5{ - - - grid-column-start: 1; - grid-column-end: 2; - - grid-row-start: 5; - grid-row-end: 7; -} - -.item--6{ - - - grid-column-start: 3; - grid-column-end: 4; - - grid-row-start: 5; - grid-row-end: 7; -} - -footer{ - font-size: 8pt; - color: grey + + +body { + font-family: 'Nunito Sans', sans-serif; + height: 100%; +} + +header { + display: block; + font-size: 10pt; + overflow: hidden; + + position: fixed; /* Set the navbar to fixed position */ + top: 0; /* Position the navbar at the top of the page */ + width: 100%; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +ul.container { +display: flex; +flex-wrap: nowrap; +justify-content: space-around; +list-style: none; +background: white; +margin: 0; +line-height: 60px; +} + +ul { + display: block; + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 40px; +} + +a:link { text-decoration: none; color: black;} + + +a:visited { text-decoration: none; color: black;} + + +a:hover { text-decoration: none; } + + +a:active { text-decoration: none; } + +li { +display: list-item; +text-align: -webkit-match-parent; +list-style: none; +text-decoration: none; +} + +.homeicon{ + width: 8%; + height: 8%; + object-fit: cover; +} + +.grid-container { + margin: 20px; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(6, 1fr); + grid-gap: 20px; +} + + + +.figure{ + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 40px; + margin-inline-end: 40px; + +} + +video { + width: 100%; + height: 100%; + object-fit: cover; +} + + + +.item{ + width: 100%; + height: 80%; + object-fit: cover; +} + + +.item--1{ + + + + grid-column-start: 1; + grid-column-end: 2; + + grid-row-start: 1; + grid-row-end: 3; +} + +.item--2{ + + + + grid-column-start: 3; + grid-column-end: 4; + + grid-row-start: 1; + grid-row-end: 3; +} + +.item--3{ + + + + grid-column-start: 1; + grid-column-end: 2; + + grid-row-start: 3; + grid-row-end: 5; +} + + + +.item--4{ + + + grid-column-start: 3; + grid-column-end: 4; + + grid-row-start: 3; + grid-row-end: 5; +} + +.item--5{ + + + grid-column-start: 1; + grid-column-end: 2; + + grid-row-start: 5; + grid-row-end: 7; +} + +.item--6{ + + + grid-column-start: 3; + grid-column-end: 4; + + grid-row-start: 5; + grid-row-end: 7; +} + +footer{ + font-size: 8pt; + color: grey } \ No newline at end of file diff --git a/projects/project-02/images/login.svg b/projects/project-02/images/login.svg index 4351f2c..e07f0d7 100644 --- a/projects/project-02/images/login.svg +++ b/projects/project-02/images/login.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/projects/project-02/images/logo.svg b/projects/project-02/images/logo.svg index 737580e..2386fa4 100644 --- a/projects/project-02/images/logo.svg +++ b/projects/project-02/images/logo.svg @@ -1,19 +1,19 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/project-02/images/search.svg b/projects/project-02/images/search.svg index 3db8947..fbce3b3 100644 --- a/projects/project-02/images/search.svg +++ b/projects/project-02/images/search.svg @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + diff --git a/projects/project-02/index.html b/projects/project-02/index.html index fd258a0..cbfafdd 100644 --- a/projects/project-02/index.html +++ b/projects/project-02/index.html @@ -1,175 +1,175 @@ - - - - - - ADERERROR Official Site - - - - - - - - - - - - - - -
-
- -
- -
- -
- 'A-VENTORY Tech Collection' 3rd Drop -
- View Product > -
- -
- -
- 23FW 2nd Drop -
- View Product > -
-
- -
- -
- 23FW New Jumper & Jacket -
- View Product > -
-
- -
- -
- 23FW New Knit -
- View Product > -
-
- -
- -
- 23FW New Acc -
- View Product > -
-
- -
- -
- Significant Collection -
- View Product > -
-
- -
- - - - - - - - - + + + + + + ADERERROR Official Site + + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+ 'A-VENTORY Tech Collection' 3rd Drop +
+ View Product > +
+ +
+ +
+ 23FW 2nd Drop +
+ View Product > +
+
+ +
+ +
+ 23FW New Jumper & Jacket +
+ View Product > +
+
+ +
+ +
+ 23FW New Knit +
+ View Product > +
+
+ +
+ +
+ 23FW New Acc +
+ View Product > +
+
+ +
+ +
+ Significant Collection +
+ View Product > +
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/starter_code_week_04/css_practice/.DS_Store b/starter_code_week_04/css_practice/.DS_Store new file mode 100644 index 0000000..b7fd082 Binary files /dev/null and b/starter_code_week_04/css_practice/.DS_Store differ diff --git a/starter_code_week_05/.DS_Store b/starter_code_week_05/.DS_Store new file mode 100644 index 0000000..07ed434 Binary files /dev/null and b/starter_code_week_05/.DS_Store differ diff --git a/starter_code_week_06/.DS_Store b/starter_code_week_06/.DS_Store new file mode 100644 index 0000000..b68e051 Binary files /dev/null and b/starter_code_week_06/.DS_Store differ diff --git a/starter_code_week_06/flexbox_css_grid_lab/.DS_Store b/starter_code_week_06/flexbox_css_grid_lab/.DS_Store new file mode 100644 index 0000000..4d05d3b Binary files /dev/null and b/starter_code_week_06/flexbox_css_grid_lab/.DS_Store differ diff --git a/starter_code_week_08/.DS_Store b/starter_code_week_08/.DS_Store new file mode 100644 index 0000000..6a56118 Binary files /dev/null and b/starter_code_week_08/.DS_Store differ diff --git a/starter_code_week_08/flexible_images/index.html b/starter_code_week_08/flexible_images/index.html new file mode 100644 index 0000000..3d0e184 --- /dev/null +++ b/starter_code_week_08/flexible_images/index.html @@ -0,0 +1,33 @@ + + + + + + + + + Fluid Images + + + +
+
+

Let’s take a look at flexible images!

+
+
+
+ +
+
+
+
+ +
+
+

Sir Alfred Joseph Hitchcock KBE

+

Director, Screenwriter, Producer and Editor

+
+
+
+ + \ No newline at end of file diff --git a/starter_code_week_08/flexible_images/styles.css b/starter_code_week_08/flexible_images/styles.css new file mode 100644 index 0000000..a3ad647 --- /dev/null +++ b/starter_code_week_08/flexible_images/styles.css @@ -0,0 +1,113 @@ +/* reset */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, + body { + height: 100vh; + } + +/* type */ + +body { + font-family: times, serif; + text-align: center; + font-size: 38px; + line-height: 1.2; + color: #F6F6F2; +} + +/* structure */ + +.container { + display: flex; + flex-direction: column; +} + +/* first section */ + +.tint { + + background: + linear-gradient(rgba(0,0,0,0.5), rgba(207, 105, 105, 0)), + url("https://cdn.theasc.com/Rope-Cast-Set-Photo.jpg"); +} + +section.first { + height: 100vh; + background-position: center center; + background-size: cover; +} + +/* second section */ + +section.second { + background: #CCC2B6; + height: 100vh; + color: #776045; +} + +.grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(6, 1fr); +} + +.image-container { + grid-column: 3 / span 3; + grid-row: 3 / span 2; + +} + +.image-container img { + max-width: 100%; + height: auto; +} + + +/* third section */ + +section.third { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; /* vertically center on the page */ + align-items: center; /* horizontally center on the page */ +} + + +/* typography */ + +h1 { + font-size: 11vw; + font-weight: normal; + margin-top: 100px; +} + +h4 { + font-size: 1em; + letter-spacing: 1px; + margin-bottom: .5em; + margin: 0 150px; +} + +/* custom fonts */ + +@font-face { + font-family: 'burgess-regular'; + src: url('../fonts/burgess-regular.eot'); + src: url('../fonts/burgess-regular.eot?#iefix') format('embedded-opentype'), + url('../fonts/burgess-regular.woff') format('woff'), + url('../fonts/burgess-regular.woff2') format('woff2'), + url('../fonts/burgess-regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +.burgess { + font-family: "burgess-regular", serif; +} \ No newline at end of file diff --git a/starter_code_week_08/fluid_layout_flexbox/index.html b/starter_code_week_08/fluid_layout_flexbox/index.html new file mode 100644 index 0000000..a7321f9 --- /dev/null +++ b/starter_code_week_08/fluid_layout_flexbox/index.html @@ -0,0 +1,19 @@ + + + + + + Fluid Layout with Flexbox + + + +
+
Header
+
+ +
Section
+
+ +
+ + \ No newline at end of file diff --git a/starter_code_week_08/fluid_layout_flexbox/styles.css b/starter_code_week_08/fluid_layout_flexbox/styles.css new file mode 100644 index 0000000..d26b866 --- /dev/null +++ b/starter_code_week_08/fluid_layout_flexbox/styles.css @@ -0,0 +1,51 @@ +:root { + --white: #F4F4F4; + --black: #141414; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: var(--black); +} + +.flex-container { + display: flex; /* the parent of header, main and footer */ + min-height: 100vh; + flex-direction: column; +} + +header, +footer { + height: 60px; +} + +main { + flex: 1; + display: flex; /* the parent of aside and section */ +} + +aside { + flex-basis: 25%; +} + +section { + flex-basis: 75%; +} + +/* + + @media screen and (max-width: 600px) { + main { + flex-direction: column; + } + aside, section { + flex: 1; + } + } + +*/ \ No newline at end of file diff --git a/starter_code_week_08/fonts/BigCaslon-Medium.woff b/starter_code_week_08/fonts/BigCaslon-Medium.woff new file mode 100644 index 0000000..8a64291 Binary files /dev/null and b/starter_code_week_08/fonts/BigCaslon-Medium.woff differ diff --git a/starter_code_week_08/fonts/BigCaslon-Medium.woff2 b/starter_code_week_08/fonts/BigCaslon-Medium.woff2 new file mode 100644 index 0000000..cba906f Binary files /dev/null and b/starter_code_week_08/fonts/BigCaslon-Medium.woff2 differ diff --git a/starter_code_week_08/fonts/burgess-regular.eot b/starter_code_week_08/fonts/burgess-regular.eot new file mode 100644 index 0000000..6409da1 Binary files /dev/null and b/starter_code_week_08/fonts/burgess-regular.eot differ diff --git a/starter_code_week_08/fonts/burgess-regular.ttf b/starter_code_week_08/fonts/burgess-regular.ttf new file mode 100644 index 0000000..0972ddc Binary files /dev/null and b/starter_code_week_08/fonts/burgess-regular.ttf differ diff --git a/starter_code_week_08/fonts/burgess-regular.woff b/starter_code_week_08/fonts/burgess-regular.woff new file mode 100644 index 0000000..7482ff7 Binary files /dev/null and b/starter_code_week_08/fonts/burgess-regular.woff differ diff --git a/starter_code_week_08/fonts/burgess-regular.woff2 b/starter_code_week_08/fonts/burgess-regular.woff2 new file mode 100644 index 0000000..694e5d7 Binary files /dev/null and b/starter_code_week_08/fonts/burgess-regular.woff2 differ diff --git a/starter_code_week_08/images/alfred_hitchcock_photo.jpg b/starter_code_week_08/images/alfred_hitchcock_photo.jpg new file mode 100644 index 0000000..91704ed Binary files /dev/null and b/starter_code_week_08/images/alfred_hitchcock_photo.jpg differ diff --git a/starter_code_week_08/images/rear_window_hitchcock.jpeg b/starter_code_week_08/images/rear_window_hitchcock.jpeg new file mode 100644 index 0000000..4e741a0 Binary files /dev/null and b/starter_code_week_08/images/rear_window_hitchcock.jpeg differ diff --git a/starter_code_week_08/images/spellbound_hitchcock.jpg b/starter_code_week_08/images/spellbound_hitchcock.jpg new file mode 100644 index 0000000..0d1420c Binary files /dev/null and b/starter_code_week_08/images/spellbound_hitchcock.jpg differ diff --git a/starter_code_week_08/mobile_first_responsive/index.html b/starter_code_week_08/mobile_first_responsive/index.html new file mode 100644 index 0000000..e69de29 diff --git a/starter_code_week_08/mobile_first_responsive/styles.css b/starter_code_week_08/mobile_first_responsive/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/starter_code_week_08/responsive_navbar/index.html b/starter_code_week_08/responsive_navbar/index.html new file mode 100644 index 0000000..e2bb997 --- /dev/null +++ b/starter_code_week_08/responsive_navbar/index.html @@ -0,0 +1,30 @@ + + + + + + + Responsive Navigation Bar + + + + + + +
+ +
+

Down the Rabbit Hole

+

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversation?"

+

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

+
+
+ + \ No newline at end of file diff --git a/starter_code_week_08/responsive_navbar/styles.css b/starter_code_week_08/responsive_navbar/styles.css new file mode 100644 index 0000000..9768af9 --- /dev/null +++ b/starter_code_week_08/responsive_navbar/styles.css @@ -0,0 +1,63 @@ +:root { + --white: #F4F4F4; + --black: #141414; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body, +html{ + font-family: 'DM Sans', sans-serif; +} + +.flex-container { + display: flex; + min-height: 100vh; + flex-direction: column; +} + +nav { + background: tomato; + height: 60px; +} + +ul.menu { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + + list-style: none; + + margin: 0; + line-height: 60px; +} + +.menu li { + margin: 0 40px; +} + +ul.menu a { + text-decoration: none; + color: var(--white); +} + +main { + /* flex: 1; */ + height: 100vh; /* allows main section to be scrollable */ + background: pink; + padding: 20px; +} + +.title { + font-family: 'DM Serif Display', serif; +} + +.content { + line-height: 1.6em; +} + +@media (max-width: 768px) {} \ No newline at end of file diff --git a/starter_code_week_08/responsive_typography/index.html b/starter_code_week_08/responsive_typography/index.html new file mode 100644 index 0000000..60a25f7 --- /dev/null +++ b/starter_code_week_08/responsive_typography/index.html @@ -0,0 +1,12 @@ + + + + + + Responsive Typography + + + +
+ + \ No newline at end of file diff --git a/starter_code_week_08/responsive_typography/styles.css b/starter_code_week_08/responsive_typography/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/starter_code_week_08/responsive_with_media_queries/.DS_Store b/starter_code_week_08/responsive_with_media_queries/.DS_Store new file mode 100644 index 0000000..01a3c0c Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/.DS_Store differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-fox.png b/starter_code_week_08/responsive_with_media_queries/images/the-fox.png new file mode 100644 index 0000000..1508f90 Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-fox.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-little-prince.png b/starter_code_week_08/responsive_with_media_queries/images/the-little-prince.png new file mode 100644 index 0000000..b52bda0 Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-little-prince.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-narrator.png b/starter_code_week_08/responsive_with_media_queries/images/the-narrator.png new file mode 100644 index 0000000..896527b Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-narrator.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-railway-switchman.png b/starter_code_week_08/responsive_with_media_queries/images/the-railway-switchman.png new file mode 100644 index 0000000..daa2f7e Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-railway-switchman.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-turkish-astronomer.png b/starter_code_week_08/responsive_with_media_queries/images/the-turkish-astronomer.png new file mode 100644 index 0000000..c8c724e Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-turkish-astronomer.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/the-vain-man.png b/starter_code_week_08/responsive_with_media_queries/images/the-vain-man.png new file mode 100644 index 0000000..af5c1a2 Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/the-vain-man.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/images/three-petal-flower.png b/starter_code_week_08/responsive_with_media_queries/images/three-petal-flower.png new file mode 100644 index 0000000..af874cb Binary files /dev/null and b/starter_code_week_08/responsive_with_media_queries/images/three-petal-flower.png differ diff --git a/starter_code_week_08/responsive_with_media_queries/index.html b/starter_code_week_08/responsive_with_media_queries/index.html new file mode 100644 index 0000000..51c25e2 --- /dev/null +++ b/starter_code_week_08/responsive_with_media_queries/index.html @@ -0,0 +1,58 @@ + + + + + + Document + + + + + + +
+
+ The Little Prince +
+

The Little Prince

+

After leaving his home planet and his beloved rose, the prince journeys around the universe, ending up on Earth.

+
+
+
+ The Fox +
+

The Fox

+

Although the fox asks the little prince to tame him, the fox is in some ways the more knowledgeable of the two characters, and he helps steer the prince toward what is important in life.

+
+
+
+ The Railway Switchman +
+

The Railway Switchman

+

The railway switchman works at the hub for the enormous trains that rush back and forth carrying dissatisfied adults from one place to the other.

+
+
+
+ The Turkish Astronomer +
+

The Turkish Astronomer

+

The first human to discover the prince’s home, Asteroid B-612. When the Turkish astronomer first presents his discovery, no one believes him on account of his Turkish costume.

+
+
+
+ The Vain Man +
+

The Vain Man

+

The sole resident of the second planet the little prince visits. The vain man is lonely and craves admiration from all who pass by.

+
+
+
+ The Three-Petaled Flower +
+

The Three-Petaled Flower

+

The three-petaled flower lives alone in the desert, watching the occasional caravan pass by.

+
+
+
+ + \ No newline at end of file diff --git a/starter_code_week_08/responsive_with_media_queries/styles.css b/starter_code_week_08/responsive_with_media_queries/styles.css new file mode 100644 index 0000000..25b3916 --- /dev/null +++ b/starter_code_week_08/responsive_with_media_queries/styles.css @@ -0,0 +1,44 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + height: 100%; +} + +body { + font-family: 'Spectral', serif; + background-color: #234A40; + color: #9BEC90; +} + +.grid-container { + margin: 20px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 20px; +} + +figure { + border: 1px solid #9BEC90; + border-radius: 0.75em; +} + +figcaption { + padding: 20px ; +} + +img { + width: 100%; + object-fit: cover; + border-top-right-radius: 0.75em; + border-top-left-radius: 0.75em; +} + +@media only screen and (min-width : 768px) {} + + +@media only screen and (min-width : 1024px) {} \ No newline at end of file