Skip to content
This repository was archived by the owner on Oct 12, 2023. It is now read-only.

Updated from Bootstrap 3 to Bootstrap 4 #4

Open
cdterry87 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated from Bootstrap 3 to Bootstrap 4 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 111 additions & 112 deletions application/views/welcome_message.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,130 @@
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
defined('BASEPATH') or exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Azure App Service</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap.min.css">
<script src="<?php echo base_url();?>/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>/js/modernizr-2.6.2.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/css/jumbotron.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Azure App Service</a>
</div>
</div>
</nav>
<head>
<title>Azure App Service</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo base_url('/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo base_url('/css/jumbotron.css');?>">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Azure App Service</a>
</div>
</div>
</nav>

<div class="jumbotron" style="background-image: url('../../images/STB13_Ken_06.png');">
<div class="container">
<!--Add Video "-->
<!--<div style="float: right">
<iframe width="350px" height ="200px" class="embed-responsive-item" src="https://www.youtube.com/embed/ma6-56SC-20"></iframe>
</div> -->
<div class="jumbotron" style="background-image: url('../../images/STB13_Ken_06.png');">
<div class="container">
<!--Add Video "-->
<!--<div style="float: right">
<iframe width="350px" height ="200px" class="embed-responsive-item" src="https://www.youtube.com/embed/ma6-56SC-20"></iframe>
</div> -->

<h2 class="display-3">Build, deploy and scale applications faster</h2>
<br/>
<p class="lead">
<a class="btn btn-primary btn-lg" href="https://docs.microsoft.com/azure/app-service-web" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
<h1 class="text-center v-center" style="padding-bottom:20px">Get started with App Service on Linux</h1>
</div>
<div class="container">
<div class="row flex text-center">
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="<?php echo base_url();?>/images/overview.png" height="42" width="42" alt="">
<div class="caption">
<h4>Overview</h4>
</div>
<div style="text-align:left">
<ul >
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-intro">What is Web App on Linux</a></li>
<li><a href="https://azure.microsoft.com/pricing/details/app-service/">Pricing</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web">Documentation</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-choosing-deployment-type">Custom container or built-in application stack?</a></li>
</ul>
</div>
<p class="caption">
<a href="https://azure.microsoft.com/try/app-service/" class="btn btn-primary">Try for Free!</a>
</p>
</div>
<h2>Build, deploy and scale applications faster</h2>
<br/>
<p class="lead">
<a class="btn btn-primary btn-lg" href="https://docs.microsoft.com/azure/app-service-web" role="button">Learn more</a>
</p>
</div>
</div>

<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="<?php echo base_url();?>/images/container.png" height="42" width="42" alt="">
<div class="caption">
<h4>Bring your own Docker Container</h4>
</div>
<br/>
<div style="text-align:left">
<ul >
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-using-custom-docker-image">Create web app</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-how-to-create-web-app">Continuous Deployment</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-ssh-support">Enable SSH for custom image</a></li>
</ul>
<div class="container">
<h1 class="text-center v-center" style="padding-bottom:20px">Get started with App Service on Linux</h1>
</div>

<div class="container">
<div class="row flex text-center">
<div class="col-md-3 col-sm-6 hero-feature">
<div class="card">
<img src="<?php echo base_url('/images/overview.png');?>" height="42" width="42" alt="">
<div class="caption">
<h4 class="card-title">Overview</h4>
</div>
<div class="card-text" style="text-align:left">
<ul >
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-intro">What is Web App on Linux</a></li>
<li><a href="https://azure.microsoft.com/pricing/details/app-service/">Pricing</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web">Documentation</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-choosing-deployment-type">Custom container or built-in application stack?</a></li>
</ul>
</div>
<p class="card-link">
<a href="https://azure.microsoft.com/try/app-service/" class="btn btn-primary">Try for Free!</a>
</p>
</div>
<p class="caption">
<a href="https://azure.microsoft.com/overview/webinars/" class="btn btn-primary">WebCast</a>
</p>
</div>
</div>

<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="<?php echo base_url();?>/images/linux-web-app.png" height="42" width="42" alt="">
<div class="caption">
<h4>Use Built-in images</h4>
</div>
<div style="text-align:left">
<ul>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-how-to-create-web-app">Create a web app using built-in image</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-using-dotnetcore">Create .NET Core App</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-using-nodejs-pm2">Create a NodeJS App</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-ruby-get-started">Create a Ruby App</a></li>
</ul>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="card">
<img src="<?php echo base_url('/images/container.png');?>" height="42" width="42" alt="">
<div class="caption">
<h4 class="card-title">Bring your own Docker Container</h4>
</div>
<br/>
<div class="card-text" style="text-align:left">
<ul >
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-using-custom-docker-image">Create web app</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-how-to-create-web-app">Continuous Deployment</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-ssh-support">Enable SSH for custom image</a></li>
</ul>
</div>
<p class="card-link">
<a href="https://azure.microsoft.com/overview/webinars/" class="btn btn-primary">WebCast</a>
</p>
</div>
<p class="caption">
<a href="https://docs.microsoft.com/azure/app-service-web/" class="btn btn-primary">Tutorial</a>
</p>
</div>
</div>

<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="<?php echo base_url();?>/images/github.png" height="42" width="42" alt="">
<div class="caption">
<h4>Samples and Resources</h4>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="card">
<img src="<?php echo base_url('/images/linux-web-app.png');?>" height="42" width="42" alt="">
<div class="caption">
<h4 class="card-title">Use Built-in images</h4>
</div>
<div class="card-text" style="text-align:left">
<ul>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-how-to-create-web-app">Create a web app using built-in image</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/app-service-web/app-service-linux-using-dotnetcore">Create .NET Core App</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-using-nodejs-pm2">Create a NodeJS App</a></li>
<li><a href="https://docs.microsoft.com/azure/app-service-web/app-service-linux-ruby-get-started">Create a Ruby App</a></li>
</ul>
</div>
<p class="card-link">
<a href="https://docs.microsoft.com/azure/app-service-web/" class="btn btn-primary">Tutorial</a>
</p>
</div>
<div style="text-align:left">
<ul>
<li><a href="https://github.com/azure-app-service">Docker image Samples on Github</a></li>
<li><a href="https://channel9.msdn.com/">Channel9 Videos</a></li>
<li><a href="https://github.com/azure/azure-quickstart-templates/">Azure Quickstart Templates</a></li>
<li><a href="https://social.msdn.microsoft.com/forums/azure/en-US/home?forum=windowsazurewebsitespreview">Forums</a></li>
</ul>
</div>
<p class="caption">
<a href="https://feedback.azure.com/forums/169385-web-apps" class="btn btn-primary">UserVoice</a>
</p>
</div>
</div>

</div>
</div>

<hr>
</body>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="card">
<img src="<?php echo base_url('/images/github.png');?>" height="42" width="42" alt="">
<div class="caption">
<h4 class="card-title">Samples and Resources</h4>
</div>
<div class="card-text" style="text-align:left">
<ul>
<li><a href="https://github.com/azure-app-service">Docker image Samples on Github</a></li>
<li><a href="https://channel9.msdn.com/">Channel9 Videos</a></li>
<li><a href="https://github.com/azure/azure-quickstart-templates/">Azure Quickstart Templates</a></li>
<li><a href="https://social.msdn.microsoft.com/forums/azure/en-US/home?forum=windowsazurewebsitespreview">Forums</a></li>
</ul>
</div>
<p class="card-link">
<a href="https://feedback.azure.com/forums/169385-web-apps" class="btn btn-primary">UserVoice</a>
</p>
</div>
</div>
</div>
</div>
<hr>
<script src="<?php echo base_url('/js/jquery.min.js');?>"></script>
<script src="<?php echo base_url('/js/bootstrap.min.js');?>"></script>
<script src="<?php echo base_url('/js/modernizr-2.6.2.js');?>"></script>
</body>
</html>
7 changes: 4 additions & 3 deletions css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 11 additions & 5 deletions css/jumbotron.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,41 @@
display: -webkit-flex;
display: flex;
}
.flex .thumbnail {
.flex .card {
height: 100%;
display: flex;
flex-direction: column;
font-size: 14px;
}
.flex .caption:last-child {
.flex .card img {
margin: 15px auto;
}
.flex .card-link:last-child {
margin-top: auto;
padding: 9px !important; /* overwrite inline style injected by JS */
}
.card .card-title {
font-size: 18px !important;
}
.no-flexbox .hero-feature {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.no-flexbox .flex .thumbnail {
.no-flexbox .flex .card {
height: auto !important;
padding-bottom: 50px;
}
.no-flexbox .flex .caption:last-child {
.no-flexbox .flex .card-link:last-child {
position: absolute;
bottom: 20px;
width: 80%;
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
<<<<<<< HEAD
<<<<<<< HEAD
Expand Down
12 changes: 6 additions & 6 deletions js/bootstrap.min.js
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 4 additions & 5 deletions js/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.