punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #311 from bzaman/#310-button-element-enhancement

Browse source 
#310 button element enhancement
This commit is contained in:
Cody Loyd 2023-05-03 09:20:11 -05:00 committed by GitHub
commit 07e096da6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
flex/05-flex-modal/index.html
View file

@ -11,7 +11,7 @@
<div class="modal"> <div class="modal">
<div class="icon">!</div> <div class="icon">!</div>
<div class="header">Are you sure you want to do that?</div> <div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div> <button class="close-button">✖</button>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button> <button class="continue">Continue</button>
<button class="cancel">Cancel</button> <button class="cancel">Cancel</button>

3
flex/05-flex-modal/solution/solution.css
View file

@ -46,9 +46,12 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #eee;
padding: 0;
} }
button { button {
cursor: pointer;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
} }

2
flex/05-flex-modal/solution/solution.html
View file

@ -12,7 +12,7 @@
<div class="icon">!</div> <div class="icon">!</div>
<div class="container"> <div class="container">
<div class="header">Are you sure you want to do that? <div class="header">Are you sure you want to do that?
<div class="close-button">✖</div> <button class="close-button">✖</button>
</div> </div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button> <button class="continue">Continue</button>

3
flex/05-flex-modal/style.css
View file

@ -46,9 +46,12 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #eee;
padding: 0;
} }
button { button {
cursor: pointer;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
} }