Apple.Lily

resume

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resume</title>
    <link rel="stylesheet" href="./wehelp_resume.css">
</head>
<body>
    <div class="bk_image_container">
        <img class="bk_image" src="https://i.imgur.com/rp62bnL.jpeg" >
        <div class="main_container">

            <div class="row_text">
                 <p>Apple.Lily</p>
            </div>
            <div class="column_text">
             <p>
                兩百字內的個人簡介 ：<br>
                <br>
                Hi~ 我是 Lily ， 喜歡寫code。<br>
                <br>
                <br>
                Y2k 7-11人資系統資料庫轉換。
                

             </p>
            </div>

            <div class="main_text">
                <p>
                    <span class="arrow-s"></span>
                    為了成為軟體工程師，做過什麼努力？若有具體作品請分享給我們：<br>
                    .....<br>
                    .......<br>
                </p>
                <p>
                    <span class="arrow-s"></span>
                    如果參與這個訓練，會怎麼安排學習時間？ <br>
                    .......<br>
                </p>
                <p>
                    <span class="arrow-s"></span>
                    是否有想要加入的公司？為什麼想加入該公司？<br>
                    .......... <br>
                </p>
                <p>
                    <span class="arrow-s"></span>
                    請描述一件產生明顯負面情緒的經歷，如何處理該情緒？<br>

                    寫code<br>
                    
                </p>
                <p>
                    <span class="arrow-s"></span>
                    關於這份申請網頁，分享一個開發時的技術心得。<br>
    
                    暫時沒有。。。。。<br>
                    
                </p>
                <p>
                    <span class="arrow-s"></span>
                    請用簡短兩三句話，描述對你而言，最重要的一項人際交往原則。<br>
                    ......<br>
    
                </p>
                <p>
                    <span class="arrow-s"></span>
             ...

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color:#302f2f;
}

.bk_image_container {
    position: relative;
    width: 100%;
    height: 100%;
}

.bk_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


.main_container {
    position: absolute;
    width: 768px;
    height: 100%; /* 將高度設置為100%以填滿父元素的高度 */
    background-color: white;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    overflow-y: auto; /* 添加滾動條 */
}


.row_text{
    position:absolute;
    margin-top: 30px;
    width:inherit;
    height: 150px;
    background-color: #ebcbbb;
    z-index: 2;
}

.row_text p{
    padding-left: 250px;
    font-size: 40px;
    color:  #6c999a;

}


.column_text {
    position: absolute;
    margin-left: 30px ;
    width: 200px;
    height: 130%; 
    background-color: #6c999a;
    z-index: 3;
    overflow-y: auto; /* 添加滾動條 */
}

.column_text p{
    padding-top: 250px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

.main_text {
    position: absolute;
    margin-left: 244px;
    margin-top: 200px;
    width: calc(100% - 240px - 30px); /* 使用calc計算剩餘寬度 */
    height: 100%; /* 將高度設置為100%以填滿父元素的高度 */
    z-index: 5;
    overflow-y: auto; /* 添加滾動條 */
}



.arrow-s::before {
    color: #6c999a; 
    display: inline-block; /* 讓 ::before 元素能夠單獨調整大小 */
    content: "\276f"; /* Unicode 編碼表示的箭頭符號 */
    transform: scale(1.2, 0.7); /* 將符號的高度縮放為原來的一半 */
    font-size: 35px; /* 設置符號的大小 */
    vertical-align: middle; /* 垂直置中對齊 */

}


.photo_m{
    position: absolute;
    margin-top: 15px;
    margin-left: 41px;
    width: 22%;
    border: 1px solid white;
    border-radius: 50%;
    z-index: 4;
}