Jump to content

vask0

Members
  • Posts

    6
  • Joined

  • Last visited

Posts posted by vask0

  1. how loalding  this style fon 

    font-family: aFont;
     src: url("JACKPORT-COLLEGE-NCV.ttf");

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>baner</title>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1">
        
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
     <link rel="stylesheet" type="text/css"
              href="fonts/JACKPORT COLLEGE NCV.ttf">
              
              
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     
     <link rel="stylesheet" href="style.css">
     
    <style>
    
     @font-face {
     font-family: aFont;
     src: url("JACKPORT-COLLEGE-NCV.ttf"); /* For most other browsers */
    }
    .myFontClass {
        font-family: aFont, Arial, Helvetica, sans-serif;
        letter-spacing: 1px;
        color: #4D7731;
    } 
    
    </style>
    </head>
    <body>
    
    <h1 class="padded-multiline">
      <span>тест1  </span> 
    </h1>

     

  2. Hello people will help me to divide the css code of html file, I css file is in Odell

     

    Html css JS

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Yahoo Dynamic HTML Banner Example</title>
     <link rel="stylesheet" href="style.css">
    
    <!-- update the paths to the Greensock source -->
    
    </head>
    <body>
    <style type="text/css">
    .a {position:absolute;}
    .o {overflow:hidden;}
    .f {font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
    </style>
    <div id="yahoo_bannerContainer" class="a o" style="width:300px; height:250px; border-color:#666; border-style:solid; border-width:thin">
    	<div id="bg1" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:1;"></div>
    	<div id="www" class="a" style="width:117px; height:74px; background-image:url(www.png); z-index:2; top: 11px; left: 5px;"></div>
    	<div id="com" class="a" <p>ddsadasda </p> </div>
    	<div id="title" class="a f" style="z-index:3; top: 90px; left: 0px; font-size:26px; color:#fff; width:300px;; text-align:center;">Здравейте<br />КА СТЕ </div>
    	<div id="bg2" class="a" style="width:300px; height:250px; background-image:url(bg1.jpg); z-index:5;"></div>
    	<div id="tag" class="a f"style="z-index:6; left:18px; top:10px; line-height:1.2em; font-size:24px; color:#7c019a;">ДСАФСДАФДСА<br />Добре дошли&mdash;<br />Заповядайте при нас</div>
    	
    	<div id="ysb" class="a" style="z-index:7; background-image:url(ysb.jpg); width:300px; height:59px; left: 0px; top: 191px;"></div>
    </div>
    <script type="text/javascript">
    function getElem(id){ return document.getElementById(id); }
    var scon = getElem('bg1');
    var stars = [];
    var sCnt = 0;
    function star(x,y){
    	scon.innerHTML += '<img id="star'+sCnt+'" src="star.png" style="position:absolute; left:'+x+'px; top:'+y+'px;" />';
    	sCnt++;
    	stars.push('star'+sCnt);
    }
    function makeStars(){
    	var i = 0;
    	var max = 40;
    	for(i = 0; i < max; i++){
    		star( Math.floor(Math.random()*300) , Math.floor(Math.random()*140) ) ;
    	}
    	setTimeout('tweenStars()', 200);
    }
    function tweenStars(){
    	var i = 0;
    	var max = stars.length - 1;
    	var dur = 8;
    	var tog = true;
    	var s = null;
    	for(i = 0; i < max; i++){
    		tog = !tog;
    		TweenLite.to(getElem(stars[i]), (dur + Math.floor(Math.random()*12)), { css:{rotation:(tog == true ? 720 : -720)} });
    	}
    }
    makeStars();
    var seq = new TimelineLite();
    seq.append( TweenLite.from(getElem('bg1'), 1, {css:{alpha:0}}) );
    seq.append( TweenLite.from(getElem('www'), 0.8, {css:{alpha:0}}) );
    seq.append( TweenLite.from(getElem('com'), 0.8, {css:{alpha:0}}) );
    seq.append( TweenLite.from(getElem('title'), 0.7, {delay:0.4, css:{alpha:0}}) );
    seq.append( TweenLite.from(getElem('bg2'), 1.1, {delay:1.5, css:{top:310}}) );
    seq.append( TweenLite.from(getElem('tag'), 0.7, {css:{left:-310}}) );
    seq.append( TweenLite.from(getElem('ysb'), 0.6, {css:{top:310}}) );
    seq.append( TweenLite.from(getElem('reg'), 0.7, {css:{top:310}}) );
    seq.play();
    </script>
    </body>
    </html>

    10X 

  3. First congratulations for nice and helpful forum... 

    For example .. I can add text on these images ... how you would look htm, css code?

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Image Slider CSS3</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div id="slider" >
    <figure>
    <img src="France.jpg">
    <img src="images/Ibiza.jpg">
    <img src="images/Amsterdam.jpg">
    <img src="images/France.jpg">
    <img src="images/Amsterdam.jpg">
    </figure>	
    
    </div>
    
    </body>
    </html>

     

     

    CSS

    @keyframes slider {
    
    0% {
    	left: 0;
    }
    
    20% {
    	left: 0;
    }
    
    25% {
    	left: -100%;
    }
    
    45% {
        left: -100%;
    
    }
    
    50% {
    		left: -200%;
    
    }
    
    70% {
    	left: -200%;
    }
    
    75% {
    	left: -300%;
    }
    
    95% {
    	left: -300%;
    }
    
    100% {
    	left: -400%;
    
    }
    
    }
    
    #slider {
    	overflow: hidden;
    }
    
    #slider figure img {
    	width: 20%;
    	float: left;
    }
    
    #slider figure {
    	position: relative;
    	width: 500%;
    	margin: 0;
    	left: 0;
    	text-align: left;
    	font-size: 0;
    	animation: 20s slider infinite; 
    
    }



    I need a similar html css banner .. I need a similar banner BANER LINK .. I can write HTML text and manipulate it with css

×
×
  • Create New...