recommend.html 13.3 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/style.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-text {
            padding: 0 70px;
        }
        
        .text-center {
            display: flex;
            justify-content: space-between;
            margin-top: 80px;
        }
        
        .par-head-left-title {
            flex: 3
        }
        
        .par-head-left-hello {
            display: flex;
            padding-bottom: 20px;
        }
        
        .par-head-right-title1 {
            flex: 1
        }
        
        .par-img1 {
            width: 120px
        }
        
        .intro {
            color: #66CA94;
            text-align: left;
        }
        
        .par-learning {
            padding-top: 10px;
            text-align: left;
        }
        
        .par-pro-one {
            display: flex;
            place-content: center;
            background-color: #fff;
        }
        
        .par-pro-img1 {
            width: 50%;
            margin-right: 5%;
        }
        
        .par-proing-title-one {
            display: flex;
            flex-direction: column;
        }
        
        .par-proing-title-one h5 {
            color: #323232;
            padding: 30px 30px 40px;
        }
        
        .par-proing-title-one p {
            color: #5a5a5a;
        }
        
        .login-footer-all {
            display: none;
        }
        
        @media (max-width: 768px) {
            .header-btnL {
                display: none;
            }
            .header-loginBtn {
                display: none;
            }
            .header-txt1 {
                margin: 25px 20px;
                place-items: center;
                padding: 0;
            }
            .text-center {
                display: flex;
                flex-direction: column;
            }
            .header-text {
                margin-top: 80px;
                padding: 0 0 20px 15px;
            }
            .par-head-left-hello {
                padding-bottom: 0px;
            }
            .par-head-left-hello h2 {
                display: flex;
                flex-direction: column;
                padding-bottom: 10px;
            }
            .par-head-left-hello h2 {
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                color: #323232;
                line-height: 24px;
            }
            .par-head-left-title h2 {
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                color: #323232;
                line-height: 24px;
            }
            .par-head-right-title1 p {
                font-size: 9px;
                font-family: Helvetica;
                color: #5a5a5a;
            }
            .par-img1 {
                width: 80px;
                margin-bottom: 15px;
            }
            .par-head-left-title {
                margin-bottom: 10px;
            }
            .par-head-right-title1 {
                width: 50%;
                display: flex;
                place-items: center;
                flex-direction: column;
            }
            .intro {
                color: #66CA94;
                text-align: left;
                font-size: 9px;
            }
            .par-learning {
                font-size: 14px;
            }
            .box-content {
                padding: 40px 30px;
            }
            .box-content .heading {
                margin-bottom: 20px
            }
            .par-pro-one {
                display: flex;
                place-content: center;
                background-color: #fff;
            }
            .par-pro-img1 {
                width: 50%;
                margin-right: 10px;
            }
            .par-proing-title-one {
                display: flex;
                flex-direction: column;
                padding-right: 10px;
            }
            .par-proing-title-one h5 {
                padding: 10px 0 2px;
                font-size: 12px;
                font-family: Helvetica;
                text-align: left;
                color: #323232;
                line-height: 24px;
            }
            .par-proing-title-one p {
                font-size: 9px;
                font-family: Helvetica;
                text-align: left;
                color: #5a5a5a;
                line-height: 16px;
                /* 单行字数隐藏变... */
                /* width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                border: 1px solid red */
                /* 多行字数隐藏变... */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            footer {
                display: none;
            }
            .login-footer-all {
                display: flex;
                background: #323232;
                flex-direction: column;
                place-items: center;
                display: flex;
            }
        }
    </style>

</head>

<body>
    <header>
        <nav>
            <div class="header-txt1">
                <div class="header-img1">
                    <img src="./img/portfolio/B1.png">
                </div>
                <div class="header-right1">
                    <a class="header-btnL" style="display: flex;">
                        <div class="header-loginBtn" style="border: none;">
                            Hello,
                        </div>
                        <div class="header-loginBtn" id="header-name" style="border: none;"></div>
                    </a>
                    <a class="header-btnL" href="login.html">
                        <div class="header-loginBtn">退出登录</div>
                    </a>
                    <a class="header-right-btn" onclick="setPersonal()">
                        <img src="./img/portfolio/circle.png" style="width: 50px;height: 50px;">
                    </a>
                </div>
            </div>
        </nav>

        <div class="header-text">
            <div class="col-md-12 text-center">
                <div class="par-head-left-title">
                    <div class="par-head-left-hello">
                        <h2>你好,</h2>
                        <h2 id="title-name"></h2>
                    </div>
                    <h2>在这里开始你精彩的职场实习体验吧!</h2>
                </div>
                <div class="par-head-right-title1">
                    <div class="par-img1">
                        <img src='img/portfolio/13-2.png' style='width:100%;'>
                    </div>
                    <p>你获得了
                        <a style="color: #66CA94;" id="recommend-num"></a> 个推荐</p>
                    <p style="font-size: 0.5em;">获得来自行业前辈的推荐,让更多行业领域<br/>能看见你的出色的成果展示,以及你的简历和个人资料。</p>
                </div>
            </div>
        </div>


    </header>


    <div id="page-content" style="background-color: #f0f0f0;">
        <section class="box-content box-2" id="projects" style="padding-bottom: 6%;">
            <div class="container">
                <div class="row heading">
                    <!-- <div class="col-lg-12"> -->
                    <div class="intro" style="color: #66CA94;text-align: left;">推荐项目 recommendable projects</div>
                    <!-- <div style="display: flex; justify-content: space-between;"> -->
                    <h2 class="par-learning">获得推荐的项目</h2>
                    <!-- </div> -->

                    <!-- </div> -->
                </div>
            </div>
            <div class="no-gutter" style="display: flex;flex-wrap: wrap;" id="allProject">
                <!-- <div class="col-lg-32 col-sm-60 par-pro-one">
                    <a class="portfolio-box3" style="display: flex;">
                        <div class="par-pro-img1">
                            <img src="img/portfolio/13-3.png" alt="" style="width:100%">
                        </div>
                        <div class="par-proing-title-one">
                            <h5>上海国际货币经济实习项目</h5>
                            <p>start-line虚拟实习项目均在线上进行,每个项目花费时间5-10小时不等,学生可以自由安排时间</p>
                        </div>
                    </a>
                </div> -->
            </div>
        </section>


    </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>

    <!-- FOOTER -->
    <footer>
        <div class="wrap-footer" style="background-color: #323232;">
            <div class="container">
                <div class="row" style="display: flex;justify-content: space-between;">
                    <div class="col-footer col-md-3" style="display: flex;flex-direction: column;place-content: center;">
                        <img src="img/portfolio/B2.png" width="50%">
                        <p class="footer-title" style="color: #fff;padding-top: 10%;font-size: 0.8em; text-transform:capitalize">成功职场第一步,从Start-Line开始</p>
                    </div>
                    <div class="col-footer col-md-3 widget_recent_entries" style="display: flex;flex-direction: column;place-items: center;place-content: center;">
                        <a class="footer-title" href="index.html" style="color:#66CA94">网站导航</a>
                        <a class="footer-title" href="index.html">网站首页</a>
                        <a class="footer-title" href="participated.html">实习项目</a>
                    </div>
                    <div class="col-footer col-md-3" style="display: flex;flex-direction: column;place-items: center;place-content: center;">
                        <a class="footer-title" href="index.html" style="color:#66CA94">关于我们</a>
                        <a class="footer-title" href="index.html">关于Start-Line</a>
                        <a class="footer-title" href="participated.html">联系我们</a>
                    </div>
                    <div class="col-footer col-md-3" style="display: flex;flex-direction: column;place-items: center;place-content: center;" id="sevenimg4">
                        <h2 class="footer-title" style="color: #66CA94;text-transform:capitalize">关注Start-Line</h2>
                        <div id='ewm-footer' style="text-align: center;">
                        </div>
                        <!-- <img src="img/portfolio/EWM.png" style="width: 50%;"> -->
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="config.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/agency.js"></script>
    <script src="recommend.js"></script>
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.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>