diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css index 969fe64..d72b80b 100644 --- a/src/009-fonts-icons/example/example.css +++ b/src/009-fonts-icons/example/example.css @@ -1,5 +1,247 @@ /* * Practice : Fonts, Icons and Sizes * Version: 1 - * By: xxx + * By: Laura Alvarez */ + + body { + background: rgb(211, 234, 224); + } + + .page-content { + font-family: "Verdana","Arial",sans-serif; + } + + .black-square { + position: absolute; + width: 30%; + right: 0; + height: 100%; + top: 0; + background: black; + opacity: 0.75; + z-index: 3; + } + + .main-icons { + font-size: 30px; + } + + button, .p-white, .main-icons { + color: white; + padding: 20px 0 0 40px; + } + + .p-white h1{ + font-weight: bold; + font-size: 3rem; + } + + .p-white p { + text-transform: uppercase; + width: 100%; + } + + .content { + width: 55%; + } + + .second-content { + background-color: rgb(226, 243, 245); + z-index: 4; + position: relative; + padding: 20px 15px 20px 0; + } + + .second-content p, .title{ + padding: 0 0 0 40px; + } + + .finger button { + background-color: rgb(253, 59, 130); + display: inline-block; + margin: 0 0 0 40px; + border-radius: 5px; + padding: 10px; + border: 0; + transition-duration: 0.6s; + } + + button:hover { + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + + .finger i { + padding-right: 10px; + } + + .title-list { + font-size: 1.8rem; + margin: 0; + padding-bottom: 10px; + } + + .last-content ul li{ + line-height: 20px; + margin: 5px; + } + + .title { + font-size: 2rem; + line-height: 60px; + margin-top: 0; + } + + h1 em { + text-decoration: underline; + text-decoration-style:dashed; + font-style: normal; + } + + hr { + background-color: indianred; + } + + p::first-letter { + font-weight: bold; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + ul li .material-icons { + font-size: 14px; + } + + ul li:first-child { + font-size: 15px; + } + + ul li:nth-child(2), + ul li:nth-child(4), + ul li:nth-child(6), + ul li:nth-child(8), + ul li:nth-child(10), + ul li:nth-child(12), + ul li:nth-child(14) { + font-size: 11pt; + } + + ul li:nth-child(3), + ul li:nth-child(5), + ul li:nth-child(7), + ul li:nth-child(9), + ul li:nth-child(11), + ul li:nth-child(13) { + font-size: 1.05em; + } + + .search-icon { + background-color: black; + border-radius: 0 10px 0 0; + margin: 5px; + } + + .search { + background-color: white; + margin-bottom: 20px; + display: inline-block; + padding-right: 30px; + border-radius: 5px; + } + + .search span { + vertical-align: middle; + display: inline-block; + } + + input { + border: 0; + vertical-align: middle; + } + + @media only screen and (max-width: 992px) { + .last-content { + width: 18%; + } + } + + @media only screen and (max-width: 1023px) and (min-width: 768px){ + .last-content { + background-color: rgb(222,225,141); + z-index: 4; + position: absolute; + width: 20%; + top: 130px; + right: 71px; + padding: 30px; + } + .blue-square { + background: rgb(107,195,198); + margin: 50px; + padding-bottom: 80px; + } + + .last-content ul li { + line-height: 15px; + } + } + + @media only screen and (min-width: 1024px) { + .last-content { + background-color: rgb(222,225,141); + z-index: 4; + position: absolute; + width: 25%; + top: 120px; + right: 71px; + padding: 40px; + } + .blue-square { + background: rgb(107,195,198); + margin: 50px; + padding-bottom: 80px; + } + } + + @media only screen and (max-width: 767px) { + .black-square { + display: none !important; + } + .content { + width: 90%; + margin: auto; + background: rgb(107,195,198); + padding-bottom: 30px; + } + .second-content { + background-color: rgb(226, 243, 245); + padding: 20px 15px 20px 0; + width: 90%; + position: relative; + } + .last-content { + background-color: rgb(222,225,141); + width: 100%; + margin-top: 20px; + } + .last-content ul, + .title-list { + padding: 20px 20px 0 20px; + margin-bottom: 0; + } + .last-content ul{ + padding-bottom: 20px; + } + .p-white, + .second-content p, + .title { + padding: 10px 20px 0 20px; + } + .finger button { + margin: 0 0 0 20px; + } + } \ No newline at end of file diff --git a/src/009-fonts-icons/example/index.html b/src/009-fonts-icons/example/index.html index d90d669..6584ef6 100644 --- a/src/009-fonts-icons/example/index.html +++ b/src/009-fonts-icons/example/index.html @@ -1,40 +1,106 @@ - - - 009 - Fonts, Icons and Sizes - - - - - - - - - - - - - - -
-
- -
- - 009 - Fonts, Icons and Sizes - -
-
-
-
-
- + + + 009 - Fonts, Icons and Sizes + + + + + + + + + + + + + + + +
+
+ +
+ + 009 - Fonts, Icons and Sizes + +
+
+
+
+
+ +
+
+
+
+

Lorem ipsum dolor SIT amet

+
+ + + + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper.

+
+
+ search + +
+
+ +
+

Lorem ipsum dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper. + +

+ +
+

+
-
+
+ +
+ +
+

Lorem ipsum dolor sit amet

+
    +
  • doneLorem ipsum dolor 1
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
  • doneLorem ipsum dolor sit amet - using "em"
    • +
  • doneLorem ipsum dolor sit amet - using "pt"
    • +
+ + +
+
+ + - + \ No newline at end of file