Explorer
project
index.css
index.html
index.js
Dependencies
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
: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;
}