Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- body{
- font-family: "Segoe UI";
- }
- a{
- color:#0d6efd;
- text-decoration: none;
- }
- .container{
- max-width:1320px;
- margin: 0 auto;
- padding:0 12px;
- }
- .row{
- display:flex;
- flex-direction: row;
- margin:0 -12px;
- }
- .col-8{
- width:66.666667%;
- padding: 0 12px;
- }
- .col-4{
- width:33.333333%;
- padding: 0 12px;
- }
- .text-white{
- color:white;
- }
- .bg-dark{
- background: #212529;
- }
- .btn{
- display: inline-block;
- color: white;
- text-align: center;
- vertical-align: middle;
- border: 1px solid transparent;
- padding: 8px 12px;
- border-radius: 4px;
- background:transparent;
- cursor:pointer;
- }
- .btn-yellow{
- color: #000;
- background-color: #ffcd39;
- border-color: #ffc720;
- }
- .p-16{
- padding:16px;
- }
- .my-48{
- margin-top:48px;
- margin-bottom:48px;
- }
- .menu{
- padding-top:9px;
- }
- .menu-link{
- padding:8px 16px;
- }
- .pt-4{
- padding-top: 4px;
- }
- .heading{
- font-size:48px;
- line-height: 1.2;
- font-weight: 300;
- }
- .brand{
- font-size:20px;
- padding-top:5px;
- padding-bottom:5px;
- line-height: 40px;
- }
- .m-0{
- margin:0px;
- }
- .bg-yellow{
- background: #ffcd39;
- }
- .card-footer{
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- padding:8px 16px;
- background-color: rgba(0,0,0,.03);
- border-top: 1px solid rgba(0,0,0,.125)
- }
- .fst-italic{
- font-style: italic;
- }
- .border-yellow{
- border-color:#ffcd39!important;
- }
- .rounded{
- border-radius:4px;
- }
- .card{
- position: relative;
- display: flex;
- flex-direction: column;
- min-width: 0;
- word-wrap: break-word;
- background-color: #fff;
- background-clip: border-box;
- border: 1px solid gray;
- border-radius: 4px;
- }
- .card-header{
- padding:8px 16px;
- font-weight:bold;
- }
- .card-body{
- padding:16px;
- }
- </style>
- </head>
- <body>
- <div class="">
- <div class="">
- <div class="">
- <a class="" href="#">Company Logo</a>
- </div>
- <div class="">
- <div class="">
- <a class="" href="#">Home</a>
- <a class="" href="#">About</a>
- <a class="" href="#">Services</a>
- <a class="" href="#">Contact</a>
- </div>
- </div>
- </div>
- </div>
- <div class="">
- <div class="">
- <div class="">
- <img class="" src="http://placehold.it/800x400" alt="">
- </div>
- <div class="">
- <h1 class="">Business Name</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptas quam illo amet esse, veniam autem, perspiciatis impedit in assumenda cupiditate est, quaerat, ipsam cumque nobis sed velit nam unde.</p>
- <a class="" href="#">Call to Action!</a>
- </div>
- </div>
- <div class="">
- <div class="">
- <div class="">
- <div class="">Card 1</div>
- <div class="">
- <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
- </div>
- <div class="">
- <a href="#" class="">More Info</a>
- </div>
- </div>
- </div>
- <div class="">
- <div class="">
- <div class="">Card 2</div>
- <div class="">
- <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id </p>
- </div>
- <div class="">
- <a href="#" class="">More Info</a>
- </div>
- </div>
- </div>
- <div class="">
- <div class="">
- <div class="">Card 3</div>
- <div class="">
- <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
- </div>
- <div class="">
- <a href="#" class="">More Info</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement