<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UrConnex</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ asset('update/style.css') }}">
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/assets/css/main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/assets/js/chart.js"></script>
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
<style>
section{
padding: 50px 0;
}
/* gallery */
.gallery-title{
font-size: 36px;
color: #3F6184;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
}
.filter-button{
font-size: 18px;
border: 2px solid #3F6184;
padding:5px 10px;
text-align: center;
color: #3F6184;
margin-bottom: 30px;
background:transparent;
}
.filter-button:hover,
.filter-button:focus,
.filter-button.active{
color: #ffffff;
background-color:#3F6184;
outline:none;
}
.gallery_product{
margin: 0px;
padding:0;
position:relative;
}
.gallery_product .img-info{
position: absolute;
background: rgba(0,0,0,0.5);
left: 0;
right: 0;
bottom: 0;
padding: 20px;
overflow:hidden;
color:#fff;
top:0;
display:none;
-webkit-transition: 2s;
transition: 2s;
}
.gallery_product:hover .img-info{
display:block;
-webkit-transition: 2s;
transition: 2s;
}
h4{
color: #ffffff;
}
</style>
{% block stylesheets %}
<style>
a {
color: black;
}
.bi-arrow-up-circle {
color: #FF914D;
}
.sidebar {
/* position: fixed; */
left: 0;
/* z-index: 100; */
/* Behind the navbar */
}
.card {
margin-bottom: 1em;
}
.view-more-btn {
border: 2px solid #FF914D;
background-color: #FF914D;
box-shadow: 0px 9px 9px -4px #686868;
}
.title {
border: black solid 1px;
/* border-radius: 3px; */
display: inline;
align-items: center;
box-shadow: 0px 9px 9px -4px #686868;
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
body{
margin-top: 0px;
}
body::before{
height: 0px;
}
.links{
display: none;
}
</style>
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script src="/assets/js/jquery.js" type="text/javascript"></script>
<script src="/assets/js/google-code-prettify/prettify.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-transition.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-alert.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-modal.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-scrollspy.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-tab.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-button.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-collapse.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-carousel.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-typeahead.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap-affix.js" type="text/javascript"></script>
<script src="/assets/js/application.js" type="text/javascript"></script>
<script src="/assets/js/superfish.js" type="text/javascript"></script>
<script src="/assets/js/custom.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var showCaseItems = $('.show-case-item').hide();
var splashes = $('.splash').hide();
//get each image for each slide and set it as a background of the slide
// splashes.each(function () {
// var img = $(this).find('img');
// var imgSrc = img.attr('src');
// img.css('visibility', 'hidden');
// $(this).css({ 'background-image': 'url(' + imgSrc + ')', 'background-repeat': 'no-repeat' });
// });
splashes.eq(0).show();
showCaseItems.eq(0).show();
var prevIndex = -1;
var nextIndex = 0;
var currentIndex = 0;
$('#banner-pagination li a').click(function () {
nextIndex = parseInt($(this).attr('rel'));
if (nextIndex != currentIndex) {
$('#banner-pagination li a').html('<img src="assets/img/slidedot.png" alt="slide"/>');
$(this).html('<img src="assets/img/slidedot-active.png" alt="slide"/>');
currentIndex = nextIndex;
if (prevIndex < 0) prevIndex = 0;
splashes.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
$(this).hide();
});
splashes.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 500, function () { });
showCaseItems.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
$(this).hide();
showCaseItems.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 200, function () { });
});
prevIndex = nextIndex;
}
return false;
});
});
</script>
<script>
$(function() {
$('input[type=file]').change(function(){
var t = $(this).val();
var labelText = 'File : ' + t.substr(12, t.length);
$(this).prev('label').text(labelText);
})
});
</script>
{% endblock %}
</body>
</html>