"wholly"
Bootstrap 4.1.1 Snippet by exigentinc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="responsive-image"> <div class="browser browser-xlg desktop-size"> <div class="browser-header"> <div class="browser-buttons"><span></span><span></span><span></span></div> <div class="browser-bar"></div> <div class="browser-menu"><span></span><span></span><span></span></div> </div> <div class="browser-body"> <div class="control-panel animate animated" style="visibility: visible;"> <div class="play"> <span class="play-btn"><i class="zmdi zmdi-play"></i></span> </div> <div class="cp-cursor"></div> <div class="cp-navbar"> <div class="navbar"> <span class="navbar-toggle"><i><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></i></span> <div class="navbar-header"> <a class="navbar-brand" href="/">Vultr</a> <a class="notification-toggle" href="/"><i class="zmdi zmdi-notifications"></i></a> </div> <div class="navbar-container"> <ul class="navbar-nav"> <li><span><i class="zmdi zmdi-storage"></i>Servers</span></li> <li><span><i class="zmdi zmdi-card"></i>Billing</span></li> <li><span><i class="zmdi zmdi-email"></i>Support</span></li> <li><span><i class="zmdi zmdi-money-box"></i>Affiliate</span></li> <li><span><i class="zmdi zmdi-account-o"></i>Account</span></li> <li class="navbar-logout"><span><i class="zmdi zmdi-power"></i>Logout</span></li> </ul> </div> </div> </div> <div class="cp-server-deploying"> <div class="cp-progress"> <div class="cp-progress-bar"></div> </div> </div> <div class="cp-server-list"> <div class="cp-content"> <div class="cp-header"> <div class="cp-container"> <span class="h1">Servers</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>Instances</span></li> <li><span>Snapshots</span></li> <li><span>ISO</span></li> <li><span>Startup Scripts</span></li> <li><span>SSH Keys</span></li> <li><span>DNS</span></li> <li><span>Backups</span></li> <li><span>Block Storage</span></li> <li><span>Reserved IPs</span></li> <li><span>Firewall</span></li> </ul> </div> <div class="cp-deploy-btn"><i class="zmdi zmdi-plus"></i></div> </div> <!-- /.cp-header --> </div> <div class="cp-container"> <div class="no-data"> <div class="server"></div> <span class="h6">There are no instances created.</span> </div> <div class="cp-servers-table"> <table class="table cp-table-servers table-checkbox"> <colgroup> <col style="width: 0"> <col style="width: 40%"> <col style="width: 10%"> <col style="width: 20%"> <col style="width: 15%"> <col style="width: 15%"> <col style="width: 0"> </colgroup> <thead> <tr> <th><span class="checkbox-style"></span></th> <th class="sort-desc">Server</th> <th>OS</th> <th>Location</th> <th>Charges</th> <th>Status</th> <th></th> </tr> </thead> <tbody> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Instance #1</b> <small>2048 MB VPS - 192.0.2.1</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> New Jersey </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$4.28 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Instance #2</b> <small>768 MB VPS - 192.0.2.2</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-singapore-xs"></span> Singapore </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$2.25 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Database</b> <small>512 MB VPS - 192.0.2.3</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-germany-xs"></span> Frankfurt </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$2.98 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>DNS Server</b> <small>4096 MB VPS - 192.0.2.4</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> Miami </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$6.38 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Caching Server</b> <small>8192 MB VPS - 192.0.2.5</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> Chicago </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$8.24 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> </tbody> </table> </div> <div class="cp-servers-table-mobile" style="width: 178px; overflow: hidden;"> <div style="height: 20px"></div> <div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Server:</div> <div style="width: 70%; display: inline-block"><strong>Cloud Instance #1</strong></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block"> </div> <div style="width: 70%; display: inline-block">2048 MB VPS - 192.0.2.1</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">OS</div> <div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Location</div> <div style="width: 70%; display: inline-block"><span class="flag-xs flag-usa-xs"></span> New Jersey</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Costs</div> <div style="width: 70%; display: inline-block">$4.28</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Status</div> <div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div> </div> </div> <div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div> <div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Server:</div> <div style="width: 70%; display: inline-block"><strong>Cloud Instance #2</strong></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block"> </div> <div style="width: 70%; display: inline-block">768 MB VPS - 192.0.2.2</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">OS</div> <div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Location</div> <div style="width: 70%; display: inline-block"><span class="flag-xs flag-singapore-xs"></span> Singapore</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Costs</div> <div style="width: 70%; display: inline-block">$2.25</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Status</div> <div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div> </div> </div> <div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div> </div> </div> </div> </div> <!-- /.cp-server-list --> <div class="cp-deploy-server"> <div class="cp-content"> <div class="cp-header cp-header-hero"> <div class="cp-container"> <span class="h1">Deploy New Instance</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>Vultr Cloud Compute (VC2)</span></li> <li><span>Bare Metal Instance</span></li> <li><span>Storage Instance</span></li> <li><span>Dedicated Instance</span></li> </ul> </div> </div> </div> <div class="cp-container"> <ul class="step-list steps-order"> <li> <span class="step">1</span> <span class="h6">Choose Server Location</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li><span>All Locations</span></li> <li><span>America</span></li> <li class="active"><span>Europe</span></li> <li><span>Australia</span></li> <li><span>Asia</span></li> </ul> <span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span> <span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span> </div> <div class="row"> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-france-sm"><span></span></span> <span class="select-name">Paris <small>France</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-netherlands-sm"><span></span></span> <span class="select-name">Amsterdam <small>Netherlands</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel cp-location-click"> <div class="select-header"> <span class="select-icon flag flag-sm flag-germany-sm"><span></span></span> <span class="select-name">Frankfurt <small>Germany</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-england-sm"><span></span></span> <span class="select-name">London <small>United Kingdom</small></span> </div> </div> </div> </div> </li> <li> <span class="step">2</span> <span class="h6">Server Type</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>64 bit OS</span></li> <li><span>32 bit OS</span></li> <li><span>Application</span></li> <li><span>Upload ISO</span></li> <li><span>ISO Library</span></li> <li><span>Backup</span></li> <li><span>Snapshot</span></li> </ul> <span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span> <span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span> </div> <div class="row"> <div class="col-sm-3"> <div class="panel cp-os-click"> <div class="select-header"> <span class="select-icon icon icon-ubuntu"><span></span></span> <span class="select-name">Ubuntu <small>Select Version</small></span> </div> <ul class="select-options"> <li data-version="18.04 x64">18.04 x64</li> <li data-version="16.04 x64">16.04 x64</li> <li data-version="14.04 x64">14.04 x64</li> </ul> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-centos"></span> <span class="select-name">CentOS <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-debian"></span> <span class="select-name">Debian <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-freebsd"></span> <span class="select-name">FreeBSD <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-openbsd"></span> <span class="select-name">OpenBSD <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-coreos"></span> <span class="select-name">CoreOS <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-fedora"></span> <span class="select-name">Fedora <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-windows"></span> <span class="select-name">Windows <small>Select Version</small></span> </div> </div> </div> </div> </li> <li> <span class="step">3</span> <span class="h6">Choose Package</span> <div class="packages select-group"> <div class="packages-row row"> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">20GB SSD</h3> <span class="package-price">$2.50<span class="cycle">/mo</span></span><span class="package-hourly">$0.004<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>512MB</strong> Memory</li> <li><strong>500GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package cp-package-click"> <div class="package-header"> <h3 class="package-title">25GB SSD</h3> <span class="package-price">$5<span class="cycle">/mo</span></span><span class="package-hourly">$0.007<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>1024MB</strong> Memory</li> <li><strong>1000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">40GB SSD</h3> <span class="package-price">$10<span class="cycle">/mo</span></span><span class="package-hourly">$0.015<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>2048MB</strong> Memory</li> <li><strong>2000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">60GB SSD</h3> <span class="package-price">$20<span class="cycle">/mo</span></span><span class="package-hourly">$0.030<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>2</strong> CPU</li> <li><strong>4096MB</strong> Memory</li> <li><strong>3000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> </div> <!-- /.packages-row --> <div class="packages-row row"> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">100GB SSD</h3> <span class="package-price">$40<span class="cycle">/mo</span></span><span class="package-hourly">$0.060<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>4</strong> CPU</li> <li><strong>8192MB</strong> Memory</li> <li><strong>4000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">200GB SSD</h3> <span class="package-price">$80<span class="cycle">/mo</span></span><span class="package-hourly">$0.119<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>6</strong> CPU</li> <li><strong>16384MB</strong> Memory</li> <li><strong>5000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">300GB SSD</h3> <span class="package-price">$160<span class="cycle">/mo</span></span><span class="package-hourly">$0.238<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>8</strong> CPU</li> <li><strong>32768MB</strong> Memory</li> <li><strong>6000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">400GB SSD</h3> <span class="package-price">$320<span class="cycle">/mo</span></span><span class="package-hourly">$0.476<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>16</strong> CPU</li> <li><strong>65536MB</strong> Memory</li> <li><strong>10000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">800GB SSD</h3> <span class="package-price">$640<span class="cycle">/mo</span></span><span class="package-hourly">$0.952<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>24</strong> CPU</li> <li><strong>98304MB</strong> Memory</li> <li><strong>15000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> </div> <!-- /.packages-row --> </div> </li> <li> <span class="step">4</span> <span class="h6">Additional Features</span> <div class="checkbox"> <span class="checkbox-style cp-checkbox-click"></span>Enable IPv6 </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable Private Network [?] </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable <span class="text-primary">Auto Backups</span> <span class="label label-primary">$1.00/mo</span> </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable <span class="text-primary">DDOS Protection</span> [?] <span class="label label-primary">$10/mo</span> </div> <div style="height: 30px;"></div> </li> <li> <span class="step">5</span> <span class="h6">Startup Script <span class="text-primary">( Manage )</span></span> <p> There are no Startup Scripts created. <span class="text-primary">Click here to add</span> </p> </li> <li> <span class="step">6</span> <span class="h6">SSH Keys <span class="text-primary">( Manage )</span></span> <p> There are no SSH Keys created. <span class="text-primary">Click here to add</span> </p> </li> <li> <span class="step">7</span> <span class="h6">Server Hostname & Label</span> <div class="row"> <div class="col-xs-6"> <div class="cp-instance-input"> <span class="form-control input-xs"><!-- Enter server hostname --></span> <span class="cp-instance-name">cloud-database<span class=""></span></span> </div> </div> <div class="col-xs-6"> <div class="cp-instance-input"> <span class="form-control input-xs"><!-- Enter server label --></span> <span class="cp-instance-name">Cloud Database<span class=""></span></span> </div> </div> </div> </li> </ul> <!-- /.steps-list --> <div class="cp-deploy-summary"> <div class="cp-container"> <span class="cp-summary-price">Summary: <span>$5/mo</span></span> <span class="cp-summary-btn">Deploy Now</span> </div> </div> </div> <!-- /.cp-container --> </div> <!-- /.cp-content --> <div class="cp-deploy-summary"> <div class="cp-container"> <span class="cp-summary-price">Summary: <span>$5.00/mo</span></span> <span class="cp-summary-btn">Deploy Now</span> </div> </div> <!-- /.cp-deploy-summary --> </div> <!-- /.cp-deploy-server --> <div class="cp-server-loading"> </div> <!-- /.cp-server-loading --> </div> </div> </div> <!-- /.browser --> <div class="phone phone-xlg mobile-size"> <div class="phone-header"> <div class="phone-speaker"></div> </div> <div class="phone-body"> <div class="play"> <span class="play-btn"><i class="zmdi zmdi-play"></i></span> </div> <div class="control-panel"> <div class="cp-cursor"></div> <div class="cp-navbar"> <div class="navbar"> <span class="navbar-toggle"><i><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></i></span> <div class="navbar-header"> <a class="navbar-brand" href="/">Vultr</a> <a class="notification-toggle" href="/"><i class="zmdi zmdi-notifications"></i></a> </div> <div class="navbar-container"> <ul class="navbar-nav"> <li><span><i class="zmdi zmdi-storage"></i>Servers</span></li> <li><span><i class="zmdi zmdi-card"></i>Billing</span></li> <li><span><i class="zmdi zmdi-email"></i>Support</span></li> <li><span><i class="zmdi zmdi-money-box"></i>Affiliate</span></li> <li><span><i class="zmdi zmdi-account-o"></i>Account</span></li> <li class="navbar-logout"><span><i class="zmdi zmdi-power"></i>Logout</span></li> </ul> </div> </div> </div> <div class="cp-server-deploying"> <div class="cp-progress"> <div class="cp-progress-bar"></div> </div> </div> <div class="cp-server-list"> <div class="cp-content"> <div class="cp-header"> <div class="cp-container"> <span class="h1">Servers</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>Instances</span></li> <li><span>Snapshots</span></li> <li><span>ISO</span></li> <li><span>Startup Scripts</span></li> <li><span>SSH Keys</span></li> <li><span>DNS</span></li> <li><span>Backups</span></li> <li><span>Block Storage</span></li> <li><span>Reserved IPs</span></li> <li><span>Firewall</span></li> </ul> </div> <div class="cp-deploy-btn"><i class="zmdi zmdi-plus"></i></div> </div> <!-- /.cp-header --> </div> <div class="cp-container"> <div class="no-data"> <div class="server"></div> <span class="h6">There are no instances created.</span> </div> <div class="cp-servers-table"> <table class="table cp-table-servers table-checkbox"> <colgroup> <col style="width: 0"> <col style="width: 40%"> <col style="width: 10%"> <col style="width: 20%"> <col style="width: 15%"> <col style="width: 15%"> <col style="width: 0"> </colgroup> <thead> <tr> <th><span class="checkbox-style"></span></th> <th class="sort-desc">Server</th> <th>OS</th> <th>Location</th> <th>Charges</th> <th>Status</th> <th></th> </tr> </thead> <tbody> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Instance #1</b> <small>2048 MB VPS - 192.0.2.1</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> New Jersey </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$4.28 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Instance #2</b> <small>768 MB VPS - 192.0.2.2</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-singapore-xs"></span> Singapore </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$2.25 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Cloud Database</b> <small>512 MB VPS - 192.0.2.3</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-germany-xs"></span> Frankfurt </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$2.98 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>DNS Server</b> <small>4096 MB VPS - 192.0.2.4</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> Miami </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$6.38 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> <tr> <td class="cp-cell-checkbox"> <span class="checkbox-style"></span> </td> <td class="cp-cell-title"> <b>Caching Server</b> <small>8192 MB VPS - 192.0.2.5</small> </td> <td class="cp-cell-os"> <span class="icon icon-xs icon-os icon-ubuntu"></span> </td> <td class="cp-cell-location mobile-size-hidden"> <span class="flag-xs flag-usa-xs"></span> Chicago </td> <td class="cp-cell-costs"> <span class="cp-table-label">Costs: </span>$8.24 </td> <td class="cp-cell-status"> <span class="status status-success">Running</span> </td> <td class="cell-actions mobile-size-hidden"> <button class="btn btn-sm btn-link btn-icon" type="button" data-toggle="dropdown"><i class="zmdi zmdi-more"></i></button> </td> </tr> </tbody> </table> </div> <div class="cp-servers-table-mobile" style="width: 178px; overflow: hidden;"> <div style="height: 20px"></div> <div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Server:</div> <div style="width: 70%; display: inline-block"><strong>Cloud Instance #1</strong></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block"> </div> <div style="width: 70%; display: inline-block">2048 MB VPS - 192.0.2.1</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">OS</div> <div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Location</div> <div style="width: 70%; display: inline-block"><span class="flag-xs flag-usa-xs"></span> New Jersey</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Costs</div> <div style="width: 70%; display: inline-block">$4.28</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Status</div> <div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div> </div> </div> <div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div> <div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Server:</div> <div style="width: 70%; display: inline-block"><strong>Cloud Instance #2</strong></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block"> </div> <div style="width: 70%; display: inline-block">768 MB VPS - 192.0.2.2</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">OS</div> <div style="width: 70%; display: inline-block"><span class="icon icon-xs icon-os icon-ubuntu"></span></div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Location</div> <div style="width: 70%; display: inline-block"><span class="flag-xs flag-singapore-xs"></span> Singapore</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Costs</div> <div style="width: 70%; display: inline-block">$2.25</div> </div> <div style="white-space: nowrap; margin:6px 0px;"> <div style="width: 30%; display: inline-block">Status</div> <div style="width: 70%; display: inline-block"><span class="status status-success">Running</span></div> </div> </div> <div style="margin: 16px 0px; height: 0px; border-bottom: 1px solid #edeff2"></div> </div> </div> </div> </div> <!-- /.cp-server-list --> <div class="cp-deploy-server"> <div class="cp-content"> <div class="cp-header cp-header-hero"> <div class="cp-container"> <span class="h1">Deploy New Instance</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>Vultr Cloud Compute (VC2)</span></li> <li><span>Bare Metal Instance</span></li> <li><span>Storage Instance</span></li> <li><span>Dedicated Instance</span></li> </ul> </div> </div> </div> <div class="cp-container"> <ul class="step-list steps-order"> <li> <span class="step">1</span> <span class="h6">Choose Server Location</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li><span>All Locations</span></li> <li><span>America</span></li> <li class="active"><span>Europe</span></li> <li><span>Australia</span></li> <li><span>Asia</span></li> </ul> <span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span> <span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span> </div> <div class="row"> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-france-sm"><span></span></span> <span class="select-name">Paris <small>France</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-netherlands-sm"><span></span></span> <span class="select-name">Amsterdam <small>Netherlands</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel cp-location-click"> <div class="select-header"> <span class="select-icon flag flag-sm flag-germany-sm"><span></span></span> <span class="select-name">Frankfurt <small>Germany</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon flag flag-sm flag-england-sm"><span></span></span> <span class="select-name">London <small>United Kingdom</small></span> </div> </div> </div> </div> </li> <li> <span class="step">2</span> <span class="h6">Server Type</span> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><span>64 bit OS</span></li> <li><span>32 bit OS</span></li> <li><span>Application</span></li> <li><span>Upload ISO</span></li> <li><span>ISO Library</span></li> <li><span>Backup</span></li> <li><span>Snapshot</span></li> </ul> <span class="btn btn-icon btn-link btn-prev"><i class="zmdi zmdi-chevron-left"></i></span> <span class="btn btn-icon btn-link btn-next"><i class="zmdi zmdi-chevron-right"></i></span> </div> <div class="row"> <div class="col-sm-3"> <div class="panel cp-os-click"> <div class="select-header"> <span class="select-icon icon icon-ubuntu"><span></span></span> <span class="select-name">Ubuntu <small>Select Version</small></span> </div> <ul class="select-options"> <li data-version="18.04 x64">18.04 x64</li> <li data-version="16.04 x64">16.04 x64</li> <li data-version="14.04 x64">14.04 x64</li> </ul> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-centos"></span> <span class="select-name">CentOS <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-debian"></span> <span class="select-name">Debian <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-freebsd"></span> <span class="select-name">FreeBSD <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-openbsd"></span> <span class="select-name">OpenBSD <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-coreos"></span> <span class="select-name">CoreOS <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-fedora"></span> <span class="select-name">Fedora <small>Select Version</small></span> </div> </div> </div> <div class="col-sm-3"> <div class="panel"> <div class="select-header"> <span class="select-icon icon icon-windows"></span> <span class="select-name">Windows <small>Select Version</small></span> </div> </div> </div> </div> </li> <li> <span class="step">3</span> <span class="h6">Choose Package</span> <div class="packages select-group"> <div class="packages-row row"> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">20GB SSD</h3> <span class="package-price">$2.50<span class="cycle">/mo</span></span><span class="package-hourly">$0.004<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>512MB</strong> Memory</li> <li><strong>500GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package cp-package-click"> <div class="package-header"> <h3 class="package-title">25GB SSD</h3> <span class="package-price">$5<span class="cycle">/mo</span></span><span class="package-hourly">$0.007<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>1024MB</strong> Memory</li> <li><strong>1000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">40GB SSD</h3> <span class="package-price">$10<span class="cycle">/mo</span></span><span class="package-hourly">$0.015<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>1</strong> CPU</li> <li><strong>2048MB</strong> Memory</li> <li><strong>2000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">60GB SSD</h3> <span class="package-price">$20<span class="cycle">/mo</span></span><span class="package-hourly">$0.030<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>2</strong> CPU</li> <li><strong>4096MB</strong> Memory</li> <li><strong>3000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> </div> <!-- /.packages-row --> <div class="packages-row row"> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">100GB SSD</h3> <span class="package-price">$40<span class="cycle">/mo</span></span><span class="package-hourly">$0.060<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>4</strong> CPU</li> <li><strong>8192MB</strong> Memory</li> <li><strong>4000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">200GB SSD</h3> <span class="package-price">$80<span class="cycle">/mo</span></span><span class="package-hourly">$0.119<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>6</strong> CPU</li> <li><strong>16384MB</strong> Memory</li> <li><strong>5000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">300GB SSD</h3> <span class="package-price">$160<span class="cycle">/mo</span></span><span class="package-hourly">$0.238<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>8</strong> CPU</li> <li><strong>32768MB</strong> Memory</li> <li><strong>6000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">400GB SSD</h3> <span class="package-price">$320<span class="cycle">/mo</span></span><span class="package-hourly">$0.476<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>16</strong> CPU</li> <li><strong>65536MB</strong> Memory</li> <li><strong>10000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> <div class="col-sm-3 col-xs-6"> <div class="package"> <div class="package-header"> <h3 class="package-title">800GB SSD</h3> <span class="package-price">$640<span class="cycle">/mo</span></span><span class="package-hourly">$0.952<span>/h</span></span> </div> <div class="package-body"> <ul> <li><strong>24</strong> CPU</li> <li><strong>98304MB</strong> Memory</li> <li><strong>15000GB</strong> Bandwidth</li> </ul> </div> </div> <!-- /.package --> </div> </div> <!-- /.packages-row --> </div> </li> <li> <span class="step">4</span> <span class="h6">Additional Features</span> <div class="checkbox"> <span class="checkbox-style cp-checkbox-click"></span>Enable IPv6 </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable Private Network [?] </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable <span class="text-primary">Auto Backups</span> <span class="label label-primary">$1.00/mo</span> </div> <div class="checkbox"> <span class="checkbox-style"></span>Enable <span class="text-primary">DDOS Protection</span> [?] <span class="label label-primary">$10/mo</span> </div> <div style="height: 30px;"></div> </li> <li> <span class="step">5</span> <span class="h6">Startup Script <span class="text-primary">( Manage )</span></span> <p> There are no Startup Scripts created. <span class="text-primary">Click here to add</span> </p> </li> <li> <span class="step">6</span> <span class="h6">SSH Keys <span class="text-primary">( Manage )</span></span> <p> There are no SSH Keys created. <span class="text-primary">Click here to add</span> </p> </li> <li> <span class="step">7</span> <span class="h6">Server Hostname & Label</span> <div class="row"> <div class="col-xs-6"> <div class="cp-instance-input"> <span class="form-control input-xs"><!-- Enter server hostname --></span> <span class="cp-instance-name">cloud-database<span></span></span> </div> </div> <div class="col-xs-6"> <div class="cp-instance-input"> <span class="form-control input-xs"><!-- Enter server label --></span> <span class="cp-instance-name">Cloud Database<span></span></span> </div> </div> </div> </li> </ul> <!-- /.steps-list --> <div class="cp-deploy-summary"> <div class="cp-container"> <span class="cp-summary-price">Summary: <span>$5/mo</span></span> <span class="cp-summary-btn">Deploy Now</span> </div> </div> </div> <!-- /.cp-container --> </div> <!-- /.cp-content --> <div class="cp-deploy-summary"> <div class="cp-container"> <span class="cp-summary-price">Summary: <span>$5.00/mo</span></span> <span class="cp-summary-btn">Deploy Now</span> </div> </div> <!-- /.cp-deploy-summary --> </div> <!-- /.cp-deploy-server --> <div class="cp-server-loading"> </div> <!-- /.cp-server-loading --> </div> </div> <div class="phone-footer"> <div class="phone-btn"></div> </div> </div> <!-- /.phone --> <div class="image image-lines"></div> <div class="image image-lines image-lines-right"></div> </div> <!-- /.responsive-image --> </div>
/*! CSS Used from: https://www.vultr.com/dist/css/core.css?v=401 */ a{background-color:transparent;-webkit-transition:color ease-in .15s;transition:color ease-in .15s;} a:active,a:hover{outline:0;} p{margin:0 0 17px 0;} b,strong{font-weight:bold;} small{font-size:80%;} button{margin:0;font:inherit;color:inherit;} button{overflow:visible;} button{text-transform:none;} button{-webkit-appearance:button;cursor:pointer;} button::-moz-focus-inner{padding:0;border:0;} table{border-spacing:0;border-collapse:collapse;} td,th{padding:0;} @media print{ *,*:before,*:after{color:#000!important;text-shadow:none!important;background:transparent!important;-webkit-box-shadow:none!important;box-shadow:none!important;} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} thead{display:table-header-group;} tr{page-break-inside:avoid;} p,h3{orphans:3;widows:3;} h3{page-break-after:avoid;} .navbar{display:none;} .label{border:1px solid #000;} .table{border-collapse:collapse!important;} .table td,.table th{background-color:#fff!important;} } *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} button{font-family:inherit;font-size:inherit;line-height:inherit;} a{color:#1e88e5;text-decoration:none;} a:hover,a:focus{color:#3ba3ff;text-decoration:none;} .h1,h3,.h6{color:#363b40;font-weight:500;letter-spacing:-0.1px;} .h1{margin-top:38px;margin-bottom:38px;font-size:33px;line-height:46px;} h3{margin-top:25px;margin-bottom:25px;font-size:20px;line-height:28px;} .h6{margin-top:18px;margin-bottom:18px;font-size:14px;font-weight:bold;line-height:20px;} small{font-size:85%;} .text-primary{color:#1e88e5!important;} ul{margin-top:0;margin-bottom:10px;} ul ul{margin-bottom:0;} .container{padding-right:10px;padding-left:10px;margin-right:auto;margin-left:auto;} @media (min-width: 768px){ .container{width:100%;} } @media (min-width: 992px){ .container{width:970px;} } @media (min-width: 1200px){ .container{width:1170px;} } .row{margin-right:-10px;margin-left:-10px;} .col-sm-3,.col-xs-6{position:relative;min-height:1px;padding-right:10px;padding-left:10px;} .col-xs-6{float:left;} .col-xs-6{width:50%;} @media (min-width: 768px){ .col-sm-3{float:left;} .col-sm-3{width:25%;} } table{background-color:transparent;} th{text-align:left;} .table{width:100%;max-width:100%;margin-bottom:25px;} .table > thead > tr > th,.table > tbody > tr > td{padding:12px 10px;line-height:1.42857143;vertical-align:middle;border-bottom:1px solid #edf0f2;} .table > tbody > tr > td.cell-actions{padding-top:6px;padding-bottom:6px;} .table > tbody > tr > td.cell-actions:last-child{text-align:right;white-space:nowrap;} .table > thead > tr > th{padding:16px 10px;vertical-align:bottom;border-bottom:1px solid #edeff2;color:#9da2a6;font-size:13px;font-weight:300;} .table > colgroup + thead > tr:first-child > th{border-top:0;} @media (max-width: 767px){ .table-checkbox > tbody > tr{padding-left:40px;} } .form-control{display:block;width:100%;height:50px;padding:8px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #dcdee0;border-radius:3px;-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;} .form-control:focus{border-color:#1e88e5;outline:0;} .form-control::-moz-placeholder{color:#999;opacity:1;} .form-control:-ms-input-placeholder{color:#999;} .form-control::-webkit-input-placeholder{color:#999;} .checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px;} .checkbox + .checkbox{margin-top:-5px;} .input-xs{height:36px;padding:5px 5px;font-size:14px;line-height:1.5;border-radius:3px;} .btn{display:inline-block;min-width:100px;padding:12px 24px;margin-bottom:0;font-size:15px;font-weight:bold;line-height:24px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:3px;} @media (max-width: 991px){ .btn{min-width:86px;} } .btn:focus,.btn:active:focus{outline:none;} .btn:hover,.btn:focus{text-decoration:none;} .btn:active{background-image:none;outline:0;} .btn-link{color:#1e88e5;} .btn-link,.btn-link:active{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;} .btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;} .btn-link:hover,.btn-link:focus{color:#1e88e5;background-color:transparent;} .btn-sm.btn-link{padding-left:8px;padding-right:8px;} .btn i{margin-right:16px;font-size:24px;vertical-align:bottom;} .btn-icon{min-width:0;padding-left:12px;padding-right:12px;} .btn-icon.btn-sm{line-height:24px;} .btn-icon.btn-sm{padding:9px;font-size:19px;} .btn.btn-icon i{float:none;display:block;height:24px;width:24px;margin:0 auto;font-size:24px;} .btn.btn-icon i:before{line-height:24px;} .btn-icon.btn-sm > i{font-size:19px;} .btn.btn-icon.btn-link{color:#616366;} .btn.btn-icon.btn-link:hover,.btn.btn-icon.btn-link:active{color:#1e88e5;} .nav{padding-left:0;margin-bottom:0;list-style:none;} .nav > li{position:relative;display:block;} .nav-tabs{margin:0 -16px;border-bottom:1px solid #edf0f2;white-space:nowrap;} .nav-tabs > li{display:inline-block;} .nav-tabs > li > span{position:relative;padding:14px 2px;margin:0 14px;color:#616366;line-height:20px;-webkit-transition:color ease-in .15s;transition:color ease-in .15s;} .nav-tabs > li > span:after{position:absolute;bottom:0;left:50%;display:block;content:"";height:2px;width:0;-webkit-transition:ease-in all .15s;transition:ease-in all .15s;} .nav-tabs > li.active > span{color:#1e88e5;cursor:default;} .nav-tabs > li.active > span:after{width:100%;margin-left:-50%;background-color:#1e88e5;} @media (max-width: 767px){ .nav-tabs{margin:0 -12px;} } @media (min-width: 768px){ .navbar{border-radius:4px;} } @media (min-width: 768px){ .navbar-header{float:left;} } .navbar-brand{height:58px;padding:0;margin:-6px 0 -6px;font-size:18px;line-height:20px;} .navbar-brand:hover,.navbar-brand:focus{text-decoration:none;} @media (min-width: 768px){ .navbar-brand{float:left;} } .navbar-toggle:focus{outline:0;} .navbar-toggle .icon-bar{display:block;width:24px;height:2px;border-radius:1px;} .navbar-toggle i{padding:4px 0;} .navbar-toggle .icon-bar + .icon-bar{margin-top:5px;} @media (min-width: 768px){ .navbar-toggle{display:none;} } .navbar-nav{margin:7.5px -15px;} @media (min-width: 768px){ .navbar-nav{float:left;margin:0;} .navbar-nav > li{float:left;} } .label{display:inline-block;padding:4px 6px;font-size:11px;font-weight:300;line-height:11px;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:2px;} .label:empty{display:none;} .label-primary{background-color:#1e88e5;} .status{display:inline-block;white-space:nowrap;} .status:before{display:inline-block;content:"";height:8px;width:8px;margin:-6px 6px 0 0;vertical-align:middle;-webkit-border-radius:4px;border-radius:4px;} .status-success{color:#43A047;} .status-success:before{background-color:#43A047;} .panel{position:relative;display:block;margin-bottom:20px;background-color:#fff;border:1px solid #e3e5e8;-webkit-border-radius:3px;border-radius:3px;text-align:left;} .container:before,.container:after,.row:before,.row:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after{display:table;content:" ";} .container:after,.row:after,.nav:after,.navbar:after,.navbar-header:after{clear:both;} .flag{display:inline-block;height:36px;width:54px;margin-right:10px;vertical-align:middle;-webkit-border-radius:3px;border-radius:3px;} .flag-sm{display:inline-block;height:18px;width:27px;-webkit-border-radius:3px;border-radius:3px;} .flag-england-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_gb.png);} .flag-france-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_fr.png);} .flag-germany-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_de.png);} .flag-netherlands-sm{background-image:url(https://www.vultr.com/dist/img/flags/flagsm_nl.png);} .flag-xs{display:inline-block;height:13px;width:16px;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;} .flag-germany-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_de.png);} .flag-singapore-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_sg.png);} .flag-usa-xs{background-image:url(https://www.vultr.com/dist/img/flags/flagxs_us.png);} .zmdi{display:inline-block;font:normal normal normal 14px/1 'Material-Design-Iconic-Font';font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .zmdi-card:before{content:'\f129';} .zmdi-email:before{content:'\f15a';} .zmdi-money-box:before{content:'\f198';} .zmdi-more:before{content:'\f19c';} .zmdi-power:before{content:'\f1af';} .zmdi-storage:before{content:'\f1d2';} .zmdi-notifications:before{content:'\f1fe';} .zmdi-account-o:before{content:'\f206';} .zmdi-plus:before{content:'\f278';} .zmdi-chevron-left:before{content:'\f2fa';} .zmdi-chevron-right:before{content:'\f2fb';} .zmdi-play:before{content:'\f3aa';} .zmdi-card:before{content:'\f129';} .zmdi-email:before{content:'\f15a';} .zmdi-money-box:before{content:'\f198';} .zmdi-more:before{content:'\f19c';} .zmdi-power:before{content:'\f1af';} .zmdi-storage:before{content:'\f1d2';} .zmdi-notifications:before{content:'\f1fe';} .zmdi-account-o:before{content:'\f206';} .zmdi-plus:before{content:'\f278';} .zmdi-chevron-left:before{content:'\f2fa';} .zmdi-chevron-right:before{content:'\f2fb';} .zmdi-play:before{content:'\f3aa';} .icon{display:inline-block;color:#1e88e5;font-family:'icons';font-size:24px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .icon-xs{height:18px;width:18px;font-size:18px;} .icon-os{color:#1e88e5;} .icon-debian:before{content:"\e90b";} .icon-centos:before{content:"\e90d";} .icon-ubuntu:before{content:"\e90e";} .icon-windows:before{content:"\e90f";} .icon-coreos:before{content:"\e92e";} .icon-freebsd:before{content:"\e92f";} .icon-fedora:before{content:"\e93b";} .icon-openbsd:before{content:"\e942";} /*! CSS Used from: https://www.vultr.com/dist/css/main.css?v=401 */ a{-webkit-transition:color ease-in .15s;-moz-transition:color ease-in .15s;-ms-transition:color ease-in .15s;-o-transition:color ease-in .15s;transition:color ease-in .15s;} .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;} @media (max-width: 991px){ .container{padding-left:24px;padding-right:24px;} } @media (max-width: 767px){ .container{padding-left:20px;padding-right:20px;} } .navbar-brand{height:58px;width:167px;background:url(https://www.vultr.com/dist/img/logo.svg) no-repeat 0 0;background-size:cover;} @media (max-width: 767px){ .navbar-header .navbar-brand{display:inline-block;float:none;height:52px;width:152px;} .navbar-brand{margin:-3px 0 -11px;} } .navbar-toggle{position:absolute;z-index:10;left:10px;} .navbar-toggle .icon-bar{background-color:#fff;} @media (min-width: 767px){ .navbar-container{float:right;} } @media (max-width: 767px){ .navbar-container{position:fixed;left:0;top:0;height:100%;width:100%;padding-top:25px;background-color:transparent;-webkit-transition:linear background .15s;transition:linear background .15s;visibility:hidden;overflow-y:auto;} } .page-banner .container{height:100%;position:relative;z-index:999;} .banner-image .image{display:inline-block;} .packages{padding:32px 0 5px 0;} .package{position:relative;display:block;margin:0 0 20px 0;border:1px solid #e6e9eb;-webkit-border-radius:4px;border-radius:4px;text-align:center;} @media (max-width: 379px){ .packages .col-xs-6{width:100%;} } .package-header{padding:22px 20px 26px;border-bottom:1px solid #e6e9eb;} .package-title{margin:0 0 10px 0;font-size:15px;font-weight:bold;} .package-price{display:block;color:#1e88e5;font-size:33px;font-weight:500;line-height:40px;} .package-price .cycle{font-size:20px;font-weight:300;} .package-hourly{display:block;color:#8a9399;font-size:16px;line-height:15px;} .package-body{padding:24px;} .package-body ul{margin:0;padding:0;list-style:none;} .package-body ul > li{margin:0 0 4px 0;color:#616366;} .package-body ul > li:last-child{margin:0;} @media (max-width: 991px){ .package-body{padding:24px 10px;} } .package,.package:after{-webkit-transition:all ease-in .3s;-moz-transition:all ease-in .3s;-ms-transition:all ease-in .3s;-o-transition:all ease-in .3s;transition:all ease-in .3s;} .table{font-size:14px;} .table small{padding-top:4px;display:block;} .table b{color:#2b3033;} .table > thead > tr > th:first-child,.table > tbody > tr > td:first-child{padding-left:5px;} .table > thead > tr > th:last-child,.table > tbody > tr > td:last-child{padding-right:5px;} .table .cell-actions .btn > i{font-size:24px;} .browser{position:relative;z-index:2;padding:36px 10px 10px 10px;margin:0 auto;background-color:#39444d;border-radius:6px;overflow:hidden;} .browser-xlg{height:634px;} .browser-header{position:absolute;top:0;left:0;height:36px;width:100%;padding:8px 35px 8px 55px;} .browser-buttons{position:absolute;left:0;top:0;float:left;padding:6px 10px;} .browser-buttons span{display:inline-block;height:8px;width:8px;margin:0 5px 0 0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .browser-buttons span:nth-child(1){background-color:#d74645;} .browser-buttons span:nth-child(2){background-color:#d7c045;} .browser-buttons span:nth-child(3){background-color:#43ab9b;} .browser-bar{width:100%;height:20px;background-color:#2d363d;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} .browser-menu{position:absolute;right:0;top:0;padding:14px 10px;} .browser-menu span{display:block;height:1px;width:16px;margin:0 0 3px 0;background-color:#2d363d;} .browser-body{position:relative;height:100%;width:100%;background-color:#fff;overflow:hidden;} .phone{background-color:#333d45;} .phone-xlg{height:445px;width:215px;padding:50px 10px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;} .phone-header{position:absolute;top:0;left:0;height:50px;width:100%;} .phone-body{position:relative;height:100%;width:100%;background-color:#fff;overflow:hidden;} .phone-speaker{height:3px;width:40px;margin:23px auto;background-color:#22292e;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} .phone-footer{position:absolute;bottom:0;left:0;height:50px;width:100%;} .phone-btn{height:34px;width:34px;margin:8px auto;background-color:#22292e;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;} @media (max-width: 1199px){ .phone-xlg{height:405px;width:200px;} } .server{position:relative;height:112px;width:90px;background:url(https://www.vultr.com/dist/img/section/server.svg);} .row > div:focus{outline:0;} /*! CSS Used from: https://www.vultr.com/dist/css/panel.css?v=401 */ .responsive-image .browser{width:86%;-webkit-box-shadow:0 10px 60px -10px rgba(37,45,51, .5);box-shadow:0 10px 60px -10px rgba(37,45,51, .5);} .responsive-image .phone{-webkit-box-shadow:0 10px 70px -10px rgba(37,45,51, .5);box-shadow:0 10px 70px -10px rgba(37,45,51, .5);} .responsive-image .play:after,.responsive-image .browser:after,.responsive-image .phone:after{display:block;content:"";position:absolute;right:0;top:0;bottom:0;z-index:999;width:50%;background-color:rgba(0,0,0, 0.05);} .image-lines{position:absolute;top:100px;left:-80px;height:54px;width:300px;background:url(https://www.vultr.com/dist/img/section/lines.svg);} .image-lines-right{left:auto;right:-84px;} @media (max-width: 1199px){ .page-banner-home .responsive-image .phone{left:-30px;} } @media (max-width: 991px){ .page-banner-home .responsive-image .phone{display:none;left:-20px;} .responsive-image{margin:0 -24px;} .responsive-image .browser:not(.mobile-size){min-width:758px;} } .responsive-image{position:relative;} .responsive-image .phone{position:absolute;left:-20px;bottom:-19px;z-index:3;overflow:hidden;} .play{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1001;cursor:pointer;background:#026FCE;background:linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-ms-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-moz-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-o-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-webkit-linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:linear-gradient(45deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out;} .animated .play{opacity:0;visibility:hidden;} .play-btn{position:absolute;top:50%;left:50%;right:0;display:inline-block;height:52px;width:52px;margin:-26px 0 0 -26px;border:2px solid rgba(196, 227, 255, 0.8);color:rgba(196, 227, 255, 0.8);font-size:24px;line-height:50px;text-align:center;-webkit-border-radius:100%;border-radius:100%;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out;} .play-btn > i{margin-left:2px;} .play:hover .play-btn{color:#fff;border-color:#fff;} .browser .play-btn{display:inline-block;height:100px;width:100px;margin:-50px 0 0 -50px;font-size:42px;line-height:98px;} .responsive-image .browser{-webkit-transition:all ease 0.5s;} .mobile-size .mobile-size-hidden{display:none!important;} .control-panel{position:absolute;height:100%;width:100%;color:#616366;font-size:11px;line-height:15px;text-align:left;visibility:visible!important;} .control-panel p{margin-bottom:10px;} .cp-navbar{position:absolute;top:0;left:0;height:100%;width:68px;padding:24px 0;overflow:hidden;} .cp-navbar > *{position:relative;z-index:1;} .cp-navbar:after{position:absolute;top:0;left:0;display:block;content:"";height:100%;width:350px;background:#026FCE;background:linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-ms-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-moz-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-o-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:-webkit-linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);background-image:linear-gradient(80deg, #0B4182 1%, #1e88e5 64%, #40BAF5 97%);} .cp-navbar .navbar-header{float:none;margin-bottom:30px;text-align:center;} .cp-navbar .navbar-brand{display:inline-block;float:none;height:32px;width:32px;background-image:url(https://www.vultr.com/dist/img/section/bird2.svg);background-size:32px auto;font-size:0;line-height:32px;text-indent:-9999px;} .cp-navbar .navbar-nav{display:block;width:68px;margin:0;padding:0;list-style:none;} .cp-navbar .navbar-nav > li{float:none;margin-bottom:12px;} .cp-navbar .navbar-nav > li > span{display:block;padding:6px 0;color:rgba(196, 227, 255, 0.8);font-size:10px;font-weight:bold;text-align:center;line-height:16px;} .cp-navbar .navbar-nav > li > span > i{position:relative;display:block;margin-bottom:5px;font-size:17px;} .desktop-size .navbar-toggle,.desktop-size .notification-toggle,.desktop-size .cp-navbar .navbar-logout{display:none;} .mobile-size .cp-navbar:after{width:120%;} .mobile-size .cp-navbar{height:38px;width:100%;padding:4px 0;} .mobile-size .cp-navbar .navbar-container{display:none;} .mobile-size .cp-navbar .navbar{padding:0 10px;} .mobile-size .cp-navbar .navbar-header{padding-left:18px;margin:0;} .mobile-size .cp-navbar .navbar-brand{margin-top:-3px;margin-bottom:-3px;} .mobile-size .cp-navbar .navbar-toggle{display:block;position:absolute;top:6px;left:6px;z-index:3;padding:5px;} .mobile-size .cp-navbar .navbar-toggle .icon-bar{height:1px;width:14px;background-color:#fff;} .mobile-size .cp-navbar .navbar-toggle .icon-bar + .icon-bar{margin-top:3px;} .mobile-size .cp-navbar .navbar-header .notification-toggle{float:right;padding:9px 5px;} .mobile-size .cp-navbar .navbar-header .notification-toggle > i{color:#fff;font-size:15px;} .cp-content .row{margin-left:-5px;margin-right:-5px;} .cp-content [class*="col-"]{padding-right:5px;padding-left:5px;} .cp-content .h6{display:block;margin:0 0 20px 0;} .cp-content .panel{padding:14px;margin-bottom:12px;-webkit-border-radius:2px;border-radius:2px;} .cp-content .tabs-container{margin-bottom:20px;} .cp-content .tabs-container > .btn{display:none;} .cp-content .nav-tabs{margin:0 -8px;border-bottom:none;} .cp-content .nav-tabs > li > span{display:inline-block;padding:10px 1px;margin:0 8px;line-height:10px;} .mobile-size .cp-content{margin:38px 0 0 0;} .mobile-size .cp-content .h6{margin-top:6px;font-size:12px;line-height:16px;} .mobile-size .step-list > li:nth-child(2) .h6{margin-bottom:10px;} .cp-server-list{opacity:0;visibility:hidden;} .no-data{width:200px;padding-top:100px;margin:0 auto;text-align:center;} .no-data .server{display:inline-block;margin-bottom:10px;} .mobile-size .no-data{width:150px;padding-top:40px;} .mobile-size .no-data .server{height:59px;width:47px;} .cp-servers-table{position:absolute;top:20px;opacity:0;visibility:hidden;} .desktop-size .cp-servers-table{width:700px;} .desktop-size .cp-servers-table-mobile{display:none;} .cp-server-deploying{position:absolute;left:0;right:0;top:0;bottom:0;z-index:999;background:#fff;height:100%;margin-left:68px;opacity:0;visibility:hidden;} .mobile-size .cp-server-deploying{margin-left:0;} .cp-content .step-list{padding:10px 0 24px 0;margin:0;list-style:none;} .cp-content .step-list > li{position:relative;padding:0 0 0 40px;margin:24px 0 0 0;} .cp-content .step-list > li:after,.cp-content .step-list > li:before{display:table;content:"";clear:both;} .cp-content .step-list li > .step{display:inline-block;height:26px;width:26px;border:1px solid #D2D8DC;color:#8a9399;font-size:11px;font-weight:bold;text-align:center;line-height:26px;-webkit-border-radius:26px;border-radius:26px;} .desktop-size .cp-content .step-list li > .step{position:absolute;top:-3px;left:0;} .mobile-size .cp-content .step-list > li{padding:0;margin-top:14px;} .mobile-size .cp-content .step-list li > .step{float:left;} .mobile-size .cp-content .step-list li > .h6{margin-left:36px;white-space:nowrap;} .cp-content .panel .select-icon{position:relative;font-size:28px;} .cp-content .panel .select-icon:before{color:#1e88e5;} .cp-content .panel .select-icon span,.cp-content .panel .select-icon span:before{position:absolute;top:0;left:0;display:block;height:100%;width:102%;background:#fff;opacity:0;} .cp-content .panel .select-icon span:before{left:50%;top:50%;content:"\f26b";height:26px;width:26px;margin:-13px 0 0 -13px;background:#1e88e5;-webkit-border-radius:40px;border-radius:40px;color:#fff;font-size:14px;font-family:'Material-Design-Iconic-Font';text-align:center;line-height:26px;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);} .cp-content .select-name{display:block;margin:0;color:#363b40;font-size:11px;font-weight:bold;line-height:11px;} .cp-content .select-name small{display:block;margin-top:4px;color:#919699;font-size:8px;font-weight:300;text-transform:uppercase;} .cp-content .select-header{position:relative;padding-left:44px;} .cp-content .select-header:after,.cp-content .select-header:before{display:table;content:"";clear:both;} .cp-content .select-header .select-icon{position:absolute;top:50%;left:0;} .cp-content .select-header .select-icon.icon{margin-top:-15px;} .cp-content .select-header .select-icon.flag{margin-top:-10px;} .cp-content .select-options{position:absolute;top:-1px;left:-1px;right:-1px;z-index:1;display:none;width:101%;padding:55px 0 14px 0;margin:0;-webkit-border-radius:3px;border-radius:3px;list-style:none;} .cp-content .select-options > li{padding:2px 14px;color:#616366;font-size:10px;} .cp-content .packages{padding:0;} .cp-content .package{margin-bottom:12px;-webkit-border-radius:2px;border-radius:2px;} .cp-content .package-header{padding:12px;} .cp-content .package-title{margin-bottom:4px;font-size:11px;line-height:16px;} .cp-content .package-price{font-size:24px;font-weight:300;line-height:24px;} .cp-content .package-price .cycle{font-size:12px;} .cp-content .package-body ul > li{margin-bottom:2px;} .cp-content .package-hourly{font-size:10px;line-height:10px;} .cp-content .package-body{padding:12px;} .cp-content .form-control{height:28px;font-size:11px;-webkit-border-radius:1px;border-radius:1px;} .cp-content .checkbox-style{position:relative;display:inline-block;height:12px;width:12px;margin-top:-6px;margin-right:6px;background:#fff;border:2px solid #cacdcf;border-radius:2px;-webkit-transition:all .15s ease;transition:all .15s ease;cursor:pointer;vertical-align:middle;} .cp-content .checkbox-style:before{position:absolute;top:-2px;left:-2px;display:block;content:"\f26b";height:12px;width:12px;opacity:0;color:#fff;font-size:12px;font-family:'Material-Design-Iconic-Font';text-align:center;line-height:12px;-webkit-transition:0.15s ease-in-out;transition:0.15s ease-in-out;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);} .cp-content .checkbox{white-space:nowrap;} .cp-content .label{padding:3px 4px;font-size:8px;-webkit-border-radius:1px;border-radius:1px;} .cp-deploy-summary{position:absolute;right:0;left:0;z-index:9999;padding:14px 0;background:#fff;} .cp-deploy-summary:after,.cp-deploy-summary:before{display:table;content:"";clear:both;} .cp-summary-price{display:inline-block;padding:8px 0;font-size:13px;font-weight:bold;} .cp-summary-price span{color:#1e88e5;} .cp-summary-btn{float:right;display:block;padding:8px 14px;background:#1e88e5;color:#fff;font-weight:bold;-webkit-border-radius:2px;border-radius:2px;} .desktop-size .cp-deploy-summary{bottom:0;margin-left:68px;-webkit-box-shadow:0 0 15px rgba(0,0,0, 0.1);box-shadow:0 0 15px rgba(0,0,0, 0.1);} .desktop-size .cp-deploy-server .cp-content .cp-container > .cp-deploy-summary{display:none;} .mobile-size .cp-deploy-server > .cp-deploy-summary{display:none;} .mobile-size .cp-summary-price{padding-top:0;padding-bottom:15px;} .mobile-size .cp-deploy-summary{border-top:1px solid #edf0f2;text-align:center;} .mobile-size .cp-summary-btn{display:block;width:100%;} .cp-header{margin-bottom:0px;border-bottom:1px solid #edf0f2;text-align:left;} .cp-header .h1{display:inline-block;margin:30px 0 18px;font-size:17px;line-height:20px;} .cp-header .tabs-container{margin:0 0 -1px 0;} .cp-header-hero{text-align:center;} .cp-header-hero .h1{margin:38px 0 32px;font-size:20px;line-height:24px;} .mobile-size .cp-header .h1{margin:10px 0 0;font-size:14px;font-weight:500;} .mobile-size .cp-header-hero .h1{margin:15px 0 10px;} .cp-deploy-btn{position:absolute;height:36px;width:36px;background:#1e88e5;color:#fff;font-size:18px;text-align:center;line-height:36px;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 3px 10px rgba(0,0,0, 0.2);box-shadow:0 3px 10px rgba(0,0,0, 0.2);} .desktop-size .control-panel .cp-deploy-btn{bottom:-15px;right:20px;-webkit-animation:all ease .4s 0.5s;animation:all ease .4s .5s;} .mobile-size .control-panel .cp-deploy-btn{bottom:-42px;right:10px;z-index:9999;-webkit-animation:all ease .4s 0.5s;animation:all ease .4s .5s;} .cp-content{position:absolute;left:0;right:0;top:0;bottom:0;margin-left:68px;} .cp-container{position:relative;max-width:776px;margin:0 auto;padding:0 20px;} .mobile-size .cp-container{padding:0 10px;} .mobile-size .cp-content .col-sm-3{width:100%;} .cp-cursor{position:absolute;z-index:1000;right:300px;top:200px;width:28px;height:31px;} .desktop-size .cp-cursor:before{position:absolute;z-index:1;display:block;content:"";width:28px;height:31px;background:url(https://www.vultr.com/dist/img/panel/cursor-pointer@2x.png);background-size:cover;} .animated .cp-cursor:after{position:absolute;top:-5px;left:0;z-index:-1;height:40px;width:40px;display:block;content:"";background:#1e88e5;margin:-10px;-webkit-border-radius:100%;border-radius:100%;opacity:1;-ms-filter:none;filter:none;-webkit-transform:scale(0);transform:scale(0);} .mobile-size .cp-cursor{right:100px;top:100px;} @media (max-width: 1199px){ .cp-cursor{right:210px;} } @media (max-width: 991px){ .cp-cursor{right:220px;} } .cp-deploy-server{position:relative;z-index:998;height:100%;opacity:0;} .mobile-size .cp-deploy-server .cp-content,.desktop-size .cp-deploy-server .cp-content{z-index:9999;height:1400px;background:#fff;} .mobile-size .cp-deploy-server .cp-content{height:2960px;} .cp-servers-table{padding-top:20px;} .cp-servers-table .table{font-size:11px;} .cp-servers-table .table thead th{padding:6px 10px;} .cp-servers-table .table > thead > tr > th,.cp-servers-table .table > tbody > tr > td{padding:6px 7px;} .cp-servers-table .table .flag-xs{margin-right:4px;margin-bottom:-3px;} .mobile-size .cp-servers-table{top:0;left:0;right:0;} .mobile-size .cp-servers-table .table thead{display:none;} .mobile-size .cp-servers-table .cp-table-servers > tbody > tr{position:relative;padding-left:20px;} .mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-title{padding-right:30px;} .mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-os{display:none;} .mobile-size .cp-servers-table .cp-table-servers > tbody > tr > .cp-cell-checkbox{display:none;} .mobile-size .cp-servers-table .table,.mobile-size .cp-servers-table .table tbody,.mobile-size .cp-servers-table .table tr,.mobile-size .cp-servers-table .table td{display:block;} .mobile-size .cp-servers-table .table td{border:none;padding-top:3px;padding-bottom:3px;} .mobile-size .cp-servers-table{display:none;} .mobile-size .cp-servers-table-mobile{position:absolute;top:20px;opacity:0;visibility:hidden;} .mobile-size .cp-cell-costs,.mobile-size .cp-cell-status{float:left;width:50%;} .mobile-size .cp-cell-status{text-align:right;margin-bottom:12px;} .cp-table-label{display:none;} .cp-cell-location{white-space:nowrap;} .cp-progress{position:absolute;left:50%;top:50%;height:12px;width:160px;margin:-6px 0 0 -80px;border:1px solid #e6e9eb;-webkit-border-radius:30px;border-radius:30px;} .cp-progress-bar{position:absolute;top:2px;left:2px;height:6px;width:0;background:#1e88e5;-webkit-border-radius:30px;border-radius:30px;} .animated .cp-cursor:after{-webkit-animation:cursorTap .4s .5s, cursorTap .4s 1.9s, cursorTap .4s 3s, cursorTap .4s 3.8s, cursorTap .4s 5s, cursorTap .4s 6.2s, cursorTap .4s 7.4s, cursorTap .4s 9.8s;animation:cursorTap .4s .5s, cursorTap .4s 1.9s, cursorTap .4s 3s, cursorTap .4s 3.8s, cursorTap .4s 5s, cursorTap .4s 6.2s, cursorTap .4s 7.4s, cursorTap .4s 9.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .desktop-size .animated .cp-deploy-btn{-webkit-animation:all ease .25s .5s;animation:all ease .25s .5s;} .desktop-size .animated .cp-cursor{-webkit-animation:cursorMove .5s, cursorMove2 .6s 1.5s, cursorMove3 .8s 2.3s, cursorMove4 .3s 3.5s, cursorMove5 .4s 4s, cursorMove6 .4s 5.8s, cursorMove7 1s 6.5s, cursorMove8 .8s 9.1s;animation:cursorMove .5s, cursorMove2 .6s 1.5s, cursorMove3 .8s 2.3s, cursorMove4 .3s 3.5s, cursorMove5 .4s 4s, cursorMove6 .4s 5.8s, cursorMove7 1s 6.5s, cursorMove8 .8s 9.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .desktop-size .animated .cp-deploy-btn{-webkit-animation-name:click;animation-name:click;} .animated .cp-server-list{-webkit-animation:show 0s 0s, hide .5s .7s, show .5s 12s;animation:show 0s 0s, hide .5s .7s, show .5s 12s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-server-list .no-data{-webkit-animation:hide 0s 1s;animation:hide 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-servers-table{-webkit-animation:show 0s 1s;animation:show 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-servers-table-mobile{-webkit-animation:show 0s 1s;animation:show 0s 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-deploy-server{-webkit-animation:show .5s .9s, hide 0s 11s;animation:show .5s .9s, hide 0s 11s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .desktop-size .animated .cp-deploy-server .cp-content{-webkit-animation:contentMove 1s 2.3s, contentMove2 1s 4s, contentMove3 .8s 5.2s, contentMove4 1s 6.5s;animation:contentMove 1s 2.3s, contentMove2 1s 4s, contentMove3 .8s 5.2s, contentMove4 1s 6.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-location-click,.animated .cp-location-click .select-icon span,.animated .cp-location-click .select-icon span:before{-webkit-transition:all ease .15s 2s;transition:all ease .15s 2s;} .animated .cp-location-click{border-color:#1e88e5;} .animated .cp-location-click .select-icon span{opacity:1;} .animated .cp-location-click .select-icon span:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .animated .cp-os-click{-webkit-transition:all ease .15s 3.1s;transition:all ease .15s 3.1s;} .animated .cp-os-click{border-color:#1e88e5;} .animated .cp-os-click .select-header{position:relative;z-index:2;} .cp-os-click .select-options{opacity:0;display:block;background:#fff;border:1px solid #1e88e5;-webkit-box-shadow:0 0 40px -10px rgba(37,45,51, .5);box-shadow:0 0 40px -10px rgba(37,45,51, .5);} .animated .cp-os-click .select-options{-webkit-animation:show .15s 3.1s, hide .15s 3.9s;animation:show .15s 3.1s, hide .15s 3.9s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-os-click .select-icon span,.animated .cp-os-click .select-icon span:before{-webkit-transition:all ease .15s 3.9s;transition:all ease .15s 3.9s;} .animated .cp-os-click .select-options > li:first-child{-webkit-transition:all ease .15s 3.5s;transition:all ease .15s 3.5s;} .animated .cp-os-click .select-options > li:first-child{color:#1e88e5;} .animated .cp-os-click .select-icon span{opacity:1;} .animated .cp-os-click .select-icon span:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .animated .cp-package-click{-webkit-transition:all ease .15s 5s;transition:all ease .15s 5s;} .animated .cp-package-click{border-color:#1e88e5;} .animated .cp-checkbox-click,.animated .cp-checkbox-click:before{-webkit-transition:all ease .15s 6.2s;transition:all ease .15s 6.2s;} .animated .cp-checkbox-click:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .animated .cp-checkbox-click{border-color:#1e88e5;background-color:#1e88e5;} .cp-instance-input{position:relative;color:#999;overflow:hidden;border:1px solid #dcdee0;} .cp-instance-input .form-control{white-space:nowrap;border-width:0px;} .cp-instance-name{position:absolute;top:7px;left:10px;display:block;width:160px;background:#fff;color:#616366;overflow:hidden;} .cp-instance-name > span{position:absolute;top:0;right:0;display:block;width:200px;height:100%;background:#fff;} .animated .cp-instance-input .form-control{-webkit-animation:borderColor .15s 7.5s;animation:borderColor .15s 7.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-instance-name > span{-webkit-animation:typing 1.5s steps(36, end) 7.6s;animation:typing 1.5s steps(36, end) 7.6s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-server-deploying{-webkit-animation:show .5s 10s, hide .5s 12s;animation:show .5s 10s, hide .5s 12s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} .animated .cp-progress-bar{-webkit-animation:load 2s 10s;animation:load 2s 10s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;} /*! CSS Used from: https://www.vultr.com/_css/global.css?v=401 */ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape){ .container{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);} .col-sm-3{width:50%!important;} } /*! CSS Used keyframes */ @keyframes cursorTap{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0);}100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}} @keyframes cursorMove{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}100%{-webkit-transform:translate3d(200px, -100px, 0);transform:translate3d(200px, -100px, 0);}} @keyframes cursorMove2{0%{-webkit-transform:translate3d(200px, -100px, 0);transform:translate3d(200px, -100px, 0);}100%{-webkit-transform:translate3d(-70px, 90px, 0);transform:translate3d(-70px, 90px, 0);}} @keyframes cursorMove3{0%{-webkit-transform:translate3d(-70px, 90px, 0);transform:translate3d(-70px, 90px, 0);}100%{-webkit-transform:translate3d(-370px, 70px, 0);transform:translate3d(-370px, 70px, 0);}} @keyframes cursorMove4{0%{-webkit-transform:translate3d(-370px, 70px, 0);transform:translate3d(-370px, 70px, 0);}100%{-webkit-transform:translate3d(-420px, 90px, 0);transform:translate3d(-420px, 90px, 0);}} @keyframes cursorMove5{0%{-webkit-transform:translate3d(-420px, 90px, 0);transform:translate3d(-420px, 90px, 0);}100%{-webkit-transform:translate3d(-200px, -20px, 0);transform:translate3d(-200px, -20px, 0);}} @keyframes cursorMove6{0%{-webkit-transform:translate3d(-200px, -20px, 0);transform:translate3d(-200px, -20px, 0);}100%{-webkit-transform:translate3d(-460px, 40px, 0);transform:translate3d(-460px, 40px, 0);}} @keyframes cursorMove7{0%{-webkit-transform:translate3d(-460px, 40px, 0);transform:translate3d(-460px, 40px, 0);}100%{-webkit-transform:translate3d(-300px, 280px, 0);transform:translate3d(-300px, 280px, 0);}} @keyframes cursorMove8{0%{-webkit-transform:translate3d(-300px, 280px, 0);transform:translate3d(-300px, 280px, 0);}100%{-webkit-transform:translate3d(150px, 360px, 0);transform:translate3d(150px, 360px, 0);}} @-webkit-keyframes click{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}50%{background:#3ba3ff;-webkit-transform:scale3d(.8, .8, .8);transform:scale3d(.8, .8, .8);}100%{background:#1e88e5;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}} @keyframes click{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}50%{background:#3ba3ff;-webkit-transform:scale3d(.8, .8, .8);transform:scale3d(.8, .8, .8);}100%{background:#1e88e5;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}} @-webkit-keyframes show{0%{opacity:0;visibility:hidden;}100%{opacity:1;visibility:visible;}} @keyframes show{0%{opacity:0;visibility:hidden;}100%{opacity:1;visibility:visible;}} @-webkit-keyframes hide{0%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}} @keyframes hide{0%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}} @keyframes contentMove{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}100%{-webkit-transform:translate3d(0, -200px, 0);transform:translate3d(0, -200px, 0);}} @keyframes contentMove2{0%{-webkit-transform:translate3d(0, -200px, 0);transform:translate3d(0, -200px, 0);}100%{-webkit-transform:translate3d(0, -600px, 0);transform:translate3d(0, -600px, 0);}} @keyframes contentMove3{0%{-webkit-transform:translate3d(0, -600px, 0);transform:translate3d(0, -600px, 0);}100%{-webkit-transform:translate3d(0, -980px, 0);transform:translate3d(0, -980px, 0);}} @keyframes contentMove4{0%{-webkit-transform:translate3d(0, -980px, 0);transform:translate3d(0, -980px, 0);}100%{-webkit-transform:translate3d(0, -1110px, 0);transform:translate3d(0, -1110px, 0);}} @-webkit-keyframes borderColor{from{border-color:#e6e9eb;}to{border-color:#1e88e5;}} @keyframes borderColor{from{border-color:#e6e9eb;}to{border-color:#1e88e5;}} @-webkit-keyframes typing{from{width:200px;}to{width:0;}} @keyframes typing{from{width:200px;}to{width:0;}} @-webkit-keyframes load{0%{width:0;}100%{width:154px;}} @keyframes load{0%{width:0;}100%{width:154px;}} /*! CSS Used fontfaces */ @font-face{font-family:Material-Design-Iconic-Font;src:url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0) format('woff2'),url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format('woff'),url(https://www.vultr.com/dist/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format('truetype');} @font-face{font-family:'icons';src:url(https://www.vultr.com/dist/fonts/icons/icons.eot?v=401);src:url(https://www.vultr.com/dist/fonts/icons/icons.eot?v=401) format('embedded-opentype'), url(https://www.vultr.com/dist/fonts/icons/icons.ttf?v=401) format('truetype'), url(https://www.vultr.com/dist/fonts/icons/icons.woff?v=401) format('woff'), url(https://www.vultr.com/dist/fonts/icons/icons.svg?v=401) format('svg');font-weight:normal;font-style:normal;}

Related: See More


Questions / Comments: