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>