Skip to content

Grid challenge -> Position 3 challenge solved #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NikhilBhagoria wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Grid challenge -> Position 3 challenge solved #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0ecdeb0
flex-Challenge-complete
NikhilBhagoria Aug 1, 2023
fd8d469
Nikhil added Flex-challenge-complete
NikhilBhagoria Aug 2, 2023
369495b
Merge branch 'The-Code-Dose:main' into main
NikhilBhagoria Aug 13, 2023
66ba0af
Position 3 challenge solved
NikhilBhagoria Aug 13, 2023
6a37ecb
changes
NikhilBhagoria Aug 13, 2023
e5a62cf
solution image
NikhilBhagoria Aug 13, 2023
29459e6
changes
NikhilBhagoria Aug 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions challenges/flex/flex.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Challenges</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div>
<div class="flex-container">
<ul>
<li>SOTD</li>
<li>Creator</li>
<li>Font & Color</li>
<li>Details</li>
<li>Score</li>
</ul>
</div>
</div>
</body>

</html>
34 changes: 34 additions & 0 deletions challenges/flex/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added solutions/grid/3/Solution image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added solutions/grid/3/icons/search-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions solutions/grid/3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Grid Challenge</title>
</head>

<body>
<div>
<input type="text" name="" id="search-bar" placeholder="Search">
<img src="./icons/search-icon.png"></i>
</div>
</body>

</html>
19 changes: 19 additions & 0 deletions solutions/grid/3/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}