Seven - HTML Single Page Creative Portofolio Template Seven - HTML Single Page Creative Portofolio Template

Structure of Seven HTML theme

Seven is a modern responsive single page html theme. Greate as start point to create your portfolio or agency site.
After you download and unzip Seven theme. you'll get following folders structure.
.
├── css
├── fonts
├── img
├── js
└── index.html

CSS

This directory should contain all your project's CSS files. It includes some initial CSS to help get you started from a solid foundation.
.css
├── booststrap.css //Theme is bootstrap based.
├── animate.css // For all animation we use styles created by Daniel Eden
├── font-awesome.css //We use font awesome for icons.
├──magnific-popup.css // We use magific plugin for dispaly modal video. This definded stiles
└── style.css //Custom styles for theme.

Img

In this folder we include all image and photos related to theme like team memebers phots, portfolio image, logo etc.

Js

In this folder you can find all javascript files needed for normal runnig Seven theme.

.js
├── jquery-1.11.2.min.js
├── bootstrap.js
├── jquery.magnific-popup.min.js // Magnific popup librabry used for diplayin youtube video in modal.
├── jquery.mixitup.js //Used for filtring portfolio items.
├── smooth-scroll.js //A lightweight script to animate scrolling to anchor links.
├── wow.js //Reveal CSS animation as you scroll down a page
└── app.js //Custom js for theme.

Index.html

Its a main html file for theme and its structure is like in this example.
<html>
   <head>
      <title>Page title goes here.</title>
      <!-- All metadata and styles loding goes here. -->
   </head>
   <body>
      <header>
         <nav>
            <!-- Top navigation goes here. -->
         </nav>
      </header>
      <div id="home" class="jumbotron slide slide-fullscreen">
         <div class="container">
         <!-- Hero content -->
         </div>
      </div>
      <section id="sectionId">
         <div class="container">
            <header>
               <h2>Section title</h2>
               <p>Section description</p>
            </header>
            <!-- Section content goes here. -->
         </div>
      </section>
      <!-- One more section goes here -->
   </body>
</html>

Need customization for this theme?

Hire Us