I have a functional jQuery Accordion. I would like to add a photo inside the container and have it float left, making the text after the image float right - like having 2 columns. I've attempted many scenarios with no avail. This is my closest attempt:
<!-- Accordion-->
<section class="section-45 section-sm-45">
<div class="shell">
<div class="range">
<div class="cell-md-12 cell-lg-12">
<h5>Screening Products (beta)</h5>
<hr>
<!-- Responsive-tabs-->
<div class="responsive-tabs responsive-tabs-horizontal" data-type="accordion">
<ul class="resp-tabs-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="resp-tabs-container">
<div class="animated fadeIn">
<p><img src="images/placeholder270x270.jpg" alt="" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="animated fadeIn">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="animated fadeIn">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I've tried to do CSS to float left, make width xx%, etc. Nothing seems to work, I seem to fight the jQuery. Any help would be appreciated!
add some style.
.my-img {
position: absolute;
margin-left: 0px!important;
}
I'm using the part with the 8 images of this template as a photogallery.
Template
But if my images has different heights, they will be aligned so the top of the images will fit each other. I need them to be aligned, so the bottom of the images are aligned.
How can I do that?
My link is showing both code and the templates I use:-) The problem with this code is the vertical align of the 8 images, if they have different hights. They will be aligned so the top of the images fit each other. What I need, is that the 8 images is buttom aligned to each other.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}
</style>
<body>
<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate- left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
Food
About
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
<div class="w3-right w3-padding-16">Mail</div>
<div class="w3-center w3-padding-16">My Food</div>
</div>
</div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center" id="food">
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real NYC Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">
<h3>Let Me Tell You About This Steak</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">
<h3>Cherries, interrupted</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
<p>What else?</p>
</div>
<div class="w3-quarter">
<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
<h3>Once Again, Robust Wine and Vegetable Pasta</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter">
<img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
<h3>All I Need Is a Popsicle</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">
<h3>Salmon For Your Skin</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">
<h3>Le French</h3>
<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
«
1
2
3
4
»
</div>
</div>
<hr id="about">
<!-- About Section -->
<div class="w3-container w3-padding-32 w3-center">
<h3>About Me, The Food Man</h3><br>
<img src="/w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">
<div class="w3-padding-32">
<h4><b>I am Who I Am!</b></h4>
<h6><i>With Passion For Real, Good Food</i></h6>
<p>Just me, myself and I, exploring the universe of unknownment. I have a heart f love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by w3.css</p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third w3-serif">
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>enter code here
I have recently completed the One Month Rails tutorial and wanted to start customizing my design. I went ahead and purchase a theme off WrapBootstrap and have completed the following:
Added Javascript/CSS to Vendor folder
Included all images needed in Vendor folder
Updated manifest file to include any new javascript or stylesheets
For whatever reason it appears bootstrap is not being loaded properly when I attempt to access any page besides the index page.
For example: my users/sign up page which I customized the Devise View no longer inherits any of the styling previously used. What I want to accomplish is to have the index page load the WrapBootstrap theme and then for my other pages to load just as they previously did prior to messing with anything.
I understand that Heroku has special ways in handing the asset pipeline and hard coding assets is not the proper way of doing things. However, my styling is not functional on my local environment either.
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'masonry/transitions'
*= require 'style.css'
*= require 'bootstrap.css'
*= require 'bootstrap.min.css'
*= require 'overwrite.css'
*= require 'animate.css'
*= require 'font-awesome.min.css'
*= require 'theme.css'
*= require 'simpletextrotator.css'
*= require 'default.css'
*= require_tree .
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require jquery.js
//= require bootstrap.min.js
//= require custom.js
//= require wow.min.js
//= require mb.bgndGallery.js
//= require jquery.simple-text-rotator.min.js
//= require jquery.scrollTo.js
//= require jquery.nav.js
//= require modernizr.custom.js
//= require grid.js
//= require stellar.js
//= require_tree .
Home Page View:
<!DOCTYPE html>
<html>
<head>
<title>Alstar - Bootstrap 3 one page template</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="/assets//bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/assets/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- intro area -->
<div id="intro">
<div class="intro-text">
<div class="container">
<div class="col-md-12">
<div id="rotator">
<h1><span class="1strotate">We are changing the World.</span></h1>
<div class="line-spacer"></div>
<p><span class="2ndrotate">We connect brands with donation opportunities that empower their users.</span></p>
</div>
<div class="arrow-wrap"><a class="arrow-down scroll" href="#home-top"></a></div>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div style="width: 100%;">
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Charity", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Donor", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><a class="btn-primary-red btn-lg" href="#about" role="button">I'm a Merchant</a></p></div>
<br style="clear: left;" />
</div>
<br>
<br>
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Services</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Website Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/1.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Brand Identity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/2.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="home-section bg-red">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<br>
<br>
<br>
<h2>About us</h2>
<div class="heading-line"></div>
<p>We’ve been building a beutiful checkout process that connects merchants with their loyal customers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
<img src="/assets/team/1.jpg" alt="" class="img-circle img-responsive" />
<h4>Dominique Vroslav</h4>
<p>Art Director</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/2.jpg" alt="" class="img-circle img-responsive" />
<h4>Thomas Jeffersonn</h4>
<p>Web Designer</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/3.jpg" alt="" class="img-circle img-responsive" />
<h4>Nola Maurin</h4>
<p>Illustrator</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/4.jpg" alt="" class="img-circle img-responsive" />
<h4>Mira Ladovic</h4>
<p>Typographer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="1s">Details are the key for perfection</h2>
<p class="lead wow bounceInUp" data-wow-delay="2s">We mix all detailed things together</p>
</div>
</div>
</div>
</div>
</section>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Works</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="/assets/works/1.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/1.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/2.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="/assets/works/thumbs/2.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/3.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="/assets/works/thumbs/3.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/4.jpg" data-title="Portfolio title" data-description="In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/4.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/5.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea">
<img src="assets/works/thumbs/5.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/6.jpg" data-title="Portfolio title" data-description="Id elit saepe pro. In atomorum constituam definitionem quo, at torquatos sadipscing eum, ut eum wisi meis mentitum. Probo feugiat ea duo. An usu platonem instructior, qui dolores inciderint ad. Te elit essent mea, vim ne atqui legimus invenire, ad dolor vitae sea.">
<img src="assets/works/thumbs/6.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/7.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei.">
<img src="assets/works/thumbs/7.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="asssets/works/8.jpg" data-title="Portfolio title" data-description="No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/8.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="assets/works/thumbs/9.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="assets/works/thumbs/10.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="assets/works/thumbs/11.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/12.jpg" alt="img01"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<li class="wow fadeInDown" data-wow-delay="0.3s"><img src="assets/clients/1.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><img src="assets/clients/2.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><img src="assets/clients/3.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><img src="assets/clients/4.png" alt="" /></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please
fill out form below and we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="button" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer id="contact" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 col-md-3">
<div class="footer-logo">
<h2>Prestige</h2>
<p>1024 Main Street, Vancouver BC<br>+1 (123) 456-7890</p>
<br>
<p class="muted">© 2013 Prestige Inc.</p>
Terms of Service
Privacy
</div>
</div>
<div class="col-sm-3 col-md-3">
<h3>Product</h3>
<ul class="list-unstyled">
<li>Product for iOS</li>
<li>Product for Android</li>
<li>Product for Windows</li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Company</h3>
<ul class="list-unstyled">
<li>About Us</li>
<li>Our Team</li>
<li>Jobs <span class="label label-info">We're hiring!</span></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Documentation</h3>
<ul class="list-unstyled">
<li>Product Help</li>
<li>Developer API</li>
<li>Product Markdown</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<a class="icon" href="http://www.twitter.com/dparrelli" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="http://www.dribbble.com/dparrelli" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="icon" href="http://www.workingnomads.co" target="_blank"><i class="fa fa-globe"></i></a>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="/assets/jquery.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/wow.min.js"></script>
<script src="/assets/mb.bgndGallery.js"></script>
<script src="/assets/mb.bgndGallery.effects.js"></script>
<script src="/assets/jquery.simple-text-rotator.min.js"></script>
<script src="/assets/jquery.scrollTo.js"></script>
<script src="/assets/jquery.nav.js"></script>
<script src="/assets/modernizr.custom.js"></script>
<script src="/assets/grid.js"></script>
<script src="/assets/stellar.js"></script>
<script src="/assets/custom.js"></script>
</html>
Any ideas what is getting mixed up here? Should I be putting the page.css under page.css.scss instead of in the application.css files? Thank you!
you should add your css and javascript files to assests/stylesheets and assests/javascripts respectively. and add these to head of your views/layout/application.html.erb or any other layout you are using:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I hope that will work.
I have a multi page jQuery Mobile (1.40, with jQuery 1.10.2) page, like below. On iOS, the transition 'right' to the next page distorts the background image briefly. The same transition 'left' works as expected. It seems to work normally on Safari on Mac.
See this video to see what's happening :- http://cl.ly/3C1k3y1k2I0C/download/jQuery%20Mobile%20issue.mp4
HTML:
<div data-role="page" class="welcome" id="welcome1">
<div role="main" class="ui-content">
<h2 class="logo">Page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome2">
<div role="main" class="ui-content">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li class="on">2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome3">
<div role="main" class="ui-content">
<h2>Get Started</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li>2</li>
<li class="on">3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
CSS:
[data-role=page].welcome {
background: no-repeat center center fixed;
background-size:100%;
}
[data-role=page]#welcome1 {
background-image: url('images/welcome1.jpg');
}
[data-role=page]#welcome2 {
background-image: url('images/welcome2.jpg');
}
[data-role=page]#welcome3{
background-image: url('images/welcome3.jpg');
}
I have a standard accordion that looks like
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
and currently my view loads a list of messages like
<ul id="msgs_list">
<% msgs.each do |msg| %>
<div class="msg_message_container">
<%= h msg.title %>
<%= h msg.message %><br />
<% end %>
</ul>
How can I wrap the title of each message in the h3 accordion tags and have each message in a separate accordion div? Thanks
Does this code work for you? I got rid of the ul and the div for msg_message_container however adding them back if you need them should be easy.
<% msgs.each do |msg| %>
<h3><%= h msg.title %></h3>
<div>
<p>
<%= h msg.message %>
</p>
</div>
<% end %>