Love Story
Bonjour et bienvenue à toi cher chat. Souhaites-tu rejoindre le Clan du Tonnerre ? Le Clan de la Rivière ? Le Clan du Vent ? Ou le Clan de l'Ombre peut-être ? A moins que tu ne veilles rejoindre les solitaires ou les domestiques ? Dans tout les cas, nous t'invitons à t'inscrire sur ce forum pleins d'aventures ! Allez, n'hésites pas et viens nous rejoindre permis tant de plaisir !
Love Story



Partagez|

QEEL by Halloween (N-U)

avatar
Love Story
1er personnage : Étoile du Lion - 36 lunes - Tonnerre - Chef
PUF : Mew.
Masculin Messages : 801
Fusions : 3697
Réputation : 0
Date d'inscription : 02/07/2014
Voir le profil de l'utilisateur http://thisislovestory.forumactif.org
MessageSujet: QEEL by Halloween (N-U)  Sam 14 Fév - 15:11


Plop,

Un "Qui est en ligne ?" plutôt zen, loin du stress et très épuré, basé sur la demande de Ju. La description des groupes apparait au survol de ceux-ci, dans l'encadré opaque sur l'illustration. Cette dernière est de taille 780*225px.


/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



Qui est en ligne ?


Template & CSS ▬ Groupes à onglet

Aperçu classique ▬ www



Dans le CSS
CODE:SÉLECTIONNER
Code:
/* -------------------------------- QEEL -------------------------------- */

        /*** MISE EN FORME LIENS AU SURVOL ***/
        a:hover {
          text-decoration: none !important;
        }

        /*** MISE EN FORME FONT DU QEEL ***/
        .fond_qeel {
          width: 780px;
          border-radius: 0px 0px 25px 25px;
          background-color: #E4E4E4;
          margin: auto;
          height: 620px;
          position: relative;
        }

        /*** MISE EN FORME TITRE PRINCIPAL ***/
        .titre_principal {
          color: #2D5A57;
          font-family: georgia;
          font-size: 28;
          letter-spacing: 5px;
          text-align: center;
        }

        /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
        .titre_secondaire {
          color: #C7BBC1;
          font-family: georgia;
          font-size: 14px;
          text-align: center;
        }

        /*** MISE EN FORME BLOC STATISTIQUES ***/
        .bloc_stat {
          background-color: #F0F0F0;
          padding: 15px;
          width: 200px;
          height: 150px;
          overflow: auto;
          font-size: 11px;
          border: 2px solid #CACACA;
          text-align: justify;
          color: #515151;
          position: absolute;
          left: 3em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES GROUPES ***/
        .bloc_groupes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
        .bloc_connectes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #CACACA;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
        #kaboum .row1 {
          background-color : transparent;
        }

        #kaboum span.gensmall {
          color: #515151;
        }

        /*** MISE EN FORME DES TITRES (simple + survol) ***/
        .titre_bloc {
          font-family: 'Dancing Script', cursive;
          font-size: 24px;
          font-weight: bold;
          color: #B0C3AB;
          position: absolute;
          z-index: 2;
          margin-top: -18px;
        }

        .titre_bloc:hover {
          color: #2D5A57;
        }

        /*** GROUPES A ONGLETS ***/
        /* Mise en forme des noms de groupe */
        .groupe_onglet {
          display: inline-block;
          padding: 10px;
        }

        /* Mise en forme du bloc en transparence de description */
        .contenu_groupe_onglet {
          padding: 15px;
          display: none;
          width: 315px;
          height: 115px;
          overflow: auto;
          font-size: 11px;
          color: #414141;
          text-align: justify;
          background-color: #CBC4C2;
          position: absolute;
          top: 14em;
          left: 21em;
          filter: alpha(opacity = 50);
          opacity: 0.5;
        }

        /* Mise en forme des liens */
        .contenu_groupe_onglet a{
          text-decoration: none !important;
        }

        /*** MISE EN FORME DES CREDITS ***/
        .credits {
          text-align: right;
          margin-right: 10px;
          font-size: 9px;
          margin-top: 10px;
        }

        .credits a{
          color: #B0C3AB;
        }

        /* -------------------------------- FIN QEEL -------------------------------- */


Dans le template Index_Body, remplacez
CODE:SÉLECTIONNER
Code:
  <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
      </tr>
      <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
      </tr>
      <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
      </tr>
      {L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
      <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
      </tr>
      <!-- BEGIN switch_chatbox_activate -->
      <tr>
          <td class="row1">
            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
            </span>
          </td>
      </tr>
      <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

Par ceci

♥♥♥

avatar
Love Story
1er personnage : Étoile du Lion - 36 lunes - Tonnerre - Chef
PUF : Mew.
Masculin Messages : 801
Fusions : 3697
Réputation : 0
Date d'inscription : 02/07/2014
Voir le profil de l'utilisateur http://thisislovestory.forumactif.org
MessageSujet: Re: QEEL by Halloween (N-U)  Sam 14 Fév - 15:12

Code:
<!-- BEGIN disable_viewonline -->
        <link href='http://fonts.googleapis.com/css?family=Dancing+Script|Six+Caps' rel='stylesheet' type='text/css'>
        <div class="fond_qeel"><br /><br /><div class="titre_principal">Qui est en ligne ?</div>
              <div class="titre_secondaire">Et avec qui parler ?</div>
    <br /><img src="http://i59.servimg.com/u/f59/16/61/97/52/sans_t11.jpg" style="width: 100%; border-top: 2px solid #C8BCBE; border-bottom: 2px solid #5A5F65;" />
    <div style="background-color: #DFDFDF; height: 260px;">
          <br /><br />
            <br />
          <div class="titre_bloc" style="left: 2.5em;">Statistiques</div>
            <div class="bloc_stat">{TOTAL_POSTS}.<br />{TOTAL_USERS}.<br />
            {NEWEST_USER}.<br />
            {TOTAL_USERS_ONLINE}<br /><br />{LOGGED_IN_USER_LIST}</div>
          <div class="titre_bloc" style="left: 13em;">Groupes</div>
            <div class="bloc_groupes"><div class="groupe_onglets">
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_protecteurs" onmouseover="javascript:change_groupe_onglet('protecteurs');"><font color=#123D18>Protecteurs</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_trucs" onmouseover="javascript:change_groupe_onglet('trucs');"><font color=#776B2B>Truc-Much</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_dissidents" onmouseover="javascript:change_groupe_onglet('dissidents');"><font color=#772F2B>Dissidents</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><font color=#3B133B>Civils</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_gardiens" onmouseover="javascript:change_groupe_onglet('gardiens');"><font color=#2B3077>Gardiens</font></span>
          </div></div><br /><br /><br /><br /><br />
          <div class="titre_bloc" style="left: 13em;">Périgrination</div>
            <div class="bloc_connectes"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
     
          <script type="text/javascript">
                    //<!--
                            function change_groupe_onglet(name)
                            {
                                    document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                    document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                    document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                    document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                                    anc_groupe_onglet = name;
                            }
                    //-->
                    </script>
          <br />
          <div class="contenu_groupe_onglets">
           
        <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_protecteurs"><span style="color: #123D18; font-weight: bold;">Protecteurs</span> • Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.</div>
           
        <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_trucs"><span style="color: #776B2B; font-weight: bold;">Truc-Much</span> • Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.</div>
           
        <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_dissidents"><span style="color: #772F2B; font-weight: bold;">Dissidents</span> • Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.</div>

        <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_civils"><span style="color: #3B133B; font-weight: bold;">Civils</span> • Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.</div>
             
        <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_gardiens"><span style="color: #2B3077; font-weight: bold;">Gardiens</span> • Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.Manu Seres conditum terra et quae initium brevi aliaque municipium municipium aliaque mensis marique magna nundinas promiscuae plurima marique consueta magna manu promiscuae Euphrate priscorum Macedonum mercatoribus flumine flumine multitudo ubi opulentis mensis prope disparatur opulentis flumine mittunt magna Macedonum mittunt magna consueta mercatoribus ad nundinas plurima ab Septembris aliaque priscorum Anthemusia municipium Indi spatio ab aliaque magna ubi Macedonum disparatur quae prope et flumine quae ab sollemnitate nundinas quae ad opulentis mercatoribus mensis ad plurima conditum promiscuae conditum nundinas Septembris brevi promiscuae initium municipium aliaque convenit aliaque prope Anthemusia marique quae mittunt sollemnitate nundinas in Euphrate commercanda Septembris quae.</div>

            </div>
       
            <script type="text/javascript">
                    //<!--
                            var anc_groupe_onglet = 'protecteurs';
                            change_groupe_onglet(anc_groupe_onglet);
                    //-->
      </script></div><div class="credits"><a href="http://www.never-utopia.com/">♈ Halloween</a></div><br /><br /></div>

            <!-- END disable_viewonline -->

Attention, pensez

♥♥♥

QEEL by Halloween (N-U)

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Let's go for Halloween ! [tous invités à participer !]
» Halloween event !!!
» L'event d'halloween sur FR
» UN AMI D'UN SOIR (conte pour Halloween)
» Automne, Halloween, sécheresse.. ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Love Story :: Power :: A. Love Story in Film-