diff --git a/lesson02/step-00/README.md b/lesson02/step-00/README.md new file mode 100644 index 0000000..8c8aeb2 --- /dev/null +++ b/lesson02/step-00/README.md @@ -0,0 +1,3 @@ +Defaults from lesson01 - step-10. + +Georgia font-family added to paragraphs. \ No newline at end of file diff --git a/lesson02/step-00/button.css b/lesson02/step-00/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-00/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-00/colors.css b/lesson02/step-00/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-00/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-00/defaults.css b/lesson02/step-00/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-00/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-00/images.css b/lesson02/step-00/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-00/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-00/img/logo2.png b/lesson02/step-00/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-00/img/logo2.png differ diff --git a/lesson02/step-00/img/logo3.png b/lesson02/step-00/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-00/img/logo3.png differ diff --git a/lesson02/step-00/index.html b/lesson02/step-00/index.html new file mode 100644 index 0000000..de2c46d --- /dev/null +++ b/lesson02/step-00/index.html @@ -0,0 +1,20 @@ + + + + Simple page layout + + + + + + + + + + + + + + Content + + \ No newline at end of file diff --git a/lesson02/step-00/layout.css b/lesson02/step-00/layout.css new file mode 100644 index 0000000..3c3682c --- /dev/null +++ b/lesson02/step-00/layout.css @@ -0,0 +1,48 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder .w33p { + width: 100%; + } + + .reorder .w66p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-01/README.md b/lesson02/step-01/README.md new file mode 100644 index 0000000..8f3529b --- /dev/null +++ b/lesson02/step-01/README.md @@ -0,0 +1 @@ +Adding new container: .container800 \ No newline at end of file diff --git a/lesson02/step-01/button.css b/lesson02/step-01/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-01/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-01/colors.css b/lesson02/step-01/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-01/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-01/defaults.css b/lesson02/step-01/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-01/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-01/images.css b/lesson02/step-01/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-01/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-01/img/logo2.png b/lesson02/step-01/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-01/img/logo2.png differ diff --git a/lesson02/step-01/img/logo3.png b/lesson02/step-01/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-01/img/logo3.png differ diff --git a/lesson02/step-01/index.html b/lesson02/step-01/index.html new file mode 100644 index 0000000..dfe15fc --- /dev/null +++ b/lesson02/step-01/index.html @@ -0,0 +1,25 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + +
+ wide container +
+
+ narrow container +
+ + \ No newline at end of file diff --git a/lesson02/step-01/layout.css b/lesson02/step-01/layout.css new file mode 100644 index 0000000..7f51d4c --- /dev/null +++ b/lesson02/step-01/layout.css @@ -0,0 +1,59 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder .w33p { + width: 100%; + } + + .reorder .w66p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-02/README.md b/lesson02/step-02/README.md new file mode 100644 index 0000000..3fe9fc1 --- /dev/null +++ b/lesson02/step-02/README.md @@ -0,0 +1 @@ +Adding full width colored rows. \ No newline at end of file diff --git a/lesson02/step-02/button.css b/lesson02/step-02/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-02/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-02/colors.css b/lesson02/step-02/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-02/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-02/defaults.css b/lesson02/step-02/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-02/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-02/images.css b/lesson02/step-02/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-02/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-02/img/logo2.png b/lesson02/step-02/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-02/img/logo2.png differ diff --git a/lesson02/step-02/img/logo3.png b/lesson02/step-02/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-02/img/logo3.png differ diff --git a/lesson02/step-02/index.html b/lesson02/step-02/index.html new file mode 100644 index 0000000..514d2e7 --- /dev/null +++ b/lesson02/step-02/index.html @@ -0,0 +1,29 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + +
+
+ wide container +
+
+
+
+ narrow container +
+
+ + \ No newline at end of file diff --git a/lesson02/step-02/layout.css b/lesson02/step-02/layout.css new file mode 100644 index 0000000..7f51d4c --- /dev/null +++ b/lesson02/step-02/layout.css @@ -0,0 +1,59 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder .w33p { + width: 100%; + } + + .reorder .w66p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-03/README.md b/lesson02/step-03/README.md new file mode 100644 index 0000000..0bcae85 --- /dev/null +++ b/lesson02/step-03/README.md @@ -0,0 +1,5 @@ +Adding more col types to layout.css +Modifying the markup to show the new rows. + +under 800px -> cols are fluid +under 600px -> cols are 100% wide + .w25p -> 50% wide \ No newline at end of file diff --git a/lesson02/step-03/button.css b/lesson02/step-03/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-03/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-03/colors.css b/lesson02/step-03/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-03/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-03/defaults.css b/lesson02/step-03/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-03/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-03/images.css b/lesson02/step-03/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-03/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-03/img/logo2.png b/lesson02/step-03/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-03/img/logo2.png differ diff --git a/lesson02/step-03/img/logo3.png b/lesson02/step-03/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-03/img/logo3.png differ diff --git a/lesson02/step-03/index.html b/lesson02/step-03/index.html new file mode 100644 index 0000000..0afc50c --- /dev/null +++ b/lesson02/step-03/index.html @@ -0,0 +1,69 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + +
+
+
+
+

Header left

+
+
+

Header right

+
+
+
+
+

Header left2

+
+
+

Header right2_1

+
+
+

Header right2_2

+
+
+
+
+
+
+
+
+

w33 1 - reorder

+
+
+

w33 2 - reorder

+
+
+

w33 3 - reorder

+
+
+ +
+
+

w33 1 - no reorder

+
+
+

w33 2 - no reorder

+
+
+

w33 3 - no reorder

+
+
+
+
+ + \ No newline at end of file diff --git a/lesson02/step-03/layout.css b/lesson02/step-03/layout.css new file mode 100644 index 0000000..5959a74 --- /dev/null +++ b/lesson02/step-03/layout.css @@ -0,0 +1,83 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder .w33p { + width: 100%; + } + + .reorder .w66p { + width: 100%; + } + + .reorder .w50p { + width: 100%; + } + + .reorder .w25p { + width: 50%; + } +} \ No newline at end of file diff --git a/lesson02/step-04/README.md b/lesson02/step-04/README.md new file mode 100644 index 0000000..c1482d1 --- /dev/null +++ b/lesson02/step-04/README.md @@ -0,0 +1,3 @@ +.w25p -> 50% wide is not a good approach... use proper markup instead without reorder + +.reorder .w50p in the media queries part won't be okay... should use the first children selector instead: .reorder > .w50p \ No newline at end of file diff --git a/lesson02/step-04/button.css b/lesson02/step-04/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-04/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-04/colors.css b/lesson02/step-04/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-04/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-04/defaults.css b/lesson02/step-04/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-04/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-04/images.css b/lesson02/step-04/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-04/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-04/img/logo.png b/lesson02/step-04/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-04/img/logo.png differ diff --git a/lesson02/step-04/img/logo2.png b/lesson02/step-04/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-04/img/logo2.png differ diff --git a/lesson02/step-04/img/logo3.png b/lesson02/step-04/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-04/img/logo3.png differ diff --git a/lesson02/step-04/index.html b/lesson02/step-04/index.html new file mode 100644 index 0000000..4935ca6 --- /dev/null +++ b/lesson02/step-04/index.html @@ -0,0 +1,71 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + +
+
+
+
+

Header left

+
+
+

Header right

+
+
+
+
+

Header left2

+
+
+
+

Header right2_1

+
+
+

Header right2_2

+
+
+
+
+
+
+
+
+
+

w33 1 - reorder

+
+
+

w33 2 - reorder

+
+
+

w33 3 - reorder

+
+
+ +
+
+

w33 1 - no reorder

+
+
+

w33 2 - no reorder

+
+
+

w33 3 - no reorder

+
+
+
+
+ + \ No newline at end of file diff --git a/lesson02/step-04/layout.css b/lesson02/step-04/layout.css new file mode 100644 index 0000000..14d6414 --- /dev/null +++ b/lesson02/step-04/layout.css @@ -0,0 +1,83 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-05/README.md b/lesson02/step-05/README.md new file mode 100644 index 0000000..c1482d1 --- /dev/null +++ b/lesson02/step-05/README.md @@ -0,0 +1,3 @@ +.w25p -> 50% wide is not a good approach... use proper markup instead without reorder + +.reorder .w50p in the media queries part won't be okay... should use the first children selector instead: .reorder > .w50p \ No newline at end of file diff --git a/lesson02/step-05/button.css b/lesson02/step-05/button.css new file mode 100644 index 0000000..5514858 --- /dev/null +++ b/lesson02/step-05/button.css @@ -0,0 +1,29 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-05/colors.css b/lesson02/step-05/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-05/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-05/defaults.css b/lesson02/step-05/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-05/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-05/images.css b/lesson02/step-05/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-05/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-05/img/logo.png b/lesson02/step-05/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-05/img/logo.png differ diff --git a/lesson02/step-05/img/logo2.png b/lesson02/step-05/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-05/img/logo2.png differ diff --git a/lesson02/step-05/img/logo3.png b/lesson02/step-05/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-05/img/logo3.png differ diff --git a/lesson02/step-05/index.html b/lesson02/step-05/index.html new file mode 100644 index 0000000..c39c368 --- /dev/null +++ b/lesson02/step-05/index.html @@ -0,0 +1,66 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+ API +
+
+ Blog +
+
+ Jobs +
+
+
+
+
+
+
+
+
+

w33 1 - reorder

+
+
+

w33 2 - reorder

+
+
+

w33 3 - reorder

+
+
+ +
+
+

w33 1 - no reorder

+
+
+

w33 2 - no reorder

+
+
+

w33 3 - no reorder

+
+
+
+
+ + \ No newline at end of file diff --git a/lesson02/step-05/layout.css b/lesson02/step-05/layout.css new file mode 100644 index 0000000..14d6414 --- /dev/null +++ b/lesson02/step-05/layout.css @@ -0,0 +1,83 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-06/README.md b/lesson02/step-06/README.md new file mode 100644 index 0000000..3cc45af --- /dev/null +++ b/lesson02/step-06/README.md @@ -0,0 +1 @@ +creating header-buttons in buttons.css \ No newline at end of file diff --git a/lesson02/step-06/button.css b/lesson02/step-06/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-06/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-06/colors.css b/lesson02/step-06/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-06/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-06/defaults.css b/lesson02/step-06/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-06/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-06/images.css b/lesson02/step-06/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-06/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-06/img/logo.png b/lesson02/step-06/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-06/img/logo.png differ diff --git a/lesson02/step-06/img/logo2.png b/lesson02/step-06/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-06/img/logo2.png differ diff --git a/lesson02/step-06/img/logo3.png b/lesson02/step-06/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-06/img/logo3.png differ diff --git a/lesson02/step-06/index.html b/lesson02/step-06/index.html new file mode 100644 index 0000000..9870149 --- /dev/null +++ b/lesson02/step-06/index.html @@ -0,0 +1,66 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + +
+
+
+
+

w33 1 - reorder

+
+
+

w33 2 - reorder

+
+
+

w33 3 - reorder

+
+
+ +
+
+

w33 1 - no reorder

+
+
+

w33 2 - no reorder

+
+
+

w33 3 - no reorder

+
+
+
+
+ + \ No newline at end of file diff --git a/lesson02/step-06/layout.css b/lesson02/step-06/layout.css new file mode 100644 index 0000000..9f09d72 --- /dev/null +++ b/lesson02/step-06/layout.css @@ -0,0 +1,88 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-07/README.md b/lesson02/step-07/README.md new file mode 100644 index 0000000..adfc94c --- /dev/null +++ b/lesson02/step-07/README.md @@ -0,0 +1 @@ +Let's create some product blocks. \ No newline at end of file diff --git a/lesson02/step-07/button.css b/lesson02/step-07/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-07/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-07/colors.css b/lesson02/step-07/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-07/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-07/defaults.css b/lesson02/step-07/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-07/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-07/images.css b/lesson02/step-07/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-07/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-07/img/logo.png b/lesson02/step-07/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-07/img/logo.png differ diff --git a/lesson02/step-07/img/logo2.png b/lesson02/step-07/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-07/img/logo2.png differ diff --git a/lesson02/step-07/img/logo3.png b/lesson02/step-07/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-07/img/logo3.png differ diff --git a/lesson02/step-07/img/product01.jpg b/lesson02/step-07/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-07/img/product01.jpg differ diff --git a/lesson02/step-07/img/product02.jpg b/lesson02/step-07/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-07/img/product02.jpg differ diff --git a/lesson02/step-07/img/product03.jpg b/lesson02/step-07/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-07/img/product03.jpg differ diff --git a/lesson02/step-07/index.html b/lesson02/step-07/index.html new file mode 100644 index 0000000..e7a9ab3 --- /dev/null +++ b/lesson02/step-07/index.html @@ -0,0 +1,70 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + +
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/lesson02/step-07/layout.css b/lesson02/step-07/layout.css new file mode 100644 index 0000000..564951e --- /dev/null +++ b/lesson02/step-07/layout.css @@ -0,0 +1,92 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-08/README.md b/lesson02/step-08/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-08/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-08/button.css b/lesson02/step-08/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-08/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-08/colors.css b/lesson02/step-08/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-08/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-08/defaults.css b/lesson02/step-08/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-08/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-08/images.css b/lesson02/step-08/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-08/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-08/img/logo.png b/lesson02/step-08/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-08/img/logo.png differ diff --git a/lesson02/step-08/img/logo2.png b/lesson02/step-08/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-08/img/logo2.png differ diff --git a/lesson02/step-08/img/logo3.png b/lesson02/step-08/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-08/img/logo3.png differ diff --git a/lesson02/step-08/img/product01.jpg b/lesson02/step-08/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-08/img/product01.jpg differ diff --git a/lesson02/step-08/img/product02.jpg b/lesson02/step-08/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-08/img/product02.jpg differ diff --git a/lesson02/step-08/img/product03.jpg b/lesson02/step-08/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-08/img/product03.jpg differ diff --git a/lesson02/step-08/img/product04.jpg b/lesson02/step-08/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-08/img/product04.jpg differ diff --git a/lesson02/step-08/index.html b/lesson02/step-08/index.html new file mode 100644 index 0000000..c169f8b --- /dev/null +++ b/lesson02/step-08/index.html @@ -0,0 +1,207 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + +
+
+

Here Comes the Sentence of Your Life

+

+ Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength. +

+
+
+
+
+
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

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

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

+ 2017 @ COPYRIGHT - EDMDESIGNER +

+
+
+ + \ No newline at end of file diff --git a/lesson02/step-08/layout.css b/lesson02/step-08/layout.css new file mode 100644 index 0000000..0f47df4 --- /dev/null +++ b/lesson02/step-08/layout.css @@ -0,0 +1,97 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-09/README.md b/lesson02/step-09/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-09/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-09/button.css b/lesson02/step-09/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-09/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-09/colors.css b/lesson02/step-09/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-09/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-09/defaults.css b/lesson02/step-09/defaults.css new file mode 100644 index 0000000..c57327e --- /dev/null +++ b/lesson02/step-09/defaults.css @@ -0,0 +1,44 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + margin-top: 80px; + + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-09/images.css b/lesson02/step-09/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-09/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-09/img/logo.png b/lesson02/step-09/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-09/img/logo.png differ diff --git a/lesson02/step-09/img/logo2.png b/lesson02/step-09/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-09/img/logo2.png differ diff --git a/lesson02/step-09/img/logo3.png b/lesson02/step-09/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-09/img/logo3.png differ diff --git a/lesson02/step-09/img/product01.jpg b/lesson02/step-09/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-09/img/product01.jpg differ diff --git a/lesson02/step-09/img/product02.jpg b/lesson02/step-09/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-09/img/product02.jpg differ diff --git a/lesson02/step-09/img/product03.jpg b/lesson02/step-09/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-09/img/product03.jpg differ diff --git a/lesson02/step-09/img/product04.jpg b/lesson02/step-09/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-09/img/product04.jpg differ diff --git a/lesson02/step-09/index.html b/lesson02/step-09/index.html new file mode 100644 index 0000000..86fc8e9 --- /dev/null +++ b/lesson02/step-09/index.html @@ -0,0 +1,209 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+

Here Comes the Sentence of Your Life

+

+ Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength. +

+
+
+
+
+
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

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

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

+ 2017 @ COPYRIGHT - EDMDESIGNER +

+
+
+ + \ No newline at end of file diff --git a/lesson02/step-09/layout.css b/lesson02/step-09/layout.css new file mode 100644 index 0000000..0f47df4 --- /dev/null +++ b/lesson02/step-09/layout.css @@ -0,0 +1,97 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-09/main.css b/lesson02/step-09/main.css new file mode 100644 index 0000000..c1256ab --- /dev/null +++ b/lesson02/step-09/main.css @@ -0,0 +1,8 @@ +#menu { + position: fixed; + + width: 100%; + + top: 0; + left: 0; +} \ No newline at end of file diff --git a/lesson02/step-10/README.md b/lesson02/step-10/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-10/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-10/button.css b/lesson02/step-10/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-10/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-10/colors.css b/lesson02/step-10/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-10/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-10/defaults.css b/lesson02/step-10/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-10/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-10/images.css b/lesson02/step-10/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-10/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-10/img/logo.png b/lesson02/step-10/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-10/img/logo.png differ diff --git a/lesson02/step-10/img/logo2.png b/lesson02/step-10/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-10/img/logo2.png differ diff --git a/lesson02/step-10/img/logo3.png b/lesson02/step-10/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-10/img/logo3.png differ diff --git a/lesson02/step-10/img/product01.jpg b/lesson02/step-10/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-10/img/product01.jpg differ diff --git a/lesson02/step-10/img/product02.jpg b/lesson02/step-10/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-10/img/product02.jpg differ diff --git a/lesson02/step-10/img/product03.jpg b/lesson02/step-10/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-10/img/product03.jpg differ diff --git a/lesson02/step-10/img/product04.jpg b/lesson02/step-10/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-10/img/product04.jpg differ diff --git a/lesson02/step-10/index.html b/lesson02/step-10/index.html new file mode 100644 index 0000000..343192f --- /dev/null +++ b/lesson02/step-10/index.html @@ -0,0 +1,209 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+

Modern Email HTML Tutorial

+

+ Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength. +

+
+
+
+
+
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

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

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

+ 2017 @ COPYRIGHT - EDMDESIGNER +

+
+
+ + \ No newline at end of file diff --git a/lesson02/step-10/layout.css b/lesson02/step-10/layout.css new file mode 100644 index 0000000..28ebc93 --- /dev/null +++ b/lesson02/step-10/layout.css @@ -0,0 +1,102 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-10/main.css b/lesson02/step-10/main.css new file mode 100644 index 0000000..d834691 --- /dev/null +++ b/lesson02/step-10/main.css @@ -0,0 +1,14 @@ +#menu { + position: fixed; + + width: 100%; + + top: 0; + left: 0; +} + +#hero { + margin-top: 30px; + + text-align: center; +} \ No newline at end of file diff --git a/lesson02/step-11/README.md b/lesson02/step-11/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-11/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-11/button.css b/lesson02/step-11/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-11/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-11/colors.css b/lesson02/step-11/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-11/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-11/defaults.css b/lesson02/step-11/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-11/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-11/images.css b/lesson02/step-11/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-11/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-11/img/logo.png b/lesson02/step-11/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-11/img/logo.png differ diff --git a/lesson02/step-11/img/logo2.png b/lesson02/step-11/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-11/img/logo2.png differ diff --git a/lesson02/step-11/img/logo3.png b/lesson02/step-11/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-11/img/logo3.png differ diff --git a/lesson02/step-11/img/product01.jpg b/lesson02/step-11/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-11/img/product01.jpg differ diff --git a/lesson02/step-11/img/product02.jpg b/lesson02/step-11/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-11/img/product02.jpg differ diff --git a/lesson02/step-11/img/product03.jpg b/lesson02/step-11/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-11/img/product03.jpg differ diff --git a/lesson02/step-11/img/product04.jpg b/lesson02/step-11/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-11/img/product04.jpg differ diff --git a/lesson02/step-11/index.html b/lesson02/step-11/index.html new file mode 100644 index 0000000..c580829 --- /dev/null +++ b/lesson02/step-11/index.html @@ -0,0 +1,214 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

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

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

+ +
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/lesson02/step-11/layout.css b/lesson02/step-11/layout.css new file mode 100644 index 0000000..28ebc93 --- /dev/null +++ b/lesson02/step-11/layout.css @@ -0,0 +1,102 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-11/main.css b/lesson02/step-11/main.css new file mode 100644 index 0000000..75114d7 --- /dev/null +++ b/lesson02/step-11/main.css @@ -0,0 +1,26 @@ +#header { + z-index: 2; +} + +#header #menu { + position: absolute; + + width: 100%; + + top: 0; + left: 0; +} + +#header #hero { + padding-top: 130px; + + text-align: center; +} + +#content { + z-index: 1; +} + +#footer { + z-index: 1; +} \ No newline at end of file diff --git a/lesson02/step-11/main.js b/lesson02/step-11/main.js new file mode 100644 index 0000000..e780c72 --- /dev/null +++ b/lesson02/step-11/main.js @@ -0,0 +1,48 @@ +(function() { + function getScrollTop(){ + if(typeof pageYOffset!= 'undefined'){ + //most browsers except IE before #9 + return pageYOffset; + } else { + var B= document.body; //IE 'quirks' + var D= document.documentElement; //IE with doctype + D= (D.clientHeight)? D: B; + return D.scrollTop; + } + } + + function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; + } + + var menu = document.getElementById("menu"); + var content = document.getElementById("content"); + + var contentTop = getCoords(content).top; + + addEventListener("scroll", function() { + var scrollTop = getScrollTop(); + + if (scrollTop > contentTop) { + menu.style.position = "fixed"; + menu.classList.add("bg-white"); + } else { + menu.style.position = "absolute"; + menu.classList.remove("bg-white"); + } + }); +}()); diff --git a/lesson02/step-12/README.md b/lesson02/step-12/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-12/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-12/button.css b/lesson02/step-12/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-12/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-12/colors.css b/lesson02/step-12/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-12/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-12/defaults.css b/lesson02/step-12/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-12/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-12/images.css b/lesson02/step-12/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-12/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-12/img/email-pattern-white.png b/lesson02/step-12/img/email-pattern-white.png new file mode 100644 index 0000000..987e99c Binary files /dev/null and b/lesson02/step-12/img/email-pattern-white.png differ diff --git a/lesson02/step-12/img/logo.png b/lesson02/step-12/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-12/img/logo.png differ diff --git a/lesson02/step-12/img/logo2.png b/lesson02/step-12/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-12/img/logo2.png differ diff --git a/lesson02/step-12/img/logo3.png b/lesson02/step-12/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-12/img/logo3.png differ diff --git a/lesson02/step-12/img/product01.jpg b/lesson02/step-12/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-12/img/product01.jpg differ diff --git a/lesson02/step-12/img/product02.jpg b/lesson02/step-12/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-12/img/product02.jpg differ diff --git a/lesson02/step-12/img/product03.jpg b/lesson02/step-12/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-12/img/product03.jpg differ diff --git a/lesson02/step-12/img/product04.jpg b/lesson02/step-12/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-12/img/product04.jpg differ diff --git a/lesson02/step-12/index.html b/lesson02/step-12/index.html new file mode 100644 index 0000000..6556252 --- /dev/null +++ b/lesson02/step-12/index.html @@ -0,0 +1,214 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

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

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

+ +
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/lesson02/step-12/layout.css b/lesson02/step-12/layout.css new file mode 100644 index 0000000..28ebc93 --- /dev/null +++ b/lesson02/step-12/layout.css @@ -0,0 +1,102 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols .w33p { + width: 33.33%; + float: left; +} + +.cols .w66p { + width: 66.66%; + float: left; +} + +.cols .w50p { + width: 50%; + float: left; +} + +.cols .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-12/main.css b/lesson02/step-12/main.css new file mode 100644 index 0000000..596de0a --- /dev/null +++ b/lesson02/step-12/main.css @@ -0,0 +1,30 @@ +#header { + z-index: 2; + + background-image: url(img/email-pattern-white.png); +} + +#header #menu { + position: absolute; + + width: 100%; + + top: 0; + left: 0; + + transition: 1s all; +} + +#header #hero { + padding-top: 130px; + + text-align: center; +} + +#content { + z-index: 1; +} + +#footer { + z-index: 1; +} \ No newline at end of file diff --git a/lesson02/step-12/main.js b/lesson02/step-12/main.js new file mode 100644 index 0000000..e780c72 --- /dev/null +++ b/lesson02/step-12/main.js @@ -0,0 +1,48 @@ +(function() { + function getScrollTop(){ + if(typeof pageYOffset!= 'undefined'){ + //most browsers except IE before #9 + return pageYOffset; + } else { + var B= document.body; //IE 'quirks' + var D= document.documentElement; //IE with doctype + D= (D.clientHeight)? D: B; + return D.scrollTop; + } + } + + function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; + } + + var menu = document.getElementById("menu"); + var content = document.getElementById("content"); + + var contentTop = getCoords(content).top; + + addEventListener("scroll", function() { + var scrollTop = getScrollTop(); + + if (scrollTop > contentTop) { + menu.style.position = "fixed"; + menu.classList.add("bg-white"); + } else { + menu.style.position = "absolute"; + menu.classList.remove("bg-white"); + } + }); +}()); diff --git a/lesson02/step-13/README.md b/lesson02/step-13/README.md new file mode 100644 index 0000000..dd697d5 --- /dev/null +++ b/lesson02/step-13/README.md @@ -0,0 +1 @@ +Let's add other products and some random content. \ No newline at end of file diff --git a/lesson02/step-13/button.css b/lesson02/step-13/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-13/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-13/colors.css b/lesson02/step-13/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-13/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-13/defaults.css b/lesson02/step-13/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-13/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-13/images.css b/lesson02/step-13/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-13/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-13/img/code.jpg b/lesson02/step-13/img/code.jpg new file mode 100644 index 0000000..1007ad0 Binary files /dev/null and b/lesson02/step-13/img/code.jpg differ diff --git a/lesson02/step-13/img/code2.jpg b/lesson02/step-13/img/code2.jpg new file mode 100644 index 0000000..32fc4e3 Binary files /dev/null and b/lesson02/step-13/img/code2.jpg differ diff --git a/lesson02/step-13/img/email-pattern-white.png b/lesson02/step-13/img/email-pattern-white.png new file mode 100644 index 0000000..987e99c Binary files /dev/null and b/lesson02/step-13/img/email-pattern-white.png differ diff --git a/lesson02/step-13/img/logo.png b/lesson02/step-13/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-13/img/logo.png differ diff --git a/lesson02/step-13/img/logo2.png b/lesson02/step-13/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-13/img/logo2.png differ diff --git a/lesson02/step-13/img/logo3.png b/lesson02/step-13/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-13/img/logo3.png differ diff --git a/lesson02/step-13/img/product01.jpg b/lesson02/step-13/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-13/img/product01.jpg differ diff --git a/lesson02/step-13/img/product02.jpg b/lesson02/step-13/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-13/img/product02.jpg differ diff --git a/lesson02/step-13/img/product03.jpg b/lesson02/step-13/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-13/img/product03.jpg differ diff --git a/lesson02/step-13/img/product04.jpg b/lesson02/step-13/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-13/img/product04.jpg differ diff --git a/lesson02/step-13/index.html b/lesson02/step-13/index.html new file mode 100644 index 0000000..8cc92f2 --- /dev/null +++ b/lesson02/step-13/index.html @@ -0,0 +1,213 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

+ +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lesson02/step-13/layout.css b/lesson02/step-13/layout.css new file mode 100644 index 0000000..170831f --- /dev/null +++ b/lesson02/step-13/layout.css @@ -0,0 +1,128 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols > .w33p { + width: 33.33%; + float: left; +} + +.cols > .w66p { + width: 66.66%; + float: left; +} + +.cols > .w50p { + width: 50%; + float: left; +} + +.cols > .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.cols-r > .w33p { + width: 33.33%; + float: right; +} + +.cols-r > .w66p { + width: 66.66%; + float: right; +} + +.cols-r > .w50p { + width: 50%; + float: right; +} + +.cols-r > .w25p { + width: 25%; + float: right; +} + +.cols-r:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-13/main.css b/lesson02/step-13/main.css new file mode 100644 index 0000000..596de0a --- /dev/null +++ b/lesson02/step-13/main.css @@ -0,0 +1,30 @@ +#header { + z-index: 2; + + background-image: url(img/email-pattern-white.png); +} + +#header #menu { + position: absolute; + + width: 100%; + + top: 0; + left: 0; + + transition: 1s all; +} + +#header #hero { + padding-top: 130px; + + text-align: center; +} + +#content { + z-index: 1; +} + +#footer { + z-index: 1; +} \ No newline at end of file diff --git a/lesson02/step-13/main.js b/lesson02/step-13/main.js new file mode 100644 index 0000000..e780c72 --- /dev/null +++ b/lesson02/step-13/main.js @@ -0,0 +1,48 @@ +(function() { + function getScrollTop(){ + if(typeof pageYOffset!= 'undefined'){ + //most browsers except IE before #9 + return pageYOffset; + } else { + var B= document.body; //IE 'quirks' + var D= document.documentElement; //IE with doctype + D= (D.clientHeight)? D: B; + return D.scrollTop; + } + } + + function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; + } + + var menu = document.getElementById("menu"); + var content = document.getElementById("content"); + + var contentTop = getCoords(content).top; + + addEventListener("scroll", function() { + var scrollTop = getScrollTop(); + + if (scrollTop > contentTop) { + menu.style.position = "fixed"; + menu.classList.add("bg-white"); + } else { + menu.style.position = "absolute"; + menu.classList.remove("bg-white"); + } + }); +}()); diff --git a/lesson02/step-14/README.md b/lesson02/step-14/README.md new file mode 100644 index 0000000..da70da3 --- /dev/null +++ b/lesson02/step-14/README.md @@ -0,0 +1 @@ +New decorator added. I needed to add z-index to the menu as well. \ No newline at end of file diff --git a/lesson02/step-14/button.css b/lesson02/step-14/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-14/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-14/colors.css b/lesson02/step-14/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-14/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-14/defaults.css b/lesson02/step-14/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-14/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-14/images.css b/lesson02/step-14/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-14/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-14/img/code.jpg b/lesson02/step-14/img/code.jpg new file mode 100644 index 0000000..1007ad0 Binary files /dev/null and b/lesson02/step-14/img/code.jpg differ diff --git a/lesson02/step-14/img/code2.jpg b/lesson02/step-14/img/code2.jpg new file mode 100644 index 0000000..32fc4e3 Binary files /dev/null and b/lesson02/step-14/img/code2.jpg differ diff --git a/lesson02/step-14/img/email-pattern-white.png b/lesson02/step-14/img/email-pattern-white.png new file mode 100644 index 0000000..987e99c Binary files /dev/null and b/lesson02/step-14/img/email-pattern-white.png differ diff --git a/lesson02/step-14/img/logo.png b/lesson02/step-14/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-14/img/logo.png differ diff --git a/lesson02/step-14/img/logo2.png b/lesson02/step-14/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-14/img/logo2.png differ diff --git a/lesson02/step-14/img/logo3.png b/lesson02/step-14/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-14/img/logo3.png differ diff --git a/lesson02/step-14/img/new.png b/lesson02/step-14/img/new.png new file mode 100644 index 0000000..947a903 Binary files /dev/null and b/lesson02/step-14/img/new.png differ diff --git a/lesson02/step-14/img/product01.jpg b/lesson02/step-14/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-14/img/product01.jpg differ diff --git a/lesson02/step-14/img/product02.jpg b/lesson02/step-14/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-14/img/product02.jpg differ diff --git a/lesson02/step-14/img/product03.jpg b/lesson02/step-14/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-14/img/product03.jpg differ diff --git a/lesson02/step-14/img/product04.jpg b/lesson02/step-14/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-14/img/product04.jpg differ diff --git a/lesson02/step-14/index.html b/lesson02/step-14/index.html new file mode 100644 index 0000000..5cd5687 --- /dev/null +++ b/lesson02/step-14/index.html @@ -0,0 +1,214 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

+ +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lesson02/step-14/layout.css b/lesson02/step-14/layout.css new file mode 100644 index 0000000..170831f --- /dev/null +++ b/lesson02/step-14/layout.css @@ -0,0 +1,128 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols > .w33p { + width: 33.33%; + float: left; +} + +.cols > .w66p { + width: 66.66%; + float: left; +} + +.cols > .w50p { + width: 50%; + float: left; +} + +.cols > .w25p { + width: 25%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.cols-r > .w33p { + width: 33.33%; + float: right; +} + +.cols-r > .w66p { + width: 66.66%; + float: right; +} + +.cols-r > .w50p { + width: 50%; + float: right; +} + +.cols-r > .w25p { + width: 25%; + float: right; +} + +.cols-r:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-14/main.css b/lesson02/step-14/main.css new file mode 100644 index 0000000..78434b7 --- /dev/null +++ b/lesson02/step-14/main.css @@ -0,0 +1,38 @@ +#header { + z-index: 2; + + background-image: url(img/email-pattern-white.png); +} + +#header #menu { + position: absolute; + + width: 100%; + + top: 0; + left: 0; + + transition: 1s all; +} + +#header #hero { + padding-top: 130px; + + text-align: center; +} + +#content { + z-index: 1; +} + +#footer { + z-index: 1; +} + +.new-decorator { + position: absolute; + width: 100px; + height: 100px; + margin-left: -7px; + margin-top: -5px; +} \ No newline at end of file diff --git a/lesson02/step-14/main.js b/lesson02/step-14/main.js new file mode 100644 index 0000000..e780c72 --- /dev/null +++ b/lesson02/step-14/main.js @@ -0,0 +1,48 @@ +(function() { + function getScrollTop(){ + if(typeof pageYOffset!= 'undefined'){ + //most browsers except IE before #9 + return pageYOffset; + } else { + var B= document.body; //IE 'quirks' + var D= document.documentElement; //IE with doctype + D= (D.clientHeight)? D: B; + return D.scrollTop; + } + } + + function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; + } + + var menu = document.getElementById("menu"); + var content = document.getElementById("content"); + + var contentTop = getCoords(content).top; + + addEventListener("scroll", function() { + var scrollTop = getScrollTop(); + + if (scrollTop > contentTop) { + menu.style.position = "fixed"; + menu.classList.add("bg-white"); + } else { + menu.style.position = "absolute"; + menu.classList.remove("bg-white"); + } + }); +}()); diff --git a/lesson02/step-15/README.md b/lesson02/step-15/README.md new file mode 100644 index 0000000..da70da3 --- /dev/null +++ b/lesson02/step-15/README.md @@ -0,0 +1 @@ +New decorator added. I needed to add z-index to the menu as well. \ No newline at end of file diff --git a/lesson02/step-15/button.css b/lesson02/step-15/button.css new file mode 100644 index 0000000..b52dfb0 --- /dev/null +++ b/lesson02/step-15/button.css @@ -0,0 +1,49 @@ +.button { + display: inline-block; + + padding: 10px; + margin-top: 15px; + + border-radius: 30px; + + font-size: 16px; + line-height: 16px; + + text-decoration: none; + + transition: all .5s; +} + +.button:hover { + box-shadow: 2px 2px 5px #888888; +} + +.header-button { + display: block; + + color: #58585A; + + font-size: 20px; + line-height: 35px; + + text-align: center; + text-decoration: none; + + transition: all .5s; +} + +.header-button:hover { + background: #C72518; + color: #FFFFFF; + transition: all .5s; +} + +@media all and (max-width: 599px) { + .button { + display: block; + margin: 30px 50px; + padding: 20px; + + text-align: center; + } +} \ No newline at end of file diff --git a/lesson02/step-15/colors.css b/lesson02/step-15/colors.css new file mode 100644 index 0000000..e790ccc --- /dev/null +++ b/lesson02/step-15/colors.css @@ -0,0 +1,33 @@ +body { + background-color: #F4F4F4; +} + +.bg-white { + background-color: #FFFFFF; + color: #58585A; +} + +.bg-brown { + background-color: #F8F7F0; + color: #58585A; +} + +.bg-gray { + background-color: #58585A; + color: #FFFFFF; +} + +.bg-red { + background-color: #C92C1E; + color: #FFFFFF; +} + +.bg-blue { + background-color: #2879CB; + color: #FFFFFF; +} + +.bg-dark-brown { + background-color: #E8E3CE; + color: #58585A; +} diff --git a/lesson02/step-15/defaults.css b/lesson02/step-15/defaults.css new file mode 100644 index 0000000..feff17c --- /dev/null +++ b/lesson02/step-15/defaults.css @@ -0,0 +1,42 @@ +html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +body { + font-size:10px; + line-height:10px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto", sans-serif; +} + + +h1 { + font-size: 28px; + line-height: 32px; + + margin-bottom: 24px; +} + +h2 { + font-size: 24px; + line-height: 28px; + + margin-bottom: 20px; +} + +h3 { + font-size: 20px; + line-height: 24px; + + margin-bottom: 16px; +} + +p { + font-size: 16px; + line-height: 20px; + + font-family: Georgia, Arial, sans-serif; +} diff --git a/lesson02/step-15/images.css b/lesson02/step-15/images.css new file mode 100644 index 0000000..c474fb1 --- /dev/null +++ b/lesson02/step-15/images.css @@ -0,0 +1,20 @@ +img { + width: 100%; + height: auto; + + display: block; + + margin: 0; +} + +.w200 { + max-width: 200px; +} + +@media all and (max-width: 599px) { + .w200 { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/lesson02/step-15/img/code.jpg b/lesson02/step-15/img/code.jpg new file mode 100644 index 0000000..1007ad0 Binary files /dev/null and b/lesson02/step-15/img/code.jpg differ diff --git a/lesson02/step-15/img/code2.jpg b/lesson02/step-15/img/code2.jpg new file mode 100644 index 0000000..32fc4e3 Binary files /dev/null and b/lesson02/step-15/img/code2.jpg differ diff --git a/lesson02/step-15/img/email-pattern-white.png b/lesson02/step-15/img/email-pattern-white.png new file mode 100644 index 0000000..987e99c Binary files /dev/null and b/lesson02/step-15/img/email-pattern-white.png differ diff --git a/lesson02/step-15/img/logo.png b/lesson02/step-15/img/logo.png new file mode 100644 index 0000000..82cf06d Binary files /dev/null and b/lesson02/step-15/img/logo.png differ diff --git a/lesson02/step-15/img/logo2.png b/lesson02/step-15/img/logo2.png new file mode 100644 index 0000000..6a32ecf Binary files /dev/null and b/lesson02/step-15/img/logo2.png differ diff --git a/lesson02/step-15/img/logo3.png b/lesson02/step-15/img/logo3.png new file mode 100644 index 0000000..4429122 Binary files /dev/null and b/lesson02/step-15/img/logo3.png differ diff --git a/lesson02/step-15/img/new.png b/lesson02/step-15/img/new.png new file mode 100644 index 0000000..947a903 Binary files /dev/null and b/lesson02/step-15/img/new.png differ diff --git a/lesson02/step-15/img/product01.jpg b/lesson02/step-15/img/product01.jpg new file mode 100644 index 0000000..375f06b Binary files /dev/null and b/lesson02/step-15/img/product01.jpg differ diff --git a/lesson02/step-15/img/product02.jpg b/lesson02/step-15/img/product02.jpg new file mode 100644 index 0000000..6f752b5 Binary files /dev/null and b/lesson02/step-15/img/product02.jpg differ diff --git a/lesson02/step-15/img/product03.jpg b/lesson02/step-15/img/product03.jpg new file mode 100644 index 0000000..de290fd Binary files /dev/null and b/lesson02/step-15/img/product03.jpg differ diff --git a/lesson02/step-15/img/product04.jpg b/lesson02/step-15/img/product04.jpg new file mode 100644 index 0000000..cc26b48 Binary files /dev/null and b/lesson02/step-15/img/product04.jpg differ diff --git a/lesson02/step-15/img/socials.png b/lesson02/step-15/img/socials.png new file mode 100644 index 0000000..e70b97e Binary files /dev/null and b/lesson02/step-15/img/socials.png differ diff --git a/lesson02/step-15/index.html b/lesson02/step-15/index.html new file mode 100644 index 0000000..696467f --- /dev/null +++ b/lesson02/step-15/index.html @@ -0,0 +1,232 @@ + + + + Simple full-width stripes layout + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+ +
+
+
+

Translate this

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

+
+
+
+
+
+
+
+

Featured Products

+
+
+
+ + + +

iPad Mega Cool

+ +
+
+
+
+ + +

iPhone X

+ +
+
+
+
+ + +

iMekk Elek

+ +
+
+
+
+
+
+
+

Other Products

+ +
+
+
+
+
+ + +

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

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

Random Product

+ +
+
+
+
+ + +

Random Product

+ +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lesson02/step-15/layout.css b/lesson02/step-15/layout.css new file mode 100644 index 0000000..3e1d3c0 --- /dev/null +++ b/lesson02/step-15/layout.css @@ -0,0 +1,142 @@ +.container600 { + width: 600px; + margin: 0 auto; +} + +.container800 { + width: 800px; + margin: 0 auto; +} + +.cols > .w33p { + width: 33.33%; + float: left; +} + +.cols > .w66p { + width: 66.66%; + float: left; +} + +.cols > .w50p { + width: 50%; + float: left; +} + +.cols > .w25p { + width: 25%; + float: left; +} + +.cols > .w20p { + width: 20%; + float: left; +} + +.cols:after { + content: ""; + display: block; + clear: both; +} + +.cols-r > .w33p { + width: 33.33%; + float: right; +} + +.cols-r > .w66p { + width: 66.66%; + float: right; +} + +.cols-r > .w50p { + width: 50%; + float: right; +} + +.cols-r > .w25p { + width: 25%; + float: right; +} + +.cols-r > .w20p { + width: 20%; + float: right; +} + +.cols-r:after { + content: ""; + display: block; + clear: both; +} + +.clr { + clear: both; +} + +.sm-padding { + padding: 10px; +} + +.sm-padding-tb { + padding-top: 10px; + padding-bottom: 10px; +} + +.m-padding-tb { + padding-top: 30px; + padding-bottom: 30px; +} + +.l-padding-tb { + padding-top: 100px; + padding-bottom: 100px; +} + +.marginTop100 { + margin-top: 100px; +} + +.padding30 { + padding: 30px; +} + +.paddingLeft10 { + padding-left: 10px; +} + +.center { + text-align: center; +} + +@media all and (max-width: 799px) { + .container800 { + width: 100%; + } +} + +@media all and (max-width: 599px) { + .container600 { + width: 100%; + } + + .reorder > .w33p { + width: 100%; + } + + .reorder > .w66p { + width: 100%; + } + + .reorder > .w50p { + width: 100%; + } + + .reorder > .w25p { + width: 100%; + } + + .reorder > .w20p { + width: 100%; + } +} \ No newline at end of file diff --git a/lesson02/step-15/main.css b/lesson02/step-15/main.css new file mode 100644 index 0000000..ff5e408 --- /dev/null +++ b/lesson02/step-15/main.css @@ -0,0 +1,69 @@ +#header { + z-index: 2; + + background-image: url(img/email-pattern-white.png); +} + +#header #menu { + z-index: 2; + + position: absolute; + + width: 100%; + + top: 0; + left: 0; + + transition: 1s all; +} + +#header #hero { + padding-top: 130px; + + text-align: center; +} + +#content { + z-index: 1; +} + +#footer { + z-index: 1; +} + +#footer a { + display: inline-block; + width: 28px; + height: 28px; + overflow: hidden; + text-indent: -999px; + background: url(img/socials.png) 0 0 no-repeat; +} + +#footer a#f-fb { + background-position: 0 -50px; +} + +#footer a#f-fb { + background-position: 0 -50px; +} +#footer a#f-tw { + background-position: 0 -73px; +} +#footer a#f-ln { + background-position: 0 -97px; +} +#footer a#f-gp { + background-position: 0 -123px; +} +#footer a#f-rss { + background-position: 0 -150px; +} + +.new-decorator { + position: absolute; + width: 100px; + height: 100px; + margin-left: -7px; + margin-top: -5px; +} \ No newline at end of file diff --git a/lesson02/step-15/main.js b/lesson02/step-15/main.js new file mode 100644 index 0000000..e780c72 --- /dev/null +++ b/lesson02/step-15/main.js @@ -0,0 +1,48 @@ +(function() { + function getScrollTop(){ + if(typeof pageYOffset!= 'undefined'){ + //most browsers except IE before #9 + return pageYOffset; + } else { + var B= document.body; //IE 'quirks' + var D= document.documentElement; //IE with doctype + D= (D.clientHeight)? D: B; + return D.scrollTop; + } + } + + function getCoords(elem) { // crossbrowser version + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; + } + + var menu = document.getElementById("menu"); + var content = document.getElementById("content"); + + var contentTop = getCoords(content).top; + + addEventListener("scroll", function() { + var scrollTop = getScrollTop(); + + if (scrollTop > contentTop) { + menu.style.position = "fixed"; + menu.classList.add("bg-white"); + } else { + menu.style.position = "absolute"; + menu.classList.remove("bg-white"); + } + }); +}());