Calculator UI

exercise of the first step in cs_internship

by shahryar saljoughi

HTML

<!DOCTYPE html>
<html>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/4da3118626.js"></script>
</head>
<body>
    <div class="main-container">
        <div class="left-section">
            <div class="row">
                <div class="hamburgermenu-btn">
                    <i style="color: black; font-size: 20px;" class="fas fa-bars"></i>
                </div>
                <span class="title">Scientific</span>
            </div>
            <div class="row already-inserted">12 + 96 +</div>
            <div class="row current-num">3568</div>
            <div class="row">
                <div class="unit-btn">DEG</div>
                <div class="unit-btn">HYP</div>
                <div class="unit-btn">F-E</div>
            </div>
            <div class="row">
                <div class="memory-btn">MC</div>
                <div class="memory-btn">MR</div>
                <div class="memory-btn">M+</div>
                <div class="memory-btn">M-</div>
                <div class="memory-btn">MS</div>
            </div>
            <div class="row">
                <div class="main-btn"> x<sup>2</sup> </div>
                <div class="main-btn">x<sup>y</sup></div>
                <div class="main-btn">sin</div>
                <div class="main-btn">cos</div>
                <div class="main-btn">tan</div>
                <div class="main-btn">CE</div>
                <div class="main-btn">C</div>
                <div class="main-btn"><i class="fas fa-backspace"></i></div>
                <div class="main-btn">&divide;</div>
                <div class="main-btn">&times;</div>
                <div class="main-btn">x<sup>3</sup></div>
                <div class="main-btn">sin<sup>-1</sup></div>
                <div class="main-btn">cos<sup>-1</sup></div>
                <div class="main-btn">tan<sup>-1</sup></div>
                <div class="main-btn">7</div>
               ...

CSS

* {
    font-family: 'Segoe UI';
}
div.main-container {
    background-color: lightgray;
    display: flex;
}
div.right-section {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 2%;
    height: 100%;
}
div.left-section {
    flex-basis: 85%;
    flex-shrink: 10;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
.hamburgermenu-btn {
    display: inline-block;
    padding: 20px;
    margin-right: 10px;
}
[class*="btn"]:hover {
    background-color: darkgray;
}
.title {
    font-size: 22px;
}
.right-section-tab-buttons {
    font-weight: bold;
    float: left;
    padding: 20px;

}
.right-section .row div:last-of-type {
    margin-left: 15px;
}
.active-tab {
    border-bottom: 5px deepskyblue solid;
}
.already-inserted {
    padding: 5px;
    width: 100%;
    height: 30px;
    font-size: 13px;
    text-align: right;
}
.current-num {
    font-size: 60px;
    padding: 5px;
    text-align: right;
    font-weight: bold;
    width: 100%;
}
.unit-btn, .memory-btn {
    font-weight: bold;
    font-size: 13px;
    padding:30px;
    float: left;
}

/* .unit-btn + .unit-btn, .memory-btn + .memory-btn  {
    margin-left: 40px;
} */

.main-buttons-container {
    display: flex;
    /* flex-wrap: wrap; */
}

.main-btn {
    box-sizing: border-box;
    width: 11.11%;
    height: 62px;
    line-height: 5vw;
    float: left;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .right-section {
        display: none;
    }
    div.left-section {
        flex-basis: 95%;
        
    }
}