🛩👢 Checkpoint

./style.css:617503/2419
./index.html:617503/291
This commit is contained in:
Glitch (hello-webpage)
2020-10-15 16:59:57 +00:00
parent 71238e790f
commit ae484f59d7
2 changed files with 14 additions and 16 deletions

View File

@ -17,8 +17,11 @@
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<h1>Hello world!</h1> <h1>Hello world!</h1>
<img src="/illustration.svg" class="illustration" />
</div> </div>
<img src="/illustration.svg" class="illustration" />
<button>
Remix on Glitch
</button>
</div> </div>
<!-- include the Glitch button to show what the webpage is about and <!-- include the Glitch button to show what the webpage is about and

View File

@ -4,8 +4,6 @@
--main-text-color: #373fff; --main-text-color: #373fff;
} }
body { body {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
@ -17,22 +15,19 @@ h1 {
} }
.wrapper { .wrapper {
min-height: 100vh; // height of the browser viewport min-height: 100vh;
display: flex; display: grid;
justify-content: center; place-items: left;
align-items: center;
} }
.content { .content {
height: 100px; width: clamp(23ch, 50%, 46ch);
width: 200px; display: flex;
background: #fff; flex-direction: column;
padding: 50px; padding: 1rem;
border-radius: 10px;
position: relative;
text-align: center;
} }
.illustration { .illustration {
position: relative;
bottom: 10em;
} }