Флаер, като сайт.

dalasweb

dalasweb

Well-Known Member
Имам един пдф файл с 21 страници.Как мога да го направя, като html сайт
 
Прикачи файла да го видим, така трудно. Само текст ли, как е свързана информацията в него?
 
Искаш да бъде всичко на една страница или всяка отделно? Менюта?
 
В пдф има снимки и текст.
Със меню ще е хубаво нещо като слайдер да е
 
Sky каза:
Прикачи файла да го видим, така трудно. Само текст ли, как е свързана информацията в него?
Увеличете...
Пдф му вадя 21снимки и ги пускам в един html сайт,
ако има меню ще е супер.
Начало, за нас галерия и контакти
 
Последно редактирано:
Sky каза:
Нещо такова ли?
js.dearflip.com

DearFlip JS/jQuery Flipbook Plugin

Create Responsive Flipbooks from PDF with DearFlip HTML5 Flipbook jquery plugin. Easy HTML and jQuery syntaxes make the process even easier.
js.dearflip.com js.dearflip.com
Увеличете...
Това е хубаво дето си го пратил.
Пдф е а4 като потрет не е, като книга.Ако има за това упер ще е.
Линка дето съм пратил ме устройва.
 
Най лесен вариант.
Смятам 21 страници да ги изкарам, като снимки и да се слайдват.
това също е хубаво


Намерих само снимките искам отгоре надолу да се движат и да е на цял екран независимо от устройството.

Pure CSS3 Cycle Slider

A Pure CSS3 Cycling Slideshow! Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
demo.alessioatzeni.com

Всъшност искам да го сейфна, ноне ми дава css или съм забравил как се правеше.

Сейфнах сайта и css :).Барнах кода, но нито снимки се показват, нито мога по-голям размер на снимките да сложа.




Код: 
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pure CSS3 Cycle Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="images/style.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<meta name="description" content="A Pure CSS3 Cycling Slideshow! Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.">
<meta name="keywords" content="CSS3, CSS3 Slideshow, HTML/CSS Tutorials, Smashing Magazine">
<link rel="canonical" href="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/">
</head>
<body>

<div class="content">
    <h1>Pure CSS3 Cycle Slider</h1>
</div>

<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
               <li id="first" class="firstanimation">
            <a href="#">
            <img src="images/img_1.jpg" alt="Cougar">
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="images/img_2.jpg" alt="Lions">
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>
      
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="images/img_3.jpg" alt="Snowalker">
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>
                  
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="images/img_4.jpg" alt="Howling">
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>
                  
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="images/img_5.jpg" alt="Sunbathing">
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>


</body></html>
CSS: 
@import url("reset.css") screen;
@import url("animation.css") screen;

/* Common */
html, body {
    background:#eaeaea url(../img/bg.png) repeat;
    font-size:12px;
    font-family:"Open Sans", serif;
    min-width:960px;
    margin:0;
    padding:0;
    color:#aaa;
}

.content h1 {
    font-size:48px;
    color:#000;
    text-shadow:0px 1px 1px #f4f4f4;
    text-align:center;
    padding:60px 0 30px;
}

/* LAYOUT */
.container {
    margin:0 auto;
    overflow:hidden;
    width:960px;
}

/* CONTENT SLIDER */
#content-slider {
    width:100%;
    height:360px;
    margin:10px auto 0;
}
/* SLIDER */
#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:320px;
    width:680px;
    margin:40px auto 0;
    overflow:visible;
    position:relative;
}
#mask {
    overflow:hidden;
    height:320px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:680px;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;  
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;  
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;  
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;  
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;  
}

#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:75px;
    left:-320px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
    position:relative;
    top:-5px;
    width:680px;
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}

Ама съм ...
Човекът си е дал линк към файловете, а аз от оно време навика да копирам и изтегля всичко през сайта.

www.smashingmagazine.com

A Pure CSS3 Cycling Slideshow — Smashing Magazine

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
www.smashingmagazine.com www.smashingmagazine.com
 
Последно редактирано:
Сега може да дадете съвет.Колкото и да барах, но не успях да променя размера на снимката.

аз пък искам така.По-голяма снимка.
Screenshot 2025-01-28 at 12-01-00 Pure CSS3 Cycle Slider.jpg

сега е така:)
2 Slider.jpg
 
Има ли възможност снимките да се показват на цял екран ?
 
dalasweb каза:
Има ли възможност снимките да се показват на цял екран ?
Увеличете...
С код може и да може ама нямам идея ка. Иначе с фотошопа я правиш по-едричка :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе