work01.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>work1</title>
<style type="text/css">
body{
background-color: #F2F2F2;
}
#one{
margin: 0 auto;
width: 500px;
}
#two{
width:100%;
height:200px;
margin: 0 auto;
background-color: #e0e0e0;
}
#three{
width:49%;
display: inline-block;
vertical-align: top;
float: left;
}
#four{
width:50%;
display: inline-block;
border-left:1px #bcbcbc solid;
float: right;
font-size:8px;
padding-left: 10px;
color:#666666;
}
#footer-right{
float: left;
padding-left:0px;
}
h4{
color:#444444;
}
.p1{
text-indent: 2em;
color: #666666;
margin: 0px 0px 0px 0px;
}
.p2{
color: #666666;
font-size:10px
}
span{
color:#444444;
font-weight: bold;
}
.contact{
float: right;
height: 70px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="one">
<img src="img/joinus.png" /><br />
<h4>加入我们</h4>
<p class="p1">作为一支创意团队，我们从来不会止步于某种风格和形式，而是希望能够协同优秀的创作人，一起创造出更多有生命力的作品。</p>
<h4 style="color: #222222;" >作品简历请发Email：hr@infinistudio.cn</h4>
<h4 style="color: #222222;">关注我们新浪微博：@InfiniStudio</h4>
<img src="img/joinus12.jpg" style="width:50px"/>
<span>创意总监</span>
<h5>职务描述</h5>
<p class="p2"> 深入理解客户需求；<br />
带领团队构思创意方向，制定视频、交互H5、动图等物料的创意方案；<br />
把握创意形式、文案风格及美术风格；<br />
带领并监督组员执行后续的文案、美术、动画、音乐、配音、开发等环节工作；<br />
保证创意方案的执行质量。</p>
<h5>期望条件</h5>
<p class="p2"> 能够洞悉行业更迭，了解潮流变化；<br />
创意思维活跃，脑洞大开，善于把握品牌需求；<br />
热爱美术、设计等各类形式艺术；<br />
有丰富的创意经验；<br />
有较好的审美修养。
</p>
<img src="img/joinus14.jpg" style="width:50px"/>
<span>策划经理</span>
<h5>职务描述</h5>
<p class="p2"> 带领创意小组参与项目的创意构思；<br />
独立撰写并制订创意视频、交互H5等项目的创意方案；<br />
协助文案一起执行方案中的文案工作；<br />
带领小组成员共同执行创意方案。<br />
</p>
<h5>期望条件</h5>
<p class="p2"> 能有丰富的独立撰写项目的创意方案的经验；<br />
能够深入理解客户的需求和品牌定位；<br/>
脑洞大，逻辑清晰，洞察精准，表达能力强；<br />
有带领团队经验；<br />
对知名互联网企业有丰富的创意项目经验；<br />
精通ppt及排版。
</p>
<img src="img/joinus4.jpg" style="width:50px"/>
<span>资深文案创意</span>
<p class="p1"> 因为我们会有不同类型的项目，所以你要能hold得住各种类型文案，写得了歌词、讲得了段子，既能装逼也能逗比。喜欢视觉创意，对文字有画面感，耐心也是必不可缺。然而一切的文字功底都是只是基础，我们更需要你洞察精准，创意活跃，以及永远怀着一颗好奇心。你也将和一群热爱设计、插画、动画的创作人一起创作出更棒的作品。</p>
<h5>职务描述</h5>
<p class="p2"> 深入理解客户需求；<br />
与小组一起构想创意方案；<br />
撰写创意方案中的文案；<br />
协同其他环节人员共同执行创意方案。
</p>
<h5>期望条件</h5>
<p class="p2"> 有广告行业的文案、创意经验;<br />
脑洞大开，创意思维活跃；<br />
良好的逻辑思维，懂得换位思考；<br />
洞察精准；<br />
出色的文字功底，有感染力。
</p>
<h5>优先条件</h5>
<p class="p2"> 审美好，懂美术，热衷视觉创意；<br />
知识全面，涉猎广泛。
</p>
<img src="img/joinus9.jpg" style="width:50px"/>
<span>客户经理</span>
<p class="p1"> 想尝试更多好玩有趣的项目？想接触更多互联网创新方向？作为AM你能够在我们这里接触到众多知名的互联网、科技公司，每个项目都简短有趣，动画与创意碰撞发生。我们希望你具备广告行业的AM任职能力，有较强的责任感，项目中和客户保持全程对接，使项目如期推进。</p>
<h5>职务描述</h5>
<p class="p2"> 负责与客户沟通跟进项目，准确把握客户需求；<br />
理解、记录、整理项目简报；<br />
协调内外各环节人员，安排项目后续如期执行；<br />
整理项目相关文件，负责项目后续商务事宜。
</p>
<h5>期望条件</h5>
<p class="p2"> 熟悉广告行业，具备AM任职能力；<br />
性格开朗，具有良好理解能力和沟通能力；<br />
具备较强的责任感，效率高，积极主动，抗压能力强；<br />
善于协调和利用各方资源推动项目进展。
</p>
<h5>优先条件</h5>
<p class="p2"> 良好的逻辑思维，敏捷的应变能力；<br />
知识全面，涉猎广泛。
</p>
<img src="img/joinus13.jpg" style="width:50px"/>
<span>动画导演</span>
<p class="p1"> 作为动画创意团队，我们总是在不断挑战新的动画形式和手法，甚至不同形式之间也可以混合在一起，成为更好玩的作品。我们希望动画导演能够熟悉不同形式的制作手法，有良好的导演能力，善于用镜头讲好每一个故事。</p>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想动画风格和视觉表现；<br />
绘制动画短片项目的分镜头脚本；<br />
监督设计师或插画师绘制美术稿，保持风格统一和传达内容的准确性；<br />
监督动画师进行动画制作；<br />
监督配音及音乐。
</p>
<h5>期望条件</h5>
<p class="p2"> 热爱动画，对不同风格及形式的动画有较强的把控能力；<br />
善于使用动画来讲故事；<br />
对动态形式有良好的创造力；<br />
熟悉角色动画制作；<br />
有较强的美术功底；<br />
至少有一部自己完整的原创动画作品。
</p>
<img src="img/joinus11.jpg" style="width:50px"/>
<span>分镜师</span>
<p class="p1"> 作为动画创意团队，我们总是在不断挑战新的动画形式和手法，甚至不同形式之间也可以混合在一起，成为更好玩的作品。我们希望动画导演能够熟悉不同形式的制作手法，有良好的导演能力，善于用镜头讲好每一个故事。</p>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想动画创意和视觉效果；<br />
与设计师、插画师、动画师一起构思画面及镜头运动；<br />
根据创意脚本进行分镜草稿的构思和绘制。<br />
</p>
<h5>期望条件</h5>
<p class="p2"> 有较好的理解能力，能够准确把握创意方案；<br />
热爱动画，对镜头、构图、张力有良好把握；<br />
脑洞大，想象力丰富，善于通过分镜草稿快速呈现画面效果；<br />
对角色的动作、表情具有创造力；<br />
手绘功底强，透视无误。
</p>
<img src="img/joinus15.jpg" style="width:50px"/>
<span>二维原动画师</span>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想动画创意和视觉效果；<br />
根据分镜，构思镜头运动，绘制layout及原画稿。
</p>
<h5>期望条件</h5>
<p class="p2"> 热爱动画，对物体的动态变化和镜头节奏有良好把握；<br />
对角色的表演具有创造力和把握能力；<br />
对烟、火、水等二维动画特效有较好的表现力；<br />
对物体运动和状态有敏锐的观察力；<br />
美术功底好。
</p>
<img src="img/joinus6.jpg" style="width:50px"/>
<span>二维动画师</span>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想动画创意和视觉效果；<br />
根据美术设定及原画稿，绘制动画中间帧到完稿。
</p>
<h5>期望条件</h5>
<p class="p2"> 热爱动画，有较好的角色造型能力；<br />
对动画原理和运动规律有较好理解；<br />
对物体运动和状态有敏锐的观察力；<br />
美术功底好。
</p>
<img src="img/joinus3.jpg" style="width:50px"/>
<span>三维设计师</span>
<h5>职务描述</h5>
<p class="p2"> 参与项目前期创意，构想设计风格和视觉表现；<br />
设计画面和镜头，制作三维视觉概念稿；<br />
设计制作非视频类三维设计稿。
</p>
<h5>期望条件</h5>
<p class="p2"> 喜欢三维视效，对画面有良好的设计能力；<br />
对三维元素的模型材质、灯光渲染合成有良好表现；<br />
擅长结合多种三维、特效手法，善于后期合成；<br />
对摄像机的运动有较好控制；<br />
能够熟练执行前期分镜创意；<br />
熟练使用C4D、AE、PS。
</p>
<h5>优先条件</h5>
<p class="p2"> 美术功底好。</p>
<img src="img/joinus3.jpg" style="width:50px"/>
<span>三维动画师</span>
<h5>职务描述</h5>
<p class="p2"> 参与动画前期创意，构想设计风格和视觉表现；<br />
协助设计师共同设计画面和镜头，提供三维技术支持；<br/>
对概念设计稿进行三维动画制作。
</p>
<h5>期望条件</h5>
<p class="p2"> 喜欢三维视效，对画面有良好的设计能力；<br />
对三维元素的模型材质、灯光渲染合成有良好表现；<br />
擅长结合多种三维、特效手法，善于后期合成；<br />
对摄像机的运动有较好控制；<br />
能够熟练执行前期分镜创意；<br />
熟练使用C4D、AE、PS。
</p>
<h5>优先条件</h5>
<p class="p2"> 美术功底好。</p>
<img src="img/joinus1.jpg" style="width:50px"/>
<span>MG动画师</span>
<p class="p1"> 很多朋友说我们是国内Motion Graphics标杆，而他们不知道我们这里可能也是MG动画师的地狱。我们会死磕每一个图形的动态节奏，精心雕琢每根动画曲线，构思巧妙的转场效果。但这些仅仅是基础，不会讲内容的动画师不是好导演。</p>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想动画风格和视觉表现；<br />
协助设计师构思画面元素及镜头转场形式；<br />
对静态设计稿进行动画制作。
</p>
<h5>期望条件</h5>
<p class="p2"> 喜欢动态图形，对图形的动态变化和节奏有良好把握；<br />
善于使用动画来讲述文案内容；<br />
对动态形式有良好的创造力；<br />
熟悉角色动画制作。
</p>
<h5>优先条件</h5>
<p class="p2"> 美术功底好，并能绘制分镜脚本；<br />
熟练使用C4D制作三维动效；
</p>
<img src="img/joinus2.jpg" style="width:50px"/>
<span>平面设计师</span>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想设计风格和视觉表现；<br />
根据前期分镜脚本，使用图形或平面元素设计画面；<br />
参与多种平面类设计。
</p>
<h5>期望条件</h5>
<p class="p2"> 喜欢图形设计与视觉设计；<br />
对画面构成和色彩有较好的控制力；<br />
善于将内容、信息进行视觉设计展现；<br />
对视觉形式富有创新能力；<br />
熟练使用AI、PS。
</p>
<h5>优先条件</h5>
<p class="p2"> 有网页设计或UI工作经验；<br />
熟练使用三维软件制作三维渲染。
</p>
<img src="img/joinus10.jpg" style="width:50px"/>
<span>插画师</span>
<p class="p1"> 一成不变不是我们的做派，我们喜欢吸收并尝试格式各样的画风，期待你也一样愿意尝试挑战。而你的静帧画作，也将在动画师小伙伴的手中变得具有灵魂。</p>
<h5>职务描述</h5>
<p class="p2"> 参与前期创意，构想绘画风格和视觉表现；<br />
参与前期分镜脚本，绘制美术效果图及插画；<br />
其他插画相关工作。
</p>
<h5>期望条件</h5>
<p class="p2"> 对画面、构成和色彩有敏锐的观察力和调和力；<br />
善于将内容信息进行绘画展现；<br />
对插画形式富有创新能力和创造力；<br />
美术功底好。
</p>
<img src="img/joinus5.jpg" style="width:50px"/>
<span>实习生</span>
<p class="p2"> 欢迎对设计和动画充满热爱和激情的同学来我们这里实习，你将有机会参与具有挑战的项目实战。<br><br /></p>
<p class="p1"> 除以上职位，我们更欢迎动态图形综合能力较强的小伙伴加入我们，和我们一起做喜欢的事情。请将简历、作品和期望薪资发至邮箱。<br/><br/></p>
<p class="p2"> 作品简历请发Email：hr@infinistudio.cn</p>
</div>
<div id="two">
<div id="three">
<div class="contact">
<img src="img/contact1.jpg" style="width:50px"/>
<img src="img/contact2.jpg" style="width:50px"/>
<img src="img/contact3.jpg" style="width:50px"/>
</div>
</div>
<div id="four">
<img src="img/footer_logo.jpg"style="width:100px" />
<p>Infini Studio | 映纷创意</p>
<p>北京市朝阳区常营</p>
<p>TEL : 010-85394331</p>
<p>QQ : 7585917</p>
<p>Email : infinistudio@foxmail.com</p>
<p>weibo : @InfiniStudio</p>
</ul>
</div>
</div>
</div>
</body>
</html>
流式布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>映纷创意流式布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
background-color: #f2f2f2;
}
.root{
width: 100%;
background-color: #f2f2f2;
margin: 0 auto;
}
.header{
width: 100%;
height: 15%;
margin: 0 auto;
text-align: center;
background-color:rgba(0,0,0,0.7);
position: fixed;
margin-bottom: 15px;
z-index: 1;
}
.header img{
width:125px;
padding: 10px 0 15px 0;
}
.fixed-header a{
text-decoration: none;
margin:0 2%;
color: #a4a4a4;
font-size: 14px;
}
.fixed-header a:hover{
color: #e0e0e0;
}
.middle{
width: 90%;
margin: 0 auto;
}
.middle .big{
width:100%;
margin-top: 140px;
margin-bottom: 20px;
}
.middle>p{
font-size: 17px;
color: #666666;
text-indent: 2em;
padding: 25px 0;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 20px;
}
/*图标logo*/
.logo{
width: 100%;
}
.logo img{
width: 4%;
margin-left: 2.5%;
margin-bottom: 2%;
}
/*小模块*/
ul{
list-style: none;
}
.content{
width: 100%;
margin: 0 auto;
background-color: gainsboro;
}
.top{
width: 100%;
height: 100%;
position: relative;
/*background-color: red;*/
}
.top img{
width: 100%;
height: 100%;
vertical-align: middle;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.box{
width: 31%;
text-align: center;
background-color: white;
float: left;
margin-right: 3.5%;
margin-bottom: 2.5%;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.box>p{
padding: 3px 0;
}
.over{
width: 100%;
height: 65%;
background-color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 0;
text-align: center;
padding-top: 20%;
visibility: hidden;
color: white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.over p:first-child{
font-size: 24px;
}
.box:hover .over{
visibility: visible;
}
.box:nth-of-type(3n){
margin-right: 0;
}
/*footer部分*/
.footer{
width: 100%;
background-color: #e0e0e0 !important;
overflow: hidden;
}
.footer-left{
width: 50%;
float: left;
}
.footer-left img{
float: right;
margin: 0 1%;
}
.right-box{
width: 47%;
padding-left: 2%;
float: right;
border-left: 1px solid #bcbcbc;
}
@media only screen and (max-width: 500px) {
.header{
height: 90px;
}
.over p:first-child{
font-size: 17px;
}
.over p:last-child{
font-size: 13px;
}
.box>p{
font-size: 13px;
}
.box{
width:45%;
margin-right: 10%;
}
.box:nth-of-type(3n){
margin-right: 10%;
}
.box:nth-of-type(2n){
margin-right: 0;
}
}
</style>
</head>
<body>
<div class="root">
<div class="header">
<img class="fixed" src="img/固定图片.png" />
<div class="fixed-header">
<a href="###">HOME</a>
<a href="###">WORK</a>
<a href="###">CONTACT</a>
<a href="work01.html">JOIN</a>
</div>
</div>
<div class="middle">
<img class ="big" src="img/img1.jpg" />
<p>INFINI （映纷创意）是一家独立创新营销公司，致力于创造会流动的美好创意。我们从策略与洞察出发，不断探索营销和创意的多元表达，用创作精神为品牌提供更具生命力的跨媒体整合营销服务。 </p>
<!--图标-->
<div class="logo">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg"/>
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/10.jpg" />
<img src="img/11.jpg" />
<img src="img/12.jpg" />
<img src="img/13.jpg" />
<img src="img/14.jpg" />
</div>
<!--小模块-->
<ul class="content">
<li class="box">
<div class="top">
<img src="img/img3.png" />
<div class="over">
<p>小米</p>
<p>小米全新「MIUI For Watch」，表里大有玄机</p>
</div>
</div>
<p>小米MIUI for watch</p>
</li>
<li class="box">
<div class="top">
<img src="img/img1.jpg" />
<div class="over">
<p>OPPO</p>
<p>OPPO Reno2新品发布会宣传动画，跟着节奏动起来！</p>
</div>
</div>
<p>OPPO Reno2</p>
</li>
<li class="box">
<div class="top">
<img src="img/img4.png" />
<div class="over">
<p>京东</p>
<p>千年国宝与9102最新手机的超时空跨界</p>
</div>
</div>
<p>京东818手机节</p>
</li>
<li class="box">
<div class="top">
<img src="img/img2.png" />
<div class="over">
<p>Airbnb</p>
<p>爱彼迎 | 校园玩家，夏日开玩</p>
</div>
</div>
<p>爱必赢|校园玩家，夏日开玩</p>
</li>
<li class="box">
<div class="top">
<img src="img/img5.png" />
<div class="over">
<p>LANADA</p>
<p>LANADA的臆想世界</p>
</div>
</div>
<p>LANADA的臆想世界</p>
</li>
<li class="box">
<div class="top">
<img src="img/百度.png" />
<div class="over">
<p>百度</p>
<p>一个超Q的新奇世界已经到来</p>
</div>
</div>
<p>百度记者发布会</p>
</li>
</ul>
</div>
<div class="footer">
<div class="footer-left">
<img src="img/contact1.jpg" style="width: 50px;"/>
<img src="img/contact2.jpg" style="width: 50px;"/>
<img src="img/contact3.jpg" style="width: 50px;"/>
</div>
<div class="footer-right">
<ul class="right-box">
<li><img src="img/footer_logo.jpg" style="width: 100px;"/></li>
<li>Infini Studio | 映纷创意</li>
<li>北京市朝阳区常营</li>
<li>TEL : 010-85394331</li>
<li>QQ : 7585917</li>
<li>Email : infinistudio@foxmail.com</li>
<li>weibo : @InfiniStudio</li>
</ul>
</div>
</div>
</div>
</body>
</html>
网友评论