christyc1129 / startbootstrap-grayscale Goto Github PK

View Code? Open in Web Editor NEW

This project forked from startbootstrap/startbootstrap-grayscale

0.0 0.0 0.0 147.6 MB

A multipurpose one page Bootstrap theme created by Start Bootstrap

Home Page: http://startbootstrap.com/template-overviews/grayscale/

License: MIT License

CSS 22.84% HTML 26.89% JavaScript 50.27%

startbootstrap-grayscale's Introduction

Commits hashes:

#cd22eca Pop-up images at Project section #18c37a4 Testing with Turn.js and NYTimes flipper #8f39462 Overlay image at Project section, adding tooltip for pop-up images #bd8f287 Changing background image #8c42d5f Embedding Flip.html, testing with other sliders #6641fda Adding icon at Browser tab and header #0075bb8 CHanging background image #810e671 Changing colour tone for whole website, Adding Education section #0560c29 Adding background music #190de63 Adding Skills part at Introduction section, Adding lead-down animated button #aa1d82d Changing fonts, adding contents, adding decorative lines, adding back to top button #22d83ff Testing with the autoplay function of background music #4689c0b Social Network Preview

Start Bootstrap - Grayscale

Grayscale is a multipurpose, one page HTML theme for Bootstrap created by Start Bootstrap.

Preview

View Live Preview

Status

Download and Installation

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

Download the latest release on Start Bootstrap
Install via npm: npm i startbootstrap-grayscale
Clone the repo: git clone https://github.com/BlackrockDigital/startbootstrap-grayscale.git
Fork, Clone, or Download on GitHub

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with the template in your favorite text editor to make changes. 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

After installation, 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 gulpfile.js to see which tasks are included with the dev environment.

Gulp Tasks

gulp the default task that builds everything
gulp watch browserSync opens the project in your default browser and live reloads when changes are made
gulp css compiles SCSS files into CSS and minifies the compiled CSS
gulp js minifies the themes JS file
gulp vendor copies dependencies from node_modules to the vendor directory

You must have npm installed globally 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, Owner of Blackrock Digital.

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

Copyright and License

startbootstrap-grayscale's People

Contributors

startbootstrap-grayscale's Issues

Skills tags at Introduction section

By using li tag, all my skills were displayed at the introduction part.

Mailto added in Contact section

By adding mailto, users can send email to my email address by clicking it. Then, their own mail app will pop-up and draft a mail to me.

Flip.html embedded at Project section

Embedded the flip.html webpage by using iframe.
Planned to use flip.js originally but not successful so use flip.html as a replacement to show the booklet design.

Image slider at About and Project section

Sliders were added in these section to display a large number of images in a small area.

Turn.js unavailable.

Turn.js is unable to use in the website, so the book cannot be placed in the website.

Highlighted text and hyperlink at About section

Added highlighted texts and hyperlinks to the About section content, also changed background image

Overlay image at Project section

Overlay image is used at Project section to show more details about the section in a more interesting and interactive way. When cursor is placed on top of the image, words will appears on top of the image.

Education blocks at Education section

2 Blocks for placing education details were added by using CSS.

Form embedded at Contact section

Google form embedded at Contact section so people can leave comments about the website.

music only play once

Pop-up image + tooltip at Project section

Pop up function is used to show detailed and large work so people can see the work in a more detailed way. Used title to add the tooltip to remind people about the pop-up function.

Poster placing

The poster at the typography projects part is the only vertical image, which makes the layout awkward. There are blank spaces at the right side of the poster that it should be aligned center.

Unable to change background image at header and sign-up part

didn't found related code in html document.

Commit hashes!!

Commits hashes:

#cd22eca Pop-up images at Project section
#18c37a4 Testing with Turn.js and NYTimes flipper
#8f39462 Overlay image at Project section, adding tooltip for pop-up images
#bd8f287 Changing background image
#8c42d5f Embedding Flip.html, testing with other sliders
#6641fda Adding icon at Browser tab and header
#0075bb8 CHanging background image
#810e671 Changing colour tone for whole website, Adding Education section
#0560c29 Adding background music
#190de63 Adding Skills part at Introduction section, Adding lead-down animated button
#aa1d82d Changing fonts, adding contents, adding decorative lines, adding back to top button
#22d83ff Testing with the autoplay function of background music
#4689c0b Social Network Preview

Packed layout at the About Me part

More spacing should be added at that part to increase readability.

Music not autoplay

Cannot link to mail when clicking email address

When clicking the email address part at the contact part, it will goes to the top part of the website again instead of sending mail.

Font

Changed font type for the whole website, using 2 fonts from Google Font at different parts selectively:
"font-family: 'Bebas Neue', cursive;
font-family: 'Josefin Sans', sans-serif;"

Josefin Sans for the header:

Bebas Neue for the title:

Back to top button is not aligned center

Navigating button at Header and Footer

Added animated navigating button at the header and footer by using font awsome. Designed with MouseOn action.

Animated icon at header to move to About section with scroll triggered:

Animated icon at header to move to Header section with scroll triggered:

Video at Education section

Embedded a youtube video at Education section to show more details about PolyU Design.

Background music

Added background music for the website. It can autoplay , loop and control by users. However, the autoplay function may be blocked by the browser setup, users need to enable the autoplay function at browser in order to play the background music automatically.