Template:Pipboy2

From Create Your Own Story

(Difference between revisions)
(Create pipboy template)
(Add some of the ;)
 
(5 intermediate revisions not shown)
Line 4: Line 4:
   <div style="width:130px;height:40px;background:#5a5f5b;position:absolute;border-top-left-radius:15px;border-top-right-radius:15px;left:-5px;top:15px;"></div>
   <div style="width:130px;height:40px;background:#5a5f5b;position:absolute;border-top-left-radius:15px;border-top-right-radius:15px;left:-5px;top:15px;"></div>
</div>
</div>
-
<div style="width:55px;height:13px;background:#000;position:absolute;right:5px;top:3px;border-top-right-radius:20px;border-top-left-radius:20px;border-top:1px solid #444;transform:rotate(27deg)"></div>   
+
<div style="width:55px;height:13px;background:#000;position:absolute;right:5px;top:3px;border-top-right-radius:20px;border-top-left-radius:20px;border-top:1px solid #444;transform:rotate(27deg);"></div>   
<div style="width:14px;height:14px;position:absolute;top:50px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div><div style="width:14px;height:14px;position:absolute;bottom:85px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div>
<div style="width:14px;height:14px;position:absolute;top:50px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div><div style="width:14px;height:14px;position:absolute;bottom:85px;right:15px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div>
<div style="background:#272b2a;width:370px;height:290px;margin:auto;border-radius:50px;padding-top:5%;border-top:10px solid #5a5f5b;border-bottom:5px solid #3a3e41;position:relative;z-index:-5;">
<div style="background:#272b2a;width:370px;height:290px;margin:auto;border-radius:50px;padding-top:5%;border-top:10px solid #5a5f5b;border-bottom:5px solid #3a3e41;position:relative;z-index:-5;">
Line 11: Line 11:
   <div style="width:305px;height:80px;background:linear-gradient(rgba(0,0,0,0),#7ff12a);position:absolute;animation:scan;animation-duration:4s;animation-iteration-count: infinite;top:-85px;z-index:99;opacity:0.25;"></div>
   <div style="width:305px;height:80px;background:linear-gradient(rgba(0,0,0,0),#7ff12a);position:absolute;animation:scan;animation-duration:4s;animation-iteration-count: infinite;top:-85px;z-index:99;opacity:0.25;"></div>
-
   <div style="background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/vaultboy2.gif');background-size:77px;background-position:2px;width:80px;height:100px;position:absolute;left:110px;top:56px;">
+
   <div style="background-size:77px;background-position:2px;width:80px;height:100px;position:absolute;left:110px;top:56px;color:#8df776;">
-
    <div style="left:32px;top:-8px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
  <i>Quests</i>
-
    <div style="left:32px;bottom:-8px;background:none;border:1px solid #64d515;height:1.5px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
-
    <div style="left:-20px;top:32px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
-
    <div style="right:-20px;top:32px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
-
    <div style="left:-20px;top:82px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
-
    <div style="right:-20px;top:82px;width:15px;height:3.5px;background:#64d515;position:absolute;"></div>
+
   </div>
   </div>
<div style="height:12px;position:absolute;width:290px;bottom:9px;left:15px;background:#000;color:#8df776;z-index:96;">
<div style="height:12px;position:absolute;width:290px;bottom:9px;left:15px;background:#000;color:#8df776;z-index:96;">
Line 31: Line 26:
</div>
</div>
<div style="width:55px;height:110px;background:#000;position:absolute;top:-2px;right:-10px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-top:2px solid #aaaaa8;border-left:2px solid #392c24;">
<div style="width:55px;height:110px;background:#000;position:absolute;top:-2px;right:-10px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-top:2px solid #aaaaa8;border-left:2px solid #392c24;">
-
  <div style="position:absolute;left:-40px;top:10px;"><li style="list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;"></li><li style="list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;"></li><li style="list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;"></li><li style="list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;"></li><li style="list-style-type:none;text-align:right;padding:3.5px 0 3.5px 0;"></li></div>
 
   <div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div>
   <div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div><div style="width:48px;height:8px;background:#333;border-radius:100px;margin-left:3px;margin-top:11px;background: linear-gradient(#000,#222);"></div>
   <div style="width:5px;height:25px;background:#9daaa3;border-top-right-radius:100px;border-bottom-right-radius:100px;position:absolute;top:43px;right:-5px;"></div>
   <div style="width:5px;height:25px;background:#9daaa3;border-top-right-radius:100px;border-bottom-right-radius:100px;position:absolute;top:43px;right:-5px;"></div>
Line 45: Line 39:
<div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div>
<div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div><div style="width:40px;height:5px;background:rgba(0,0,0,0.2);margin-bottom:8px;border-bottom:2px solid #978175;border-top-left-radius:2px;border-bottom-left-radius:3px;"></div>
</div>
</div>
-
<div style="width:35px;position:absolute;top:137px;left:20px">
+
<div style="width:35px;position:absolute;top:137px;left:20px;">
<div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="width:14px;height:14px;position:absolute;top:160px;left:30px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div>
<div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="display:block;width:80%;height:5px;background:rgba(0,0,0,0.2);margin-bottom:10px;border-bottom:2px solid #978175;border-top-right-radius:2px;border-bottom-right-radius:3px;position:relative;z-index:3;"></div><div style="width:14px;height:14px;position:absolute;top:160px;left:30px;background:#f4ebe4;border-radius:150px;box-shadow:0px 2px 5px #483a31;"></div>
</div>
</div>
Line 62: Line 56:
</div>
</div>
[[Category:Fallout 4]]
[[Category:Fallout 4]]
-
<!--Reference at http://codepen.io/stix/pen/KdJEwB -->
+
<!-- Reference at codepen.io/stix/pen/KdJEwB -->

Current revision as of 04:07, 20 April 2016

 Quests
Retrieved from "http://72.14.177.54/Create_your_own_story/Template:Pipboy2"
Personal tools