startbootstrap / startbootstrap-coming-soon Goto Github PK
View Code? Open in Web Editor NEWA coming soon theme with a video background for Bootstrap 4
Home Page: https://startbootstrap.com/theme/coming-soon/
License: MIT License
A coming soon theme with a video background for Bootstrap 4
Home Page: https://startbootstrap.com/theme/coming-soon/
License: MIT License
The current form input group layout looks a bit strange when the button is removed via SB Forms. I'm suggesting removing the input group in favor of an inline input with a button, so when the button is removed it will not leave a blank space. The form submit message can have a bit of top margin added as well in this instance.
The template does not render properly on IE 11.
Just wondering if this is something you are going to look into and try fix or not.
Hei there.
First of all, thanks for this template, it works pretty well.
Just the following gulp commands (given in the readme) are not working.
gulp sass
gulp minify-css
gulp minify-js
gulp copy
They should be:
gulp css
gulp js
gulp vendor
Error
1:55:24 PM: Build complete: exit code: 1
1:55:24 PM: Error running command: Build script returned non-zero exit code: 1
1:55:24 PM: Failing build: Failed to build site
Answer from support:
there is no build task within your gulpfile.js. When you mention it works locally, you probably run the command gulp dev which is mentioned on your repo's README.md file. However do note that the build command you are using is gulp build which is, as I mentioned, not defined in your gulpfile.js.
The only tasks mentioned are:
gulp the default task that builds everything
gulp dev browserSync opens the project in your default browser and live reloads when changes are made
gulp sass compiles SCSS files into CSS
gulp minify-css minifies the compiled CSS file
gulp minify-js minifies the themes JS file
gulp copy copies dependencies from node_modules to the vendor directory
This is basically the gist of what my initial response was and that you should take a look at your gulpfile as a first step.
In any case, the reason your deploy fails is because you are using an non-existent task as your build command. Reading through the gulpfile.js on your repo, I do see that the default task is what you'll want. That said, you'll want to use gulp as your build command, which implies the default task.
FYI: the task gulp copy is actually gulp vendor if you go by the actual gulpfile.js which looks to be like a typo.
The linear gradient is not displayed
Fix the z-index from -1 to 0 :
.overlay {
position: absolute;
...
z-index: 0;
}
2018-03-22T02:30:23.874646+00:00 app[web.1]:
2018-03-22T02:30:23.874664+00:00 app[web.1]: > [email protected] start /app
2018-03-22T02:30:23.874665+00:00 app[web.1]: > gulp
2018-03-22T02:30:23.874667+00:00 app[web.1]:
2018-03-22T02:30:25.808142+00:00 app[web.1]: [02:30:25] Using gulpfile ~/gulpfile.js
2018-03-22T02:30:25.810733+00:00 app[web.1]: [02:30:25] Starting 'css:compile'...
2018-03-22T02:30:25.831730+00:00 app[web.1]: [02:30:25] Starting 'js:minify'...
2018-03-22T02:30:25.837684+00:00 app[web.1]: [02:30:25] Starting 'vendor'...
2018-03-22T02:30:25.843362+00:00 app[web.1]: [02:30:25] Finished 'vendor' after 4.62 ms
2018-03-22T02:30:26.131913+00:00 app[web.1]: [02:30:26] Finished 'js:minify' after 300 ms
2018-03-22T02:30:26.132208+00:00 app[web.1]: [02:30:26] Starting 'js'...
2018-03-22T02:30:26.132535+00:00 app[web.1]: [02:30:26] Finished 'js' after 42 μs
2018-03-22T02:30:26.212693+00:00 app[web.1]: [02:30:26] Finished 'css:compile' after 401 ms
2018-03-22T02:30:26.212949+00:00 app[web.1]: [02:30:26] Starting 'css:minify'...
2018-03-22T02:30:26.283090+00:00 app[web.1]: [02:30:26] Finished 'css:minify' after 70 ms
2018-03-22T02:30:26.283413+00:00 app[web.1]: [02:30:26] Starting 'css'...
2018-03-22T02:30:26.283740+00:00 app[web.1]: [02:30:26] Finished 'css' after 6.13 μs
2018-03-22T02:30:26.283975+00:00 app[web.1]: [02:30:26] Starting 'default'...
2018-03-22T02:30:26.284267+00:00 app[web.1]: [02:30:26] Finished 'default' after 37 μs
2018-03-22T02:30:26.392538+00:00 heroku[web.1]: Process exited with status 0
2018-03-22T02:30:26.720660+00:00 heroku[web.1]: State changed from starting to crashed
2018-03-22T02:27:28.436818+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=.herokuapp.com request_id= fwd="" dyno= connect= service= status=503 bytes= protocol=https
2018-03-22T02:27:29.565908+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=.herokuapp.com request_id=***** fwd="*****" dyno= connect= service= status=503 bytes= protocol=https
Sorry for the quick hit and run but I'm working to a deadline and just wanted to note:
You have a background-position: cover;
in there which should be background-size: cover;
.
Thanks for saving me a bunch of time with this project!
Hello!
Thank you for your awesome work.
I am a total newbie in coding and I would like to know if there is a way to force desktop web browsers to load the mobile fallback (.jpg image) instead of the .mp4 video in the background.
I have tried to replace this:
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <source src="mp4/bg.mp4" type="video/mp4"> </video>
with this:
<img src="img/bg-mobile-fallback.jpg" class="img-fluid">
But the size of the image is not responding to the screen resolution (I use a custom image 1920x1080).
Any help is welcome!
Solution is to use gulp-dart-sass which uses dart-sass
https://github.com/sass/node-sass
https://github.com/sass/dart-sass
Add to bottom of index.html
<script>
$(document).ready(function() {
//FORCE VIDEO PLAY - SAFARI 11 ISSUE
$('body').data('vide').getVideoObject().play();
});
</script>
It seems to be Apple's new video playback policy! https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
Hi, Thanks for the awesome template!
How to best add a copyright line to the template? I'm after being able to add a short line on copyright and then add a link to a privacy policy in the line as well (others using the template will be collecting emails through the newsletter signup form field after all... so this will be needed by others as well)
I've shown my progress through images attached.
The intention is to have the copyright line displayed differently depending on the screen size:
For desktop: added to the bottom left aligned under to the newsletter form (see attached images)
For mobile: centered under the social logos (see attached images)
On my progress so far: The below is what I've managed to get implemented. Any pointers would be highly appreciated!
These are the current views on desktop and mobile:
This what I want to get implemented:
To be on mobile: what I want to implement on mobile - ignore the blue ugly background behind the copyright:
How can we get the background video to run on mobile devices ?
Can you provide general setup instructions for the email box? My site does have an email service associated but could use some clarification
test detail issue
aria-hidden="true" should be used on font-awesome icons so that it be proper HTML semantic.
Same goes for CleanBlog and Agency themes that we use in Orchard Core. Using SonarQube to analyze our code relevated this issue.
Example :
<i class="fas fa-circle" aria-hidden="true"></i>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.