Skip to content

Complete the css-exercises #692

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.

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
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Conversation

malvin149
Copy link

@malvin149 malvin149 commented Jun 8, 2025

Because

This PR

Issue

Closes #XXXXX

Additional Information

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
  • The Because section summarizes the reason for this PR
  • The This PR section has a bullet point list describing the changes in this PR
  • If this PR addresses an open issue, it is linked in the Issue section
  • If applicable, I have ensured that the TOP solution files match the Desired Outcome image

malvin149 added 16 commits June 7, 2025 13:22
edit index.html

Added style to div via external css, p via the
internal css and button via inline css.
style.css

Added class of description and cool to the three
odd elements div 1 and 2 with an ID of even-one
even-two respectively. Applied the styling to the selectors in the style sheet accordingly.
Added solutions to chaining selectors and added
.vscode folder to .gitignore as i did not want to
push this settings to the upstream.
Experiment with both type and class selectors for
this project and commented out the class
descendant combinators.
- Move grouped selectors for para down below .small-para
- Use ID selector #confirm-button to target the confirm button
- Chain type and class selector to target the div with child class
- Center all items vertically inside the header
- Insert two divs as a container for items
on the right and items on the left
Modify index.html and style.css files
- Wrap the header close btn text and buttons in a
container for flex. Apply flex: 1, to make
container take up remaining space
- Wrap the buttons in a container to align the
two buttons horizontally.
- Use gaps for consistent spacing.
- Encompass the close button in the header div.
@malvin149 malvin149 marked this pull request as ready for review June 12, 2025 13:55
@malvin149 malvin149 closed this Jun 12, 2025
@malvin149 malvin149 reopened this Jun 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant