n.kolosnaj/Globaly-CSS-Practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jun 24

Browse Source
This commit is contained in:
nkolosnjaj
2024-06-24 07:52:54 +02:00
parent 4cf0c7bcb9
commit 6e1ecbc485
146 changed files with 964 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
index.php Normal file → Executable file
View File

@@ -13,35 +13,34 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css" />
<title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
</head>
<style>
.slick-carousel .first-part {
min-height: 65vh;
background-size: cover;
background-position: center;
color: white;
position: relative;
transition: background-image 0.2s ease-in-out;
}
.slick-carousel .first-part {
min-height: 65vh;
background-size: cover;
background-position: center;
color: white;
position: relative;
transition: background-image 0.2s ease-in-out;
}
.slick-carousel .textbox {
position: relative;
opacity: 0;
transform: translateY(50px);
transition: transform 2s ease;
}
.slick-carousel .textbox {
position: relative;
opacity: 0;
transform: translateY(50px);
transition: transform 2s ease;
}
.slick-active .textbox {
opacity: 1;
transform: translateY(0);
}
.slick-active .textbox {
opacity: 1;
transform: translateY(0);
}
#right-btn,
#left-btn {
@@ -50,8 +49,8 @@
@media screen and (min-width:768px) {
.slick-carousel .first-part {
min-height: 53vh;
}
min-height: 53vh;
}
#right-btn,
#left-btn {
@@ -61,12 +60,13 @@
@media screen and (min-width:992px) {
.slick-carousel .first-part {
min-height: 78vh;
}
.textbox{
margin-top: 120px;
}
min-height: 78vh;
}
.textbox {
margin-top: 120px;
}
#right-btn,
#left-btn {
@@ -202,24 +202,31 @@
<i class="fa-solid fa-users"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<?php if (loggedin()) {
<?php
if (loggedin()) {
echo '<li><a class="dropdown-item" href="php/logout.php">Log out</a></li>';
if (is_admin()) {
echo '<li><a class="dropdown-item" href="admin_panel.php">Admin panel</a></li>';
}
} else {
echo '<li><a class="dropdown-item" href="login.html">Log in</a></li>
<li><a class="dropdown-item" href="signup.php">Sign up</a></li>';
} ?>
<li><a class="dropdown-item" href="signup.php">Sign up</a></li>';
}
?>
</ul>
</div>
<!-- Weather icon -->
<?php if (loggedin()) {
echo '<div class="weather-div" style="position: absolute; color: white; font-size: 25px; left:10%; top:15px;">
echo '<div class="weather-div" style="position: absolute; color: white; font-size: 25px; left:12%; top:15px;">
<a style="color:white" href="weather.php"><i class="fa-solid fa-cloud-sun"></i></a>
<div>';
}?>
} ?>
<!-- site navigation-->
@@ -323,12 +330,12 @@
<input class="read-more" type="submit" value="read more">
</div>
</div>
<div class="first-part" >
<div class="first-part">
<div class="textbox mx-md-3 mx-lg-3 mx-0 d-flex flex-column justify-content-start align-items-center">
<h2 id="first-part-h2" class="h2-first">
Why You Need an Advisor?</h2>
<p id="first-part-p" style="text-align: center; padding: 0 30px;">
We help you in creating a financial strategy that represents your personality. Getting to know you is financial advisor’s primary goal. Get a solution centered around your life’s priorities. It’s time for a financial strategy that puts your needs and priorities to the center.
We help you in creating a financial strategy that represents your personality. Getting to know you is financial advisor’s primary goal. Get a solution centered around your life’s priorities. It’s time for a financial strategy that puts your needs and priorities to the center.
</p>
<input class="read-more" type="submit" value="read more">
</div>
@@ -606,30 +613,30 @@
$(document).ready(function() {
var backgrounds = [
'url("assets/images/image36.jpg")',
'url("assets/images/image37.jpg")',
'url("assets/images/image38.jpg")'
];
var backgrounds = [
'url("assets/images/image36.jpg")',
'url("assets/images/image37.jpg")',
'url("assets/images/image38.jpg")'
];
$('.slick-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.first-part').css('background-image', backgrounds[nextSlide]);
});
$('.slick-carousel').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 500,
fade: true,
cssEase: 'linear',
prevArrow: '<button id="left-btn"><i class="fa-solid fa-chevron-left"></i></button>',
nextArrow: '<button id="right-btn"><i class="fa-solid fa-chevron-right"></i></button>',
});
// Initialize the background image for the first slide
$('.first-part').eq(0).css('background-image', backgrounds[0]);
$('.slick-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.first-part').css('background-image', backgrounds[nextSlide]);
});
$('.slick-carousel').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 500,
fade: true,
cssEase: 'linear',
prevArrow: '<button id="left-btn"><i class="fa-solid fa-chevron-left"></i></button>',
nextArrow: '<button id="right-btn"><i class="fa-solid fa-chevron-right"></i></button>',
});
// Initialize the background image for the first slide
$('.first-part').eq(0).css('background-image', backgrounds[0]);
});
</script>