Feat/section789

assets/css/footer.css

@@ -0,0 +1,133 @@
+/* createdby affu satouru */
+.footer{
+    border-top: 1px solid #d1d3d4;
+    padding: 32px;
+    padding-bottom: 0px;
+    box-sizing: border-box;
+    background: #ffff;
+}
+.footer h4{
+    font-size: 1.2em;
+    margin-bottom: 10px;
+    color: #606060;
+}
+.footer__wrapper-contact{
+    display: grid;
+    grid-template-columns: 20% 15% 15% 25% 25% ;
+    justify-content: center;
+    width: 90%;
+    margin: 0px auto;
+}
+.footer__contact-help ul{
+    list-style: none;
+}
+.footer__contact-help li{
+    font-size: 1.2em;
+}
+.footer__contact-help li a{
+    padding: 8px 0px;
+    display: inline-block;
+    color: #808080 ;
+    text-decoration: none;
+}
+
+
+
+.footer__contact-tos ul{
+    list-style: none;
+}
+.footer__contact-tos li{
+    font-size: 1.2em;
+}
+.footer__contact-tos li a{
+    padding: 8px 0px;
+    display: inline-block;
+    color: #808080 ;
+    text-decoration: none;
+}
+
+
+
+.footer__contact-location ul{
+    list-style: none;
+}
+.footer__contact-location li{
+    font-size: 1.2em;
+    margin-bottom: 8px;
+}
+.footer__contact-location li a{
+    padding: 8px 0px;
+    display: inline-block;
+    color: #808080 ;
+    text-decoration: none;
+}
+
+
+
+.footer__contact-payment ul {
+    width: 100%;
+    column-gap: 1em;
+    column-width: 60px;
+}
+.footer__contact-location li img{
+    width: 50px;
+    user-select: none;
+    border-style: none;
+}
+
+
+
+.footer__contact-sosmed ul{
+    list-style: none;
+}
+.footer__contact-sosmed li{
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+}
+.footer__sosmed img{
+    margin-right: 12px;
+
+}
+.footer__contact-sosmed li a{
+    outline: none;
+    text-decoration: none;
+    color: #FC4C02;
+    background-color: transparent;
+}
+.footer__sosmed-2 img{
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+    margin-right: 8px;
+}
+.footer__sosmed-3 img{
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+    margin-right: 8px;
+}
+
+
+.footer__copyright{
+    margin: 0 auto;
+    margin-top: 10px;
+    width: 90%;
+    border-top: 1px solid #d1d3d4 ;
+    padding: 24px 0px;
+    display: flex;
+    align-items: center;
+}
+.footer__copyright img{
+    height: 32px;
+}
+.footer__tagline{
+    font-size: 14px;
+    margin-left: 20px;
+    color: #565252 ;
+    flex-grow: 1;
+}.footer__copy{
+    font-size: 14px;
+    color:#808080 ;
+}
+/* End footer */

assets/css/login.css

@@ -0,0 +1,151 @@
+/* create by dosma rina br manik */
+.login{
+    padding: 24px 0px;
+}
+.login_content{
+    width: 100%;
+    max-width: 480px;
+    margin: auto;
+}
+.login_logo{
+    width: 120px;
+    height: 44.4px;
+    object-fit: contain;
+    margin: 0px auto;
+    display: block;
+}
+
+.login_tittle{
+    text-align: center;
+    margin-top: 12px;
+    font-size: 24px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    color: #606060;
+}
+
+.login_form{
+    margin-top: 24px;
+    padding: 24px;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+    width: 100%;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-radius: 4px;
+}
+.login_name{
+    display: block;
+    font-size: 14px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    color: #808080;
+    margin-top: 15px;
+}
+.login_box{
+    border-radius: 4px;
+    border: 1px solid #d1d3d4;
+    color: #565252;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+    margin-top: 8px;
+    width: 100%;
+}
+
+.login_forgot{
+    text-align: right;
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    margin-left: auto;
+    color: orangered;
+    text-decoration: none;
+}
+
+.login_forgot:hover{
+    text-decoration: underline;
+}
+
+.login_button{
+    margin-top: 32px;
+}
+.login_signin{
+    padding: 16px;
+    border-radius: 4px;
+    border: none;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1;
+    width: 100%;
+    cursor: pointer;
+    background: orangered;
+}
+
+.login_button_tittle{
+    font-size: 14px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.14;
+    color: #808080;
+    margin: 16px 0px;
+    display: block;
+    text-align: center;
+}
+.login_button_fb{
+    padding: 16px;
+    border-radius: 4px;
+    border: none;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1;
+    width: 100%;
+    cursor: pointer;
+    background: #465daa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login_fb{
+    filter: brightness(0) invert(1);
+    height: 20px;
+    width: 10px;
+    object-fit: contain;
+    margin-right: auto;
+}
+.login_button_tittle_fb{
+    color: inherit;
+    margin-right: auto;
+}
+
+.login_register{
+    font-size: 16px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    display: block;
+    margin: 16px auto 0px;
+    text-decoration: none;
+    color: orangered;
+}
+
+.login_register:hover{
+    text-decoration: underline;
+}