├── README.md
├── adhoc
└── index.html
├── amazing-space
├── index.html
└── style.css
├── broadway
├── index.html
└── style.css
├── codebrainery
├── index.html
└── style.css
├── common-cents-party
├── index.html
├── shows.html
└── style.css
├── css-grid-pup-spa
├── index.html
└── style.css
├── css-grid-task-board
├── index.html
├── script.js
└── style.css
├── cupful-cafe
├── index.html
└── style.css
├── curious-ornithologist
├── app.js
├── images
│ ├── hummingbird.jpg
│ └── owl.jpg
├── index.html
└── style.css
├── dasmoto-arts-crafts
├── index.html
└── style.css
├── davie-burgers
├── index.html
└── style.css
├── excursion-project
├── index.html
└── style.css
├── fashion-blog
└── index.html
├── flexbox-to-do-app
├── index.html
└── style.css
├── form-story
├── index.html
├── main.js
├── original.html
├── story.html
└── style.css
├── fotomatic
├── index.html
└── resources
│ ├── css
│ └── style.css
│ └── images
│ ├── banner-landingpage.jpg
│ ├── feature-1.png
│ ├── feature-2.png
│ ├── filter-1.png
│ ├── filter-2.png
│ ├── filter-3.png
│ ├── filter-4.png
│ ├── ic-about-us.svg
│ ├── ic-logo.svg
│ ├── ic-product-detail.svg
│ ├── instagram.png
│ └── photography-logo.png
├── healthy-recipes
├── index.html
└── style.css
├── html-css-cheatsheet
├── index.html
└── style.css
├── new-york-city-blog
├── index.html
└── style.css
├── olivia-woodruff-portfolio
├── index.html
└── style.css
├── paint-store
├── index.html
└── style.css
├── personal-portfolio
├── about.html
├── education.html
├── experience.html
├── images
│ ├── highschool.jpg
│ ├── javascript.png
│ ├── plus_plus.png
│ ├── university.jpg
│ └── visual_basic.png
├── index.html
└── style.css
├── recreate-painting-bootstrap
├── index.html
└── style.css
├── summit
├── index.html
├── starting.css
└── style.css
├── tea-cozy
├── index.html
└── style.css
├── transitions-book
├── index.html
├── reset.css
└── style.css
├── tsunami-coffee
├── index.html
└── style.css
├── typography
├── index.html
└── style.css
├── web-design-system
├── images
│ ├── avatar.jpg
│ └── image.jpg
├── index.html
└── style.css
└── wine-festival-schedule
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # LEARN HTML & CSS | CODECADEMY PROJECTS
2 |
3 | ## Learn HTML
4 | - Fashion Blog
5 | - Wine Festival Schedule
6 | - Form a Story
7 | - New York City Blog
8 |
9 | ## Learn CSS
10 | - Healthy Recipes
11 | - Olivia Woodruff Portfolio
12 | - Davie's Burgers
13 | - Broadway
14 | - Paint Store
15 | - Typography
16 |
17 | ## Learn Intermediate CSS
18 | - Flexbox: To-Do App
19 | - Tea Cozy
20 | - CSS Grid - PupSpa
21 | - CSS Grid - Task Board
22 | - Transitions - 20,000 Leagues Under the Sea
23 | - Tsunami Coffee
24 | - Curious Ornithologist
25 |
26 | ## How to Make a Website with NameCheap
27 | - Common Cents Party
28 | - Cupful Cafe
29 | - Amazing Space
30 | - Codebrainery.io
31 | - Building a Personal Portfolio
32 |
33 | ## Learn Bootstrap
34 | - Adhoc
35 | - Recreate a painting using Bootstrap's grid
36 |
37 | ## Build a Website with HTML, CSS, and Github Pages (Skill Path)
38 | - Dasmoto's Arts & Crafts
39 | - Fotomatic
40 | - Excursion Project
41 |
42 | ## Independent Projects (HTML, CSS)
43 | - Build your Own Cheatsheet
44 | - Build a Website Design System
45 |
46 | ### Link
47 | [HTML & CSS Courses | Codecademy](https://www.codecademy.com/catalog/language/html-css)
48 |
49 |
--------------------------------------------------------------------------------
/amazing-space/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Amazing Space
7 |
14 |
15 | Otherworldly views, uncompromising service, unparallelled luxury. This is Amazing Space, the world's first, and finest, space adventure company. With private and group voyages embarking weekly, you can book your tickets in advance or on the fly. At Amazing Space, there's always space for you ™.
16 | Learn More >>
17 |
18 |
19 |
20 |
22 |
23 |
25 |
26 |
28 |
29 |
31 |
32 |
34 |
35 |
37 |
38 |
40 |
41 |
43 |
44 |
Broadway
7 |
25 |
31 |
32 |
33 |
34 |
35 |
36 |
Design
37 |
Make your projects look great and interact beautifully.
38 |
Learn More
39 |
40 |
41 |
42 |
Develop
43 |
Use modern tools to turn your design into a web site
44 |
Learn More
45 |
46 |
47 |
48 |
Deploy
49 |
Use modern tools to turn your design into a web site
50 |
Learn More
51 |
52 |
54 |
55 |
56 |
© Broadway 2017
57 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/broadway/style.css:
--------------------------------------------------------------------------------
1 | /* CSS Reset */
2 | /* Resetting margins, paddings, and borders */
3 | html, body,
4 | h1, h2, h3, h4, h5, h6,
5 | a, p, span,
6 | em, small, strong,
7 | sub, sup,
8 | mark, del, ins, strike,
9 | abbr, dfn,
10 | blockquote, q, cite,
11 | code, pre,
12 | ol, ul, li, dl, dt, dd,
13 | div, section, article,
14 | main, aside, nav,
15 | header, hgroup, footer,
16 | img, figure, figcaption,
17 | address, time,
18 | audio, video,
19 | canvas, iframe,
20 | details, summary,
21 | fieldset, form, label, legend,
22 | table, caption,
23 | tbody, tfoot, thead,
24 | tr, th, td {
25 | border: 0;
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* Box sizing */
31 | html {
32 | box-sizing: border-box;
33 | }
34 |
35 | *, *:before, *:after {
36 | box-sizing: inherit;
37 | }
38 |
39 | /* Sizing - Height */
40 | body {
41 | min-height: 100vh;
42 | }
43 |
44 | /* Typography */
45 | body {
46 | font-size: 1rem;
47 | line-height: 1.5;
48 | }
49 |
50 | * {
51 | font-family: inherit;
52 | font-size: inherit;
53 | line-height: inherit;
54 | }
55 |
56 | a,
57 | a:visited {
58 | color: inherit;
59 | }
60 |
61 | /* Resetting specific element styles */
62 | ol,
63 | ul {
64 | list-style: none;
65 | }
66 |
67 | img,
68 | video {
69 | max-width: 100%;
70 | }
71 |
72 | img {
73 | border-style: none;
74 | }
75 |
76 | a {
77 | text-decoration: none;
78 | }
79 |
80 | /* General styles */
81 | .container {
82 | max-width: 940px;
83 | height: 100%;
84 | margin: 0 auto;
85 | padding: 0 1rem;
86 | text-align: center;
87 | }
88 |
89 | /* Header */
90 | header {
91 | background-color: #333333;
92 | position: fixed;
93 | width: 100%;
94 | z-index: 2;
95 | }
96 |
97 | label,
98 | #hamburger {
99 | display: none;
100 | }
101 |
102 | nav ul {
103 | display: flex;
104 | margin-left: 1.25rem;
105 | }
106 |
107 | nav li {
108 | font-family: 'Raleway', sans-serif;
109 | font-weight: 600;
110 | font-size: .9rem;
111 | text-align: center;
112 | width: 80px;
113 | }
114 |
115 | nav a {
116 | color: #fff;
117 | display: block;
118 | padding: 1.3rem 0;
119 | transition: color .3s;
120 | }
121 |
122 | nav a:hover {
123 | color: #b2b2b2
124 | }
125 |
126 |
127 | /* Main */
128 | main {
129 | position: relative;
130 | text-align: center;
131 | }
132 |
133 | main h1 {
134 | color: #333;
135 | font-family: 'Raleway', sans-serif;
136 | font-size: 4.375rem;
137 | padding-top: 12.5rem;
138 | padding-bottom: 5rem;
139 | text-transform: uppercase;
140 | }
141 |
142 | /* Main */
143 | /* Jumbotron */
144 | .jumbotron {
145 | background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), url(https://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
146 | background-size: cover;
147 | background-position: center center;
148 | background-repeat: no-repeat;
149 | height: 750px;
150 | }
151 |
152 | a.btn-main {
153 | background-color: #333;
154 | border: 2px solid transparent;
155 | color: #fff;
156 | font-family: 'Raleway', sans-serif;
157 | font-weight: 600;
158 | font-size: 1.125rem;
159 | letter-spacing: 1.3px;
160 | padding: 1rem 2.5rem;
161 | text-decoration: none;
162 | text-transform: uppercase;
163 | transition: all .3s;
164 | }
165 |
166 | a.btn-main:hover {
167 | background-color: #fff;
168 | color: #333;
169 | }
170 |
171 | /* Main */
172 | /* Supporting section */
173 | .supporting {
174 | padding-top: 8.125rem;
175 | padding-bottom: 10rem;
176 | }
177 |
178 | .supporting .col {
179 | display: inline-block;
180 | font-family: 'Raleway', sans-serif;
181 | height: 200px;
182 | text-align: center;
183 | width: 200px;
184 | }
185 |
186 | .supporting img {
187 | height: 32px;
188 | }
189 |
190 | .supporting h2 {
191 | font-weight: 600;
192 | font-size: 1.4375rem;
193 | text-transform: uppercase;
194 | }
195 |
196 | .supporting p {
197 | font-weight: 400;
198 | font-size: .875rem;
199 | line-height: 20px;
200 | margin-bottom: 1.25rem;
201 | padding: 0 1.25rem;
202 | }
203 |
204 | .supporting a {
205 | background-color: #fff;
206 | border: 2px solid #000;
207 | color: #333333;
208 | font-family: 'Raleway', sans-serif;
209 | font-weight: 600;
210 | font-size: .75rem;
211 | letter-spacing: 1.3px;
212 | margin-bottom: .625rem;
213 | padding: .625rem .875rem;
214 | text-decoration: none;
215 | text-transform: uppercase;
216 | }
217 |
218 | .supporting a:hover {
219 | background-color: #000;
220 | border: 2px solid transparent;
221 | color: #fff;
222 | transition: all .3s;
223 | }
224 |
225 |
226 | /* Footer */
227 | footer {
228 | background-color: #333;
229 | bottom: 0;
230 | color: #fff;
231 | left: 0;
232 | padding: 2.5rem 0;
233 | }
234 |
235 | footer p {
236 | font-family: 'Raleway', sans-serif;
237 | font-size: 0.875rem;
238 | text-transform: uppercase;
239 | }
240 |
241 | /* Responsive design */
242 | @media (max-width: 500px) {
243 | nav label {
244 | background: #a02620;
245 | color: white;
246 | cursor: pointer;
247 | display: inline-block;
248 | font-size: 1.6rem;
249 | padding: .813rem 1.25rem;
250 | }
251 |
252 | nav ul {
253 | display: none;
254 | margin-left: 0;
255 | }
256 |
257 | nav a {
258 | padding: .9rem 0;
259 | }
260 |
261 | nav input:checked ~ ul {
262 | align-items: center;
263 | display: flex;
264 | flex-direction: column;
265 | }
266 |
267 | nav ul li {
268 | width: 100%;
269 | }
270 |
271 | main h1 {
272 | font-size: 2.5rem;
273 | padding-top: 14rem;
274 | }
275 |
276 | .supporting .col {
277 | display: block;
278 | width: 100%;
279 | }
280 |
281 | footer {
282 | position: relative;
283 | }
284 | }
285 |
--------------------------------------------------------------------------------
/codebrainery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Codebrainery
7 |
13 |
14 |
Codebrainery.io
15 |
16 | Sign In
17 | Sign Up
18 | About
19 |
20 |
22 |
23 |
24 |
25 |
New Course Release
26 | Build a Website
27 |
28 |
30 |
31 |
32 |
33 |
35 |
36 |
38 |
39 |
41 |
43 |
44 |
46 |
47 |
49 |
50 |
52 |
54 |
57 |
58 |
59 |
Codebrainery.io
60 |
61 |
62 |
64 |
65 |
67 |
68 |
70 |
71 |
73 |
74 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/codebrainery/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | overflow-x: hidden;
4 | }
5 |
6 | body {
7 | font-family: 'Roboto', sans-serif;
8 | }
9 |
10 | ul {
11 | display: flex;
12 | justify-content: flex-end;
13 | list-style: none;
14 | }
15 |
16 | figure img {
17 | height: auto;
18 | width: 100%;
19 | }
20 |
21 | figure {
22 | margin-bottom: 30px;
23 | }
24 |
25 | header nav {
26 | display: flex;
27 | justify-content: flex-end;
28 | }
29 |
30 | div > h1 {
31 | font-size: 1.8rem;
32 | }
33 |
34 | nav > p {
35 | cursor: pointer;
36 | }
37 | .pill-black, .pill-white {
38 | border: 0.5px solid #000;
39 | border-radius: 5px;
40 | text-align: center;
41 | }
42 |
43 | .pill-white {
44 | background-color: #fff;
45 | color: #000;
46 | }
47 |
48 | .pill-black {
49 | background-color: #000;
50 | color: #fff;
51 | }
52 |
53 | footer {
54 | margin-top: 20px;
55 | }
56 |
57 | footer div {
58 | align-items: center;
59 | display: flex;
60 | justify-content: center;
61 | }
62 |
63 | /* Customizations of Bootstrap classes */
64 | header .row {
65 | align-items: center;
66 | display: flex;
67 | }
68 |
69 | .col-sm-4 p {
70 | margin: 25px 20px 15px;
71 | min-width: 60px;
72 | padding: 1px;
73 | }
74 |
75 | section.container .row {
76 | align-items: center;
77 | display: flex;
78 | flex-wrap: wrap;
79 | justify-content: center;
80 | }
81 |
82 | .jumbotron {
83 | align-items: center;
84 | background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/buildawebsite.jpg");
85 | background-size: cover;
86 | background-position: center;
87 | display: flex;
88 | height: 350px;
89 | }
90 |
91 | .jumbotron h2 {
92 | background-color: #FFFFFF;
93 | border-radius: 5px;
94 | color: #F06529;
95 | display: inline-block;
96 | font-weight: 700;
97 | padding: 10px 35px;
98 | }
99 |
100 | .jumbotron h3 {
101 | color: #FFFFFF;
102 | font-weight: bold;
103 | }
104 |
105 | .btn-primary {
106 | color: #2e6da4;
107 | background-color: #FFFFFF;
108 | }
109 |
110 | .col-sm-1 img {
111 | min-width: 32px;
112 | min-height: 33px;
113 | }
114 |
115 | @media screen and (max-width: 540px) {
116 | header .row {
117 | display: block;
118 | text-align: center;
119 | }
120 |
121 | header nav {
122 | display: block;
123 | }
124 |
125 | .pill-black, .pill-white {
126 | border: none;
127 | border-radius: 0;
128 | }
129 |
130 | .pill-black {
131 | background-color: #fff;
132 | color: #000;
133 | }
134 | }
135 |
136 | @media screen and (max-width: 420px) {
137 | footer div {
138 | display: flex;
139 | flex-direction: column;
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/common-cents-party/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Common Cents Party
7 |
11 |
12 |
Common Cents Party
13 |
21 |
22 |
23 |
Common Cents Party
24 |
25 |
26 | “Common Cents Party, a hard-hitting acoustic punk/electronic four-piece from Atlanta, Georgia, combines an unleashed live performance with edgy lyrics, unforgettable hooks and well-studied synth-rock sounds. A must-see, must-hear new band.” -Screech Magazine
27 |
28 |
Here’s a list of upcoming shows
29 |
30 |
Common Cents Party
7 |
11 |
12 |
Common Cents Party
13 |
21 |
22 |
23 |
Upcoming Shows
24 |
25 |
26 |
27 |
28 |
29 | Tokyo, Japan - January 26th, 2016
30 |
31 |
32 | Seoul, Republic of Korea - January 28th, 2016
33 |
34 |
35 | Singapore, Singapore - January 30th, 2016
36 |
37 |
38 | London, United Kingdom - March 5th, 2016
39 |
40 |
41 | London, United Kingdom - March 7th, 2016
42 |
43 |
44 | London, United Kingdom - March 8th, 2016
45 |
46 |
47 | London, United Kingdom - March 9th, 2016
48 |
49 |
50 | Manchester, United Kingdom - March 13th, 2016
51 |
52 |
53 | Glasgow, United Kingdom - March 14th, 2016
54 |
55 |
56 |
57 |
PupSpa
6 |
12 |
13 |
16 |
17 |
18 |
19 |
The #1 Dog Spa in NYC!
20 |
21 |
22 |
23 |
24 |
25 |
We are a full service grooming salon and doggy daycare. PupSpace is founded on the principles of communication and specialized care. We welcome you to your dog's new second home.
26 |
27 |
28 |
29 |
30 |
ADDRESS:
31 |
33 |
34 |
35 |
36 |
37 |
HOURS:
38 |
39 |
40 |
41 |
42 |
43 |
CALL US:
44 |
45 |
46 |
47 |
48 |
"PupSpa is a first class doggie grooming operation. My pug VanDyke always comes back looking so fresh. Thanks guys!"
49 |
50 |
51 |
52 |
53 |
"Lua (my shiba inu) and I are HUGE fans of PupSpa! Ryan and his crew are always so generous with their time."
54 |
55 |
56 |
57 |
60 |
61 |
Project Task Board
7 |
11 |
12 |
13 |
14 |
STUFFED ANIMAL TASK LIST
15 |
17 |
18 |
19 |
20 |
FUTURE PROJECTS
21 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
Pick Color Trends
33 |
34 |
4/21/2017
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Source Fabrics
42 |
43 |
4/21/2017
44 |
45 |
46 |
47 |
48 |
49 |
50 |
Manufacture clothing
51 |
52 |
4/20/2017
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Confirm structural integrity
60 |
61 |
4/23/2017
62 |
63 |
64 |
65 |
66 |
67 |
68 |
Manufacture mandibles
69 |
70 |
4/26/2017
71 |
72 |
73 |
74 |
75 |
ACTIVE PROJECTS
76 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
Test fear factor
88 |
89 |
4/20/2017
90 |
91 |
92 |
93 |
94 |
95 |
96 |
Develop button samples
97 |
98 |
4/21/2017
99 |
100 |
101 |
102 |
103 |
104 |
105 |
Recall malfunctioning giraffes
106 |
107 |
4/21/2017
108 |
109 |
110 |
111 |
112 |
113 |
114 |
task task task task
115 |
116 |
4/20/2017
117 |
118 |
119 |
120 |
121 |
122 |
123 |
Perform user research on new stuffing
124 |
125 |
4/23/2017
126 |
127 |
128 |
129 |
130 |
131 |
COMPLETED PROJECTS
132 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
Research Trends
144 |
145 |
4/19/2017
146 |
147 |
148 | Add
150 |
151 |
152 |
153 |
${description}
${dateStr}
Cupful Cafe
7 |
12 |
Cupful Cafe
13 |
14 |
15 |
16 |
Organic Tea and Coffee
17 |
18 |
19 |
Freshly Baked Pastries
20 |
21 |
22 |
Free Wifi
23 |
24 |
25 |
Read Our Menu
26 |
27 |
28 |
29 |
30 |
31 |
Upcoming events
32 |
33 |
34 |
Today's Roast
35 |
36 |
37 |
38 |
Curious Ornithologist
7 |
8 |
17 |
18 | Home
19 | Bird Families
20 | About
21 |
22 |
23 | Theme
24 |
35 |
36 |
37 |
38 |
39 |
40 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/dasmoto-arts-crafts/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dasmoto's Arts & Crafts
7 |
11 |
12 | Dasmoto's Arts & Crafts
13 |
14 |
15 |
16 | Brushes
17 | Hacksaw Brushes
19 |
20 | Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. Starting at $3.00 / brush .
21 |
22 |
23 |
24 | Frames
25 | Art Frames (assorted)
27 |
28 | Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. Starting at $2.00 / frame .
29 |
30 |
31 |
32 | Paint
33 | Clean Finnish Paint
35 |
36 | Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. Starting at $5.00 / tube .
37 |
38 |
39 |
40 |
Davie JR's Menu
7 |
16 | MENU NUTRITION ORDER LOCATIONS
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
36 |
37 | Our BBQ Bacon Burger features our special house ground blend of wagyu and sirloin, spiced perfectly, and finished off with just a drop of white truffle oil. A butter grilled brioche bun layered with roasted red onion, perfectly crispy pork belly, and our hickory smoked BBQ sauce.
38 |
39 |
40 |
41 |
42 |
ORDER NOW
43 |
44 |
45 |
46 |
47 |
48 | CALORIES
49 | 678
50 |
51 |
52 | FAT
53 | 32
54 |
55 |
56 | PROTEIN
57 | 8
58 |
59 |
60 | CARBOHYDRATES
61 | 34
62 |
63 |
64 | SODIUM
65 | 112
66 |
67 |
68 |
69 |
Excursion
7 |
11 |
12 |
13 | Discover hidden places in the world around you
14 |
15 |
16 |
17 | Your browser does not support the video tag.
18 |
19 |
20 |
21 |
22 | Your personal travel guide
23 | Excursion remembers places you like, and recommends new points of interest around you.
24 |
26 |
27 |
28 |
29 |
Coming Soon for iPhone and Android
31 |
32 |
33 |
Everyday with Isa
7 |
8 |
9 |
10 |
12 | by Isabelle Rodriguez | 1 day ago
13 | An Insider's Guide to NYFW
14 |
16 | NYFW can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!
17 |
18 | Getting Tickets & Picking the Shows
19 |
21 | If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which shows are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly, purchase your tickets and get excited!
22 |
23 | Dressing for the Shows
24 |
26 | Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.
27 |
28 | Related Content
29 |
30 | How To Style Boyfriend Jeans
31 | When Print Is Too Much
32 | The Overalls Trend
33 | Fall’s It Color: Blush
34 |
35 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/flexbox-to-do-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | To Do App
7 |
19 |
20 |
21 |
22 |
MON
23 |
24 |
Insert some information about your week here :)
25 |
26 |
27 |
28 |
29 |
30 |
TUE
31 |
32 |
33 |
34 |
35 |
36 |
WED
37 |
38 |
39 |
40 |
41 |
42 |
THU
43 |
44 |
45 |
46 |
47 |
48 |
FRI
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Reminders
57 |
58 |
61 | copyright nottodo.com
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/flexbox-to-do-app/style.css:
--------------------------------------------------------------------------------
1 | /* Universal Styles */
2 | body {
3 | background-color: WhiteSmoke;
4 | font-family: 'Rock Salt', cursive;
5 | margin: 0;
6 | text-align: center;
7 | }
8 |
9 | .secondary-background {
10 | background-color: Snow;
11 | }
12 |
13 | .tagline {
14 | color: LightSlateGrey;
15 | font-family: 'Quicksand', sans-serif;
16 | line-height: 125px;
17 | }
18 |
19 | /* Header */
20 | h1 {
21 | background-color: SkyBlue;
22 | color: Khaki;
23 | line-height: 100px;
24 | margin: 0;
25 | }
26 |
27 | h2 {
28 | margin: 10px;
29 | }
30 |
31 | /* App Container */
32 | .container {
33 | border: 2px solid Snow;
34 | display: flex;
35 | }
36 |
37 | /* To Do Section */
38 | .week {
39 | display: inline-flex;
40 | flex-grow: 3;
41 | flex-direction: column;
42 | }
43 |
44 | .row {
45 | align-items: center;
46 | display: flex;
47 | flex-wrap: wrap;
48 | justify-content: space-around;
49 | min-height: 200px;
50 | }
51 |
52 | .square {
53 | align-items: center;
54 | display: flex;
55 | height: 125px;
56 | justify-content: center;
57 | padding: 10px;
58 | width: 125px;
59 | }
60 |
61 | .day.square {
62 | background-color: SkyBlue;
63 | border: 1px solid white;
64 | }
65 |
66 | .task.square {
67 | background-color: Khaki;
68 | border: 1px solid white;
69 | }
70 |
71 | .task p {
72 | font-family: 'Quicksand', sans-serif;
73 | font-weight: 700;
74 | font-size: 12px;
75 | }
76 |
77 | /* Reminders */
78 | .reminders {
79 | background-color: Khaki;
80 | display: inline-flex;
81 | flex-grow: 2;
82 | }
83 |
84 | .reminders h3 {
85 | color: black;
86 | font-size: 1.5rem;
87 | line-height: 90px;
88 | margin: 10px;
89 | width: 100%;
90 | }
91 |
92 | /* Footer */
93 | footer {
94 | font-size: 1.5rem;
95 | }
96 |
--------------------------------------------------------------------------------
/form-story/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Form a Story
7 |
12 |
13 |
15 |
16 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/form-story/main.js:
--------------------------------------------------------------------------------
1 | // Grab values from the submitted form in the URL
2 | const words = new URLSearchParams(window.location.search);
3 |
4 | // Cleans up and capitalizes the names of the animals
5 | function cleanAndCap (str){
6 | if(!str) return null
7 | let temp = str.trim()
8 | return temp[0].toUpperCase() + temp.substring(1)
9 | }
10 |
11 | // Assigning the variables with values used in the story
12 | const firstAnimal= cleanAndCap(words.get('animal-1'));
13 | const secondAnimal = cleanAndCap(words.get('animal-2'));
14 |
15 | const answer = cleanAndCap(words.get('answer'));
16 | const conjunction = answer === 'Yes' ? 'and' : 'but';
17 |
18 | const speed = words.get('speed');
19 | const adj1 = words.get('adj-1');
20 |
21 | const thirdAnimal = cleanAndCap(words.get('animal-3'));
22 | const quote = words.get('quote');
23 |
24 | const verb1 = words.get('verb-1');
25 | const num1 = words.get('num-1');
26 | const message = words.get('message');
27 |
28 | // The string containing HTML and text which will populate the story.html page
29 | const story = `A ${firstAnimal} was making fun of the ${secondAnimal} one day for being so slow.
30 |
31 | "Do you ever get anywhere?" he asked with a mocking laugh.
32 |
33 | "${answer} ," replied the ${secondAnimal} , "${conjunction} I get there ${speed} than you think. I'll run you a race and prove it."
34 |
35 | The ${firstAnimal} was much ${adj1} at the idea of running a race with the ${secondAnimal} , but for the fun of the thing he agreed. So the ${thirdAnimal} , who had consented to act as judge, marked the distance yelled, "${quote} ".
36 |
37 | The ${firstAnimal} was soon far out of sight, and to make the ${secondAnimal} feel very deeply how ridiculous it was for him to try a race with a ${firstAnimal} , he went off the course to practice ${verb1} for ${num1} hours until the ${secondAnimal} should catch up.
38 |
39 | The ${secondAnimal} meanwhile kept going slowly but steadily, and, after a time, passed the place where the ${firstAnimal} was ${verb1} . The ${firstAnimal} was so caught up in ${verb1} ; and when at last he did stop, the ${secondAnimal} was near the goal. The ${firstAnimal} now ran his swiftest, but he could not overtake the ${secondAnimal} in time.
`;
40 |
41 | // Grabbing the title element
42 | const title = document.getElementById('title');
43 | // Populating the title element with text
44 | title.innerHTML = `The ${firstAnimal} And The ${secondAnimal} `;
45 |
46 | // Grabbing the story element
47 | const storyEl = document.getElementById('story');
48 | // Populating the story element with the value of the story variable
49 | storyEl.innerHTML = story;
50 |
51 | // Grabbing the moral-message element
52 | const moralMessage = document.getElementById('moral-message');
53 | // Populating the moral-message element with text
54 | moralMessage.innerHTML = `"${message}" `;
55 |
56 |
--------------------------------------------------------------------------------
/form-story/original.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Completed Story
6 |
11 |
13 |
14 | The Tortoise and the Hare
15 |
16 | A Hare was making fun of the Tortoise one day for being so slow.
17 |
18 | "Do you ever get anywhere?" he asked with a mocking laugh.
19 |
20 | "Yes," replied the Tortoise, "and I get there sooner than you think. I'll run you a race and prove it."
21 |
22 | The Hare was much amused at the idea of running a race with the Tortoise, but for the fun of the thing he agreed. So the Fox, who had consented to act as judge, marked the distance and started the runners off.
23 |
24 | The Hare was soon far out of sight, and to make the Tortoise feel very deeply how ridiculous it was for him to try a race with a Hare, he lay down beside the course to take a nap until the Tortoise should catch up.
25 |
26 | The Tortoise meanwhile kept going slowly but steadily, and, after a time, passed the place where the Hare was sleeping. But the Hare slept on very peacefully; and when at last he did wake up, the Tortoise was near the goal. The Hare now ran his swiftest, but he could not overtake the Tortoise in time.
27 |
28 |
29 | Start Over!
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/form-story/story.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Completed Story
7 |
12 |
14 |
15 | Moral of the story:
18 | Start Over!
21 | ||
22 | Original Story
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/form-story/style.css:
--------------------------------------------------------------------------------
1 | /* CSS Reset */
2 | /* Resetting margins, paddings, and borders */
3 | html, body,
4 | h1, h2, h3, h4, h5, h6,
5 | a, p, span,
6 | em, small, strong,
7 | sub, sup,
8 | mark, del, ins, strike,
9 | abbr, dfn,
10 | blockquote, q, cite,
11 | code, pre,
12 | ol, ul, li, dl, dt, dd,
13 | div, section, article,
14 | main, aside, nav,
15 | header, hgroup, footer,
16 | img, figure, figcaption,
17 | address, time,
18 | audio, video,
19 | canvas, iframe,
20 | details, summary,
21 | fieldset, form, label, legend,
22 | table, caption,
23 | tbody, tfoot, thead,
24 | tr, th, td {
25 | border: 0;
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* Box sizing */
31 | html {
32 | box-sizing: border-box;
33 | }
34 |
35 | *, *:before, *:after {
36 | box-sizing: inherit;
37 | }
38 |
39 | /* Sizing - Height */
40 | body {
41 | min-height: 100vh;
42 | }
43 |
44 | /* Typography */
45 | body {
46 | font-size: 1rem;
47 | line-height: 1.5;
48 | }
49 |
50 | * {
51 | font-family: inherit;
52 | font-size: inherit;
53 | line-height: inherit;
54 | }
55 |
56 | a,
57 | a:visited {
58 | color: inherit;
59 | }
60 |
61 | /* Resetting specific element styles */
62 | ol,
63 | ul {
64 | list-style: none;
65 | }
66 |
67 | img,
68 | video {
69 | max-width: 100%;
70 | }
71 |
72 | img {
73 | border-style: none;
74 | }
75 |
76 | table {
77 | border-collapse: collapse;
78 | border-spacing: 0;
79 | }
80 |
81 | /* General styles */
82 | body {
83 | background-color: rgb(255, 199, 64);
84 | font-family: "Open Sans", Arial;
85 | }
86 |
87 | #top {
88 | background-color: rgb(255, 255, 255);
89 | border-radius: 15px;
90 | margin: 2% 10%;
91 | }
92 |
93 | #top img {
94 | display: block;
95 | margin: 0 auto;
96 | width: 35%;
97 | }
98 |
99 | #main {
100 | background-color: rgba(255,255,255,0.8);
101 | border-radius: 15px;
102 | min-height: 80vh;
103 | margin: 2% 10%;
104 | overflow: auto;
105 | text-align: center;
106 | }
107 |
108 | /* Form - index.html */
109 | h1.form-caption {
110 | font-size: 1.7rem;
111 | padding: 20px 5px 15px;
112 | }
113 |
114 | form {
115 | margin-top: 30px;
116 | }
117 |
118 | form p {
119 | margin-bottom: 10px;
120 | }
121 |
122 | form label, form span {
123 | display: inline-block;
124 | margin-right: 10px;
125 | padding: 5px 0;
126 | text-align: right;
127 | width: 220px;
128 | }
129 |
130 | form span {
131 | width: 230px;
132 | }
133 |
134 | input[type="text"],
135 | input[type="number"],
136 | .radio-btn,
137 | select,
138 | input[type="submit"] {
139 | width: 350px;
140 | }
141 |
142 | input[type="text"],
143 | input[type="number"],
144 | textarea {
145 | padding: 5px;
146 | }
147 |
148 | input[type="text"],
149 | input[type="number"] {
150 | border-radius: 5px;
151 | border:1px solid #cccccc;
152 | }
153 |
154 | .radio-btn {
155 | padding-left: 15px;
156 | text-align: left;
157 | }
158 |
159 | .radio-btn-label {
160 | margin-right: 30px;
161 | padding: 0;
162 | width: 30px;
163 | }
164 |
165 | input[type="submit"] {
166 | padding: 3px 0;
167 | margin-left: 235px;
168 | margin-bottom: 20px;
169 | }
170 |
171 | select {
172 | height: 35px;
173 | }
174 |
175 | textarea {
176 | height: 230px;
177 | max-width: 350px;
178 | resize: vertical;
179 | }
180 |
181 | .text-area label {
182 | text-align: right;
183 | vertical-align: top;
184 | width: 220px;
185 | }
186 |
187 | /* story.html and original.html */
188 | h1#title {
189 | padding-top: 10px;
190 | font-size: 1.7rem;
191 | }
192 |
193 | #story {
194 | padding: 0 3%;
195 | }
196 |
197 | #story p {
198 | padding: 5px 0;
199 | }
200 |
201 | h2#moral {
202 | font-size: 1.25rem;
203 | }
204 |
205 | a {
206 | color: blue;
207 | text-decoration: none;
208 |
209 | }
210 | .italics {
211 | font-style: italic;
212 | }
213 |
214 | .word {
215 | font-weight: bold;
216 | text-decoration: underline;
217 | }
218 |
219 | @media screen and (max-width: 767px) {
220 | #main {
221 | border-radius: 0;
222 | height: 100%;
223 | margin: 5%;
224 | overflow: auto;
225 | text-align: center;
226 | }
227 |
228 | #top {
229 | background-color: rgb(255, 255, 255);
230 | border-radius: 0;
231 | margin: 5%;
232 | }
233 |
234 | #top img {
235 | height: auto;
236 | max-width: 100%;
237 | }
238 |
239 | form {
240 | padding: 0 10px;
241 | margin-top: 10px;
242 | }
243 |
244 | form label, form span, .text-area label {
245 | display: inline-block;
246 | margin-right: 10px;
247 | padding: 5px 0;
248 | text-align: left;
249 | width: 100%;
250 | }
251 |
252 | input[type="text"],
253 | input[type="number"],
254 | input[type="submit"],
255 | select,
256 | .radio-btn {
257 | width: 100%;
258 | }
259 |
260 | .radio-btn {
261 | padding-left: 0;
262 | }
263 |
264 | textarea {
265 | max-width: 100%;
266 | width: 100%;
267 | }
268 |
269 | input[type="submit"] {
270 | margin: 0;
271 | }
272 | }
273 |
274 |
--------------------------------------------------------------------------------
/fotomatic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Fotomatic
7 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
31 |
32 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
46 |
47 |
48 | Email us to request a demo and be in our waiting list for the Febuary 2017 release!
49 |
50 |
Join the waiting list
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
Advanced, automatic, instant
65 | Shutter speed, apperture and flash output adjust automatically
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
Beautifully crafted inside-out
76 | From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
Over 20+ filters to choose from
86 | Feed your creativity with 20 different filter designed by our eclectic in-house photographers!
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
“It’s truly something that could create a brand new photography Renaissance”
108 |
109 |
110 |
111 |
112 |
113 |
119 |
120 |
3 |
4 | C9E72C16-2987-4DEC-A43B-989EA4FF9285
5 | Created with sketchtool.
6 |
8 |
9 |
10 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/fotomatic/resources/images/ic-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 4A09CB50-F1D5-4364-BAE6-33FCCDC44261
5 | Created with sketchtool.
6 |
8 |
9 |
10 |
12 | F
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/fotomatic/resources/images/ic-product-detail.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 2C7427D9-ECE1-4C4E-8060-6394F9CC28E7
5 | Created with sketchtool.
6 |
8 |
9 |
10 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/fotomatic/resources/images/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/fotomatic/resources/images/instagram.png
--------------------------------------------------------------------------------
/fotomatic/resources/images/photography-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/fotomatic/resources/images/photography-logo.png
--------------------------------------------------------------------------------
/healthy-recipes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Quinoa and Kale Salad Recipe
7 | Kale Caesar Quinoa Salad with Roasted Chicken
12 | Kale and quinoa provide a healthy base for roasted chicken topped with a light Caesar sauce.
13 |
14 | Total time: 45 minutes
15 |
16 | Ingredients
17 |
18 | 1/4 cup kale
19 | 1 cup Quinoa
20 | 2 tbsp Olive Oil
21 | 1 chicken breast
22 | Caesar Dressing
23 |
24 |
25 | Preparation
26 |
27 |
28 | Prepare quinoa and roast chicken until golden brown and 165 in middle.
29 | Time: 40 minutes
30 |
31 |
32 | Toss quinoa, chicken, kale, and Caesar dressing until coated.
33 | Time: 4 minutes
34 |
35 |
36 | Add walnuts and olive oil as garnish.
37 | Time: 1 minute
38 |
39 |
40 |
41 | Find this recipe and more here .
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/healthy-recipes/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | height: 150px;
3 | }
4 |
5 | .description {
6 | font-size: 20px;
7 | }
8 |
9 | #cook-time {
10 | font-weight: bold;
11 | }
12 |
13 | .ingredients li {
14 | list-style: square;
15 | }
16 |
17 | p.time {
18 | color: gray;
19 | }
20 |
21 | .external-link {
22 | color: SeaGreen;
23 | }
24 |
25 | h1,
26 | h2,
27 | p,
28 | li {
29 | font-family: Helvetica;
30 | }
31 |
--------------------------------------------------------------------------------
/html-css-cheatsheet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | HTML Forms| Cheatsheet
7 |
13 |
14 | HTML forms reference
15 |
16 |
17 |
18 | Tag
19 | Name
20 | Description
21 |
22 |
23 |
24 |
25 | <button> Button
27 | Defines a clickable button
28 |
29 |
30 | <datalist> Data list
32 | Specifies a list of pre-defined options for input controls
33 |
34 |
35 | <fieldset> Field set
37 | Groups related elements within a web form
38 |
39 |
40 | <form> Form
42 | Defines a form that is used to collect user input
43 |
44 |
45 | <input> Input
47 | Creates interactive controls for web-based forms
48 |
49 |
50 | <label> Label
52 | Represents a caption for an item in a user interface
53 |
54 |
55 | <legend> Legend
57 | Represents a caption for the content of its parent <fieldset>
58 |
59 |
60 | <meter> Meter
62 | Represents either a scalar value within a known range or a fractional value
63 |
64 |
65 | <optgroup> Option group
67 | Creates a grouping of options within a <select> element
68 |
69 |
70 | <option> Option
72 | Defines an item in a drop-down list
73 |
74 |
75 | <output> Output
77 | Defines the result of a calculation
78 |
79 |
80 | <progress> Progress
82 | Displays an indicator showing the completion progress of a task (progress bar)
83 |
84 |
85 | <select> Select
87 | Represents a control that provides a menu of options
88 |
89 |
90 | <textarea> Text area
92 | Represents a multi-line plain-text editing control (text area)
93 |
94 |
95 |
96 |
97 |
New York City Blog
7 |
11 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
25 | New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.
26 |
27 |
28 |
29 |
30 |
32 | This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.
33 |
34 |
35 |
36 |
37 | New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:
38 |
39 |
40 | Pizza
41 | Bagels
42 | Burgers and Sandwiches
43 | Ramen
44 | Tacos
45 | Pasta
46 | Desserts
47 |
48 |
49 |
60 |
61 |
Olivia Woodruff Portfolio
7 |
17 |
Projects
18 |
Web Development projects
19 |
20 | Coffee Bruër
21 | Taco Finder
22 | CSS Selector Finder
23 | HTML Formatter
24 |
25 |
26 |
Design projects
27 |
28 | Yum Yum Fudge Inc.
29 | University of Marimont Dance Marathon
30 |
31 |
Contact
32 |
Find me on Twitter, Dribbble, and GitHub.
33 |
34 |
© Copyright. All Rights Reserved.
35 |
House Store
7 |
15 |
16 |
17 |
19 |
20 |
22 |
29 |
30 |
31 |
32 |
33 |
34 |
PAINTING IS SCARY
35 |
But it doesn't have to be! Let our handy Virtual Paint Department help guide you through the process of choosing a color. Know the hue? You know what to do. Click the order button and we'll get the paint to you.
36 |
40 |
41 |
Color Guide
42 |
Here at HouseStore, we take color seriously. In each of the following sections, well explore our base colors in swatches that incrementally change three values: Hue , Saturation and Lightness . You'll be able to pick from a wide variety of colors that all work well with each other because they stem from the same value.
43 |
44 |
45 |
46 |
47 |
54 |
55 |
Lightness
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
Saturation
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
Hue
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
92 |
93 |
Lightness
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
Saturation
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
Hue
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
130 |
131 |
Lightness
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
Saturation
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
Hue
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
My Personal Portfolio
7 |
23 |
24 |
25 |
About Me
26 |
27 |
29 |
30 |
31 |
32 |
33 |
34 | All right me luvver ipsum dolor sit amet laborum pacifically in innum ex me babber dollop irure all right me luvver do gas ed. Stension lead yer veniam, masarge cheers drive pacifically esse innit sed commodo mollit eiusmod dolore dolor. Almunsbree adipisicing zat alright i didnt do nothing sint quis qui culpa ceptible oozee mint in it. Proident largurr in member me babber voluptate sed alright me babber. Kinave it tiz zat alright incididunt, culpa adipisicing mint in it smorning ill lush gurt lush ea alright me babber ohm sunt.
35 |
36 |
37 |
39 |
40 |
41 |
© 2021 Ivo Boy
42 |
45 |
48 |
51 |
54 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/personal-portfolio/education.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My Personal Portfolio
7 |
23 |
24 |
25 |
Education
26 |
27 |
29 |
30 |
31 |
32 |
Broadway High School
33 |
34 |
35 | 3.5 G.P.A
36 | Captain of the Computer Science Club
37 | Chess Team - 4 years
38 | Ice Hockey Team - 3 years
39 |
40 |
41 |
42 |
Prince University
43 |
44 |
45 | 3.4 G.P.A
46 | Computer Science/English Double Major
47 | Teaching Assistant for Computer Science Department
48 | Classroom Volunteer for Local Grade Schools Coding Initiative
49 |
50 |
51 |
53 |
54 |
55 |
© 2021 Ivo Boy
56 |
59 |
62 |
65 |
68 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/personal-portfolio/experience.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My Personal Portfolio
7 |
23 |
24 |
25 |
Experience
26 |
27 |
29 |
30 |
31 |
32 |
C++
33 |
34 |
35 | 4 years experience
36 |
37 |
38 |
39 |
Java
40 |
41 |
42 | 3 years experience
43 |
44 |
45 |
46 |
JavaScript
47 |
48 |
49 | 3 years experience
50 |
51 |
52 |
53 |
Visual Basic
54 |
55 |
56 | 5 years experience
57 |
58 |
59 |
61 |
62 | Professional Projects
63 |
64 |
65 | Project 1
66 | Project 2
67 | Project 3
68 |
69 |
Personal Projects
71 |
72 |
73 | Project 1
74 | Project 2
75 | Project 3
76 |
77 |
79 |
80 |
81 |
© 2021 Ivo Boy
82 |
85 |
88 |
91 |
94 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/personal-portfolio/images/highschool.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/personal-portfolio/images/highschool.jpg
--------------------------------------------------------------------------------
/personal-portfolio/images/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/personal-portfolio/images/javascript.png
--------------------------------------------------------------------------------
/personal-portfolio/images/plus_plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/personal-portfolio/images/plus_plus.png
--------------------------------------------------------------------------------
/personal-portfolio/images/university.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/personal-portfolio/images/university.jpg
--------------------------------------------------------------------------------
/personal-portfolio/images/visual_basic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/personal-portfolio/images/visual_basic.png
--------------------------------------------------------------------------------
/personal-portfolio/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My Personal Portfolio
7 |
23 |
24 |
25 |
Programmer & Hockey Fan
26 |
27 |
28 |
C++, Java, JavaScript, and Visual Basic
29 |
30 |
32 |
33 |
34 |
© 2021 Ivo Boy
35 |
38 |
41 |
44 |
47 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/personal-portfolio/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Roboto, sans-serif;
3 | background-image: url('https://s3.amazonaws.com/codecademy-content/courses/learn-css-selectors-visual-rules/hypnotize_bg.png');
4 | }
5 |
6 | header {
7 | padding: 20px 0;
8 | }
9 |
10 | header .row,
11 | footer .row {
12 | display: flex;
13 | align-items: center;
14 | }
15 |
16 | h1 {
17 | font-weight: 700;
18 | margin: 0;
19 | }
20 |
21 | nav {
22 |
23 | display: flex;
24 | justify-content: flex-end;
25 | flex-wrap: wrap;
26 | }
27 |
28 | a {
29 | padding: 0 20px;
30 | margin: 0;
31 | }
32 |
33 | .jumbotron {
34 | display: flex;
35 | align-items: center;
36 | background-image: url(https://s3.amazonaws.com/codecademy-content/projects/personal_portfolio/background.jpeg);
37 | background-size: cover;
38 | color: #ffffff;
39 | height: 400px;
40 | }
41 |
42 | .jumbotron h2 {
43 | font-size: 60px;
44 | font-weight: 700;
45 | margin: 0;
46 | color: #fff;
47 | }
48 |
49 | .jumbotron h3 {
50 | margin: 0 0 20px;
51 | color: #fff;
52 | }
53 |
54 | section .row img {
55 | margin: 0 0 30px;
56 | width: 100%;
57 | }
58 |
59 | .col-md-6 {
60 | margin: 0 0 30px;
61 | }
62 |
63 | .btn.btn-primary {
64 | border-radius: 2px;
65 | border: 0px;
66 | color: #fbd1d5;
67 | background-color: #ffffff;
68 | }
69 |
70 | .btn.btn-primary:hover {
71 | color: #ffffff;
72 | background-color: #fbd1d5;
73 | }
74 |
75 | .btn-secondary {
76 | background-color: #2a70e0;
77 | color: #ffffff;
78 | margin: 0 0 30px;
79 | }
80 |
81 | .portrait {
82 | width: 350px;
83 | height: 300px;
84 | }
85 |
86 | figure img {
87 | width: 100%;
88 | height: auto;
89 | }
90 |
91 | figure {
92 | margin-bottom: 30px;
93 | }
94 |
95 | footer {
96 | font-size: 12px;
97 | padding: 20px 0;
98 | }
99 |
100 | footer .col-sm-8 {
101 | display: flex;
102 | justify-content: flex-end;
103 | }
104 |
105 | footer ul {
106 | list-style: none;
107 | }
108 |
109 | @media screen and (max-width: 768px) {
110 | h1 { text-align: center; padding-bottom: 15px;}
111 | nav { justify-content: center;}
112 | }
113 |
114 | @media screen and (max-width: 576px) {
115 | h1 { text-align: center;}
116 | nav { flex-direction: column; align-items: center;}
117 | nav a {padding: 5px 20px;}
118 | }
119 |
120 | @media screen and (max-width: 376px) {
121 | .jumbotron h2 { font-size: 2.3rem; }
122 | }
123 |
--------------------------------------------------------------------------------
/recreate-painting-bootstrap/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Composition II in Red, Blue, and Yellow
9 |
10 |
11 |
12 |
13 |
25 |
26 | C
27 |
28 |
29 |
30 |
31 | D
32 |
33 |
34 | E
35 |
36 |
48 |
49 |
Experience the Summit at Breckenridge!
7 |
31 |
The Experience
32 |
33 |
The Summit is the geographical center of the the Breckenridge Ski Area. It also has the widest variety of terrain, from beginner trails to steep bowl terrain. Lower Peak 8 consists of beginner trails, as well as many intermediate trails mixed with some advanced runs. There are four lifts out of the base area: Lift 7, which services a beginner learning area; Lift 5, which services more advanced beginner terrain, the Freeway and Park Lane Terrain Parks, and the Alpine Slide. At the north end of the base area, the Colorado SuperChair provides access to the Vista Haus, central Peak 8, as well as access to the Peak 8 back bowls and Peak 9, while the Rocky Mountain SuperChair provides access to northern Peak 8, the T-Bar, Peak 7, and Peak 6.
34 |
In 2007, The Summit hosted the first Winter RadAir It was one of the first action sports tours for winter sports. The Summit continues to host the event annually in the 2nd or 3rd weekend in December each year. Many of the top athletes in action sports from around the world continue to participate in the RadAir Tour. The Summit Pro Team usually constitutes many of the athletes each year, and are jointed by other participants such as Shaun Black, Hannah Stabile, Tanner Foyer, Andreas Baald, Gretchen LeBlay, Simon Duvallee, Sarah Blue, Tom Florisch, and Travis Rigatoni.
35 |
36 |
The Tea Cozy
7 |
21 |
22 |
23 |
24 |
Our Mission
25 | Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
26 |
27 |
28 |
29 |
30 |
Tea of the Month
31 |
What's Steeping at The Tea Cozy?
32 |
33 |
34 |
35 |
Fall Berry Blitz Tea
36 |
37 |
38 |
39 |
Spiced Rum Tea
40 |
41 |
42 |
43 |
Seasonal Donuts
44 |
45 |
46 |
47 |
Myrtle Ave Tea
48 |
49 |
50 |
51 |
Bedford Bizarre Tea
52 |
53 |
54 |
55 |
56 |
57 |
Locations
58 |
59 |
60 |
Downtown
61 |
384 West 4th St
62 |
Suite 108
63 |
Portland, Maine
64 |
65 |
66 |
East Bayside
67 |
3433 Phisherman's Avenue
68 |
(Northwest Corner)
69 |
Portland, Maine
70 |
71 |
72 |
Oakdale
73 |
515 Crescent Avenue
74 |
Second Floor
75 |
Portland, Maine
76 |
77 |
78 |
79 |
82 |
The Tea Cozy
83 | contact@theteacozy.com
84 | 917-555-8904
85 |
86 |
87 |
88 | copyright The Tea Cozy 2020
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/tea-cozy/style.css:
--------------------------------------------------------------------------------
1 | /* CSS Reset */
2 | /* Resetting margins, paddings, and borders */
3 | html, body,
4 | h1, h2, h3, h4, h5, h6,
5 | a, p, span,
6 | em, small, strong,
7 | sub, sup,
8 | mark, del, ins, strike,
9 | abbr, dfn,
10 | blockquote, q, cite,
11 | code, pre,
12 | ol, ul, li, dl, dt, dd,
13 | div, section, article,
14 | main, aside, nav,
15 | header, hgroup, footer,
16 | img, figure, figcaption,
17 | address, time,
18 | audio, video,
19 | canvas, iframe,
20 | details, summary,
21 | fieldset, form, label, legend,
22 | table, caption,
23 | tbody, tfoot, thead,
24 | tr, th, td {
25 | border: 0;
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* Box sizing */
31 | html {
32 | box-sizing: border-box;
33 | }
34 |
35 | *, *:before, *:after {
36 | box-sizing: inherit;
37 | }
38 |
39 | /* Sizing - Height */
40 | body {
41 | min-height: 100vh;
42 | }
43 |
44 | /* Typography */
45 | body {
46 | font-size: 1rem;
47 | line-height: 1.5;
48 | }
49 |
50 | * {
51 | font-family: inherit;
52 | font-size: inherit;
53 | line-height: inherit;
54 | }
55 |
56 | a,
57 | a:visited {
58 | color: inherit;
59 | }
60 |
61 | /* Resetting specific element styles */
62 | ol,
63 | ul {
64 | list-style: none;
65 | }
66 |
67 | img,
68 | video {
69 | max-width: 100%;
70 | }
71 |
72 | img {
73 | border-style: none;
74 | }
75 |
76 | a {
77 | text-decoration: none;
78 | }
79 |
80 | /* Universal Styles */
81 | body {
82 | background-color: black;
83 | color: seashell;
84 | font-family: Helvetica, sans-serif;
85 | font-size: 1.375rem;
86 | opacity: 0.9;
87 | text-align: center;
88 | }
89 |
90 | a {
91 | color: seashell;
92 | }
93 |
94 | h2,
95 | h3,
96 | h4 {
97 | padding: 10px;
98 | }
99 |
100 | h2 {
101 | font-size: 2.1rem;
102 | }
103 |
104 | h3 {
105 | font-size: 1.8rem;
106 | }
107 |
108 | h4 {
109 | font-size: 1.6rem;
110 | }
111 |
112 | .flex-container {
113 | display: flex;
114 | justify-content: center;
115 | flex-wrap: wrap;
116 | }
117 |
118 | /* Header Section */
119 | header {
120 | align-items: center;
121 | background-color: black;
122 | border-bottom: 1px solid seashell;
123 | height: 69px;
124 | position: fixed;
125 | width: 100%;
126 | z-index: 1;
127 | }
128 |
129 | header img {
130 | height: 50px;
131 | padding-left: 10px;
132 | }
133 |
134 | nav {
135 | text-align: right;
136 | flex-grow: 1;
137 | }
138 |
139 | nav span {
140 | display: inline-block;
141 | padding: 20px 10px;
142 | text-decoration: underline;
143 | }
144 |
145 | /* Main Section */
146 | .main {
147 | margin: auto;
148 | opacity: 0.9;
149 | padding-top: 69px;
150 | width: 1200px;
151 | }
152 |
153 | /* Mission Section */
154 | #mission {
155 | background: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg) no-repeat center;
156 | background-size: cover;
157 | height: 700px;
158 | padding-top: 70px;
159 | }
160 |
161 | #mission .content {
162 | background-color: black;
163 | margin: auto;
164 | width: 100%;
165 | }
166 |
167 | /* Store Section */
168 | #store {
169 | height: 700px;
170 | margin: auto;
171 | padding-top: 70px;
172 | width: 1000px;
173 | }
174 |
175 | .item {
176 | margin: 10px;
177 | padding: 5px;
178 | }
179 |
180 | .item img {
181 | display: block;
182 | height: 200px;
183 | width: 300px;
184 | }
185 |
186 | .item span {
187 | display: block;
188 | padding: 10px 5px 5px;
189 | font-weight: bold;
190 | text-align: center;
191 | }
192 |
193 | /* Location Section */
194 | .flex-container.locations {
195 | padding-top: 5px;
196 | }
197 |
198 | #locations {
199 | background: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg) no-repeat center;
200 | background-size: cover;
201 | height: 500px;
202 | margin-top: 120px;
203 | padding: 70px 0;
204 | }
205 |
206 | #locations .flex-container {
207 | margin: auto;
208 | width: 1100px;
209 | }
210 |
211 | .location {
212 | opacity: 1.0;
213 | padding: 10px;
214 | margin: 5px 20px;
215 | background-color: black;
216 | flex-basis: 280px;
217 | display: flex;
218 | flex-direction: column;
219 | justify-content: center;
220 | }
221 |
222 | /* Contact Section */
223 | #contact {
224 | height: 200px;
225 | }
226 | #contact h2 {
227 | padding-top: 20px;
228 | }
229 |
230 | /* Footer Section */
231 | footer {
232 | padding-left: 20px;
233 | padding-bottom: 20px;
234 | text-align: left;
235 | }
236 |
237 | @media screen and (max-width: 767px) {
238 | h2 {
239 | font-size: 1.8rem;
240 | }
241 |
242 | h3 {
243 | font-size: 1.5rem;
244 | }
245 |
246 | h4 {
247 | font-size: 1.3rem;
248 | }
249 |
250 | header {
251 | flex-direction: column;
252 | height: initial;
253 | padding: 20px 0 10px;
254 | position: relative;
255 | }
256 |
257 | nav span {
258 | display: block;
259 | text-align: center;
260 | }
261 |
262 | .main,
263 | #mission,
264 | #store,
265 | #locations .flex-container {
266 | width: 100%;
267 | }
268 |
269 | #locations,
270 | #store {
271 | height: initial;
272 | }
273 |
274 | footer {
275 | padding-left: 0;
276 | text-align: center;
277 | }
278 |
279 | #contact h5,
280 | footer h5 {
281 | font-size: 1rem;
282 | }
283 | }
284 |
285 |
--------------------------------------------------------------------------------
/transitions-book/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 20,000 Leagues Under The Sea
6 |
17 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 | Twenty Thousand Leagues Under the Sea
38 | by
39 | Jules Verne
40 |
41 |
42 |
43 |
44 |
45 |
Part One
46 |
47 | CHAPTER I
48 | A SHIFTING REEF
49 |
50 |
The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.
51 |
52 |
For some time past vessels had been met by “an enormous thing,” a long object, spindle-shaped, occasionally
53 |
54 |
phosphorescent
56 |
phosphorescent
57 |
adjective | phos·pho·res·cent
58 |
59 | Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons) and continues for a noticeable time after these radiations have stopped
60 | Exhibiting an enduring luminescence without sensible heat
61 |
62 |
, and infinitely larger and more rapid in its movements than a whale.
64 |
65 |
The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of
66 |
67 |
locomotion
69 |
locomotion
70 |
noun | lo·co·mo·tion
71 |
72 | movement or the ability to move from one place to another
73 |
74 |
,
76 | and the peculiar life with which it seemed endowed. If it was a whale, it surpassed in size all those hitherto classified in science. Taking into consideration the mean of observations made at divers times—rejecting the timid estimate of those who assigned to this object a length of two hundred feet, equally with the exaggerated opinions which set it down as a mile in width and three in length—we might fairly conclude that this mysterious being surpassed greatly all dimensions admitted by the learned ones of the day, if it existed at all. And that it DID exist was an undeniable fact; and, with that tendency which disposes the human mind in favour of the marvellous, we can understand the excitement produced in the entire world by this supernatural apparition. As to classing it in the list of fables, the idea was out of the question.
77 |
78 |
On the 20th of July, 1866, the steamer Governor Higginson, of the Calcutta and Burnach Steam Navigation Company, had met this moving mass five miles off the east coast of Australia. Captain Baker thought at first that he was in the presence of an unknown sandbank; he even prepared to determine its exact position when two columns of water, projected by the mysterious object, shot with a hissing noise a hundred and fifty feet up into the air. Now, unless the sandbank had been submitted to the intermittent eruption of a geyser, the Governor Higginson had to do neither more nor less than with an aquatic mammal, unknown till then, which threw up from its blow-holes columns of water mixed with air and vapour.
79 |
80 |
90 |
Tsunami Coffee
7 |
21 |
22 |
23 |
Great coffee does not happen by accident.
24 |
We work side by side with farmers around the world to strengthen farming practices to cultivate the best coffee beans in the world. Then, we train our baristas in the sacred art of the brew process, yielding the most flavorful coffee you’ve ever tasted.
25 |
26 |
Tsunami Coffee is certified organic and fair trade.
27 |
28 |
30 |
31 |
9.4/10: A rush of flavors. Absolutely divine.
32 |
~ Coffee Critic
33 |
34 |
42 |
43 |
Brewed with love in San Francisco.
44 |
Morocco
7 |
25 |
DEC 20XX
26 | Morocco
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
A convoy of camels criss-crossing the crests of the Sahara
36 |
37 |
38 | I am in the Great Sahara Desert for the third sundown in a row. Fouad and I pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war to be honest. With what remains of the daylight, we commit to memory the positions of spots on the page. We hope to find some correlation in its negative, which slides overhead as the sun rapidly dies.
39 |
40 |
41 | "Navigating by night is always easier." Fouad flicks these English words as ash from a cigarette. "You’ll see."
42 |
43 |
44 | "We won't see anything. That's my point!"
45 |
46 |
47 | How did we get here?
48 |
49 |
50 | It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a judgement as I stepped onto the gangplank. A bit about Morocco:
51 |
52 |
53 |
54 |
55 |
56 |
The long and winding road to Merrakec
57 |
58 |
59 | Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale, Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a history of independence not shared by its neighbours.
60 |
61 |
"Navigating by night is always easier."
62 |
63 | Since the foundation of the first Moroccan state by Idris I in 789, the country has been ruled by a series of independent dynasties, reaching its zenith under the Almoravid and Almohad dynasty, spanning parts of Iberia and Northwestern Africa. Marinid and Saadi dynasties continued the struggle against foreign domination, and Morocco remained the only North-African country to avoid Ottoman occupation.
64 |
65 |
66 | The Alaouite dynasty, the current ruling dynasty, seized power in 1666. In 1912 Morocco was be divided into a French and Spanish protectorates, with an international zone in Tangier, and regained its independence in 1956. Moroccan culture is a blend of Arab, indigenous Berber, Sub-Saharan African, and European influences.
67 |
68 |
69 |
70 |
71 |
72 |
A stall at the Jemaa El Fnaa street market
73 |
74 |
75 | Morocco claims the non-self-governing territory of Western Sahara as its Southern Provinces. Morocco annexed the territory in 1975, leading to a guerrilla war with indigenous forces until a cease-fire in 1991. Peace processes have thus far failed to break the political deadlock.
76 |
77 |
78 | Morocco is a constitutional monarchy with an elected parliament. The King of Morocco holds vast executive and legislative powers, especially over the military, foreign policy and religious affairs. Executive power is exercised by the government, while legislative power is vested in both the government and the two chambers of parliament, the Assembly of Representatives and the Assembly of Councillors. The king can issue decrees called dahirs which have the force of law. He can also dissolve the parliament after consulting the Prime Minister and the president of the Constitutional court.
79 |
80 |
“Navigating by night is always easier.”
81 |
82 | Morocco's predominant religion is Islam, and the official languages are Arabic and Tamazight. Moroccan dialect, referred to as Darija, and French are also widely spoken. Morocco is an influential member of the Arab League and a part of the Union for the Mediterranean. It has the fifth largest economy of Africa.
83 |
84 |
85 |
86 |
87 |
88 |
The desert at night is strange and beautiful
89 |
90 |
94 |
95 |
96 |
98 |
99 | Aoife Donleavy has been writing on her travels for over two decades.
100 | After graduating from the Idaho Writers' Workshop , she piloted a biplane on a two-year voyage from Anchorage , Alaska to Isafjorour , Iceland stopping along the way for adventures throughout Europe.
101 |
102 |
103 | Since then, she has camped on all seven continents, and has been recognized worldwide for her spare, ageless prose. Aoife's new novel, Tide Blade , is currently available from Walrus Publishing .
104 |
105 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/typography/style.css:
--------------------------------------------------------------------------------
1 | /* CSS Reset */
2 | /* Resetting margins, paddings, and borders */
3 | html, body,
4 | h1, h2, h3, h4, h5, h6,
5 | a, p, span,
6 | em, small, strong,
7 | sub, sup,
8 | mark, del, ins, strike,
9 | abbr, dfn,
10 | blockquote, q, cite,
11 | code, pre,
12 | ol, ul, li, dl, dt, dd,
13 | div, section, article,
14 | main, aside, nav,
15 | header, hgroup, footer,
16 | img, figure, figcaption,
17 | address, time,
18 | audio, video,
19 | canvas, iframe,
20 | details, summary,
21 | fieldset, form, label, legend,
22 | table, caption,
23 | tbody, tfoot, thead,
24 | tr, th, td {
25 | border: 0;
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* Box sizing */
31 | html {
32 | box-sizing: border-box;
33 | }
34 |
35 | *, *:before, *:after {
36 | box-sizing: inherit;
37 | }
38 |
39 | /* Sizing - Height */
40 | body {
41 | min-height: 100vh;
42 | }
43 |
44 | /* Typography */
45 | body {
46 | font-size: 1rem;
47 | line-height: 1.5;
48 | }
49 |
50 | * {
51 | font-family: inherit;
52 | font-size: inherit;
53 | line-height: inherit;
54 | }
55 |
56 | a,
57 | a:visited {
58 | color: inherit;
59 | }
60 |
61 | /* Resetting specific element styles */
62 | ol,
63 | ul {
64 | list-style: none;
65 | }
66 |
67 | img,
68 | video {
69 | max-width: 100%;
70 | }
71 |
72 | img {
73 | border-style: none;
74 | }
75 |
76 | a {
77 | text-decoration: none;
78 | }
79 |
80 | /* General styles */
81 | body {
82 | font-size: 1.125rem;
83 | }
84 |
85 | /* Header */
86 | .header {
87 | display: flex;
88 | justify-content: space-around;
89 | align-items: center;
90 | min-height: 4.44rem;
91 | padding: 0 12%;
92 | background-color: white;
93 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
94 | font-family: Verdana, sans-serif;
95 | font-size: .77rem;
96 | font-weight: bold;
97 | }
98 |
99 | .header .logo {
100 | flex-grow: 1;
101 | color: #ffb78c;
102 | }
103 |
104 | .header li {
105 | display: inline;
106 | padding-right: 2.22rem;
107 | }
108 |
109 | .header li a {
110 | text-decoration: none;
111 | color: #4a4a4a;
112 | }
113 |
114 | /* Banner */
115 | .banner {
116 | display: flex;
117 | flex-direction: column;
118 | justify-content: center;
119 | align-items: center;
120 | height: 50rem;
121 | background: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-6/project-morocco/banner.jpg") center center no-repeat;
122 | background-size: cover;
123 | color: #ffb78c;
124 | }
125 |
126 | .banner h2 {
127 | padding: .55rem 0;
128 | border-top: 4px solid #ffb78c;
129 | border-bottom: 4px solid #ffb78c;
130 | font-size: 1.44rem;
131 | letter-spacing: 2px;
132 | font-weight: 500;
133 | font-family: 'Work Sans', sans-serif;
134 | }
135 |
136 | .banner h1 {
137 | font-family: 'Abril Fatface', cursive;
138 | padding-top: 1.11rem;
139 | font-size: 10.5rem;
140 | font-weight: 900;
141 | }
142 |
143 | /* Journal */
144 | .journal {
145 | padding: 0 25% 4rem 25%;
146 | background-color: rgb(254, 231, 218);
147 | color: #4a4a4a;
148 | }
149 |
150 | .photo {
151 | width: 75%;
152 | padding: 1.11rem;
153 | border-radius: 5px;
154 | margin: 0 auto 4.44rem auto;
155 | background-color: white;
156 | }
157 |
158 | .photo .image-container {
159 | overflow: hidden;
160 | margin-bottom: 1.11rem;
161 | }
162 |
163 | .photo .image-container img {
164 | width: 100%;
165 | }
166 |
167 | .photo .caption {
168 | font-style: italic;
169 | font-family: 'Merriweather', serif;
170 | }
171 |
172 | .photo.first {
173 | position: relative;
174 | top: -2.77rem;
175 | margin-bottom: 1.67rem;
176 | }
177 |
178 | .journal p {
179 | padding-bottom: 2.77rem;
180 | font-size: 1.5rem;
181 | line-height: 1.4;
182 | }
183 |
184 | .journal .first-letter {
185 | float: left;
186 | padding-right: 1.4rem;
187 | font-family: "Abril Fatface", serif;
188 | font-size: 7.44rem;
189 | color: #10b0d8;
190 | line-height: .87;
191 | }
192 |
193 | .quote {
194 | display: block;
195 | padding: 4.44rem 0;
196 | margin-bottom: 3.33rem;
197 | border-top: 4px solid black;
198 | border-bottom: 4px solid black;
199 | text-align: center;
200 | font-size: 3.55rem;
201 | font-weight: 800;
202 | line-height: 1.2;
203 | }
204 |
205 | /* Footer */
206 | footer {
207 | line-height: 1.5;
208 | display: flex;
209 | align-items: center;
210 | flex-wrap: wrap;
211 | flex-direction: row;
212 | padding: 0 1%;
213 | background-color: #212121;
214 | }
215 |
216 | footer .image-container {
217 | flex: 35%;
218 | }
219 |
220 | footer .content {
221 | flex: 65%;
222 | font-style: italic;
223 | color: #9b9b9b;
224 | padding: 1rem .5rem;
225 | }
226 |
227 | footer p {
228 | padding-bottom: 1.66rem;
229 | }
230 |
231 | footer p:last-child {
232 | padding-bottom: 0;
233 | }
234 |
235 | footer .author {
236 | color: #ffb78c;
237 | }
238 |
239 | footer em {
240 | color: #cfcfcf;
241 | }
242 |
243 | @media screen and (max-width: 1000px) {
244 | body {
245 | font-size: 1rem;
246 | }
247 | }
248 |
249 | @media screen and (max-width: 750px) {
250 | .banner {
251 | height: 40rem;
252 | }
253 |
254 | .banner h1 {
255 | font-size: 7rem;
256 | }
257 |
258 | footer {
259 | flex-direction: column;
260 | padding: 0 10% 2rem 10%;
261 | }
262 |
263 | footer .image-container {
264 | height: 300px;
265 | margin-bottom: 2rem;
266 | overflow: hidden;
267 | }
268 | }
269 |
270 | @media screen and (max-width: 680px) {
271 | body {
272 | font-size: .875rem;
273 | }
274 |
275 | .header {
276 | flex-direction: column;
277 | }
278 |
279 | .header .logo {
280 | flex-grow: 0;
281 | padding: 1rem 0;
282 | }
283 |
284 | .header li {
285 | width: 100%;
286 | display: inline-block;
287 | text-align: center;
288 | padding: 1rem 0;
289 | }
290 |
291 | .journal {
292 | padding: 0 10% 4rem 10%;
293 | }
294 | }
295 |
296 | @media screen and (max-width: 550px) {
297 |
298 |
299 | .quote {
300 | font-size: 1.75rem;
301 | }
302 | }
303 |
304 | @media screen and (max-width: 530px) {
305 | .banner {
306 | height: 30rem;
307 | }
308 |
309 | .banner h1 {
310 | font-size: 3rem;
311 | }
312 | }
313 |
--------------------------------------------------------------------------------
/web-design-system/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/web-design-system/images/avatar.jpg
--------------------------------------------------------------------------------
/web-design-system/images/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivobul/html-css-codecademy-projects/38e06bcca15b377f45d6a066c8add2f1efe987d8/web-design-system/images/image.jpg
--------------------------------------------------------------------------------
/web-design-system/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Website Design System
6 |
13 |
My Website Style Guide
14 |
15 |
16 |
17 |
Typography
18 |
19 |
H1: Main page heading
20 |
21 | Font-weight: 300 (light)
22 | Font-size: 55px
23 | Font-family: Open Sans, sans-serif
24 |
25 |
26 |
27 |
H2: Subheading
28 |
29 | Font-weight: 300 (light)
30 | Font-size: 44px
31 | Font-family: Open Sans, sans-serif
32 |
33 |
34 |
35 |
H3: Content Headline
36 |
37 | Font-weight: 400 (regular)
38 | Font-size: 32px
39 | Font-family: Open Sans, sans-serif
40 |
41 |
42 |
43 |
P: Paragraph text
44 |
45 | Font-weight: 400 (regular), 400 (italic), 700 (bold)
46 | Font-size: 16px
47 | Font-family: Open Sans, sans-serif
48 |
49 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Pellentesque sit amet porttitor eget dolor morbi . Pellentesque nec nam aliquam sem et tortor. Gravida rutrum quisque non tellus orci ac. Nibh cras pulvinar mattis nunc sed. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Nisi quis eleifend quam adipiscing.
50 |
51 |
Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Vel pharetra vel turpis nunc eget lorem. Neque sodales ut etiam sit amet nisl purus in mollis. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Quam id leo in vitae turpis massa sed elementum tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a.
52 |
53 |
Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Urna cursus eget nunc scelerisque viverra mauris in. Cras pulvinar mattis nunc sed. Nibh cras pulvinar mattis nunc sed blandit. Suspendisse potenti nullam ac tortor. Mauris cursus mattis molestie a iaculis at erat pellentesque. Euismod lacinia at quis risus sed vulputate. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Dictum at tempor commodo ullamcorper a. Ut eu sem integer vitae justo eget magna fermentum. Dapibus ultrices in iaculis nunc sed augue lacus viverra.
54 |
55 |
56 |
57 |
79 |
80 |
81 |
Avatars
82 |
83 | Large: 128x128
84 | Middle: 100x100
85 | Small: 72x72
86 |
87 |
92 |
93 |
94 |
Images
95 |
96 |
97 |
98 |
99 |
100 |
102 |
Colors
103 |
104 |
105 |
106 |
Primary Color
107 |
RGB: 45 93 204
108 |
HEX: #2d5dcc
109 |
110 |
111 |
112 |
113 |
Secondary Color
114 |
RGB: 66 178 77
115 |
HEX: #4fe0b0
116 |
117 |
118 |
119 |
120 |
Body Text Color
121 |
RGB: 112 112 112
122 |
HEX: #707070
123 |
124 |
125 |
126 |
127 |
Headlines Color
128 |
RGB: 0 0 0
129 |
HEX: #000000
130 |
131 |
132 |
133 |
Aguillar Family Wine Festival
7 |
12 | Annual Aguillar Family Wine Festival
13 |
14 |
15 |
16 |
17 |
18 | Wine Festival Schedule
19 |
20 |
21 | Time
22 | Event
23 |
24 |
25 |
26 |
27 |
28 | 12:00 PM
29 |
30 |
31 | Welcome Reception
32 |
33 |
34 |
35 |
36 | 01:00 PM
37 |
38 |
39 | Storytelling & Tasting
40 |
41 |
42 |
43 |
44 | 02:00 PM
45 |
46 |
47 | Wine Luncheon
48 |
49 |
50 |
51 |
52 | 03:00 PM
53 |
54 |
55 | Aguillar Family Wines
56 |
57 |
58 |
59 |
60 | 04:00 PM
61 |
62 |
63 | Wine & Cheese Tasting
64 |
65 |
66 |
67 |
68 |
70 | Contact
71 | Location
72 | Privacy Policy
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/wine-festival-schedule/style.css:
--------------------------------------------------------------------------------
1 | /* CSS Reset */
2 | /* Resetting margins, paddings, and borders */
3 | html, body,
4 | h1, h2, h3, h4, h5, h6,
5 | a, p, span,
6 | em, small, strong,
7 | sub, sup,
8 | mark, del, ins, strike,
9 | abbr, dfn,
10 | blockquote, q, cite,
11 | code, pre,
12 | ol, ul, li, dl, dt, dd,
13 | div, section, article,
14 | main, aside, nav,
15 | header, hgroup, footer,
16 | img, figure, figcaption,
17 | address, time,
18 | audio, video,
19 | canvas, iframe,
20 | details, summary,
21 | fieldset, form, label, legend,
22 | table, caption,
23 | tbody, tfoot, thead,
24 | tr, th, td {
25 | border: 0;
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* Box sizing */
31 | html {
32 | box-sizing: border-box;
33 | }
34 |
35 | *, *:before, *:after {
36 | box-sizing: inherit;
37 | }
38 |
39 | /* Sizing - Height */
40 | body {
41 | min-height: 100vh;
42 | }
43 |
44 | /* Typography */
45 | body {
46 | font-size: 1rem;
47 | line-height: 1.5;
48 | }
49 |
50 | * {
51 | font-family: inherit;
52 | font-size: inherit;
53 | line-height: inherit;
54 | }
55 |
56 | a,
57 | a:visited {
58 | color: inherit;
59 | }
60 |
61 | /* Resetting specific element styles */
62 | ol,
63 | ul {
64 | list-style: none;
65 | }
66 |
67 | img,
68 | video {
69 | max-width: 100%;
70 | }
71 |
72 | img {
73 | border-style: none;
74 | }
75 |
76 | table {
77 | border-collapse: collapse;
78 | border-spacing: 0;
79 | }
80 |
81 | /* General styles */
82 | body {
83 | background-color: #242f44;
84 | color: white;
85 | font-family: 'Oswald', sans-serif;
86 | }
87 |
88 | .container {
89 | max-width: 940px;
90 | margin: 0 auto;
91 | }
92 |
93 | h1,
94 | .table-h1 {
95 | background-color: white;
96 | color: #8c6b48;
97 | font-size: 2.25rem;
98 | padding: 15px;
99 | }
100 |
101 | .table-h2 {
102 | font-size: 1.5rem;
103 | padding: 15px;
104 | text-transform: uppercase;
105 | }
106 |
107 | h3 {
108 | font-size: 1.25rem;
109 | font-weight: 500;
110 | line-height: 2.7;
111 | letter-spacing: 0.8px;
112 | margin-left: 20px;
113 | padding: 15px;
114 | text-transform: uppercase;
115 | text-align: left;
116 | }
117 |
118 | /* Header */
119 | header {
120 | margin-top: 5px;
121 | text-align: center;
122 | }
123 |
124 | /* Table */
125 | table {
126 | margin: 40px auto 140px;
127 | text-align: center;
128 | }
129 |
130 | th {
131 | border: 2px solid #8c6b48;
132 | }
133 |
134 | td {
135 | border: 2px solid #8c6b48;
136 | width: 300px;
137 | }
138 |
139 | .left {
140 | width: 150px;
141 | }
142 |
143 | /* Footer */
144 | footer {
145 | background-color: #242f44;
146 | bottom: 0;
147 | position: fixed;
148 | text-align: center;
149 | width: 100%;
150 | z-index: 5;
151 | }
152 |
153 | footer h3 {
154 | background-color: #242f44;
155 | display: inline-block;
156 | font-size: 14px;
157 | }
158 |
159 | @media screen and (max-width: 576px) {
160 | h1,
161 | .table-h1 {
162 | font-size: 1.75rem;
163 | }
164 |
165 | .table-h2 {
166 | font-size: 1.25rem;
167 | }
168 |
169 | h3 {
170 | font-size: 1rem;
171 | margin-left: 0;
172 | text-align: center;
173 | }
174 | }
175 |
--------------------------------------------------------------------------------
21 | 
24 | 
27 | 
30 | 
33 | 
36 | 
39 | 
42 | 
36 | 
42 | 
48 | 
34 | 
37 | 
40 | 
45 | 
48 | 
51 | 
25 | 
21 | 
30 | 
37 | 
43 | 
13 | 
23 | 
34 | 
18 | 
26 | 
34 | 
11 | 
15 | 
20 | 
25 | 
14 | 
62 | 
73 | 
91 | 
94 | 
97 | 
100 | 
109 | 
11 | 
31 | 
58 |
59 | 
13 | 
17 | 
20 | 
52 | 
90 | 
128 | 
33 | 
34 | 
44 | 
34 | 
41 | 
48 | 
55 | 
13 |
18 | 
35 | 
39 | 
43 | 
47 | 
51 | 
83 | 
87 | 
19 | 
22 | 
37 | 
38 | 
39 |
40 | 
43 | 
34 | 
55 | 
71 | 
87 | 
89 | 
97 |