Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="hero-nav">
    <div class="hero-nav__inner">
        <h1>CyberSoft Academy</h1>
        <div class="hero-nav__button">
            <a href="#" class="btn"></a>
        </div>
    </div>
</div>
<div class="page-content">
    <p>Bạn đang tìm một nghề đang HOT nhất và mức lương cao hiện nay?
Bạn đang tìm một công việc mới theo đam mê của bạn?
Bạn muốn bắt đầu một nghề mới cho mình nhưng chưa biết bắt đầu từ đâu?
Bạn cần một trung tâm chuyên nghiệp, học xong có việc ngay, đáp ứng mọi nhu cầu tuyển dụng của doanh nghiệp ?<br>
>>>> Bạn sẽ được cung cấp TẤT TẦN TẬT các kiến thức để có thể ỨNG TUYỂN NGAY bất kì công ty nào tuyển dụng về lập trình Front End (Front End Developer), từ HTML, CSS, HTML5, CSS3, đến Javascript, JS Prototype, JQuery, Ajax / JSON , Web API đến Flex, Bootstrap mới nhất, Typescript và FULL Angular mới nhất cũng như trọn bộ React JS qua các dự án vô cùng thực tế.<br>
 >>>> Bạn sẽ code 'Sặp mặt' , không lý thuyết lan man bởi các Giảng viên vô cùng tận tâm, cực kì chuyên nghiệp và vô cùng dễ hiểu, được support nhiệt tình mọi lúc cùng với MENTOR hỗ trợ suốt quá trình học.<br>
 >>>> Bạn sẽ được rèn luyện kỹ năng làm việc nhóm, kỹ năng tự học, kỹ năng nghiên cứu, kỹ năng đọc sách tiếng anh, kỹ năng làm việc theo qui trình, kỹ năng thuyết trình và kỹ năng phân tích dự án,...<br>
 >>>> Tài nguyên học tập và hệ thống học tập vô cùng lớn và chuyên nghiệp, bên cạnh việc học trực tiếp cùng giảng viên, bạn sẽ có các hệ thống để thẩm định bạn, hệ thống Bài giảng và HƠN 400 VIDEO đã được thu âm cực kì chất lượng theo dự án để bạn học tập theo phương pháp hoàn toàn mới, giúp code tốt, nhớ tốt và review bài giảng.<br></p>
    <p>TẠI SAO NGHỀ LẬP TRÌNH FRONT END LẠI HOT ? NGHỀ FRONT END LÀM GÌ ? LƯƠNG NHIÊU?<br>
Giờ đây, các bạn chỉ cần gõ từ Lập trình Front End hay Front End developer, các bạn sẽ thấy hàng triệu kết quả xuất hiện. Nó là cái gì mà sao hot vậy?
Tất cả các sản phẩm website, cái 'ăn tiền' đối với khách hàng chính là bề ngoài của sản phẩm. Mặc cho cái 'beck ăn - backend" nó có cao siêu bao nhiêu đi chăng nữa, nó có cả triệu chức năng cũng không quan tâm luôn. Bởi vì cái mà khách hàng thấy, cái mà người dùng 'sờ mó' cảm nhận được là cái bề ngoài bóng bẩy của nó và sự tiện dụng, dễ xài của nó.<br>
Do vậy, muốn sản phẩm nhiều người xài, nhiều ngừoi truy cập, anh phải trau chút cái Giao diện bên ngoài, phải làm thật sự tiện dụng mới được, không thì sản phẩm của anh bị dẹp ngay, và công ty anh làm 'sập tiệm' .<br>
Mà đừng cứ tưởng là Front End De-ve-lốp là ngồi cắt layout là xong, cái này dễ như ăn bánh nhé. Mà dễ vậy sao nhiều vị trí đến lương cả vài ngàn củ Do-nan-trump được ? Phải có lý do đúng không nào? Front End ngoài việc trau chút HTML, CSS, Cắt layout, đây chỉ là chuyện phụ thôi, cái chính là code Javascript, code Jquery, code Ajax, Json, rồi xài framework như Angular, như React JS,... Ăn tiền hay không là nằm ở chỗ này nhé các bạn.
<br>
Và thứ cực kì quan trọng nữa, đó chính là kỹ năng năng giải quyết vấn đề, kỹ năng đưa bài toán thực tế vào lập trình là cực kì quan trọng của một thằng 'dev bro' , toàn chỉ nghe là học ngôn ngữ này, ngôn ngữ nọ, mà kỹ năng này không có thì khó mà lên chức cao nổi. Đây là sự sống còn của 'thằng' dev.
Mà các món này ở trường ko có đâu, vài chỗ thì lung tung, CyberSoft Academy biết được cái nào là tốt nhất cho các bạn, cái nào là học xong demo được, trình chiếu được, khoe với thiên hạ được, nghiên cứu chuyên sâu lên được, tự tin với nhà tuyển dụng, xem CV là 'hốt ngay'.</p>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Montserrat);
body,html{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
.hero-nav{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    min-height: 105px;
    background-image: url(https://images.unsplash.com/photo-1442606383395-175ee96ed967?q=80&fm=jpg&s=5c8c74be9bc91b47c79a1aaf92264be5);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    .hero-nav__inner{
        z-index: 1;
    }
    h1{
        color: #efefef;
        font-size: 5vw;
    }
    &:before{
        content: "";
        background: rgba(#000, 0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: background 400ms;
    }
    &.fixme{
        &:before{
            background: rgba(#000, 0.8);
        }
    }
}
.page-content{
    width: 30em;
    margin: 0 auto;
    line-height: 1.625;
}
              
            
!

JS

              
                var heroShinker = function() {
    var hero = $('.hero-nav'),
        heroHeight = $('.hero-nav').outerHeight(true);
        $(hero).parent().css('padding-top', heroHeight);
    $(window).scroll(function() {
        var scrollOffset = $(window).scrollTop();
        if (scrollOffset < heroHeight) {
            $(hero).css('height', (heroHeight - scrollOffset));
        }
        if (scrollOffset > (heroHeight - 215)) {
            hero.addClass('fixme');
        } else {
            hero.removeClass('fixme');
        };
    });
}
heroShinker();
              
            
!
999px

Console