Scribd Logo
Upload

Welcome to Scribd!

  • Chat Bot

    Uploaded by

    Mohamed Asik
    7 views2 pages
    The document contains CSS code to style a chatbot interface. It defines styles for the body, info container, chatbot container, textarea, header, message feed, submit button, and message bubbles. The body takes up the full screen with content pushed to the bottom right. The chatbot container is white with rounded corners and shadow. Text is entered in a textarea at the bottom. The feed scrolls past messages with bubbles of different colors for questions and responses.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS code to style a chatbot interface. It defines styles for the body, info container, chatbot container, textarea, header, message feed, submit button, and message bubbles. The body takes up the full screen with content pushed to the bottom right. The chatbot container is white with rounded corners and shadow. Text is entered in a textarea at the bottom. The feed scrolls past messages with bubbles of different colors for questions and responses.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    7 views2 pages

    Chat Bot

    Uploaded by

    Mohamed Asik
    The document contains CSS code to style a chatbot interface. It defines styles for the body, info container, chatbot container, textarea, header, message feed, submit button, and message bubbles. The body takes up the full screen with content pushed to the bottom right. The chatbot container is white with rounded corners and shadow. Text is entered in a textarea at the bottom. The feed scrolls past messages with bubbles of different colors for questions and responses.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    app.

    scss

    body{
    margin: 0;
    padding: 0;
    background-color: rgb(227, 227, 227);
    display: flex;
    justify-content:end;
    align-items: end;
    height: 100vh;
    font-family: Arial, sans-serif;
    }

    .info-container {
    height: 60px;
    background: Linear-gradient(rgb(6,51, 118), rgb(1,31,75));
    padding: 25px;
    color: rgb(244, 244, 244)
    }

    .chat-bot{
    position: relative;
    height: 500px;
    width: 400px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border-radius: 20px 20px 0 0;
    margin: 20px 20px 0 20px;
    box-shadow: rgba(0,0,0, 0.16) 0 10px 36px 0,
    rgba (0,0, 0,0.06) 0 0 0 1px
    }

    textarea {
    position:absolute;
    bottom: 0;
    Left: 0;
    border: none;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgb(207, 207, 207);
    padding: 25px 70px 25px 25px;
    }

    textarea: focus {
    outline: none;
    }

    .header {
    position: relative;
    z-index: 1;
    }

    .feed {
    position:absolute;
    bottom: 82px;
    left: 0;
    width: 100%;
    height: 250px;
    overflow-y: scroll;
    }

    button {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: rgb(6, 51, 118);
    color: rgb(207, 207, 207);
    position: absolute;
    bottom: 21px;
    right: 21px;
    }

    .bubble {
    width: 250px;
    padding: 20px;
    margin: 10px 25px;
    border-radius: 10px;
    box-shadow: rgba (0,0, 0,0.24) 0 3px 8px;
    color: rgb(74,74,74);
    }

    .question {
    background-color: rgb(244, 248, 255);
    }

    .response {
    margin-left:85px;
    }

    You might also like