diff --git a/challenges/flex/flex.html b/challenges/flex/flex.html new file mode 100644 index 0000000..3e45fb2 --- /dev/null +++ b/challenges/flex/flex.html @@ -0,0 +1,25 @@ + + + + + + + Flex Challenges + + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/challenges/flex/style.css b/challenges/flex/style.css new file mode 100644 index 0000000..5f80bb5 --- /dev/null +++ b/challenges/flex/style.css @@ -0,0 +1,34 @@ +* { + color: #d3d3d3; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; +} + +.flex-container { + display: flex; + background-color: #3e3e3e; +} + +.flex-container ul { + list-style: none; + display: inherit; +} + +.flex-container li { + margin-right: 10px; + border: 1px solid #4e4e4e; + padding: 20px; + border-radius: 10px; +} + +.flex-container li:hover { + border-color: #d8cd76; + color: #d8cd76; +} + +.flex-container li:first-child { + font-weight: 700; + color: #d3d3d3; + pointer-events: none; + border: 0; +} diff --git a/solutions/grid/3/Solution image.png b/solutions/grid/3/Solution image.png new file mode 100644 index 0000000..1c301f7 Binary files /dev/null and b/solutions/grid/3/Solution image.png differ diff --git a/solutions/grid/3/icons/search-icon.png b/solutions/grid/3/icons/search-icon.png new file mode 100644 index 0000000..c83ebcb Binary files /dev/null and b/solutions/grid/3/icons/search-icon.png differ diff --git a/solutions/grid/3/index.html b/solutions/grid/3/index.html new file mode 100644 index 0000000..4ab2524 --- /dev/null +++ b/solutions/grid/3/index.html @@ -0,0 +1,18 @@ + + + + + + + + Grid Challenge + + + +
+ + +
+ + + \ No newline at end of file diff --git a/solutions/grid/3/style.css b/solutions/grid/3/style.css new file mode 100644 index 0000000..82ed49c --- /dev/null +++ b/solutions/grid/3/style.css @@ -0,0 +1,19 @@ +#search-bar{ + position: relative; + border: 2px solid gray; + border-radius: 25px; + opacity: 0.5; + font-size: 16px; + padding:5px 25px; +} +#search-bar:focus-visible{ + outline: none; +} +img{ + position: absolute; + top: 3.5%; + width: 18px; + left: 10px; + transform: translateY(-50%); + padding-left: 5px; +}