1<div id='container'> 

2    <h1> ${.vars['reserved-article-title'].data} </h1> 

3    <hr> 

4    <#if partName.getSiblings()?has_content> 

5	<#list partName.getSiblings() as cur_partName> 

6		 

7        <div class='card'> 

8        <div class='front'> 

9             

10    	        <img src='<#if (cur_partName.partImg.getData())?? && cur_partName.partImg.getData() != "">${cur_partName.partImg.getData()}<#else>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cxBEQAACAIwtH8Pzw52kxD8OBZgNXsPQUOUwCIgAz0DHTyygaAAAAAASUVORK5CYII=</#if>' class="contact" /> 

11             

12             

13            <span class='name'>${cur_partName.getData()}</span> 

14            <hr> 

15            <span class='job'> - ${cur_partName.partPost.getData()} - </span> 

16        </div> 

17        <div class='back'> 

18            <span>تحصیلات : ${cur_partName.partEducation.getData()}</span><br/><br/> 

19            <span>ایمیل : ${cur_partName.partMail.getData()}</span><br/><br/> 

20            <p>تلفن : ${cur_partName.partTel.getData()}</p><br/> 

21            <span>داخلی : ${cur_partName.partLocalTel.getData()} </span> 

22        </div> 

23    </div> 

24     

25	</#list> 

26</#if> 

27</div> 

28 

29<style> 

30 

31    #container { 

32        width: auto; 

33        height: auto; 

34        -webkit-perspective: 800px; 

35        perspective: 800px; 

36        text-align: center; 

37        margin: 20px 0; 

38    } 

39    #container h1 { 

40        color: #0e3471; 

41        margin-bottom: 30px; 

42        width: 200px; 

43        display: block; 

44        margin: 0 auto; 

45    } 

46    #container > hr { 

47        border: none; 

48        border: 1px solid #fff; 

49        width: 80%; 

50    } 

51    .card { 

52        margin: 10px; 

53        display: inline-block; 

54        position: relative; 

55        width: 220px; 

56        height: 320px; 

57        opacity: 0.85; 

58    } 

59    .front, 

60    .back { 

61        width: 100%; 

62        height: 100%; 

63        position: absolute; 

64        -webkit-backface-visibility: hidden; 

65        backface-visibility: hidden; 

66        -webkit-transition: -webkit-transform 300ms; 

67        transition: -webkit-transform 300ms; 

68        transition: transform 300ms; 

69        transition: transform 300ms, -webkit-transform 300ms; 

70        -webkit-transition-timing-function: linear; 

71        transition-timing-function: linear; 

72        border-radius: 5px; 

73    } 

74    .front { 

75        transform: rotateY(0deg); 

76        background: -webkit-linear-gradient(top left, #ffb300 0%, #ff801e 100%); 

77        background: linear-gradient(to bottom right, #ffb300 0%, #ff801e 100%) 

78        text-align: center; 

79        padding: 1em; 

80        display: flex; 

81        flex-direction: column; 

82        align-items: center; 

83    } 

84    .back { 

85        background: -webkit-linear-gradient(top left, #ff801e, #ffb300); 

86        background: linear-gradient(to bottom right, #ff801e, #ffb300); 

87        -webkit-transform: rotateY(180deg); 

88        transform: rotateY(180deg); 

89        padding: 1em; 

90        color: #fff; 

91text-shadow: 2px 2px 6px black; 

92    font-size: 0.9em; 

93    } 

94    .card:hover .front { 

95        -webkit-transform: rotateY(-180deg); 

96        transform: rotateY(-180deg); 

97    } 

98    .card:hover .back { 

99        -webkit-transform: rotateY(0deg); 

100        transform: rotateY(0deg); 

101    } 

102    .front .contact { 

103        height: 7em; 

104        width: 7em; 

105        border: 5px solid #004695; 

106        border-radius: 50%; 

107        display: inline-block; 

108        margin-bottom: 10px; 

109    } 

110    .front .name { 

111        display: inline-block; 

112        font-size: 1em; 

113        color: #fff; 

114text-shadow: 2px 2px 6px black; 

115    } 

116    .front .job { 

117        color: #fff; 

118text-shadow: 2px 2px 6px black; 

119    } 

120    .front hr { 

121        border: none; 

122        color: #004695; 

123        border: 1px solid; 

124        margin: 10px 0; 

125        width:100% 

126    } 

127    .back .icon { 

128        fill: currentColor; 

129        color: inherit; 

130        height: 33px; 

131        width: 33px; 

132        margin-top: 15px; 

133        color: white; 

134    } 

135    .back .icon:hover { 

136        cursor: pointer; 

137        color: #648767; 

138    } 

139</style>