tod
/
odin-flex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Completed exercise 05

This commit is contained in:
NetMan 2023-12-29 17:48:46 +01:00
parent 34a0d21b48
commit a1c76bfe40
2 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
05-flex-modal/index.html
View File

@ -9,12 +9,20 @@
</head>
<body>
<div class="modal">
<div class="icon">!</div>
<div class="header">Are you sure you want to do that?</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>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
<div class="warn">
<div class="icon">!</div>
</div>
<div class="content">
<div class="subject">
<div class="header">Are you sure you want to do that?</div>
<button class="close-button">✖</button>
</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="buttons">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
</div>
</body>
</html>

23
05-flex-modal/style.css
View File

@ -20,6 +20,9 @@ body {
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
display: flex;
padding: 14px;
gap: 12px;
}
.icon {
@ -35,6 +38,10 @@ body {
justify-content: center;
}
.subject {
display: flex;
}
.close-button {
background: #eee;
border-radius: 50%;
@ -48,6 +55,12 @@ body {
justify-content: center;
border: 1px solid #eee;
padding: 0;
margin-left: auto;
}
.buttons {
display: flex;
gap: 6px;
}
button {
@ -67,3 +80,13 @@ button.cancel {
border: 1px solid #ddd;
color: royalblue;
}
.header {
font-size: 1.15rem;
font-weight: bold;
}
.text {
font-size: 0.95rem;
padding: 8px 20px 16px 0;
}