Wyświetlacz promocji responsywność

0

Hej mam wyświetlacz promocji lecz chciałbym go troszkę odświeżyć tj dodać responsywność i jakieś efekty przejścia może ktoś chętny pomócwyświetlacz.rar

2

Kod i obrazki wrzuć na forum. Archiwum jest podejrzane i ludzie nie chcą otwierać.

0

<?php
ob_start();
session_start();

require 'view/MainController.php';

$photos = $BaseAdapter -> getAllPhotos();// połączenie z bazą danych  
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Zdjecia</title>
	<link rel="stylesheet" type="text/css" href="view/main.css" />
	<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
	<meta http-equiv="refresh" content="14400">
</head>
<body>
<div id="cos">Nasze Promocje</div>

<div id="wazne">

<div id="odnap">Od:</div>
<div id="od"></div>
<div id="donap">Do:</div>
<div id="do"></div>

</div>

<div id="nazwa"></div>




<?php

if( empty( $photos ) ){
	
?>
	<div id="zdjecia"><h1>Brak dodanych dzisiaj zdjęć</h1></div>
<?php
}else{
?>
	<div id="zdjecia">
		<img id="podmien" src="img/<?php echo $photos[0]['photoSrc'] ?>" alt="Zdjecie" />
	</div>
	
	
		<div id="cenaproduktu">
	</div>
<?php 
	if( count( $photos ) >=1 ){
?>
	<script>
	var glownyElement = document.getElementById("podmien");
	        var cena = document.getElementById("cenaproduktu");
	        var opis = document.getElementById("nazwa");
	        var cod = document.getElementById("od");
	        var cdo = document.getElementById("do");
	    
	var petla = null; 

	var zdjecia = [ <?php echo $BaseAdapter -> printAllPhotosBetweenDates() ?> ];
	var ceny = [ <?php echo $BaseAdapter -> printAllPricesBetweenDates() ?> ];
	var opisy = [ <?php echo $BaseAdapter -> printAllOpisBetweenDates() ?> ];
	var cody = [ <?php echo $BaseAdapter -> printAllcenyodBetweenDates() ?> ];
	var cdoy = [ <?php echo $BaseAdapter -> printAllcenyDoBetweenDates() ?> ];

	

	var numerZdjecia = 0;

	function wyswietl() {
	  if( numerZdjecia < zdjecia.length ){
			glownyElement.src = "img/" + zdjecia[ numerZdjecia ];
			cena.innerHTML = ceny[ numerZdjecia] ;
			opis.innerHTML = opisy[ numerZdjecia] ;
			cod.innerHTML = cody[ numerZdjecia] ;
			cdo.innerHTML = cdoy[ numerZdjecia] ;
	
			numerZdjecia++;
		}else
			numerZdjecia = 0;
	}
	wyswietl();
	petla = setInterval(wyswietl, 20000);

	</script>
<?php } } ?>
</body>

</html>
<?php
ob_end_flush();
?>

main

@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url ('https://fonts.googleapis.com/css?family=Condiment');
@import url ('https://fonts.googleapis.com/css?family=Monoton');




*{
	margin: 0;
	padding: 0;
	
}

html,body{

	color: #333333;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.formularz{
	background-color:#D3D3D3;
	width: 600px;
	padding: 30px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.formularz form h3{
	padding: 10px;
}

.formularz form input{
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-indent: 5px;

}

#nazwa{
    font-family: 'Baloo Bhai', cursive;
    color: #3b9842;
    font-size: 8vh;
    margin-left: 0vw;
    width: 50vw;
    height: 5vh;
    margin-top: -93vh;
    text-align: center;
    border-radius: 50px 50px 50px 50px;

}

#cos{
font-family: 'Baloo Bhai', cursive;

    color: #3b9842;
    font-size: 18vh;
    margin-left: 50vw;
    width: 40vw;
    margin-top: 4vh;
    text-align: center;
    border-radius: 50px 50px 50px 50px;

  text-align: center;
  font-size: 15vh;
  color: #3b9842;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .95s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #3b9842,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #FFD700,
      0px 0px 150px #FFD700,
      0px 10px 100px #FFD700,
      0px 10px 100px #FFD700,
      0px 10px 100px #FFD700,
      0px 10px 100px #FFD700,
      0px -10px 100px #FFD700,
      0px -10px 100px #FFD700;
  }
}
#cenaproduktu{
	font-family: 'Baloo Bhai', cursive;
    background: #3b9842;
    font-size: 15vh;
height:23vh;
    margin: 0 auto;
    max-width: 50vw;
    text-align: center;
    border-radius: 50px 50px 50px 50px;
    color: #ffffff;
    --font-weight: bold;
    margin-left: 46vw;
    word-wrap: break-word;
    margin-top:-12VW;
}

#zdjecia{

	    margin-left: 2vw;
    height: 77vh;
    width: 44vw;
    margin-top: 8vh;



}
#wazne{
    margin-top: 42vh;
    margin-left: 9vw;
    font-size: 30px;
	
	width:40vw;
	
	
}

#od{
	  float:left;
  width:12vw;


}
#odnap{
	  float:left;
  width:3vw;


}

#donap{
	  float:left;
  width:3vw;


}
#do{
	float:left;
  width:12vw;

}







#zdjecia img{

	width: 100%;
	height: 100%;
	display: block;
	margin: 0 auto;


}

#zdjecia h1{
	width: 100%;
	padding: 10px;
	text-align: center;
	font-size: 25px;
}


.login{
	width: 100%;
	min-height: 100%;
	background-color: #294761;
}

.login form{
	position: relative;
	width: 300px;
	height: 140px;
	background-color: #FFFFFF;
	margin: auto;
	top: 200px;
}

.login form h3{
	padding: 10px;
}


.login form input{
	margin: 10px;
	width: 260px;
	padding: 5px;
}

.login form button{
	background-color: #2196F5;
	width: 100%;
	margin-top: 20px;
	padding: 10px;
	text-align: center;
	border: none;
}

.login form button:hover{
	cursor: pointer;
}

.photo{
	overflow: auto;
	width: 500px;
	padding: 10px;
	margin: auto;
	margin-bottom: 20px;
	background-color: #FFFFFF;
}

.photo .title{
	min-height: 150px;
	overflow: auto;
}

.photo .title:hover{
	cursor: pointer;
}

.photo .title img{
	width: 200px;
	margin-left: 150px;
	margin-top: 10px;
}

.photo .title p{
	clear:both;
}

.login form{
	position: relative;
	width: 300px;
	height: 140px;
	background-color: #FFFFFF;
	margin: auto;
	top: 200px;
}

.photo .edit{
	display: none;
}

.photo .edit form h3{
	padding: 10px;
}


.photo .edit form input{
	margin: 10px;
	width: 460px;
	padding: 5px;
}

.photo .edit form button{
	background-color: #2196F5;
	width: 100%;
	margin-top: 20px;
	padding: 10px;
	text-align: center;
	border: none;
}
.animation-box {
  width: 75%;
  height: 27.5rem;
  background-color: blue;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.animation-container {
  width: 1000rem;
  height: 30rem;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bottomFadeOut {
  0% {
    position: absolute;
    bottom: -5rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    bottom: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
  
}

@keyframes topFadeOutVertical {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 45%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rightFadeInOut {
  0% {
    position: absolute;
    right: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    right: 10rem;
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 10rem;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

.first-text {
  font-size: 4.4rem;
  position: absolute;
  left: 2.5rem;
  top: 5rem;
  opacity: 0;
  animation-name: topFadeOut;
  animation-duration: 5s;
  color: white;
}

.second-text {
  font-size: 3.4rem;
  position: absolute;
  top: 8.5rem;
  opacity: 0;
  animation-name: rightFadeInOut;
  animation-delay: 3s;
  animation-duration: 6s;
  color: #ccc;
}

.third-text {
  transform: rotate(-90deg);
  font-size: 2rem;
  position: absolute;
  left: 45%;
  top: 45%;
  opacity: 0;
  animation-name: topFadeOutVertical;
  animation-delay: 7.5s;
  animation-duration: 6s;
  color: #A3DDF0;
  white-space: nowrap;
}

.fourth-text {
  font-size: 3.4rem;
  position: absolute;
  top: 10.5rem;
  left: 10%;
  opacity: 0;
  color: #F0A3BE;
  animation-name: fadeInOut;
  animation-delay: 8.5s;
  animation-duration: 9s;
}

.fifth-text {
  font-size: 5rem;
  position: absolute;
  left: 5%;
  bottom: 25%;
  opacity: 0;
  color: #F0EBA3;
  animation-name: bottomFadeOut;
  animation-delay: 10s;
  animation-duration: 9s;
}

1

Może podlinkuj po prostu tą stronę.

0

Chodzi o taki efekt
By na małym ekranie 3 poszło nad 1 a 4 pod 2

1

Potrzebujesz:

@media only screen and (max-width:...)
display:flex;
order:...

Może komuś zechce się to szczegółowo rozpisać.

Wyświetlacz promocji responsywność

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami