Git Product home page Git Product logo

startbootstrap / startbootstrap-landing-page Goto Github PK

View Code? Open in Web Editor NEW
1.6K 72.0 1.6K 20.66 MB

A responsive, Bootstrap landing page template created by Start Bootstrap

Home Page: https://startbootstrap.com/theme/landing-page/

License: MIT License

JavaScript 33.90% SCSS 13.62% Pug 52.47%
bootstrap html bootstrap4 bootstrap-4 bootstrap-theme bootstrap-template open-source free theme css

startbootstrap-landing-page's Introduction

Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap.

Preview

Landing Page Preview

View Live Preview

Status

GitHub license npm version

Download and Installation

To begin using this template, choose one of the following options to get started:

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with dist directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Usage

Clone the source files of the theme and navigate into the theme's root directory. Run npm install and then run npm start which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the package.json file to see which scripts are included.

npm Scripts

  • npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
  • npm run build:assets copies the files in the src/assets/ directory into dist
  • npm run build:pug compiles the Pug located in the src/pug/ directory into dist
  • npm run build:scripts brings the src/js/scripts.js file into dist
  • npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
  • npm run clean deletes the dist directory to prepare for rebuilding the project
  • npm run start:debug runs the project in debug mode
  • npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

You must have npm installed in order to use this build environment.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

About

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

Start Bootstrap was created by and is maintained by David Miller.

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2023 Start Bootstrap LLC. Code released under the MIT license.

startbootstrap-landing-page's People

Contributors

davidtmiller avatar morj avatar wnilkamal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

startbootstrap-landing-page's Issues

How to create a second page

As you can see, I've got a front page up live at agileEducation.co.
I'm looking to now create a page at agileEducation.co/nlrp (redirect from nlrp.tech). How should I go about this?

Template works locally but not on web Server

Dear Creative,

I enjoy your template very much and customized it for my companies landing page. It works perfectly on my (Linux) Computer in a simple sub-directory. If I click on any of the pages, Firefox opens and shows everything in place (and working).
When I uploaded the entire content of my sub directory, I received a page where everything works but css and images. Means: All links and texts are shown, but no styling, no imgages.
I considered my customisation could be the reason and uploaded the plain template with the same result. Do you have any hint for me, what could be wrong after uploading to a webspace?

Many thanks in advance!

Sincerely Yours

-Marcus

People with not technical knowledge cannot use this template

Hi,

I have to say that your template is great. I used it to launch some campaigns to validate business models in social networks. At this point I've created a webpage generator based in your webpage.

I think I would be beneficial for the community to have this tool.

You can find the generator here: https://kikebodi.github.io/ and this is the repo: https://github.com/kikebodi/kikebodi.github.io

Please, let me know if you are interested to link this repo to your account.

Best regards!

CSS is not updating

Hello, I made changes to the CSS file (landing-page.css) and ran gulp css, but the CSS are not updating. What should I do?

Preview of theme

Would be great if a preview of the theme could be in the readme

CSS file still has Apache License

First, thank you for maintaining these templates and keeping them free and open-source. My issue is a small one that is about confusion with the licensing.

tl;dr The custom CSS file still has the Apache License at the top.

It looks like the MIT License conversion was started, but hasn't made it into a new release. I was a bit confused when I downloaded the latest release from the template site and it still had the Apache License, but the site says they've all been switched to MIT. I see now that I can download the source direct from GH which has the new MIT License, but as a heads up, the custom CSS file still has the Apache License information at the top.

EDIT: there's no custom JS file. Just the CSS file.

My form isnt working on mobile devices

`// Initialize Firebase
var config = {
apiKey: "AIzaSyBKLVbFaInKQ5g_59KBzgScOnz6sTBzzZk",
authDomain: "portfolio-d4d61.firebaseapp.com",
databaseURL: "https://portfolio-d4d61.firebaseio.com",
projectId: "portfolio-d4d61",
storageBucket: "portfolio-d4d61.appspot.com",
messagingSenderId: "905452304981"
};
firebase.initializeApp(config);

var database = firebase.database();

// get elements \
var txtName = document.getElementById('name-input');
var txtEmail = document.getElementById('email-input');
var txtComment = document.getElementById('message-input');
var submitButton = document.getElementById('submit-button');

// attach even-listener to submit button
// and when clicked ...
submitButton.addEventListener('click', e => {

event.preventDefault();

// get data from form 
var name = txtName.value;
var email= txtEmail.value;
var message = txtComment.value;

console.log(name +" "+email+" " +message);
// create object to store user input
var user = {
name : name,
email: email,
message: message
}

// push object to firebase
database.ref(name).push(user);

// clear input fields
$("#message-input").val("");
$("#email-input").val("");
$("#name-input").val("");

$('#confirmMessage').text("Thank You! I will be in contact shortly.").css({color:'black'});

});

Above is my Js file, obviously scripted at bottom of page with form - form works flawlessly on desktop, but not on mobile devices...hhhmmm...already lost several hours today, was hoping for a fresh eye" Below is the html `





Contact Me





Name





Email Adress





Message




















`

Heroku Deployment not working

When I try to deploy my website onto heroku using this tutorial it is not working. It returns the following error:

internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module '"/Applications/Visual'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at Module._preloadModules (internal/modules/cjs/loader.js:945:12)
    at loadPreloadModules (internal/bootstrap/pre_execution.js:363:5)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:61:3)
    at internal/main/run_main_module.js:11:1

Change $primary in 'scss/_variables.scss'

Hi,
I'm trying to change the primary color to a different color but it doesn't seem to work.
Am I doing something wrong?

scss/_variables.scss:
`// Variables

// Restated Bootstrap Variables

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$custom-orange: #EF6C01 !default;

$primary: $custom-orange !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;`

Mail Form Handler?

The description for this awesome template says "a fully functional landing page" however their is no form handler in the template (like in Freelancer). Maybe we need a version that has an embedded mail handler? Maybe even one that uses Mailgun credentials?

landing-page.css

Hello,

I cannot change the landing page photo within the landing-page.css file. I am trying to change ../img/intro-bg.jpg to my file ../img/photo.jpg and it is not working.

Can't change the background image in .CSS file

Hi completely new to coding. been following a tutorial on using HTML and CSS temples. pretty much following it word for word even using the template they use in the tutorial (its a lighthouse labs tutorial btw) basically I can't seem to change the background image to another one in the CSS file. been driving me crazy as I 'm putting the info into the letter in the URL . Is there something I'm missing regarding the template. It does look to be updated compared to the one in the tutorial I'm watching

showcase images not resizing on mobile

The showcase images work well on desktop for different browser window sizes. But on mobile, the showcase images are very heavily cropped (e.g. showing maybe 20% of the image). This is on iOS 13 and recent version of Android.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.