зеркало из https://github.com/mozilla/deepdev.git
Initial commit
This commit is contained in:
Rachel Nabors
Коммит
e823fbd613
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -0,0 +1,5 @@
|
||||||
|
source "http://rubygems.org"
|
||||||
|
|
||||||
|
gem 'sass'
|
||||||
|
gem 'compass'
|
||||||
|
gem 'oily_png'
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
GEM
|
||||||
|
remote: http://rubygems.org/
|
||||||
|
specs:
|
||||||
|
chunky_png (1.3.4)
|
||||||
|
compass (1.0.3)
|
||||||
|
chunky_png (~> 1.2)
|
||||||
|
compass-core (~> 1.0.2)
|
||||||
|
compass-import-once (~> 1.0.5)
|
||||||
|
rb-fsevent (>= 0.9.3)
|
||||||
|
rb-inotify (>= 0.9)
|
||||||
|
sass (>= 3.3.13, < 3.5)
|
||||||
|
compass-core (1.0.3)
|
||||||
|
multi_json (~> 1.0)
|
||||||
|
sass (>= 3.3.0, < 3.5)
|
||||||
|
compass-import-once (1.0.5)
|
||||||
|
sass (>= 3.2, < 3.5)
|
||||||
|
ffi (1.9.10)
|
||||||
|
multi_json (1.11.2)
|
||||||
|
oily_png (1.2.0)
|
||||||
|
chunky_png (~> 1.3.1)
|
||||||
|
rb-fsevent (0.9.6)
|
||||||
|
rb-inotify (0.9.5)
|
||||||
|
ffi (>= 0.5.0)
|
||||||
|
sass (3.4.18)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
ruby
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
compass
|
||||||
|
oily_png
|
||||||
|
sass
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.9 KiB |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square70x70logo src="tile.png"/>
|
||||||
|
<square150x150logo src="tile.png"/>
|
||||||
|
<wide310x150logo src="tile-wide.png"/>
|
||||||
|
<square310x310logo src="tile.png"/>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
require 'compass/import-once/activate'
|
||||||
|
# Require any additional compass plugins here.
|
||||||
|
|
||||||
|
# Set this to the root of your project when deployed:
|
||||||
|
http_path = "/"
|
||||||
|
css_dir = "css"
|
||||||
|
sass_dir = "scss"
|
||||||
|
images_dir = "img"
|
||||||
|
javascripts_dir = "js"
|
||||||
|
|
||||||
|
# You can select your preferred output style here (can be overridden via the command line):
|
||||||
|
# output_style = :expanded or :nested or :compact or :compressed
|
||||||
|
|
||||||
|
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||||
|
# relative_assets = true
|
||||||
|
|
||||||
|
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||||
|
# line_comments = false
|
||||||
|
|
||||||
|
|
||||||
|
# If you prefer the indented syntax, you might want to regenerate this
|
||||||
|
# project again passing --syntax sass, or you can uncomment this:
|
||||||
|
# preferred_syntax = :sass
|
||||||
|
# and then run:
|
||||||
|
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass
|
||||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,46 @@
|
||||||
|
/* line 3, ../scss/main.scss */
|
||||||
|
.segment {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 5, ../scss/main.scss */
|
||||||
|
body, h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 9, ../scss/main.scss */
|
||||||
|
#title {
|
||||||
|
background: #5fa4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 13, ../scss/main.scss */
|
||||||
|
#epipelagic {
|
||||||
|
background: linear-gradient(to bottom, #39dbb3 0%, #007e84 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 16, ../scss/main.scss */
|
||||||
|
#mesopelagic {
|
||||||
|
background: linear-gradient(to bottom, #007e84 0%, #0b4960 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 19, ../scss/main.scss */
|
||||||
|
#bathypelagic {
|
||||||
|
background: linear-gradient(to bottom, #0b4960 0%, #002351 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 22, ../scss/main.scss */
|
||||||
|
#abyssal {
|
||||||
|
background: linear-gradient(to bottom, #002351 0%, #000c1c 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line 26, ../scss/main.scss */
|
||||||
|
p {
|
||||||
|
color: #c6f3c7;
|
||||||
|
text-align: center;
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 1.5em 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
max-width: 40em;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 766 B |
|
|
@ -0,0 +1,14 @@
|
||||||
|
# humanstxt.org/
|
||||||
|
# The humans responsible & technology colophon
|
||||||
|
|
||||||
|
# TEAM
|
||||||
|
|
||||||
|
Rachel Nabors -- Front end lead, Art direction -- @rachelnabors
|
||||||
|
|
||||||
|
# THANKS
|
||||||
|
|
||||||
|
Our loving families and friends and the people at NOAA and the Census of Marine Life for all their research.
|
||||||
|
|
||||||
|
# TECHNOLOGY COLOPHON
|
||||||
|
|
||||||
|
HTML5, CSS3
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<filter id="bluefishblue">
|
||||||
|
<feComponentTransfer><feFuncR type="linear" slope="0" /></feComponentTransfer>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
После Ширина: | Высота: | Размер: 255 B |
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>Deep Sea Dive into Dev Tools</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<!-- <link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||||
|
-->
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="segment" id="title">
|
||||||
|
<h1>Deep Sea Dive into Dev Tools</h1>
|
||||||
|
</div>
|
||||||
|
<div class="zone" id="epipelagic">
|
||||||
|
<div class="segment" id="d0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="zone" id="mesopelagic">
|
||||||
|
<div class="segment" id="d200">
|
||||||
|
<p>No photosynthesis happens from here on.</p>
|
||||||
|
<p>Sorry, Plants & Co.</p>
|
||||||
|
</div>
|
||||||
|
<div class="segment" id="d400"></div>
|
||||||
|
<div class="segment" id="d600"></div>
|
||||||
|
<div class="segment" id="d800"></div>
|
||||||
|
</div>
|
||||||
|
<div class="zone" id="bathypelagic">
|
||||||
|
<div class="segment" id="d1000">
|
||||||
|
<p>No plants can live here. Period. Everyone here lives off the poop and dead things floating down from above.</p>
|
||||||
|
<p>There is no light. This pretty blue color? I put it here for your amusement. This would actually be pitch black unless you were packing your own bioluminescence.</p>
|
||||||
|
<p>There is little oxygen.</p>
|
||||||
|
<p>Try not to move around too much.</p>
|
||||||
|
<p>Conserve…</p>
|
||||||
|
<p>…energy…</p>
|
||||||
|
</div>
|
||||||
|
<div class="segment" id="d1200"></div>
|
||||||
|
<div class="segment" id="d1400"></div>
|
||||||
|
<div class="segment" id="d1600"></div>
|
||||||
|
<div class="segment" id="d1800"></div>
|
||||||
|
<div class="segment" id="d2000"></div>
|
||||||
|
<div class="segment" id="d2200"></div>
|
||||||
|
<div class="segment" id="d2400"></div>
|
||||||
|
<div class="segment" id="d2600"></div>
|
||||||
|
<div class="segment" id="d2800"></div>
|
||||||
|
<div class="segment" id="d3000"></div>
|
||||||
|
<div class="segment" id="d3200"></div>
|
||||||
|
<div class="segment" id="d3400"></div>
|
||||||
|
<div class="segment" id="d3600"></div>
|
||||||
|
<div class="segment" id="d3800"></div>
|
||||||
|
</div>
|
||||||
|
<div class="zone" id="abyssal">
|
||||||
|
<div class="segment" id="d4000">
|
||||||
|
<p>Why, why did you come here?</p>
|
||||||
|
</div>
|
||||||
|
<div class="segment" id="d4200"></div>
|
||||||
|
<div class="segment" id="d4400"></div>
|
||||||
|
<div class="segment" id="d4600"></div>
|
||||||
|
<div class="segment" id="d4800"></div>
|
||||||
|
<div class="segment" id="d5000"></div>
|
||||||
|
<div class="segment" id="d5200"></div>
|
||||||
|
<div class="segment" id="d5400"></div>
|
||||||
|
<div class="segment" id="d5600"></div>
|
||||||
|
<div class="segment" id="d5800"></div>
|
||||||
|
<div class="segment" id="d6000"></div>
|
||||||
|
</div>
|
||||||
|
<script src="js/vendor/anchor.1.2.1.min.js"></script>
|
||||||
|
<script src="js/vendor/waypoints.noframework.4.0.0.min.js"></script>
|
||||||
|
<script src="js/vendor/waypoints.inview.min.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
|
||||||
|
<script>
|
||||||
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||||
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||||
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||||
|
e.src='//www.google-analytics.com/analytics.js';
|
||||||
|
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||||
|
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
|
||||||
|
</script>
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,35 @@
|
||||||
|
(function(){
|
||||||
|
|
||||||
|
notify = function(note) {
|
||||||
|
console.log(note);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
var waypoint = new Waypoint({
|
||||||
|
element: document.getElementById('mesopelagic'),
|
||||||
|
handler: function() {
|
||||||
|
console.log('Basic waypoint triggered')
|
||||||
|
}
|
||||||
|
})*/
|
||||||
|
|
||||||
|
var segments = document.getElementsByClassName('segment');
|
||||||
|
|
||||||
|
Array.prototype.forEach.call(segments, function(child) {
|
||||||
|
new Waypoint.Inview({
|
||||||
|
element: child,
|
||||||
|
enter: function(direction) {
|
||||||
|
this.element.classList.add("in-view");
|
||||||
|
notify(child + ': Enter triggered with direction ' + direction)
|
||||||
|
},
|
||||||
|
entered: function(direction) {
|
||||||
|
notify(child + ': Entered triggered with direction ' + direction)
|
||||||
|
},
|
||||||
|
exit: function(direction) {
|
||||||
|
notify(child + ': Exit triggered with direction ' + direction)
|
||||||
|
},
|
||||||
|
exited: function(direction) {
|
||||||
|
notify(child + ': Exited triggered with direction ' + direction)
|
||||||
|
this.element.classList.remove("in-view");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})();
|
||||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,6 @@
|
||||||
|
/*!
|
||||||
|
* AnchorJS - v1.2.1 - 2015-07-02
|
||||||
|
* https://github.com/bryanbraun/anchorjs
|
||||||
|
* Copyright (c) 2015 Bryan Braun; Licensed MIT
|
||||||
|
*/
|
||||||
|
function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,r,h,c,g;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i<e.length;i++){if(e[i].hasAttribute("id"))n=e[i].getAttribute("id");else{s=e[i].textContent,a=s.replace(/[^\w\s-]/gi,"").replace(/\s+/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase(),h=a,r=0;do void 0!==l&&(h=a+"-"+r),l=o.indexOf(h),r+=1;while(-1!==l);l=void 0,o.push(h),e[i].setAttribute("id",h),n=h}c=n.replace(/-/g," "),g=document.createElement("a"),g.className="anchorjs-link "+this.options.class,g.href="#"+n,g.setAttribute("aria-label","Anchor link for: "+c),g.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(g.style.opacity="1"),""===this.options.icon&&(g.style.fontFamily="anchorjs-icons",g.style.fontStyle="normal",g.style.fontVariant="normal",g.style.fontWeight="normal",g.style.lineHeight=1),"left"===this.options.placement?(g.style.position="absolute",g.style.marginLeft="-1em",g.style.paddingRight="0.5em",e[i].insertBefore(g,e[i].firstChild)):(g.style.paddingLeft="0.375em",e[i].appendChild(g))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o<t.length;o++)e=t[o].querySelector(".anchorjs-link"),e&&t[o].removeChild(e);return this},this._addBaselineStyles=function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length)}}}var anchors=new AnchorJS;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
Waypoints Inview Shortcut - 4.0.0
|
||||||
|
Copyright © 2011-2015 Caleb Troughton
|
||||||
|
Licensed under the MIT license.
|
||||||
|
https://github.com/imakewebthings/waypoints/blog/master/licenses.txt
|
||||||
|
*/
|
||||||
|
!function(){"use strict";function t(){}function e(t){this.options=i.Adapter.extend({},e.defaults,t),this.axis=this.options.horizontal?"horizontal":"vertical",this.waypoints=[],this.element=this.options.element,this.createWaypoints()}var i=window.Waypoint;e.prototype.createWaypoints=function(){for(var t={vertical:[{down:"enter",up:"exited",offset:"100%"},{down:"entered",up:"exit",offset:"bottom-in-view"},{down:"exit",up:"entered",offset:0},{down:"exited",up:"enter",offset:function(){return-this.adapter.outerHeight()}}],horizontal:[{right:"enter",left:"exited",offset:"100%"},{right:"entered",left:"exit",offset:"right-in-view"},{right:"exit",left:"entered",offset:0},{right:"exited",left:"enter",offset:function(){return-this.adapter.outerWidth()}}]},e=0,i=t[this.axis].length;i>e;e++){var n=t[this.axis][e];this.createWaypoint(n)}},e.prototype.createWaypoint=function(t){var e=this;this.waypoints.push(new i({context:this.options.context,element:this.options.element,enabled:this.options.enabled,handler:function(t){return function(i){e.options[t[i]].call(e,i)}}(t),offset:t.offset,horizontal:this.options.horizontal}))},e.prototype.destroy=function(){for(var t=0,e=this.waypoints.length;e>t;t++)this.waypoints[t].destroy();this.waypoints=[]},e.prototype.disable=function(){for(var t=0,e=this.waypoints.length;e>t;t++)this.waypoints[t].disable()},e.prototype.enable=function(){for(var t=0,e=this.waypoints.length;e>t;t++)this.waypoints[t].enable()},e.defaults={context:window,enabled:!0,enter:t,entered:t,exit:t,exited:t},i.Inview=e}();
|
||||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,5 @@
|
||||||
|
# www.robotstxt.org/
|
||||||
|
|
||||||
|
# Allow crawling of all content
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
$heightScreen: 100vh; // 100vh = height of screen = 200 meters of ocean
|
||||||
|
|
||||||
|
.segment { min-height: $heightScreen; }
|
||||||
|
|
||||||
|
body, h1 {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
background: #5fa4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#epipelagic {
|
||||||
|
background: linear-gradient(to bottom, #39dbb3 0%, #007e84 100%);
|
||||||
|
}
|
||||||
|
#mesopelagic {
|
||||||
|
background: linear-gradient(to bottom, #007e84 0%, #0b4960 100%);
|
||||||
|
}
|
||||||
|
#bathypelagic {
|
||||||
|
background: linear-gradient(to bottom, #0b4960 0%, #002351 100%);
|
||||||
|
}
|
||||||
|
#abyssal {
|
||||||
|
background: linear-gradient(to bottom, #002351 0%, #000c1c 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #c6f3c7;
|
||||||
|
text-align: center;
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 1.5em 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
max-width: 40em;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.4 KiB |
Загрузка…
Ссылка в новой задаче