save1.html 13.8 KB
<html>

<head>
    <!-- META DATA -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Free Bootstrap Themes - Free Responsive Html5 Templates">
    <meta name="author" content="#">

    <title>Study</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- <link rel="stylesheet" href="css/bootstrap1.min.css" type="text/css"> -->

    <!-- Owl Carousel Assets -->
    <link href="owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl-carousel/owl.theme.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style2.css">

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

    <style>
        .header-right-yuan {
            width: 50px;
            height: 50px;
        }

        .save-all {
            display: flex;
            background-color: #FCFBFD;
            margin: 0 200px 145px;
        }

        .save-left {
            flex: 2;
        }

        .save-left p {
            font-size: 18px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            color: #66ca94;
            line-height: 25px;
            letter-spacing: 1px;
        }

        .save-right1 {
            border: 10px solid #97DAB6;
            flex: 4;
            padding: 40px 50px;
        }

        .save-right {
            display: none;
        }

        .save-left div {
            font-size: 40px;
            font-family: SourceHanSansCN, SourceHanSansCN-Regular;
            font-weight: 400;
            text-align: left;
            color: #323232;
            line-height: 60px;
        }

        .login-footer-all {
            display: none;
        }

        .input_all {
            width: 50%;
            padding: 10px;
        }

        .input_all div {
            font-size: 18px;
            font-family: Helvetica;
            text-align: left;
            color: #323232;
            line-height: 18px;
        }

        .input_all input {
            margin-top: 10px;
            border: none;
            border-bottom: 1px solid #969696;
            font-family: PingFangSC;
            padding-left: 0;
            font-size: 18px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            color: #969696;
            line-height: 25px;
        }

        .header-txt1 {
            margin: 30px 110px 165px 70px;
            place-items: center;
        }

        @media (max-width: 768px) {
            .header-txt1 {
                margin: 25px 20px;
                place-items: center;
            }

            .header-right-yuan {
                width: 35px;
                height: 35px;
            }

            .header-img1 {}

            .header-right-btn {
                margin-right: 0px;
                bottom: 0px
            }

            .save-all {
                display: flex;
                flex-direction: column;
                background-color: #FCFBFD;
                margin: 80px 10px 0;
            }

            .save-right1 {
                display: none;
            }

            .save-right {
                display: block;
                border: 10px solid #97DAB6;
                flex: 4;
                padding: 20px;

                margin-top: 20px;
                margin-bottom: 40px;
            }

            .save-input-title {
                font-family: Helvetica;
                font-size: 14px;
                padding-bottom: 10px;
            }

            .save-left p {
                font-size: 9px;
                padding-left: 20px;
            }

            .save-left div {
                padding-left: 20px;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Semibold;
                text-align: left;
                color: #323232;
                line-height: 24px;
            }

            .login-footer-all {
                display: flex;
                background: #323232;
                flex-direction: column;
                place-items: center;
                display: flex;
            }
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <div class="header-txt1" style="display: flex;justify-content: space-between;">
                <div class="header-img1">
                    <img src="./img/portfolio/B1.png" style="width: 100%;">
                </div>
                <div class="header-right1">
                    <a class="header-right-btn" onclick="setPersonal()">
                        <img src="./img/portfolio/circle.png" class="header-right-yuan">
                    </a>
                </div>
            </div>
        </nav>
    </header>

    <div class="save-all">
        <div class="save-left">
            <p>Complete Your Background.</p>
            <div>完善你的信息</div>
            <div>让企业更多了解你</div>
        </div>
        <div class="save-right1">
            <div style="display: flex;flex-wrap: wrap;">
                <div class="input_all">
                    <div></div>
                    <input id='surname' placeholder="E.g. 张" />
                </div>
                <div class="input_all">
                    <div></div>
                    <input id='userName' placeholder="E.g. 小明" />
                </div>
                <div class="input_all">
                    <div>学校</div>
                    <input id='school' placeholder="E.g. 上海财经大学" />
                </div>
                <div class="input_all">
                    <div>专业</div>
                    <input id='specialty' placeholder="E.g. 金融学专业" />
                </div>
                <div class="input_all">
                    <div>手机号</div>
                    <input id='phone' placeholder="E.g. 15612388888" />
                </div>
                <div class="input_all">
                    <div>邮箱</div>
                    <input id='emailAddress' placeholder="E.g. student001@start-line.com" />
                </div>
                <div class="input_all">
                    <div>验证码</div>
                    <div style="display: flex;border-bottom: 1px solid #969696;place-items: center;">
                        <input id='verificationCode' placeholder="请输入验证码" style="border-bottom: none;flex: 1;" />
                        <button style="font-size: 18px;
                        flex: 1;
                        border: none;
                        background: none;
                        cursor: pointer;
                        font-family: PingFangSC, PingFangSC-Medium;
                        font-weight: 500;
                        text-align: right;
                        color: #66ca94;" id="code-btn">获取验证码</button>
                    </div>
                </div>
            </div>
            <div class="btnSave"
                style="display: flex;place-items: center;margin:93px 124px 47px 0;justify-content: flex-end; ">
                <h5
                    style="position: absolute;border-radius: 50%;background-color: #66CA94;z-index: 2;width: 50px;height: 50px;opacity: 0.5;margin-right:10px ">
                </h5>
                <a
                    style="position: relative;z-index: 5;color: #323232;font-family: PingFangSC;cursor: pointer;font-size: 18px; ">确定保存</a>
            </div>
        </div>
        <div class="save-right">
            <div style="display: flex;flex-direction: column ">
                <div style="padding-bottom: 10px;">
                    <p class="save-input-title"></p>
                    <input id='surname1'
                        style="border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        class="save-input-info " placeholder="E.g. 张 ">
                </div>
                <div style="padding-bottom: 10px; ">
                    <p class="save-input-title"></p>
                    <input id='userName1'
                        style="border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        placeholder="E.g. 小明 ">
                </div>

                <div style="padding-bottom: 10px;">
                    <p class="save-input-title">学校</p>
                    <input id='school1'
                        style="border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        placeholder="E.g. 上海财经大学 ">
                </div>
                <div style="padding-bottom: 10px; ">
                    <p class="save-input-title">专业</p>
                    <input id="specialty1"
                        style="border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        placeholder="E.g. 金融学专业 ">
                </div>
                <div style="padding-bottom: 10px; ">
                    <p class="save-input-title">手机号</p>
                    <input id="phone1"
                        style="border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        placeholder="E.g. 15612348888 ">
                </div>
                <div style="padding-bottom: 10px; ">
                    <p class="save-input-title">验证码</p>
                    <div style="display: flex;border-bottom: 1px solid #969696;place-items: center;">
                        <input id="verificationCode1"
                            style="flex:1;border: none;font-family: PingFangSC;padding-left: 0;"
                            placeholder="E.g. 请输入验证码 ">
                        <button style="font-size: 14px;
                        flex: 1;
                        border: none;
                        background: none;
                        cursor: pointer;
                        font-family: PingFangSC, PingFangSC-Medium;
                        font-weight: 500;
                        text-align: right;
                        color: #66ca94;" id="code_btn">获取验证码</button>
                    </div>
                </div>
                <div style="padding-bottom: 10px; ">
                    <p class="save-input-title">邮箱</p>
                    <input id="emailAddress1" type="text"
                        style="background: none;border: none;font-family: PingFangSC;border-bottom: 1px solid #969696;padding-left: 0;width: 100%; "
                        placeholder="E.g. student001@start-line.com ">
                </div>
            </div>
            <div
                style="width: 100%; height: 40px; font-size: 9px; font-family: Helvetica; text-align: justify; color: #323232; line-height: 20px; ">
                start-line虚拟实习体验项目均由资深职场人士设计打造,项目涉及的行业知、办公技能、工作任务均来源金融行业。</div>
            <div class="btnSave1"
                style=" text-align: center; background: #66ca94; border-radius: 25px; padding: 9px 30px; width: 120px; color: #323232; font-size: 12px; margin: 40px auto 10px; ">
                <!-- <h5 style="position: absolute;border-radius: 50%;background-color: #66CA94;z-index: 2;width: 50px;height: 50px;opacity: 0.5;margin-right:10px "></h5>
                <a style="position: relative;z-index: 5;color: #323232;font-family: PingFangSC;cursor: pointer;font-size: 18px; ">确定保存</a> -->
                立即注册
            </div>
            <div
                style="font-size: 9px; font-family: Helvetica; text-align: justify; color: #969696; line-height: 20px; ">
                start-line虚拟实习体验项目均由资深职场人士设计打造,项目涉及的行业知、办公技能。</div>
        </div>
    </div>
    <div class="login-footer-all">
        <div class="login-footer-img" style="width: 25%;margin-top: 45px; ">
            <img src="img/portfolio/whiteLogo.png" width="100% ">
        </div>
        <div
            style="color: #fff; font-family: PingFangSC, PingFangSC-Regular; text-align: center; font-size: 9px;margin-top: 12px; ">
            成功职场第一步,从Start-Line开始</div>
        <div style="color: #66CA94;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;margin: 60px 0 20px; ">
            关注Start-Line</div>
        <div style="width: 25%;margin-bottom: 200px; ">
            <img src="img/portfolio/EWM.png" width="100% ">
        </div>
    </div>









    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/agency.js"></script>
    <script src="./save1.js"></script>
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.js"></script>
    <script src="config.js"></script>
    <!-- carousel -->
    <script src="owl-carousel/owl.carousel.js"></script>
    <script>
        $(document).ready(function () {
            $("#owl-brand").owlCarousel({
                autoPlay: 3000,
                items: 1,
                itemsDesktop: [1199, 1],
                itemsDesktopSmall: [979, 2],
                navigation: false,
                navigationText: ['<i class="fa fa-chevron-left fa-5x "></i>', '<i class="fa fa-chevron-right fa-5x"></i>']
            });
        });
    </script>
</body>

</html>