Responsive business

Developer
Chris
Size
3,412 Kb
Views
10,120
  1. Responsive business Previews
  2. Responsive business HTML Codes
  3. Responsive business CSS Codes
  4. Responsive business JS Codes

How do I make an responsive business?

What is a responsive business? How do you make a responsive business? This script and codes were developed by Chris on 01 December 2022, Thursday.

Responsive business Previews
IQ Test

Responsive business - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responsive business</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'> <link href="https://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <link href="https://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/lib/jquery.bxslider.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <header> <div class="container"> <div class="row-fluid"> <div class="span4"> <h1>Company name</h1> </div> <!--/ .span3 --> <div class="span4 offset4"> <p>social media</p> </div> <!--/ .span4 offset4 --> </div> <!--/ .row-fluid --> <div class="row-fluid"> <img src="http://placehold.it/1240x400/000" /> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </header> <nav> <div class="container"> <div class="row-fluid"> <ul class="inline"> <li>home icon</li> <li>who we are</li> <li>what we do</li> <li>our clients</li> <li>get in touch</li> </ul> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </nav> <section>	<div class="container">	<h1>Who we are</h1> <div class="row-fluid">	<div class="span8"> <p class="lead">Aenean congue adipiscing venenatis. Integer vitae fermentum turpis. Praesent non nisl lorem. Mauris placerat hendrerit nunc nec sagittis. <p>Nulla at nisi sit amet elit convallis cursus. In commodo, justo ut porta scelerisque, dolor ipsum pulvinar ipsum, et viverra nisl dolor non dui. Nam id sodales lectus. Morbi facilisis, eros non fringilla blandit, arcu libero dictum felis, non condimentum nulla urna sit amet augue. Nulla ultricies rutrum adipiscing. Fusce iaculis dapibus nulla et vestibulum. Aenean a elit tellus. Aenean sit amet odio nec eros euismod mattis. Aenean dapibus adipiscing lacinia. Nulla facilisi.</p> <p>Nulla ultricies rutrum adipiscing. Fusce iaculis dapibus nulla et vestibulum. Aenean a elit tellus. Aenean sit amet odio nec eros euismod mattis. Aenean dapibus adipiscing lacinia. Nulla facilisi.</p> </div> <!--/ .span8 --> <div class="span3 offset1"> <img class="pull-right" src="http://placehold.it/250x200/ccc" alt="" /> </div> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </section> <hr class="gradient" /> <!--/ .hr rule --> <section> <div class="container"> <h1>What we do</h1> <div class="row-fluid"> <div class="span4 feature"> <img src="http://placehold.it/500x300/ccc" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus eros, ac vehicula nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec augue odio, condimentum et iaculis ac, pharetra quis lacus. Etiam vel mi justo, sit amet pretium augue.</p> </div> <!--/ .span4 --> <div class="span4 feature"> <img src="http://placehold.it/500x300/ccc" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus eros, ac vehicula nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec augue odio, condimentum et iaculis ac, pharetra quis lacus. Etiam vel mi justo, sit amet pretium augue.</p> </div> <!--/ .span4 --> <div class="span4 feature"> <img src="http://placehold.it/500x300/ccc" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus eros, ac vehicula nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec augue odio, condimentum et iaculis ac, pharetra quis lacus. Etiam vel mi justo, sit amet pretium augue.</p> </div> <!--/ .span4 --> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </section> <hr class="gradient" /> <!--/ .hr rule --> <section>	<div class="container">	<h1>Our clients</h1> <div class="row-fluid">	<div class="span8"> <p>Aenean congue adipiscing venenatis. Integer vitae fermentum turpis. Praesent non nisl lorem. Mauris placerat hendrerit nunc nec sagittis. Nulla at nisi sit amet elit convallis cursus. In commodo, justo ut porta scelerisque, dolor ipsum pulvinar ipsum, et viverra nisl dolor non dui. Nam id sodales lectus. Morbi facilisis, eros non fringilla blandit, arcu libero dictum felis, non condimentum nulla urna sit amet augue. Nulla ultricies rutrum adipiscing. Fusce iaculis dapibus nulla et vestibulum. Aenean a elit tellus. Aenean sit amet odio nec eros euismod mattis. Aenean dapibus adipiscing lacinia. Nulla facilisi.</p> </div> <!--/ .span12 --> <div class="span4"> <div class="blockquote pull-right"> <p>In commodo, justo ut porta scelerisque, dolor ipsum pulvinar ipsum, et viverra nisl dolor non dui. Nam id sodales lectus. Morbi facilisis, eros non fringilla blandit</p> <small>Bob the snob <cite title="Source Title">Bobs Sock co.</cite></small> </div> <!--/ .blockquote --> </div> <!--/ .span-4 --> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </section> <hr class="gradient" /> <!--/ .hr rule --> <section>	<div class="container">	<h1>Get in touch</h1> <div class="row-fluid">	<div class="span6"> <p>Aenean congue adipiscing venenatis. Integer vitae fermentum turpis. Praesent non nisl lorem. Mauris placerat hendrerit nunc nec sagittis. Nulla at nisi sit amet elit convallis cursus.</p> <address> <strong>Company name</strong><br /> 795 Flinders Street, Floor 50<br /> Melburne, Vic 3000<br /> <abbr title="Phone">P:</abbr> (03) 1234-5678 </address> <address> <strong>Full Name</strong><br /> <a href="mailto:#">[email protected]</a> </address> </div> <!--/ .span4 --> <div class="span6"> <form> <fieldset> <label>Full name</label> <input class="span12" type="text" placeholder="Mr Smith" /> <label>Email address</label> <input class="span12" type="text" placeholder="[email protected]" /> <textarea class="span12" rows="3"></textarea> <label class="checkbox"> <input type="checkbox"> Join our mailing list </label> <button type="submit" class="btn">Submit</button> </fieldset>
</form> </div> <!--/ .span8 --> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </section> <hr class="gradient" /> <!--/ .hr rule --> <footer> <div class="container"> <div class="row-fluid"> <p><small>this is the footer</small></p> </div> <!--/ .row-fluid --> </div> <!--/ .container --> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive business - Script Codes CSS Codes

/* -- containers -- */
.banner {}
.feature { border-top: 4px solid orange; border-left: 1px solid grey; border-bottom: 1px solid grey; border-right: 1px solid grey; }
.feature p { padding: 20px;}
/* -- misc -- */
hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

Responsive business - Script Codes JS Codes

$(document).ready(function(){ $('.bxslider').bxSlider();
});
Responsive business - Script Codes
Responsive business - Script Codes
Home Page Home
Developer Chris
Username leetech
Uploaded December 01, 2022
Rating 3
Size 3,412 Kb
Views 10,120
Do you need developer help for Responsive business?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris (leetech) Script Codes
Name
A CSS Animated Tooltip
A Nice Header
Just some more hover effects
Client list
Multiple Owl Slider on one page
Triangle bullets
CSS3 Fullscreen Background Slideshow
Bootstrap Features
Responsive email template
Split scroll
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!