scrimba
Note at 1:51
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:51
AboutCommentsNotes
Note at 1:51
Expand for more info
index.css
run
preview
console
:root {
--dark-blue: #15202B;
--medium-blue: #023F6A;
--light-blue: #1DA1F2;
--gray: #566470;
--white: #E7F5FE;
--black: #111;

}

body{
background-color: var(--medium-blue);
font-family: sans-serif;
}

.container{
display: flex;
/* align-items: center; */
justify-content: space-between;
flex-direction: column;
background-color: var(--dark-blue);
width:600px;
height: 250px;
border-radius: 0px 0px 20px 20px;
position: relative;

}

textarea{
width:500px;
height: 200px;
background-color: var(--dark-blue);
color: var(--white);
border-radius:10px;
border: 0 solid var(--black);
display: flex;
flex-direction: column;
padding-left: 96px;
padding-top: 30px;
}

textarea::placeholder{
color: var(--white);
}

textarea:focus {
outline: none;
}

#counterFooter {
margin-top: 0.2rem;
font-size: 15px;
font-weight: bold;
color: var(--light-blue);
margin: 15px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#btn {
width:75px;
height: 40px;
background-color: var(--light-blue);
padding: 1em;
cursor: pointer;
border: 0 solid var(--black);
border-radius: 20px;
display: flex;
margin: 15px;

}

#btn h2{
color: var(--white);
font-size: 15px;
display: flex;
align-self: center;

}
.buttonDisabled {
opacity: .5;
cursor: default;
}

.top {
background-color: var(--dark-blue);
width:600px;
height: 58px;
border-radius: 20px 20px 0px 0px;
border-bottom: 1px solid var(--gray);
display: flex;
align-items: center;
}

.close {
background-color: var(--dark-blue);
border-radius: 50%;
width: 37px;
height: 37px;
border: none;
display: flex;
margin-left: 15px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

.close::before {
content: '✕';
color: var(--light-blue);
font-size: 28px;
}

.close:hover {
background-color: rgba(29, 161, 242, 0.15)

}

.left-panel {
width: 60px;
height: 250px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
}

.left-panel img {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
margin: 10px;

}

.bottom {
background-color: var(--dark-blue);
width:600px;
height: 58px;
border-radius: 0px 0px 20px 20px;
border-top: 1px solid var(--gray);
display: flex;
justify-content: flex-end;
align-items: center;
}
Console
/index.html
LIVE