Skip to content

Instantly share code, notes, and snippets.

@codebreach

codebreach/app.js

Created October 1, 2016 13:09
Show Gist options
  • Save codebreach/19ae2f5f6e716935cb579fdffa711528 to your computer and use it in GitHub Desktop.
Save codebreach/19ae2f5f6e716935cb579fdffa711528 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var app = angular.module('store', ['ngRoute', 'store-products']);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.youtube.com/**']);
});
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(0);
}
;
});
var userId;
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'StoreController'
}).when('/search', {
templateUrl: 'search_angular.html'
}).when('/suggestion', {
templateUrl: 'suggestion.html'
}).when('/SeeMore_One', {
templateUrl: 'SeeMore_One.html'
}).when('/SeeMore_Two', {
templateUrl: 'SeeMore_Two.html'
}).when('/SeeMore_Three', {
templateUrl: 'SeeMore_Three.html'
}).when('/SeeMore_Four', {
templateUrl: 'SeeMore_Four.html'
}).when('/SeeMore_Five', {
templateUrl: 'SeeMore_Five.html',
controller: 'movieDetailsCtl'
}).when('/SeeMore_Six', {
templateUrl: 'SeeMore_Six.html',
controller: 'movieDetailsCtl'
}).when('/large', {
templateUrl: 'large.html',
}).when('/movieDetail/:movieId', {
templateUrl: 'single.html',
controller: 'movieDetailsCtl'
}).when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
}).otherwise({
redirectTo: '/'
});
});
app.directive('mod', function() {
return {
template: '<div class="modal fade" style="background-color:transparent">' + '<div class="modal-dialog" style="background-color:transparent;width:80%; height:80%">' + '<div class="modal-content" style="background-color:transparent; " >' + '<div class="modal-body" style="background-color:transparent" ng-transclude></div>' + '</div>' + '</div>' + '</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
app.directive('mod1', function() {
return {
template: '<div class="modal fade" style="background-color:transparent">' + '<div class="modal-dialog" style="background-color:transparent">' + '<div class="modal-content" style="background-color:transparent" >' + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + '<div class="modal-body" style="background-color:transparent" ng-transclude></div>' + '</div>' + '</div>' + '</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
console.log(value);
if (value == true) {
$(element).modal('show');
console.log("show");
} else {
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
console.log("showme");
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
console.log("hideme");
});
});
}
};
});
app.controller('StoreController', function($scope, $http, $rootScope, $window, $routeParams) {
var store = $scope;
store.pro = [];
store.products = [];
store.top = [];
store.toprated = [];
store.up = [];
store.upcoming = [];
store.now = [];
store.nowplaying = [];
store.search = [];
store.search_angular = [];
$scope.showModal = false;
$scope.showModal1 = false;
$scope.toggleModal = function(url) {
console.log(url);
$scope.image = url;
$scope.showModal = !$scope.showModal;
}
;
$scope.toggleModal1 = function() {
$scope.showModal1 = !$scope.showModal1;
}
;
$scope.currentPage = 0;
$scope.currentPage1 = 0;
$scope.currentPage2 = 0;
$scope.currentPage3 = 0;
$scope.range = function() {
var rangeSize = 9;
var ret = [];
var start;
start = $scope.currentPage;
if (start > $scope.pageCount() - rangeSize) {
start = $scope.pageCount() - rangeSize + 1;
}
for (var i = start; i < start + rangeSize; i++) {
ret.push(i);
}
return ret;
}
;
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc&page=' + $scope.currentPage).success(function(data) {
store.pro = data;
});
}
}
;
$scope.firstPage = function() {
if ($scope.currentPage > 0 || $scope.currentPage == 0) {
$scope.currentPage = 0;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc&page=' + 1).success(function(data) {
store.pro = data;
});
}
}
;
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : " ";
}
;
$scope.pageCount = function() {
return store.products.total_pages;
}
;
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc&page=' + $scope.currentPage).success(function(data) {
store.pro = data;
});
}
}
;
$scope.lastPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage = $scope.pageCount();
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc&page=' + $scope.currentPage).success(function(data) {
store.pro = data;
});
}
}
;
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : " ";
}
;
$scope.setPage = function(set) {
$scope.currentPage = set;
$scope.Page = set;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc&page=' + set + 1).success(function(data) {
store.pro = data;
});
console.log(set);
console.log(set);
}
;
$scope.arrowDir = function(key) {
console.log(key);
}
;
$scope.range1 = function() {
var rangeSize = 9;
var ret = [];
var start;
start = $scope.currentPage1;
if (start > $scope.pageCount() - rangeSize) {
start = $scope.pageCount() - rangeSize + 1;
}
for (var i = start; i < start + rangeSize; i++) {
ret.push(i);
}
return ret;
}
;
$scope.prevPage1 = function() {
if ($scope.currentPage1 > 0) {
$scope.currentPage1--;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&page=' + $scope.currentPage1).success(function(data3) {
store.now = data3;
});
}
}
;
$scope.firstPage1 = function() {
if ($scope.currentPage1 > 0) {
$scope.currentPage1 = 0;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&page=' + 1).success(function(data3) {
store.now = data3;
});
}
}
;
$scope.prevPageDisabled1 = function() {
return $scope.currentPage1 === 0 ? "disabled" : " ";
}
;
$scope.pageCount1 = function() {
return store.nowplaying.total_pages;
}
;
$scope.nextPage1 = function() {
if ($scope.currentPage1 < $scope.pageCount1()) {
$scope.currentPage1++;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&page=' + $scope.currentPage1).success(function(data3) {
store.now = data3;
});
}
}
;
$scope.lastPage1 = function() {
if ($scope.currentPage1 < $scope.pageCount1()) {
$scope.currentPage1 = $scope.pageCount1();
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&page=' + $scope.currentPage1).success(function(data3) {
store.now = data3;
});
}
}
;
$scope.nextPageDisabled1 = function() {
return $scope.currentPage1 === $scope.pageCount1() ? "disabled" : " ";
}
;
$scope.setPage1 = function(set) {
$scope.currentPage1 = set;
$scope.Page = set;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&page=' + set + 1).success(function(data3) {
store.now = data3;
});
console.log(set);
console.log(set);
}
;
$scope.arrowDir1 = function(key) {
console.log(key);
}
;
$scope.range2 = function() {
var rangeSize = 9;
var ret = [];
var start;
start = $scope.currentPage2;
if (start > $scope.pageCount() - rangeSize) {
start = $scope.pageCount() - rangeSize + 1;
}
for (var i = start; i < start + rangeSize; i++) {
ret.push(i);
}
return ret;
}
;
$scope.prevPage2 = function() {
if ($scope.currentPage2 > 0) {
$scope.currentPage2--;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc&page=' + $scope.currentPage2).success(function(data1) {
store.top = data1;
});
}
}
;
$scope.firstPage2 = function() {
if ($scope.currentPage2 > 0) {
$scope.currentPage2 = 0;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc&page=' + 1).success(function(data1) {
store.top = data1;
});
}
}
;
$scope.prevPageDisabled2 = function() {
return $scope.currentPage2 === 0 ? "disabled" : " ";
}
;
$scope.pageCount2 = function() {
return store.toprated.total_pages;
}
;
$scope.nextPage2 = function() {
if ($scope.currentPage2 < $scope.pageCount2()) {
$scope.currentPage2++;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc&page=' + $scope.currentPage).success(function(data1) {
store.top = data1;
});
}
}
;
$scope.lastPage2 = function() {
if ($scope.currentPage2 < $scope.pageCount2()) {
$scope.currentPage2 = $scope.pageCount2();
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc&page=' + $scope.currentPage2).success(function(data1) {
store.top = data1;
});
}
}
;
$scope.nextPageDisabled2 = function() {
return $scope.currentPage2 === $scope.pageCount2() ? "disabled" : " ";
}
;
$scope.setPage2 = function(set) {
$scope.currentPage2 = set;
$scope.Page = set;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc&page=' + set + 1).success(function(data1) {
store.top = data1;
});
console.log(set);
console.log(set);
}
;
$scope.arrowDir2 = function(key) {
console.log(key);
}
;
$scope.range3 = function() {
var rangeSize = 9;
var ret = [];
var start;
start = $scope.currentPage3;
if (start > $scope.pageCount() - rangeSize) {
start = $scope.pageCount() - rangeSize + 1;
}
for (var i = start; i < start + rangeSize; i++) {
ret.push(i);
}
return ret;
}
;
$scope.prevPage3 = function() {
if ($scope.currentPage3 > 0) {
$scope.currentPage3--;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc&page=' + $scope.currentPage3).success(function(data2) {
store.up = data2;
});
}
}
;
$scope.firstPage3 = function() {
if ($scope.currentPage3 > 0) {
$scope.currentPage3 = 0;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc&page=' + 1).success(function(data2) {
store.up = data2;
});
}
}
;
$scope.prevPageDisabled3 = function() {
return $scope.currentPage3 === 0 ? "disabled" : " ";
}
;
$scope.pageCount3 = function() {
return store.upcoming.total_pages;
}
;
$scope.nextPage3 = function() {
if ($scope.currentPage3 < $scope.pageCount3()) {
$scope.currentPage3++;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc&page=' + $scope.currentPage3).success(function(data2) {
store.up = data2;
});
}
}
;
$scope.lastPage3 = function() {
if ($scope.currentPage3 < $scope.pageCount3()) {
$scope.currentPage3 = $scope.pageCount3();
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc&page=' + $scope.currentPage3).success(function(data2) {
store.up = data2;
});
}
}
;
$scope.nextPageDisabled3 = function() {
return $scope.currentPage3 === $scope.pageCount3() ? "disabled" : " ";
}
;
$scope.setPage3 = function(set) {
$scope.currentPage3 = set;
$scope.Page = set;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc&page=' + set + 1).success(function(data2) {
store.up = data2;
});
console.log(set);
console.log(set);
}
;
$scope.arrowDir3 = function(key) {
console.log(key);
}
;
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc').success(function(data) {
store.pro = data;
});
console.log($scope.Page);
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&sort_by=popularity.desc').success(function(data) {
store.products = data;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc').success(function(data1) {
store.toprated = data1;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&certification_country=US&certification=R&sort_by=vote_average.desc').success(function(data1) {
store.top = data1;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc').success(function(data2) {
store.upcoming = data2;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_year=2016&sort_by=vote_average.desc').success(function(data2) {
store.up = data2;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22').success(function(data3) {
store.nowplaying = data3;
});
$http.get('http://api.themoviedb.org/3/discover/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22').success(function(data3) {
store.now = data3;
});
$scope.quantity = 6;
$scope.press = function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
$scope.search();
}
}
;
$scope.search = function(searchStr) {
$scope.showKeywords = false;
$scope.keywordLength = searchStr.length;
if (searchStr.length >= 3) {
var url = "https://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&search_type=ngram&query=" + searchStr + "&sort_by=popularity.desc&&vote_count.gte=10";
$http.get(url).success(function(data) {
$scope.searchKeywords = data;
$scope.showKeywords = true;
$scope.showCancel = true;
$scope.showNavbar = false;
$window.location.href = "#/suggestion";
console.log($scope.searchKeywords);
console.log($scope.showKeywords);
});
} else {
$scope.showKeywords = false;
$scope.showCancel = true;
$scope.showNavbar = true;
}
}
;
$scope.searchMovieWithTitle = function(searchStr) {
var url = "https://api.themoviedb.org/3/search/multi?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + searchStr + "&sort_by=popularity.desc";
$http.get(url).success(function(data) {
$scope.search_angular = data;
$window.location.href = "#/search";
$rootScope.comingFromAnotherView = true;
$scope.showKeywords = false;
});
}
;
$scope.gotoMovieDetails = function(movieId) {
console.log("reached here moviedetails");
$rootScope.movieId = movieId;
$rootScope.mymovie = movieId;
console.log($rootScope.movieId);
$scope.userId = $routeParams.movieId;
console.log(userId);
$scope.showKeywords = false;
$scope.showCancel = false;
console.log("myid" + movieId);
$window.location.href = "#/movieDetail/" + movieId;
console.log("back");
}
;
});
app.controller('movieDetailsCtl', function($scope, $http, $rootScope, $routeParams) {
$rootScope.movieId = $routeParams.movieId;
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.movieId + "?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbData = response;
});
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.movieId + "/images?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbImages = response;
});
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.mymovie + "/credits?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbCredits = response;
});
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.mymovie + "/similar?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbSimilar = response;
});
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.movieId + "/videos?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbVideos = response.results;
$scope.videoKey = $scope.tmdbVideos[0];
$scope.videoKeyShow = $scope.videoKey.key;
$scope.url = $scope.videoKeyShow;
console.log($scope.url);
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
}
;
});
$http.get("https://api.themoviedb.org/3/movie/" + $rootScope.movie + "/videos?api_key=2f6ab7c6dc3db52d34703aae308640ef").success(function(response) {
$scope.tmdbVideos = response.results;
$scope.videoKey = $scope.tmdbVideos[0];
$scope.videoKeyShow = $scope.videoKey.key;
$scope.url = $scope.videoKeyShow;
console.log($scope.url);
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
}
;
});
$scope.SaveImage = function(imageID) {
$scope.tmdbSaveImage = imageID;
console.log($scope.tmdbSaveImage);
}
;
});
app.controller('creditsCtl', function($scope, $http, $rootScope) {
console.log($rootScope.movieId);
});
app.controller('imagesCtl', function($scope, $http, $rootScope) {
console.log($rootScope.movieId);
});
Raw
index.html
<!DOCTYPE HTML>
<html ng-app="store">
<head>
<title>Movie web</title>
<link rel="icon" href="images/mv.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<link type="text/css" href="bootstrap-rating.css" rel="stylesheet" />
<link type="text/css" href="menu.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<link href="css/detail.css" rel='stylesheet' type='text/css' media="all" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="js/store-products.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
<body ng-controller="StoreController as store" style="background-color:#2d556d "> <div class="overlay"></div>
<!-- <nav class="navbar navbar-inverse navbar-fixed-top" style="z-index:99999 ; padding-bottom:0px ; background-color:#323232">
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:300/Downloads/2013IPG025/web%281%29/web/"><h1><img src="images/logo.png" alt="" /></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="top-search">
<form class="navbar-form navbar-right" ng-submit="searchMovieWithTitle(searchText)">
<input type="text" class="form-control" placeholder="Search..." ng-keydown="search(searchText)" ng-model="searchText" ng-click="showCancel=true; showNavbar=true;" >
</form>
<div ng-show="showCancel">
<a href="#home" class="play-icon" ng-click= "showCancel=false; showKeywords=false; showNavbar=true; searchText = null;" style="font-size:20px;" > Cancel</a>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- <div id="menu" style="z-index:99998 background-color:#4c4c4c ; " ng-show="showNavbar==true" ng-hide="showNavbar==false">
<ul class="menu">
<li ><a href="http://localhost:300/Downloads/2013IPG025/web%281%29/web/"><span >Home</span></a></li>
</ul>
</div> --
</nav> -->
<!-- <div class="sw">
<form action="http://storm.it" method="get">
<input type="search" name="q" class="search" placeholder="Search the web..." />
<button class="go"><span class="entypo-search"></span></button>
<a href="#" class="logo" title="Storm"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44720/logo-white.png" /></a>
</form>
</div> --><div class="abc" style=" margin:-50px">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="z-index:99998 background-color:#4c4c4c ; ">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="top-search"> <div class="heading-right" style="padding-top:10px ; margin-left:10em" >
<a href="#" >Home</a>
</div>
<form class="navbar-form navbar-right" ng-submit="searchMovieWithTitle(searchText)">
<input
ng-keydown="search(searchText)" ng-model="searchText" ng-click="showCancel=true; showNavbar=true;"
style="background-color:rgba(0, 0, 0, 0.4); border:none; width:300px " type="text" class="form-control" placeholder="Search..." >
<input type="submit" value=" " style="margin-right:205px" ng-click="search(searchText)" >
</form>
<div class="heading-right" style="padding-top:10px ; margin-left:-20em" ng-show="showCancel">
<a href="#home" ng-click= "showCancel=false; showKeywords=false; showNavbar=true; searchText = null;" style="font-size:15px;" > Cancel</a>
</div>
</div>
<!--
<div class="col-md-offset-1 col-md-10" ><form ng-submit="searchMovieWithTitle(searchText)"> <input ng-keydown="search(searchText)" ng-model="searchText" ng-click="showCancel=true; showNavbar=true;" class="mybutton" placeholder="Search your movie here..." /></form></div> -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav> <!-- Intro Section -->
<div ng-view></div>
<div class="clearfix"> </div>
<div class="drop-menu">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap-rating.js"></script>
<script>
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script type="text/javascript" script-name="amaranth" src="http://use.edgefonts.net/amaranth.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>
</html>
Raw
style.css
body {
background-repeat: no-repeat;
font-size: 100%;
font-family: 'Open Sans',sans-serif
}
#custom-search-input {
padding: 3px;
border: solid 1px #fff;
border-radius: 6px;
background-color: #fff
}
#custom-search-input input {
border: 0;
box-shadow: none
}
#custom-search-input button {
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc
}
#custom-search-input button:hover {
border: 0;
box-shadow: none;
border-left: solid 1px #ccc
}
#custom-search-input .glyphicon-search {
font-size: 23px
}
body a {
transition: .5s all;
-webkit-transition: .5s all;
-o-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all
}
a.navbar-brand {
padding: 0 0 0 1em
}
nav.navbar.navbar-inverse.navbar-fixed-top {
padding: 1.5em 0;
background: #fff;
margin: 0;
box-shadow: 0 0 2px #c1c1c1!important
}
.sidebar {
top: 80px;
background: #272c2e;
border: none;
padding: 0 20px 20px 20px
}
a.navbar-brand h1 {
margin: 0
}
form.navbar-form.navbar-right {
margin-right: 1em;
width: 40%;
float: left!important;
margin-left: 0;
position: relative
}
.navbar-form .form-control {
width: 100%
}
.top-search form input[type="text"] {
position: relative;
padding: 6px 43px 6px 12px;
outline: none;
box-shadow: 0 0 0
}
.top-search form input[type="text"]:focus {
outline: none;
box-shadow: 0 0 0;
border: 1px solid #ccc
}
.top-search form input[type="submit"] {
background: url(../images/9.png) no-repeat 0 0!important;
width: 18px!important;
height: 18px!important;
border: none!important;
position: absolute!important;
outline: none!important;
top: 9px;
right: 26px
}
.header-top-right {
float: right
}
.file {
float: left;
margin: 1.1em 0 0 0
}
.file input[type="text"] {
width: 60%;
padding: 9px;
border: none;
font-size: 1.1em;
border: 1px solid #705e57;
font-weight: 600;
color: #705e57;
outline: none;
background: #fff;
font-weight: 500;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px
}
.file a {
padding: 8px 20px;
background: #f7f7f7;
color: #272c2e;
font-size: 14px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
text-decoration: none
}
.file a:hover {
opacity: .8
}
.file a:focus {
outline: none
}
.signin {
float: left;
margin: 1.1em 0 0 1em
}
.signin a {
padding: 8px 20px;
background: #21deef;
color: #fff;
font-size: 14px;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px
}
.signin a:hover {
text-decoration: none;
color: #272c2e;
background: #f7f7f7
}
.signin a:focus {
outline: none
}
.main {
padding: 5em 0 0 0
}
ul.nav.nav-sidebar li.active a {
background-color: #232323!important;
color: #21deef
}
ul.nav.nav-sidebar li a {
color: #bbb;
font-size: 13px;
font-weight: 600;
padding: .8em 0 .8em 3em
}
.main-grids {
padding: 0 0 1em 1em
}
.sidebar ul.nav-sidebar li a:hover {
background-color: #232323!important;
color: #21deef
}
.sidebar ul.nav-sidebar li.active {
background-color: #232323!important;
color: #fff!important
}
ul.nav.nav-sidebar li a:focus {
outline: none;
background: none
}
.menu,.menu1 {
display: block;
cursor: pointer;
position: relative
}
.menu,.menu1:hover {
color: #ff4c4c
}
.sidebar.top-navigation {
display: none
}
ul.cl-effect-1,ul.cl-effect-2 {
display: none
}
.nav-sidebar ul {
padding: 0;
margin: 0;
z-index: 999;
width: 100%;
left: 0
}
.nav-sidebar ul.cl-effect-1 li,.nav-sidebar ul.cl-effect-2 li {
display: block;
margin: 0
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 7em!important;
display: block;
text-decoration: none
}
.glyphicon-film {
margin: 0 2em 0 0;
font-size: 16px!important
}
.glyphicon-home {
margin: 0 2em 0 0;
font-size: 16px!important
}
.glyphicon-music {
margin: 0 2em 0 0;
font-size: 16px!important
}
.news-icon span.glyphicon-envelope {
margin: 0 2em 0 0;
font-size: 16px!important
}
.glyphicon-menu-down {
margin: 0 0 0 1em;
font-size: 11px!important
}
#slider2,#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3) , inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3) , inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3) , inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline
}
.rslides_tabs li:first-child {
margin-left: 0
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold
}
.events {
list-style: none
}
.callbacks_container {
position: relative;
float: left;
width: 100%
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 101%;
right: 5%;
opacity: .7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 40px;
width: 40px;
background: transparent url(../images/themes.png) no-repeat left top;
margin-top: -65px
}
.callbacks_nav:active {
opacity: 1.0
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 1%
}
#slider3-pager a {
display: inline-block
}
#slider3-pager span {
float: left
}
#slider3-pager span {
width: 100px;
height: 15px;
background: #fff;
display: inline-block;
border-radius: 30em;
opacity: .6
}
#slider3-pager .rslides_here a {
background: #fff;
border-radius: 30em;
opacity: 1
}
#slider3-pager a {
padding: 0
}
#slider3-pager li {
display: inline-block
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0
}
.rslides li {
position: relative;
display: block;
float: left
}
.rslides img {
height: auto;
border: 0;
width: 100%
}
.callbacks_tabs {
list-style: none;
position: absolute;
top: 143%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0
}
.slider-top {
text-align: center;
padding: 10em 0
}
.slider-top h1 {
font-weight: 700;
font-size: 48px;
color: #010101
}
.slider-top p {
font-weight: 400;
font-size: 20px;
padding: 1em 7em;
color: #010101
}
.slider-top ul.social-slide {
display: inline-flex;
margin: 0;
padding: 0
}
ul.social-slide li i {
width: 70px;
height: 74px;
background: url(../images/img-resources.png) no-repeat;
display: inline-block;
margin: 0 15px
}
ul.social-slide li i.win {
background-position: -6px 0
}
ul.social-slide li i.android {
background-position: -110px 0
}
ul.social-slide li i.mac {
background-position: -215px 0
}
.callbacks_tabs li {
display: inline-block;
margin: 0 .5em
}
@media screen and (max-width: 600px) {
.callbacks_nav {
top:47%
}
}
.callbacks_tabs a {
visibility: hidden
}
.callbacks_tabs a:after {
content: "\f111";
font-size: 0;
font-family: FontAwesome;
visibility: visible;
display: block;
height: 15px;
width: 15px;
display: inline-block;
border: 2px solid #fff;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px
}
.callbacks_here a:after {
border: 2px solid #fff;
background: #fff
}
a.btn.btn-primary.btn-lg.see-button.hvr-shutter-out-horizontal {
background: #3f3c35
}
.animated-grids {
margin-bottom: 7em
}
.header-right {
float: left
}
.resent {
margin: 1em 0
}
.resent-grid {
padding-left: .1em
}
.resent-grid-img {
position: relative
}
.resent-grid-img iframe {
width: 100%;
height: 642px
}
.resent-grid-img a {
display: block
}
.resent-grid a img {
width: 100%
}
.time {
position: absolute;
top: 92%!important;
right: 0%;
display: block
}
.small-time {
top: 87%!important;
z-index: 9
}
.slider-time {
top: 90%!important;
z-index: 9
}
.show-time {
top: 87%!important
}
.movie-time {
top: 94%!important
}
.time p {
font-size: 12px;
margin: 0;
color: #fff;
padding: .2em .5em;
border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px
}
.clck {
position: absolute;
bottom: 1%;
right: 9%;
display: block;
z-index: 9
}
.small-clck {
right: 12%;
bottom: 2%
}
.glyphicon-time:before {
content: "\e023";
color: #fff;
font-size: 1em
}
.show-clock {
right: 22%;
bottom: 1%
}
.movie-clock {
right: 15%;
bottom: 1%
}
.sports-tome {
top: 82%!important;
z-index: 9
}
.sports-clock {
right: 18%;
bottom: 1%
}
.resent-info h3 {
font-size: 23px;
color: #000;
font-weight: 600;
margin: 1em 0;
font-family: 'Oswald',sans-serif
}
.resent-grid-info {
background: #f7f7f7;
padding: 1em
}
.resent-grid-info a.title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #525254
}
.resent-grid-info a.title:hover {
transition: inherit;
text-decoration: underline
}
.resent-grid-info p.author {
font-size: 14px;
color: #9e9e9e;
margin: .5em 0
}
.resent-grid-info p.author a.author {
color: #21deef;
text-decoration: none;
padding-left: 1.8em;
background: url(../images/u12.png) no-repeat 0 1px
}
.resent-grid-info p.author a.author:hover {
text-decoration: none
}
.resent-grid-info p.views {
font-size: 14px;
color: #9e9e9e;
margin: 0
}
.recommended-grids {
margin: 3em 0
}
.recommended-info h3 {
font-size: 20px;
color: #181818;
margin: 0 0 1em 0;
font-weight: 600
}
.recommended-info p {
font-size: 13px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.recommended-grid-info a.title {
font-size: 14px;
line-height: 1.3em
}
.recommended-grid-info h3 {
margin: 0;
overflow: hidden;
height: 54px
}
.recommended-grid-info h5 {
margin: 0;
overflow: hidden;
height: 34px
}
.resent-grid-info a.title-info {
font-size: 15px
}
.recommended-grid-info p.author {
font-size: 13px;
margin: 1em 0 0 0
}
.resent-grid-info ul {
padding: 0;
margin: 0
}
.resent-grid-info ul li {
display: inline-block
}
.recommended-grid-infoo ul {
padding: 0!important;
margin: 0!important
}
.recommended-grid-info ul li {
display: inline-block!important;
width: 49%
}
.recommended-grid-info ul li.right-list {
text-align: right
}
.resent-grid-info p.author-info {
font-size: 13px;
font-weight: 600
}
.resent-grid-info p.views {
font-size: 13px
}
.resent-grid-info p.views-info {
font-size: 12px
}
.slid-bottom-grids {
margin: 2em 0 0 0
}
.slid-bottom-grid {
float: left;
width: 35%
}
.slid-bottom-right {
float: left;
width: 65%;
text-align: right
}
.slid-bottom-grid p {
margin: 0!important
}
.recommended-grid-info {
box-shadow: 0 0 2px #c1c1c1!important;
background: none
}
.heading {
float: left
}
.heading-right {
float: left;
margin: .5em 0 0 3em
}
.heading-right a {
padding: 8px 20px;
background-color: rgba(0,0,0,.4);
border: solid 1px #ddd;
color: #fff;
font-size: 14px;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px
}
.heading-right a:hover {
background: #f7f7f7;
color: #272c2e
}
.heading-right a:focus {
border: none!important;
outline: none
}
.english-grid {
margin-top: 1em
}
.footer {
background: #3b4142;
padding: 2em 3em
}
.footer-top-nav ul {
padding: 0;
margin: 0
}
.footer-top-nav ul li {
display: inline-block;
margin: 0 1em
}
.footer-top-nav ul li a {
color: #fff;
font-size: 14px;
text-decoration: none
}
.footer-top-nav ul li a:hover {
color: rgba(255,255,255,.48)
}
.footer-bottom-nav ul {
padding: 1em 0 0 0;
margin: 0
}
.footer-bottom-nav ul li {
display: inline-block;
margin: 0 1em
}
.footer-bottom-nav ul li a {
color: rgba(255,255,255,.54);
font-size: 12px;
text-decoration: none
}
.footer-bottom-nav ul li a:focus {
outline: none
}
.footer-bottom-nav ul li a:hover {
color: #fff
}
.footer-bottom-nav ul li {
font-size: 12px;
color: rgba(255,255,255,.54)
}
.footer-top {
padding-bottom: 2em;
border-bottom: solid 1px rgba(255,255,255,.42)
}
.footer-bottom {
margin-top: 2em
}
.footer-bottom ul {
padding: 0;
margin: 0
}
.footer-bottom ul li {
display: inline-block;
margin: 0 1em 0 0
}
.footer-bottom ul li.languages {
width: 16%
}
.footer-bottom ul li.languages select.form-control {
cursor: pointer;
color: #b3b3b3;
border: none;
background: url(../images/select-arrow.png) no-repeat 95% center;
border-radius: 3px;
font-size: 12px;
height: 32px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
outline: none;
-webkit-appearance: none
}
.footer-bottom ul li.languages select.form-control:focus {
outline: none;
box-shadow: 0 0 0
}
.footer-bottom ul li.languages select.form-control option {
color: #272c2e;
border: none
}
.footer-bottom ul li a.f-history {
background: url(../images/12.png) no-repeat 11px 8px;
color: #b3b3b3;
text-decoration: none;
font-size: 12px;
padding: .52em 1em .52em 3em;
border: none;
border: solid 1px #b3b3b3;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px
}
.footer-bottom ul li a.f-help {
background: url(../images/13.png) no-repeat 11px 7px
}
.footer-bottom ul li a.f-help:focus {
outline: none
}
select.form-control.bfh-countries:hover {
transition: .5s all;
-webkit-transition: .5s all;
-o-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all
}
.song {
width: 80%;
float: left
}
.song-grid-right {
width: 16%;
float: left;
margin-left: 2em
}
.song iframe {
width: 100%;
height: 500px
}
.song-info {
padding-left: 0;
padding: 0 0 1em
}
.song-info h3 {
color: #272c2e;
font-size: 22px;
margin: 0;
line-height: 1.5em
}
.video-grid iframe {
border: none;
height: 376px
}
.share h5 {
margin: 0;
font-size: 20px;
color: #525254
}
.share ul {
margin: 2em 0 0 0;
padding: 0;
list-style: none
}
.share li {
display: block;
margin: 1em 0;
color: #a8a8a8;
font-size: 14px
}
.share li a {
color: #a8a8a8;
font-size: 14px;
text-decoration: none;
padding-left: 3em;
line-height: 2em
}
.share li a.icon {
background: url(../images/like.png) no-repeat 0 0;
height: 34px;
display: block
}
.share li a.fb-icon {
background: url(../images/fb.png) no-repeat 0 0
}
.share li a.rss-icon {
background: url(../images/rss.png) no-repeat 0 0
}
.share li a.dribbble-icon {
background: url(../images/dribbble.png) no-repeat 0 0
}
.share li a.twitter-icon {
background: url(../images/twitter.png) no-repeat 0 0
}
.share li a.pinterest-icon {
background: url(../images/pinterest.png) no-repeat 0 0
}
.share li a.behance-icon {
background: url(../images/behance.png) no-repeat 0 0
}
.share li a.whatsapp-icon {
background: url(../images/whatsapp.png) no-repeat 0 0
}
.share li a.comment-icon {
background: url(../images/comment.png) no-repeat 0 0
}
.share li.view {
background: url(../images/view.png) no-repeat 0 0;
height: 34px;
display: block;
padding-left: 3em;
line-height: 2em
}
.share li a:hover {
color: #464646
}
.share.title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #525254
}
.show-top-grids {
padding: 0 1em 0 0
}
.show-grid-right {
background: #f7f7f7;
padding: 3em 0 0 3em
}
.single-right {
background: #4c4c4c;
padding: 3em 0 0 3em
}
.show-right-grids {
margin-bottom: 1.5em
}
.show-grid-right h3 {
font-size: 20px;
color: #181818;
margin: 0 0 1em 0;
font-weight: 600
}
.single-right h3 {
font-size: 20px;
color: #181818;
margin: 0 0 1em 0;
font-weight: 600
}
.show-right-grids ul {
padding: 0;
margin: 2em 0 0 0
}
.show-right-grids ul li {
display: inline-block;
margin-left: 1em
}
.show-right-grids ul li:nth-child(1) {
margin: 0
}
.show-right-grids ul li a {
font-size: 13px;
color: #9e9e9e;
margin: 1em 0
}
.show-right-grids ul li a:hover {
text-decoration: underline;
color: #21deef
}
.show-right-grids ul li a img {
width: 100%
}
.recommended-info p.history-text {
font-size: 13px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.recommended-info p.history-text span {
display: block;
margin: 1em 0 0 0
}
.history-left {
width: 90px!important;
height: 90px;
background: #c5c5c5
}
.history-left p {
font-size: 17px;
color: #272c2e;
margin: 1.7em 0 0 0;
font-weight: 600;
text-align: center
}
.history-grids {
margin: 5em 0
}
.history-right h5 {
font-size: 18px;
color: #181818;
margin: 0 0 .5em 0;
font-weight: 600
}
.history-right p {
font-size: 13px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.hvr-shutter-in-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #2098d1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.hvr-shutter-in-vertical:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #272c2e;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px
}
.hvr-shutter-in-vertical:hover,.hvr-shutter-in-vertical:focus,.hvr-shutter-in-vertical:active {
color: #fff
}
.hvr-shutter-in-vertical:hover:before,.hvr-shutter-in-vertical:focus:before,.hvr-shutter-in-vertical:active:before {
-webkit-transform: scaleY(0);
transform: scaleY(0)
}
.single-main {
padding: 4em 1em 0 0
}
.single-left {
padding-bottom: 2em
}
.song-info-left {
float: left
}
.published {
margin: 1em 0 0 0;
padding-left: 0;
background: #f7f7f7;
padding: 1em
}
.published h4 {
color: #717171;
font-size: 13px;
margin: 0;
line-height: 1.5em;
font-weight: 600
}
.published p {
font-size: 13px;
color: #9e9e9e;
margin: 1em 0;
line-height: 1.8em
}
#myList ul {
margin: 0
}
#myList li {
display: none;
list-style-type: none
}
.blog-text:after {
clear: both
}
.blog-grid img {
width: 100%
}
#loadMore {
color: #fff;
font-size: 16px;
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
cursor: pointer;
text-align: center;
margin: 2em auto 0 auto;
padding: .5em 0;
background: #21deef;
width: 19%
}
#loadMore:hover {
color: #fff;
text-decoration: none
}
.load_more {
margin-top: 0
}
.load_more ul {
padding: 0
}
.g_r {
background: none;
margin: 30px 0 0 0
}
.l_g_r img {
width: 100%
}
.load-grids {
margin: 1em 0 0 0
}
.load-grid {
float: left;
width: 17%
}
.load-grid p {
font-size: 14px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.load-grid a {
font-size: 14px;
color: #0076cc;
margin: 1em 0;
line-height: 1.8em
}
.load-grid a:hover {
color: #9e9e9e;
text-decoration: none
}
.all-comments {
margin: 1em 0 0 0;
padding-left: 0;
padding: 3em 1em;
box-shadow: 0 0 2px #c1c1c1!important
}
.all-comments-info a {
font-size: 14px;
color: #9e9e9e;
text-decoration: none
}
.box {
margin: 1em 0
}
.box form {
margin: 3em 0 0 0
}
.box input[type="text"],.box textarea {
outline: none;
border: 1px solid #d4d3d3;
background: none;
padding: 10px 10px;
width: 60%;
font-size: 13px
}
.box input[type="text"]:nth-child(2) {
margin: 1em 0
}
.box textarea {
resize: none;
min-height: 200px;
margin: 1em 0;
width: 80%
}
.box input[type="submit"] {
outline: none;
font-style: normal;
padding: 8px 20px;
background: #21deef;
font-size: 14px;
color: #fff;
display: block;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all
}
.box input[type="submit"]:hover {
text-decoration: none;
color: #272c2e;
background: #e2e2e2
}
.all-comments-buttons {
margin: 3em 0 1em
}
.all-comments-buttons ul {
margin: 0;
padding: 0
}
.all-comments-buttons ul li {
display: inline-block;
margin: 0 1em
}
.all-comments-buttons ul li:nth-child(1) {
margin-left: 0
}
.all-comments-buttons ul li a.top {
color: #000;
font-size: 13px;
padding: .5em 1.3em;
background: #e2e2e2;
border-radius: 3px;
text-decoration: none
}
.all-comments-buttons ul li a.newest {
position: relative
}
.all-comments-buttons ul li a.top:hover {
color: #fff;
background: #21deef
}
.media-grids {
margin-top: 4em
}
.media {
margin: 4em 0
}
.media h5 {
font-size: 14px;
font-weight: 600;
margin: 0 0 20px 0;
color: #0076cc
}
.media h5 a {
color: #df2229
}
.media-left a {
width: 65px;
height: 65px;
display: block;
background: #e2e2e2;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%
}
.media-body p {
font-size: 13px;
color: #757575;
margin: 0 0 .5em 0;
line-height: 1.5em
}
.media-body span {
color: #c7c7c7;
font-size: 13px
}
.media-body span a {
color: #21deef;
text-decoration: none
}
.media:nth-child(3) {
padding-left: 4em
}
.media:nth-child(5) {
padding-left: 4em
}
.single-grid-right {
margin-top: 2em
}
.single-right-grids {
margin: 0 0 1.5em 0
}
.single-right-grid-left a img {
width: 100%
}
.single-right-grid-right a.title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #525254;
text-decoration: none
}
.single-right-grid-right a.title:hover {
text-decoration: underline
}
.single-right-grid-right p.author {
font-size: 14px;
color: #9e9e9e;
margin: .5em 0
}
.single-right-grid-right p.author {
font-size: 13px;
color: #9e9e9e;
margin: 0 0
}
.single-right-grid-right p.author a {
color: #21deef;
text-decoration: none
}
.single-right-grid-right p.views {
font-size: 12px;
color: #c3c3c3;
margin: 0
}
.single-right-grid-left {
padding-left: 0
}
.single-right-grid-right {
padding-right: 0
}
.about-main-grids {
padding: 0 0 1em 3em
}
.about-grids {
margin: 5em 0 2em 0
}
.about-left-grids {
padding: 2em;
border: solid 1px #b2b2b2
}
.about-left-img {
padding-left: 0
}
span.glyphicon.glyphicon-time.about-clock :before {
content: "\e023"!important;
color: #cacaca!important;
font-size: 9em!important
}
span.glyphicon.glyphicon-user {
color: #cacaca;
font-size: 7em;
line-height: 1.3em
}
.about-left-img span.glyphicon-envelope {
color: #cacaca;
font-size: 7em;
line-height: 1.3em
}
.about-left-img img {
width: 100%
}
.about-left-info a {
font-size: 20px;
color: #21deef;
margin: 0 0 .5em 0;
font-weight: 600;
text-decoration: none
}
.about-left-info p {
font-size: 13px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.about-bottom-grids:nth-child(2) {
margin-top: 4em
}
.about-bottom-grids:nth-child(3) {
margin-top: 4em
}
.about-bottom-grids {
margin-top: 2em
}
.terms-info {
margin: 2em 0 0 0
}
.terms-info-grid {
margin-bottom: 2em
}
.terms-info-grid h3 {
font-size: 16px;
color: #181818;
margin: 0 0 1em 0;
font-weight: 600;
font-family: 'Open Sans',sans-serif
}
.terms-info-grid p {
font-size: 13px;
color: #9e9e9e;
margin: 0 0 0 1em;
line-height: 1.8em
}
.terms-info-grid p.terms-info-text {
margin: 1em 0 0 1em
}
.news-grids {
margin-top: 2em;
padding: 2em
}
.news-left {
padding-left: 0
}
.news-right {
padding-left: 1em
}
.news-left h3 {
font-size: 20px;
color: #21deef;
margin: 0 0 .5em 0;
font-weight: 600
}
.news-left ol {
padding: 0;
margin: 2em 0 0 0
}
.news-left ol li {
font-size: 13px;
color: #9e9e9e;
margin: 0 0 .5em 1em;
line-height: 1.8em
}
.news-right ol li a {
font-size: 13px;
color: #9e9e9e;
margin: 0 0 .5em 1em;
line-height: 1.8em
}
.news-right ol li a:hover {
color: #21deef;
text-decoration: none
}
.copy-info ol {
margin: 1em 0
}
.copy-info ol li a {
font-size: 13px;
color: #9e9e9e;
margin: 0;
line-height: 1.8em
}
.copy-info ol li a:hover {
color: #21deef;
text-decoration: none
}
.copy-grid h4 {
font-size: 20px;
color: #181818;
margin: 0 0 1em 0;
font-weight: 400
}
.copy-bottom-grids {
margin-top: 2em
}
.copy-bottom-grid h5 {
font-size: 18px;
color: #03baad;
margin: 0 0 1em 0;
font-weight: 600
}
.copy-grid {
margin-top: 3em
}
.developers-banner {
background: url(../images/dev-img.jpg) no-repeat 0 0;
background-size: cover;
padding: 14em 0 10em 0
}
.developers-info {
width: 60%
}
.developers-info h3 {
color: #fff;
font-size: 36px;
margin: 0
}
.developers-info p {
color: #fff;
font-size: 17px;
line-height: 1.8em;
margin: 1em 0 0 0
}
.d-main {
padding: 3em 0
}
.developers-grids {
margin: 4em 0 3em
}
.developers-grid {
background: #f7f7f7;
padding: 2em;
margin-bottom: 3em
}
.developers-grid a {
color: #21deef;
font-size: 24px;
margin: 0;
text-decoration: none
}
.developers-grid p {
font-size: 13px;
line-height: 1.8em;
color: #9e9e9e;
margin: 1em 0 0 0
}
.creators-banner {
background: url(../images/create.jpg) no-repeat 0 -105px!important;
background-size: cover!important
}
.creators-grids {
margin: 4em 0 3em
}
.creators-grid {
background: #f7f7f7;
padding: 2em;
margin-bottom: 3em
}
.creators-grid a {
color: #21deef;
font-size: 24px;
margin: 0;
text-decoration: none
}
.creators-grid p {
font-size: 13px;
line-height: 1.8em;
color: #9e9e9e;
margin: 1em 0 0 0
}
.creators-bottom {
padding: 3em 0
}
.creators-bottom-grids-info h3 {
text-align: center;
color: #21deef;
font-size: 24px;
margin: 0
}
.creators-bottom-grids {
margin: 6em 0 0 0
}
.creators-bottom-grid {
text-align: center
}
.creators-bottom-grid h4 {
color: #626262;
margin: 2em 0 1em 0;
font-size: 18px
}
.creators-bottom-grid p {
color: #9e9e9e;
font-size: 13px;
margin: 0 auto;
width: 80%;
line-height: 1.8em
}
.services-icon {
background: #2edace;
width: 100px;
height: 100px;
line-height: 12em;
margin: 0 auto;
border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%
}
.glyphicon {
position: relative;
top: 2px;
display: inline-block;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.services-icon span.glyphicon-globe {
font-size: 3.5em;
color: #fff
}
.glyphicon-magnet {
font-size: 3.5em;
color: #fff
}
.glyphicon-cog {
font-size: 3.5em;
color: #fff
}
.try-banner {
background: url(../images/try-banner.jpg) no-repeat 0 1px!important;
background-size: cover
}
.try-left-info {
background: #f1f1f1;
padding: 2em
}
.try-left-info h3 {
color: #21deef;
font-size: 24px;
margin: 0
}
.try-left-info p {
font-size: 13px;
line-height: 1.8em;
color: #9e9e9e;
margin: 1em 0 0 0
}
.try-right-info {
background: #f1f1f1;
padding: 2em
}
.try-right-left h3 {
color: #21deef;
font-size: 3em;
margin: 0
}
.try-right-left p {
font-size: 13px;
line-height: 1.8em;
color: #9e9e9e;
margin: 1em 0 0 0
}
.try-right-left img {
width: 100%
}
.upload {
padding: 8em 0;
background: #f3f3f3
}
.upload-right {
padding: 10em 0;
background: #fff
}
.upload-file input[type="file"] {
opacity: 0;
width: 75px;
height: 75px;
display: inline-block;
border: 0;
outline: none;
position: absolute;
left: 47.6%;
top: 231px;
cursor: pointer;
border-radius: 5%;
-webkit-border-radius: 5%;
-ms-border-radius: 5%;
-moz-border-radius: 5%;
-o-border-radius: 5%
}
.services-icon {
background: #c5c5c5;
width: 75px;
height: 75px;
line-height: 10em;
text-align: center;
position: relative;
margin: 0 auto;
border-radius: 5%;
-webkit-border-radius: 5%;
-ms-border-radius: 5%;
-moz-border-radius: 5%;
-o-border-radius: 5%
}
.glyphicon-open {
font-size: 4.5em;
color: #fff
}
.upload-info {
text-align: center;
margin: 3em 0 0 0
}
.upload-info h5 {
color: #000;
font-size: 20px;
font-weight: 600;
margin: 0
}
.upload-info span {
font-size: 14px;
color: #9e9e9e
}
.upload-info p {
font-size: 14px;
color: #757575;
margin: 0
}
.upload-right-bottom-grids {
margin: 2em 0 0 0;
background: #fff;
padding: 3em
}
.upload-right-bottom-left h4 {
color: #000;
font-size: 20px;
font-weight: 600;
margin: 0
}
.upload-right-bottom-left ul {
padding: 0;
margin: 2em 0 0 0
}
.upload-right-bottom-left ul li {
display: block;
margin: 1em 0
}
.upload-right-bottom-left ul li a {
font-size: 13px;
color: #9e9e9e;
margin: 1em 0;
text-decoration: none;
background: url(../images/h-arrow.png) no-repeat 0 4px;
padding-left: 1.5em
}
.upload-right-bottom-left ul li a:hover {
text-decoration: none;
color: #21deef
}
.news-main-grids {
padding: 0 0 1em 3em
}
.side-info-bottom {
position: relative
}
.side-bottom {
text-align: center;
position: absolute;
left: 0;
bottom: 3%
}
.side-bottom-icons {
margin-bottom: 2em
}
.side-bottom-icons ul {
padding: 0;
margin: 0
}
.side-bottom-icons ul li {
display: inline-block;
margin: 0 .3em
}
.side-bottom-icons ul li a.facebook {
background: url(../images/social.png) no-repeat 0 0;
width: 30px;
height: 30px;
display: block
}
.side-bottom-icons ul li a.twitter {
background: url(../images/social.png) no-repeat -30px 0
}
.side-bottom-icons ul li a.chrome {
background: url(../images/social.png) no-repeat -60px 0
}
.side-bottom-icons ul li a.dribbble {
background: url(../images/social.png) no-repeat -90px 0
}
.side-bottom-icons ul li a.facebook:hover {
opacity: .5
}
.copyright p {
color: #bbb;
margin: 0;
font-size: 13px;
text-align: center
}
.copyright p a {
color: #bbb;
text-decoration: none
}
.copyright p a:hover {
color: #fff
}
.top-navigation {
display: none
}
@media (max-width: 1366px) {
.slid-bottom-grid {
width:43%
}
.slid-bottom-right {
width: 57%
}
.show-grid-right {
padding: 2em 0 0 2em
}
.resent-grid-info p.author-info {
font-size: 12px
}
}
@media (max-width: 1280px) {
.time {
top:91%!important
}
.clck {
right: 11%
}
.small-clck {
right: 14%!important
}
.small-time {
top: 85%!important
}
.show-time {
top: 85%!important
}
.show-clock {
right: 26%
}
.slider-time {
top: 88%!important
}
.history-left {
width: 83px!important;
height: 83px
}
.movie-time {
top: 93%!important
}
.movie-clock {
right: 17%!important
}
.sports-clock {
right: 21%!important
}
.sports-tome {
top: 80%!important
}
}
@media (max-width: 1080px) {
form.navbar-form.navbar-right {
width:47%
}
.header-top-right {
margin: .5em 0
}
.sidebar {
padding: 0 10px 20px 10px
}
.time {
top: 89%!important
}
.clck {
right: 13%
}
.slid-bottom-grid {
width: 51%
}
.slid-bottom-right {
width: 49%
}
.resent-grid-info p.author a.author {
padding-left: 1.5em
}
.small-clck {
right: 17%!important
}
.small-time {
top: 83%!important
}
.slider-time {
top: 86%!important
}
.show-video-grid {
width: 33.33%!important;
margin-bottom: 2em
}
.show-time {
top: 90%!important
}
.show-clock {
right: 17%;
bottom: 2%
}
.show-grid-right {
padding: 1em 0 0 1em
}
.show-grid-left {
width: 80%
}
.show-grid-right {
width: 20%
}
.history-right {
width: 90%
}
.movie-clock {
right: 22%!important;
bottom: 2%
}
.recommended-grid-movie-info ul li {
display: block!important;
width: 100%
}
.recommended-grid-movie-info ul li.right-list {
text-align: left
}
.sports-tome {
top: 74%!important
}
.sports-clock {
right: 25%!important
}
span.glyphicon.glyphicon-user {
font-size: 5em
}
.about-left-img span.glyphicon-envelope {
font-size: 5em
}
.about-left-info a {
font-size: 18px
}
.song-grid-right {
width: 18%;
margin-left: 1em
}
.share li {
font-size: 13px
}
.share li a {
font-size: 13px
}
.song-info h3 {
font-size: 20px
}
.single-right-grid-right {
padding: 0
}
.single-right-grid-right a.title {
font-size: 13px
}
.callbacks_nav {
right: 7%
}
}
@media (max-width: 1024px) {
form.navbar-form.navbar-right {
width:43%
}
.slid-bottom-grid {
width: 50%
}
.slid-bottom-grid {
width: 100%;
float: none
}
.slid-bottom-right {
text-align: left
}
.recommended-grid-info ul li {
display: block;
width: 100%
}
.recommended-grid-info ul li.right-list {
text-align: left
}
.history-right {
width: 88%
}
.share li {
font-size: 12px
}
.show-grid-right h3 {
font-size: 15px
}
.sports-recommended-grid {
width: 33.33%!important;
margin-bottom: 2em!important
}
.sports-tome {
top: 84%!important
}
.sports-clock {
right: 16%!important;
bottom: 4%
}
}
@media (max-width: 991px) {
body {
padding:0
}
nav.navbar.navbar-inverse.navbar-fixed-top {
position: inherit
}
.t-menu {
float: left
}
.t-img {
float: right
}
form.navbar-form.navbar-right {
width: 41%
}
.sidebar {
float: none!important;
position: inherit;
width: 100%
}
.recommended-grid {
float: left;
width: 25%;
margin-bottom: 2em
}
.slider-top-grids {
width: 33.33%!important;
float: left!important
}
.side-bottom {
position: inherit;
padding: 2em 0
}
.drop-navigation {
display: none;
margin-top: 1em
}
.top-navigation {
display: block;
padding: 20px;
cursor: pointer;
font-size: 2em;
color: #fff;
position: relative;
text-align: center;
margin: 0 auto
}
ul.nav-sidebar {
display: block;
margin: 0
}
ul.nav.nav-sidebar li a {
padding: .8em 0 .8em 35em
}
.sidebar {
padding: 0;
margin: 0
}
.sidebar ul.nav-sidebar li {
display: block
}
.sidebar ul li a {
padding: .3em 0;
display: block;
float: none;
color: #fff
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 39em!important
}
.main {
padding: 2em 0 0 0;
float: none!important;
margin: 0;
width: 100%
}
.show-grid-left {
float: left
}
.show-grid-right {
float: left
}
.history-left {
float: left
}
.history-left p {
margin: 1.7em 0 0 0
}
.history-right {
float: left
}
.english-grid {
margin-top: 0!important
}
.single-left {
float: left;
width: 70%
}
.single-right {
padding: 2em;
float: left;
width: 30%
}
.single-right-grid-left {
padding: 0;
margin-bottom: 1em
}
.about-left-grids {
text-align: center
}
.creators-bottom-grid {
margin-bottom: 2em
}
.try-left {
margin-bottom: 2em
}
.try-right-left {
margin-bottom: 2em
}
}
@media (max-width: 800px) {
form.navbar-form.navbar-right {
width:34%;
margin-left: 4em
}
}
@media (max-width: 768px) {
form.navbar-form.navbar-right {
margin-left:3em
}
form.navbar-form.navbar-right {
width: 33%
}
ul.nav.nav-sidebar li a {
padding: .8em 0 .8em 27em
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 31em!important
}
.time {
top: 87%!important
}
.clck {
right: 16%
}
.small-clck {
right: 19%!important
}
.small-time {
top: 79%!important
}
.recommended-grids {
margin: 2em 0
}
.small-time {
top: 79%!important
}
.slider-time {
top: 83%!important
}
.show-clock {
right: 20%
}
.show-grid-left {
width: 75%
}
.show-grid-right {
width: 25%
}
.song {
width: 100%;
float: none
}
.song-grid-right {
width: 100%;
margin: 1em 0;
float: none
}
.share li {
display: inline-block;
margin: .5em 0 0 .8em
}
.share li.view {
display: inline-block
}
.movie-clock {
right: 28%!important;
bottom: 3%
}
.show-time {
top: 88%!important
}
.sports-tome {
top: 84%!important
}
.developers-info h3 {
font-size: 30px
}
.developers-info {
width: 75%
}
.developers-info p {
font-size: 14px
}
.developers-banner {
padding: 10em 0 7em 0
}
.footer {
padding: 2em 0
}
.footer-grids {
padding: 0 2em
}
.footer-bottom ul li.languages {
width: 21%
}
}
@media (max-width: 767px) {
.sidebar {
display:block
}
.navbar-inverse .navbar-toggle {
display: none;
float: none
}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
display: block;
border: none
}
form.navbar-form.navbar-right {
width: 38%;
margin: 0
}
.top-search form input[type="submit"] {
right: 26px;
top: 18px;
color: #fff
}
a.navbar-brand {
float: none
}
a.navbar-brand {
display: block;
text-align: center!important;
width: 25%;
margin: 0 auto 1em auto;
padding: 0
}
}
@media (max-width: 640px) {
.sidebar {
display:block
}
.navbar-inverse .navbar-toggle {
display: none;
float: none
}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
display: block;
border: none
}
form.navbar-form.navbar-right {
width: 38%;
margin: 0
}
.top-search form input[type="submit"] {
right: 26px;
top: 18px
}
a.navbar-brand {
float: none
}
a.navbar-brand {
display: block;
text-align: center!important;
width: 25%;
margin: 0 auto 1em auto;
padding: 0
}
ul.nav.nav-sidebar li a {
padding: .8em 0 .8em 19em
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 26em!important
}
ul.nav-sidebar {
display: block;
margin-right: 0;
margin-left: 0
}
.upload-file input[type="file"] {
left: 44.3%;
top: 332px
}
.clck {
right: 20%
}
.time {
top: 85%!important
}
.small-clck {
right: 24%!important
}
.small-time {
top: 75%!important
}
.slider-time {
top: 80%!important
}
.callbacks_nav {
right: 10%
}
.footer-bottom ul li.languages {
width: 30%;
margin-bottom: 2em
}
.video-grid iframe {
height: 223px
}
.box input[type="text"],.box textarea {
width: 100%
}
.box textarea {
min-height: 130px;
width: 100%
}
.all-comments-buttons ul li a.top {
font-size: 12px;
padding: .5em 1em
}
.show-grid-left {
width: 100%;
float: none
}
.show-grid-right {
width: 100%;
float: none;
padding: 2em 0 2em 2em
}
.show-time {
top: 88%!important
}
.history-right {
width: 84%
}
.sports-tome {
top: 79%!important
}
.about-left {
margin-bottom: 2em
}
.developers-banner {
padding: 5em 0
}
.developers-info {
width: 90%
}
.creators-grids {
margin: 2em 0 2em
}
.creators-bottom {
padding: 0 0
}
}
@media (max-width: 480px) {
a.navbar-brand img {
width:100%
}
.file a {
font-size: 12px
}
.signin a {
font-size: 12px
}
.top-search form input[type="text"] {
padding: 6px 30px 6px 12px
}
.form-control {
height: 31px
}
a.navbar-brand {
margin: 0 auto 0 auto
}
.upload-file input[type="file"] {
left: 41.6%;
top: 310px
}
.top-navigation {
padding: 10px
}
.slider-top-grids {
width: 100%!important;
float: none!important
}
.recommended-grid-info ul li {
width: 49%
}
.recommended-grid-info ul li.right-list {
text-align: right
}
.resent-grid-info p.author a.author {
padding-left: 2em
}
.slider-first:nth-child(3) {
display: none
}
.slider-first:nth-child(4) {
display: none
}
.slider-first {
width: 50%
}
.callbacks_nav {
top: 100%
}
.callbacks_nav {
right: 15%
}
.callbacks_nav.next {
right: 4%
}
.recommended-grid {
width: 50%
}
ul.nav.nav-sidebar li a {
padding: .8em 0 .8em 14em
}
.resent-grid-info p.author-info {
font-size: 13px
}
.resent-grid-info p.views-info {
font-size: 13px
}
.footer-bottom ul li.languages {
width: 36%
}
.bfh-countries {
height: 35px
}
.time {
top: 90%!important;
right: 2%
}
.clck {
right: 12%;
bottom: 3%
}
.small-time {
top: 81%!important
}
.small-clck {
right: 20%!important
}
.slider-time {
top: 85%!important
}
.single-left {
float: none;
width: 100%
}
.single-right {
float: none;
width: 100%
}
.show-clock {
right: 29%
}
.show-time {
top: 84%!important
}
.history-right {
width: 80%
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 18em!important
}
.video-info-grid ul li {
width: 100%
}
.video-info-grid ul li.right-list {
text-align: left!important
}
.recommended-grid-movie-info ul li {
display: block!important;
width: 100%!important
}
.recommended-grid-movie-info ul li.right-list {
text-align: left!important
}
.show-time {
top: 91%!important
}
.movie-clock {
right: 21%!important
}
.sports-clock {
right: 27%!important
}
.sports-tome {
top: 74%!important
}
.creators-banner {
background: url(../images/create.jpg) no-repeat -11px 1px!important;
background-size: cover!important
}
}
@media (max-width: 320px) {
a.navbar-brand {
width:35%
}
form.navbar-form.navbar-right {
width: 100%;
margin: 0;
float: none!important;
padding: 0 0 .5em 0
}
.top-search form input[type="submit"] {
right: 14px;
top: 6px
}
.top-search form input[type="text"] {
padding: 6px 36px 6px 12px
}
.header-top-right {
float: none
}
ul.nav.nav-sidebar li a {
padding: .8em 0 .8em 8em
}
.nav-sidebar ul li a {
padding: .5em 0 .5em 12em!important
}
.callbacks_nav {
right: 20%
}
.clck {
right: 16%
}
.time {
top: 87%!important
}
.top-navigation {
font-size: 1.5em
}
.t-img img {
width: 74%
}
.recommended-info h3 {
font-size: 15px
}
.resent-grid-info a.title-info {
font-size: 14px
}
.recommended-grid-info h3 {
line-height: .8em
}
.recommended-grid-info a.title {
font-size: 13px
}
.small-clck {
right: 27%!important
}
.small-time {
top: 73%!important
}
.slider-time {
top: 79%!important
}
.footer-bottom ul li.languages {
width: 44%
}
.footer-bottom ul li.languages select.form-control {
font-size: 11px
}
.footer-bottom ul li a.f-history {
font-size: 12px
}
.heading-right a {
padding: 5px 15px
}
.heading-right {
margin: 0 0 0 3em
}
.show-video-grid {
width: 50%!important
}
.show-clock {
right: 30%
}
.small-time {
top: 75%!important
}
.show-top-grids {
padding: 0
}
.recommended-info p.history-text {
font-size: 12px
}
.history-grids {
margin: 2em 0
}
.history-left p {
font-size: 14px
}
.history-left {
width: 60px!important;
height: 60px
}
.history-right h5 {
font-size: 14px
}
.news-main-grids {
padding: 0 0 1em 1em
}
.history-right {
width: 79%
}
.show-time {
top: 83%!important
}
.movie-clock {
right: 26%!important
}
.movie-time {
top: 88%!important
}
.sports-recommended-grid {
width: 50%!important
}
.song-info h3 {
font-size: 15px
}
.video-grid iframe {
height: 152px
}
.published p {
font-size: 12px
}
.box input[type="text"],.box textarea {
padding: 6px 10px
}
.box textarea {
min-height: 95px
}
.all-comments-buttons ul li {
margin: 1em
}
.all-comments-buttons ul li:nth-child(1) {
margin-left: 1em
}
.media-body p {
font-size: 12px
}
.single-right h3 {
font-size: 15px
}
ul.nav.nav-sidebar li a {
font-size: 12px
}
.copyright p {
font-size: 12px
}
.about-grids {
margin: 2em 0 2em 0
}
.about-main-grids {
padding: 0 0 1em 1em
}
.about-left-grids {
padding: 1em
}
.about-left-info p {
font-size: 12px
}
.footer-top-nav ul li {
margin: .5em 1em
}
.news-left ol li {
font-size: 12px
}
.news-right ol li a {
font-size: 12px
}
.copy-grid h4 {
font-size: 16px;
line-height: 1.4em
}
.developers-info h3 {
font-size: 24px
}
.developers-info p {
font-size: 12px
}
.creators-banner {
background: url(../images/create.jpg) no-repeat -118px 0!important;
background-size: cover!important;
padding: 3em 0
}
.creators-top-grid {
padding: 0
}
.developers-banner {
padding: 2em 0
}
.creators-grid a {
font-size: 18px
}
.creators-grid p {
font-size: 12px
}
.creators-bottom-grids-info h3 {
font-size: 18px
}
.creators-bottom-grids {
margin: 2em 0 0 0
}
.creators-bottom-grid {
padding: 0
}
.creators-bottom-grid p {
font-size: 12px
}
.developers-grid a {
font-size: 18px
}
.developers-grid p {
font-size: 12px
}
.developers-grid {
padding: 1em
}
.developers-grid {
margin-bottom: 2em
}
.terms-info-grid p {
font-size: 12px
}
.feedback-grid p {
font-size: 13px
}
.try-left {
padding: 0
}
.try-left-info h3 {
font-size: 18px
}
.try-left-info p {
font-size: 12px
}
.try-right-left h3 {
font-size: 18px
}
.try-right {
padding: 0
}
.footer-top-nav ul li a {
font-size: 13px
}
.try-right-left {
padding: 0
}
.try-right-left p {
font-size: 12px
}
.try-banner {
background: url(../images/try-banner.jpg) no-repeat 0 1px!important;
background-size: cover
}
.footer-bottom ul li a.f-history {
padding: .52em 1em .52em 3em
}
}
.carousel-inner .active.left {
left: -33%
}
.carousel-inner .next {
left: 33%
}
.carousel-inner .prev {
left: -33%
}
.carousel-control.left,.carousel-control.right {
background-image: none;
color: #000
}
.item:not(.prev) {
visibility: visible
}
.item.right:not(.prev) {
visibility: hidden
}
.rightest {
visibility: visible
}
img {
max-width: 100%
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .6;
text-decoration: none
}
body {
border-top: 10px;
background: #4c4c4c
}
.thumbnails li>.fff .caption {
background: #fff!important;
padding: 10px
}
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase
}
.page-header h3 {
line-height: .88rem;
color: #000
}
ul.thumbnails {
margin-bottom: 0
}
.caption h4 {
color: #444
}
.caption p {
color: #999
}
.control-box {
text-align: right;
width: 100%
}
.carousel-control {
background: #666;
border: 0;
border-radius: 0;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: .5;
padding: 4px 10px 0;
position: static;
height: 30px;
width: 15px
}
@media (max-width: 767px) {
.page-header,.control-box {
text-align:center
}
}
@media (max-width: 479px) {
.caption {
word-break:break-all
}
}
li {
list-style-type: none
}
::selection {
background: #ff5e99;
color: #fff;
text-shadow: 0
}
::-moz-selection {
background: #ff5e99;
color: #fff
}
body {
padding: 30px 0
}
@import url(http://weloveiconfonts.com/api/?family=entypo);@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700);[class*="entypo-"]:before {
font-family: 'entypo',sans-serif
}
*,div {
box-sizing: border-box
}
.container {
display: block;
width: 70%;
margin: 20px auto 0 auto;
background: #fff;
height: 100vh
}
.sw {
float: left;
width: 100%;
height: 80px;
background: #5677fc;
padding: 15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-shadow: 0 2px 0 0 rgba(0,0,0,.1)
}
.sw form {
float: left;
width: 100%;
height: 50px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.sw a.logo {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
width: auto;
max-width: 80px;
margin-right: 10px;
-webkit-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
visibility: visible;
opacity: 1
}
.sw a.logo img {
max-width: 100%;
width: auto
}
.sw .search {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
outline: none;
border: none;
border-radius: 0;
background: #fff;
padding: 10px;
font-family: 'Roboto',sans-serif;
height: 30px;
-webkit-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
-webkit-appearance: none
}
.sw .search:focus {
height: 60px;
margin-left: -15px;
padding: 10px 15px
}
.sw .search:focus+.go {
height: 80px;
margin-right: -15px;
max-width: 80px;
color: #5677fc
}
.sw .search:focus+.go+a.logo {
visibility: hidden;
opacity: 0;
max-width: 0;
margin-right: 0
}
.sw .go {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
max-width: 50px;
display: inline-block;
border: none;
background: #fff;
color: #ccc;
height: 50px;
-webkit-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
font-size: 21px;
outline: none
}
.content {
float: left;
width: 100%;
clear: both;
padding: 15px;
text-align: center
}
.content h1 {
font-family: 'Roboto',sans-serif;
color: #333;
padding: 0;
font-size: 48px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
letter-spacing: -.02em;
margin-top: 50px 0 0 0
}
.content p {
font-family: "Roboto",sans-serif;
font-size: 16px;
color: #333;
-webkit-font-smoothing: antialiased
}
.content p a {
color: #5677fc;
text-decoration: none
}
.content p a:hover {
text-decoration: underline
}
.content cite {
color: #aaa
}
.mybutton {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 350px;
height: 42px;
cursor: I-beam;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0 20px;
overflow: hidden;
border: solid #ddd 1px;
-webkit-border-radius: 21px;
border-radius: 21px;
font: 20px "Antic",Helvetica,sans-serif;
color: rgba(140,140,140,1);
text-decoration: normal;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(40,40,40,.4);
-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.5) inset;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.5) inset;
-webkit-transition: all 502ms cubic-bezier(.68,-.75,.265,1.75);
-moz-transition: all 502ms cubic-bezier(.68,-.75,.265,1.75);
-o-transition: all 502ms cubic-bezier(.68,-.75,.265,1.75);
transition: all 502ms cubic-bezier(.68,-.75,.265,1.75)
}
.mybutton:hover {
width: 550px;
opacity: .82;
color: rgba(181,181,181,1);
background: #ddd;
-webkit-transition: all 500ms cubic-bezier(.68,-.75,.265,1.75);
-moz-transition: all 500ms cubic-bezier(.68,-.75,.265,1.75);
-o-transition: all 500ms cubic-bezier(.68,-.75,.265,1.75);
transition: all 500ms cubic-bezier(.68,-.75,.265,1.75)
}
.mybutton:focus {
width: 490px;
cursor: default;
padding: -13px 20px 0;
color: rgba(255,255,255,1);
-webkit-transition: all 601ms cubic-bezier(.68,-.75,.265,1.75);
-moz-transition: all 601ms cubic-bezier(.68,-.75,.265,1.75);
-o-transition: all 601ms cubic-bezier(.68,-.75,.265,1.75);
transition: all 601ms cubic-bezier(.68,-.75,.265,1.75)
}
.text {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: 25px/1 "amaranth",Helvetica,sans-serif;
color: #fff;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 2px 2px 4px rgba(0,0,0,.5)
}
input:focus {
outline: none
}
.cuadro_intro_hover {
padding: 0;
position: relative;
overflow: hidden;
height: 200px
}
.cuadro_intro_hover:hover .caption {
opacity: 1;
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
-moz-transform: translateY(-150px);
-ms-transform: translateY(-150px);
-o-transform: translateY(-150px)
}
.cuadro_intro_hover img {
z-index: 4
}
.cuadro_intro_hover .caption {
position: absolute;
top: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
width: 100%
}
.cuadro_intro_hover .blur {
background-color: rgba(0,0,0,.7);
height: 300px;
z-index: 5;
position: absolute;
width: 100%
}
.cuadro_intro_hover .caption-text {
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top: -20px;
width: 100%
}
.overlay {
position: absolute;
background-color: rgba(0,0,0,.85);
z-index: -9999;
color: #fff
}
ul.page {
list-style: none
}
ul.page li {
margin: 5px;
padding: 10px;
background-color: #4c4c4c;
font-weight: bold;
font-family: 'Open Sans Condensed',sans-serif
}
ul.page li a {
color: #2d556d;
text-decoration: none;
font-weight: bold;
font-family: 'Open Sans Condensed',sans-serif
}
.pagination>.active>a {
background-color: #2a9bb0;
color: #2a9bb0;
border-color: #2a9bb0
}
.pagination>li>a,.pagination>li>span {
color: #2a9bb0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment