cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
                <div class="content">
             <h1>Międzynarodowe Portale z pracą zdalną</h1>

            <p>Zmęczony poszukiwaniem ofert zdalnego zatrudnienia ?. Agregatory pracy "polsko języczne" niestety nie rozpieszczają użytkowników, zwłaszcza te należące do awangardy polskich wyszukiwarek. Dlatego właśnie powstaje lista stron zagranicznych gdzie bez problemu, można odnaleźć tego rodzaju ogłoszenia. Zresztą większość z nich została zaprojektowana dokładnie w tym celu, aby ułatwić wyszukiwanie pracy na odległość.</p>       
        <div class="remote">
            <div class="remote-work">
                <h3>1. RemoteWorkHub - https://remoteworkhub.com/remote-jobs/</h3>
                <span class="description">Przeróżne oferty pracy zdalnej, brak jednej spójnej kategorii. Tablica z  ogłoszeniami uaktualniana codziennie. Posiada zakładki między innymi z listą firm, które zatrudniają zdalnie oraz kursy dotyczące zdalnego zatrudnienia. Znajdziemy tutaj porady jak zacząć pracę na odległość, zarządzanie czasem, przygotowanie do rozmowy kwalifikacyjnej ... Ogarnięcie całej tej pracy zdalnej może nie być łatwe, dlatego przygotowano zestawienie odpowiednich narzędzi, adresów ułatwiających pracę i życie na odległość np. listę work spaces ..  .</span>

                    

                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">

                           <div class="piculli">

                           <h5>Główne kategorie</h5>
                            <ul>
                                <li>Auditing</li>
                                <li>Analysis</li>
                                <li>Administration</li>
                                <li>Accounting & Bookkeeping</li>
                                <li>Account Management</li>
                                <li>Banking & Financial Services</li>
                                <li>Call Centre</li>
                                <li>Consulting</li>
                                <li>Customer Service & Support</li>
                                <li>Data Entry</li>
                                <li>Design</li>
                                <li>Education & Training</li>
                                <li>Human Resources & Recruitmnet</li>
                                <li>IT & Technology</li>
                                <li>Legal</li>
                                <li>Management</li>
                                <li>Marketing & PR</li>
                                <li>Media</li>
                                <li>Medical & Health</li>
                                <li>Project Management</li>
                                <li>Research</li>
                                <li>Sales</li>
                                <li>Science</li>
                                <li>Social Media</li>
                                <li>Software & Application Development</li>
                                <li>Tourism & Travel</li>
                                <li>Transcription</li>
                                <li>Translation</li>
                                <li>Web Design & Development</li>
                                <li>Writing & Editing</li>

                            </ul>
                           <div class="imagee"></div>                    
                        </div>
    
                    </div>

                </div>   
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>2. AngelList - https://angel.co/jobs</h3>
                <span class="description">Strona powstała głównie z myślą o tworzących się startup-ach. Zatrudnienie na odległość stanowi większość ogłoszeń. Trudno nie ukryć, że oferty pracy dla programistów, developerów to miażdżąca większość ze wszystkich anonsów.</span>
               
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">

                        <div class="piculli">

                           <h5>Główne kategorie</h5>
                            <ul>
                                <li>Software Engineering</li>
                                <li>Design</li>
                                <li>Operations</li>
                                <li>Sales</li>
                                <li>Marketing</li>
                                <li>Hardware, Mechanical, Systems</li>


                            </ul>
                           <div class="imagee"></div>                    
                        </div>     
                        
                    </div>

                </div>              
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>3. WeWorkRemotely - https://weworkremotely.com/</h3>
                <span class="description">O tym że jest to strona z ofertami zdalnymi może świadczyć brak możliwości wyboru lokalizacji geograficznej ogłoszenia. Oczywiście jak w przypadku wielu podobnych stron, większość ogłoszeń jest skierowana do programistów.</span>
                  
                <div style="clear: both;"></div>
            </div>
               
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Design</li>
                        <li>Business Executive</li>
                        <li>Management</li>
                        <li>Customer Support</li>
                        <li>Programming</li>
                        <li>DevOps, SysAdmin</li>
                        <li>Marketing</li>
                        <li>Copywriting</li>
                        <li>Other</li>
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                     
                    </div>
             </div>    
            
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>4. WorkingNomads - https://www.workingnomads.co</h3>
                <span class="description">Całkiem sporo kategorii prac umożliwiających zarobek na odległość. Oczywiście programowanie i development to większa połowa ogłoszeń.</span>
                 
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Development</li>
                        <li>Management</li>
                        <li>Sales</li>
                        <li>System Administration</li>
                        <li>Customer Success</li>
                        <li>Marketing</li>
                        <li>Design</li>
                        <li>Finance</li>
                        <li>Consulting</li>
                        
                        <li>Writing</li>
                        <li>Human Resources</li>
                        <li>Education</li>
                        <li>Health Care</li>
                        <li>Legal</li>
                        <li>Administration</li>                        
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                      
                    </div>
             </div> 
        
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>5. Workana - https://www.workana.com/</h3>
                <span class="description"> Nie jest to typowa strona z ogłoszeniami o pracę zdalna, bardziej skierowana jest dla freelacerów i to głównie hiszpańsko języcznych. Nie należy się tym przejmować, gdyż każdy może aplikować na wybrane przez siebie oferty, niezależnie od lokalizacji i języka. Niezbędna jest rejestracja aby przeglądać ogłoszenia. </span>
                 
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Web and Mobile Development</li>
                        <li>IT and Programming</li>
                        <li>Web and Graphic Design</li>
                        <li>Writing and Translation</li>
                        <li>Sales and Marketing</li>
                        <li>Finance and Accounting</li>
                      
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                      
                    </div>
             </div>             
        </div>

         <div class="remote">
            <div class="remote-work">
                <h3>6. RemoteMission - http://www.remotemission.com/</h3>
                <span class="description">Serwis oferuje miesięczny newsletter z ofertami pracy. Brak możliwości przeglądania ofert na stronie.</span>
                 
                <div style="clear: both;"></div>
            </div>
                 <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Charities</li>
                        <li>Social Enterprises</li>
                        <li>NGOs</li>
                    
                    </ul>
                   <div class="imagee"></div>                    
                </div>                      
                    </div>
             </div>            
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>7. Remoteok - https://remoteok.io/</h3>
                <span class="description">Interesujący agregator prac zdalnych, który także umożliwia wyszukiwanie ogłoszeń nie technicznych. Dodatkowo zawiera listę firm zatrudniających zdalnie razem z aktualną ilością ofert pracy. Ciekawym dodatkiem są także statystki portalu. Dla przykładu, publikowane technologie zawierają między innymi częstotliwość z jaką pojawiają się w ogłoszeniach.</span>
                 
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Writing</li>
                        <li>Virtual Assistant</li>
                        <li>Transcription</li>
                        <li>Sales</li>
                        <li>Recruiter & HR</li>
                        <li>QA</li>
                        <li>Project Management</li>
                        <li>Marketing</li>
                        <li>Design</li>
                        <li>Development</li>
                        <li>Healthcare</li>
                        <li>Education</li>
                        <li>Customer Service</li>                                                  
                    </ul>
                   <div class="imagee"></div>                    
                </div>                      
                    </div>
             </div>             
        </div>

         <div class="remote">
            <div class="remote-work">
                <h3>8. Remote - https://remote.co/remote-jobs/</h3>
                <span class="description">Ładnie zaprojektowana strona. Posiada unikatowe podejście do sposobu klasyfikacji ogłoszeń, które jednocześnie bardzo ułatwiają wyszukiwanie odpowiednich ofert. Twórcy portalu dodali także pewną listę firm, poszukujących zdalnych pracowników. Ciekawostką są profile <a href="http://pracaonlinedziennik.pl/praca-zdalna/telepraca-cyfrowych-nomadow-czyli-jak-zarabiac-online/" target="_blank"> cyfrowych nomadów</a> z krótkim wywiadem (dotyczy ich sposobu życia, plusy..minusy oraz narzędzia )</span>
                  
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Development</li>
                        <li>Management</li>
                        <li>Sales</li>
                        <li>System Administration</li>
                        <li>Customer Success</li>
                        <li>Marketing</li>
                        <li>Design</li>
                        <li>Finance</li>
                        <li>Consulting</li>
                        
                        <li>Writing</li>
                        <li>Human Resources</li>
                        <li>Education</li>
                        <li>Health Care</li>
                        <li>Legal</li>
                        <li>Administration</li>                        
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                     
                    </div>
             </div>             
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>9. Remotive - https://remotive.io/find-a-job/</h3>
                <span class="description">Znaczna ilość aktualnych ogłoszeń. Możliwe jest dołączenie do społeczności pracowników zdalnych, związane jest to z jednorazową opłatą w wysokości 49$.</span>
                
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Engineering</li>
                        <li>Education</li>
                        <li>Human Resources</li>
                        <li>Marketing</li>
                        <li>Product</li>
                        <li>Sales</li>
                         <li>Support</li>                     
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                       
                    </div>
             </div>             
        </div>

         <div class="remote">
            <div class="remote-work">
                <h3>10. RemoteBase - https://remotebase.io/</h3>
                <span class="description">Kolejna ciekawa wyszukiwarka ofert telepracy. Do dyspozycji użytkowników dostępne jest forum, lista firm z aktywnymi ogłoszeniami oraz chat z innymi zdalnymi pracownikami.</span>
                  
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Development</li>
                        <li>Content</li>
                        <li>Design</li>
                        <li>Sales</li>
                        <li>Marketing</li>
                        <li>Operations</li>
                        <li>Management</li>
      
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                     
                    </div>
             </div>             
        </div>
        
         <div class="remote">
            <div class="remote-work">
                <h3>11. RemoteWorking - http://www.remoteworking.co/</h3>
                <span class="description">Niestety brak jest aktualnych ogłoszeń. Data ostatnich anaonsów to kwiecień 2017.</span>
                  
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Programming</li>
                        <li>Design</li>
                        <li>DevOps & SysAdmin</li>
                        <li>Copywriting</li>
                        <li>Customer Support</li>
                        <li>Marketing</li>
                        <li>Business/Exec & Management</li>                      
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                     
                    </div>
             </div>             
        </div>
    
    <div class="remote">
            <div class="remote-work">
                <h3>12. Indeed - https://pl.indeed.com/</h3>
                <span class="description"> Raczej nie trzeba dodatkowego komentarza. Znany agregator ogłoszeń o pracę. W serwisie znajdziemy pracę z różnych dziedzin. Aby wyszukać oferty zdalne wystarczy wpisać remote. </span>
                
                <div style="clear: both;"></div>
            </div>
                <div class="bar">

                    <div class="progress" style="width: 100%;">
                <div class="piculli">

                   <h5>Główne kategorie</h5>
                    <ul>
                        <li>Accounting & Finance</li>
                        <li>Administrative</li>
                        <li>Arts, Entertainment, & Publishing</li>
                        <li>Banking & Loans</li>

                        <li>Construction & Facilities</li>
                        <li>Customer Service</li>
                        <li>Education & Training</li>
                        <li>Engineering & Architecture</li>
                        <li>Government & Military</li>
                        <li>Healthcare</li>
                        <li>Computer & Internet</li>
                        <li>Hospitality & Travel</li>
                        <li>Human Resources</li>
                        <li>Insurance</li>
                        <li>Law Enforcement & Security</li>
                        <li>Legal</li>
                        <li>Manufacturing & Mechanical</li>
                        <li>Marketing, Advertising, & PR</li>
                        <li>Non-Profit & Volunteering</li>
                        <li>Pharmaceutical & Bio-tech</li>
                        <li>Real Estate</li>
                        <li>Restaurant & Food Service</li>
                        <li>Retail</li>
                        <li>Sales</li>
                        <li>Telecommunications</li>
                        <li>Transportation & Logistics</li>
                        <li>Upper Management & Consulting</li>
                      
                        
                    </ul>
                   <div class="imagee"></div>                    
                </div>                       
                    </div>
             </div>             
        </div>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700&subset=latin-ext');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 850vh;
    background-color: #021f4a;
    font-family: 'Montserrat', sans-serif; 
        font-family: 'Old Standard TT', serif;

}

.content {
  position: absolute;
    top: 1%;
    left: 10%;
    transform: translate(-9%,0%);
    width: 800px;
    padding: 22px;
    background-color: #072858;
}

.content > p {
    text-align:center;
}

h3 {
    float: left;
    color: #fff;
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    letter-spacing: 0.1rem;
}

span {
    float: left;
    color: #fff;
    margin-top: 1rem;
    line-height: 1.7rem;
}

.remote {
    position: relative;
    padding: 15px 20px;
    background: rgba(0,0,0,0.15);
   margin: 10px 0;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 0 25px rgba(0,0,0,0.5);    
}

h1, p {
    color: #fff;
    margin: 2rem;
    font-family: 'Old Standard TT', serif;
}

h5 {
    margin-bottom: 2rem;
    letter-spacing: 0.1rem;
}

.remote-work a {
    text-decoration-style: wavy;
    -webkit-text-decoration-style: wavy;
    color:darkgoldenrod;
}

.bar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #041c40;
    margin: 15px 0 10px;

}

.progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    background-color: #fff;
    background: linear-gradient(to right, #00227b, #2b80ff);

}
.progress:before {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
   /* box-shadow: 0 0 25px rgba(41,123,247,1);*/
    box-shadow: 0 0 20px 10px #fff, 0 0 80px 20px #ff0;
    transition: box-shadow 4s ease-out;
    animation: glow;
}

.remote:hover {
    background: rgba(0,0,0,0.35);
}

.piculli {
    width: 80%;
    position: absolute;
    padding: 20px;
    top: 100%;
    left: 50%;
    transform: translate(-10%);
    color: white;
    background-color: #072858;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.5);      
    z-index: 2;
    opacity: 1;     
    display: none;
    
   
}

.piculli ul {
    list-style-type: none;
    line-height: 1.5rem;
    column-count: 2;
    margin-bottom: 1rem;
}

.imagee {
    min-width: 400px;
    height: 263px;
    background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415030/RemoteWorkHub_opt_p6snec.png); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 1rem;
}

.progress:hover .piculli {
    display: block;

}

.remote:nth-child(4) .imagee {
        height: 301px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415039/Angel-list_opt_bjpdzx.png);
}

.remote:nth-child(5) .imagee {
        height: 223px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415052/we-work-remotely_opt_djqa1n.png);
}

.remote:nth-child(6) .imagee {
        height: 286px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415068/working-nomads_opt_k98lb8.png);
}

.remote:nth-child(7) .imagee {
        height: 304px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415082/workana_opt_mzxhoh.png);
}

.remote:nth-child(8) .imagee {
        height: 251px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415096/remote-mission_opt_f0qsce.png);
}

.remote:nth-child(9) .imagee {
        height: 251px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415110/remote-ok_opt_ubwymr.png);
}

.remote:nth-child(10) .imagee {
        height: 311px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415151/remote-co_opt_gqewlp.png);
}

.remote:nth-child(11) .imagee {
        height: 250px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415175/remotive_opt_f2ffzs.png);
}

.remote:nth-child(12) .imagee {
        height: 268px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415189/remote-base_opt_xdfhcx.png);
            
}

.remote:nth-child(13) .imagee {
        height: 297px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1512415205/remote-working_opt_j4u5ll.png);
            
}

.remote:nth-child(14) .imagee {
        height: 307px;
        background-image: url(http://res.cloudinary.com/trodison/image/upload/v1517915462/indeed_opt_vnjsv6.png);
            
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console