How to import CDN correctly, what's wrong with my code with including CSS and jQuery CDN?

up vote
0
down vote

favorite

I think I import my CSS and jQuery correctly but the results shown wasn't what I am looking for.

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link ref="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

//all the css from the template, stackoverflow says my question is full of codes so I remove it

</style>



<body>

  <section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

  </section>



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

I get the template from: template

jsfiddle: jsfiddle

Can anyone points out where is the problem in my code, would appreciate it.

The results should look like this
results

but I am getting this
fail result

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

" results shown wasn't what I am looking for". How do we know what you expect if you don't explain the problem in more detail? Please take a few minutes to read How to Ask
– charlietfl
Nov 11 at 12:33

i'll update my question
– Anonymous
Nov 11 at 12:35

it looks simple but I still not sure where's the problem
– Anonymous
Nov 11 at 12:37

You only included the base bootstrap css, but not the additional css included with the template demo. Look at the CSS tab in the template demo
– charlietfl
Nov 11 at 12:39

I included the css as well but I can't post stackoverflow said I am posting too much coding then words
– Anonymous
Nov 11 at 12:40

|
show 3 more comments

up vote
0
down vote

favorite

I think I import my CSS and jQuery correctly but the results shown wasn't what I am looking for.

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link ref="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

//all the css from the template, stackoverflow says my question is full of codes so I remove it

</style>



<body>

  <section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

  </section>



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

I get the template from: template

jsfiddle: jsfiddle

Can anyone points out where is the problem in my code, would appreciate it.

The results should look like this
results

but I am getting this
fail result

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

" results shown wasn't what I am looking for". How do we know what you expect if you don't explain the problem in more detail? Please take a few minutes to read How to Ask
– charlietfl
Nov 11 at 12:33

i'll update my question
– Anonymous
Nov 11 at 12:35

it looks simple but I still not sure where's the problem
– Anonymous
Nov 11 at 12:37

You only included the base bootstrap css, but not the additional css included with the template demo. Look at the CSS tab in the template demo
– charlietfl
Nov 11 at 12:39

I included the css as well but I can't post stackoverflow said I am posting too much coding then words
– Anonymous
Nov 11 at 12:40

|
show 3 more comments

up vote
0
down vote

favorite

I think I import my CSS and jQuery correctly but the results shown wasn't what I am looking for.

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link ref="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

//all the css from the template, stackoverflow says my question is full of codes so I remove it

</style>



<body>

  <section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

  </section>



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

I get the template from: template

jsfiddle: jsfiddle

Can anyone points out where is the problem in my code, would appreciate it.

The results should look like this
results

but I am getting this
fail result

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

I think I import my CSS and jQuery correctly but the results shown wasn't what I am looking for.

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link ref="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

//all the css from the template, stackoverflow says my question is full of codes so I remove it

</style>



<body>

  <section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

  </section>



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

I get the template from: template

jsfiddle: jsfiddle

Can anyone points out where is the problem in my code, would appreciate it.

The results should look like this
results

but I am getting this
fail result

javascript jquery html css cdn

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

edited Nov 11 at 12:36

asked Nov 11 at 12:31

Anonymous

345

asked Nov 11 at 12:31

Anonymous

345

asked Nov 11 at 12:31

Anonymous

345

" results shown wasn't what I am looking for". How do we know what you expect if you don't explain the problem in more detail? Please take a few minutes to read How to Ask
– charlietfl
Nov 11 at 12:33

i'll update my question
– Anonymous
Nov 11 at 12:35

it looks simple but I still not sure where's the problem
– Anonymous
Nov 11 at 12:37

You only included the base bootstrap css, but not the additional css included with the template demo. Look at the CSS tab in the template demo
– charlietfl
Nov 11 at 12:39

I included the css as well but I can't post stackoverflow said I am posting too much coding then words
– Anonymous
Nov 11 at 12:40

|
show 3 more comments

" results shown wasn't what I am looking for". How do we know what you expect if you don't explain the problem in more detail? Please take a few minutes to read How to Ask
– charlietfl
Nov 11 at 12:33

i'll update my question
– Anonymous
Nov 11 at 12:35

it looks simple but I still not sure where's the problem
– Anonymous
Nov 11 at 12:37

You only included the base bootstrap css, but not the additional css included with the template demo. Look at the CSS tab in the template demo
– charlietfl
Nov 11 at 12:39

I included the css as well but I can't post stackoverflow said I am posting too much coding then words
– Anonymous
Nov 11 at 12:40

" results shown wasn't what I am looking for". How do we know what you expect if you don't explain the problem in more detail? Please take a few minutes to read How to Ask
– charlietfl
Nov 11 at 12:33

i'll update my question
– Anonymous
Nov 11 at 12:35

it looks simple but I still not sure where's the problem
– Anonymous
Nov 11 at 12:37

You only included the base bootstrap css, but not the additional css included with the template demo. Look at the CSS tab in the template demo
– charlietfl
Nov 11 at 12:39

I included the css as well but I can't post stackoverflow said I am posting too much coding then words
– Anonymous
Nov 11 at 12:40

|
show 3 more comments

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Here is a solution for your problem, just change the "ref" to "rel" and you are good to go.
Everything was correct, just because your external stylesheet was not able to load because of "ref". To load any external css file use "rel" instead of "ref". I have attached working piece of code just for your reference. I hope, it solves your problem.

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

answered Nov 11 at 13:38

MSD

362

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248786%2fhow-to-import-cdn-correctly-whats-wrong-with-my-code-with-including-css-and-jq%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

answered Nov 11 at 13:38

MSD

362

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

add a comment |

up vote
0
down vote

accepted

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

answered Nov 11 at 13:38

MSD

362

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

add a comment |

up vote
0
down vote

accepted

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

answered Nov 11 at 13:38

MSD

362

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">





<style>

section.pricing {

  background: #9CECFB;

  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



.pricing .card {

  border: none;

  border-radius: 1rem;

  transition: all 0.2s;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.pricing hr {

  margin: 1.5rem 0;

}



.pricing .card-title {

  margin: 0.5rem 0;

  font-size: 0.9rem;

  letter-spacing: .1rem;

  font-weight: bold;

}



.pricing .card-price {

  font-size: 3rem;

  margin: 0;

}



.pricing .card-price .period {

  font-size: 0.8rem;

}



.pricing ul li {

  margin-bottom: 1rem;

}



.pricing .text-muted {

  opacity: 0.7;

}



.pricing .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  opacity: 0.7;

  transition: all 0.2s;

}



/* Hover Effects on Card */



@media (min-width: 992px) {

  .pricing .card:hover {

    margin-top: -.25rem;

    margin-bottom: .25rem;

    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

  }

  .pricing .card:hover .btn {

    opacity: 1;

  }

}



</style>



<body>

  <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->



<section class="pricing py-5">

    <div class="container">

      <div class="row">

        <!-- Free Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Free</h5>

              <h6 class="card-price text-center">$0<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Plus Tier -->

        <div class="col-lg-4">

          <div class="card mb-5 mb-lg-0">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>

              <h6 class="card-price text-center">$9<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>

                <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

        <!-- Pro Tier -->

        <div class="col-lg-4">

          <div class="card">

            <div class="card-body">

              <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>

              <h6 class="card-price text-center">$49<span class="period">/month</span></h6>

              <hr>

              <ul class="fa-ul">

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>

                <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>

              </ul>

              <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

</body>

answered Nov 11 at 13:38

MSD

362

answered Nov 11 at 13:38

MSD

362

answered Nov 11 at 13:38

MSD

362

answered Nov 11 at 13:38

MSD

362

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

add a comment |

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

This solves my problem!! Thank you so much!
– Anonymous
Nov 11 at 16:19

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky