diff --git a/static/app/contributing.html b/static/app/contributing.html index f3f8c43..2239e66 100644 --- a/static/app/contributing.html +++ b/static/app/contributing.html @@ -13,83 +13,135 @@ + -
-

Crypto by everyone.

-

- Crypto 101 is a volunteer project to bring cryptography - education to everyone, founded - by lvh. It relies on - your contributions to continue to operate. -

-
-
-
-

Review

-

- Get the book and read it. See anything that's hard to - understand? Anything you don't like? Sections missing that - should be there, or sections there that shouldn't? Raise your - issues - on the - book's Github page. -

+
+
+
+

+ Crypto by everyone +

+
+
+

+ Crypto 101 is a volunteer project to bring cryptography + education to everyone, founded + by lvh. It relies on + your contributions to continue to operate. +

+
+
+
- -
-

Code

-

- All of the code is being publicly - developed on - Github. If you have any issues at all, please don't - hesitate to join in. -

-

- If you are a designer, web designer or web - developer, this - website could use a lot of help, for example for making - it responsive. Also, an icon or logo for the project would - be greatly appreciated. -

-

- If you've got ops chops, we could definitely use a lot of - Ansible and Docker guidance. -

-
- -
-

Donations

-

- Finally, you can donate to further the development of Crypto - 101. See below for donation options. -

+ +
+
+

Review

+
+
+

+ Get the book and read it. See anything that's hard to + understand? Anything you don't like? Sections missing that + should be there, or sections there that shouldn't? Raise your + issues + on the + book's Github page. +

+
+
+
-
- -
-
-
-

Bitcoin

- -
1PS3aS2GsYTqgVbt1
8wEJZNCtn2F1HanhE
-
- + + +
+

Code

+
+
+

+ All of the code is being publicly + developed on + Github. If you have any issues at all, please don't + hesitate to join in. +

+

+ If you are a designer, web designer or web + developer, this + website could use a lot of help, for example for making + it responsive. Also, an icon or logo for the project would + be greatly appreciated. +

+

+ If you've got ops chops, we could definitely use a lot of + Ansible and Docker guidance. +

+
- + +
+

Donations

+
+
+

+ Finally, you can donate to further the development of Crypto + 101. See below for donation options. +

+
-
-

Credit cards

-

Coming soon!

+
+ +
+
+ + +
+

Credit cards

+
+ + + + +
+
-
+ + diff --git a/static/app/images/bitcoin.png b/static/app/images/bitcoin.png new file mode 100644 index 0000000..96f9f87 Binary files /dev/null and b/static/app/images/bitcoin.png differ diff --git a/static/app/images/bitcoin@2x.png b/static/app/images/bitcoin@2x.png new file mode 100644 index 0000000..4d54eb0 Binary files /dev/null and b/static/app/images/bitcoin@2x.png differ diff --git a/static/app/images/hero_background.png b/static/app/images/hero_background.png new file mode 100644 index 0000000..05fd956 Binary files /dev/null and b/static/app/images/hero_background.png differ diff --git a/static/app/images/hero_background@2x.png b/static/app/images/hero_background@2x.png new file mode 100644 index 0000000..7551edc Binary files /dev/null and b/static/app/images/hero_background@2x.png differ diff --git a/static/app/images/litecoin.png b/static/app/images/litecoin.png new file mode 100644 index 0000000..960f6e3 Binary files /dev/null and b/static/app/images/litecoin.png differ diff --git a/static/app/images/litecoin@2x.png b/static/app/images/litecoin@2x.png new file mode 100644 index 0000000..f2555a7 Binary files /dev/null and b/static/app/images/litecoin@2x.png differ diff --git a/static/app/images/rackspace.png b/static/app/images/rackspace.png index b959cb8..2c0bc94 100644 Binary files a/static/app/images/rackspace.png and b/static/app/images/rackspace.png differ diff --git a/static/app/images/rackspace@2x.png b/static/app/images/rackspace@2x.png new file mode 100644 index 0000000..e19444d Binary files /dev/null and b/static/app/images/rackspace@2x.png differ diff --git a/static/app/index.html b/static/app/index.html index cfff62c..c252aeb 100644 --- a/static/app/index.html +++ b/static/app/index.html @@ -13,6 +13,7 @@ + -
-

Crypto for everyone.

-

- Crypto 101 is an introductory course on cryptography, - freely available for programmers of all ages and skill - levels. +

- - - -
- -
-
-

Start to finish.

-

- Comes with everything you need to understand complete - systems such as SSL/TLS: block ciphers, stream ciphers, - hash functions, message authentication codes, public key - encryption, key agreement protocols, and signature - algorithms. -

-
- -
-

Learn by doing.

-

- Learn how to exploit common cryptographic flaws, armed - with nothing but a little time and your favorite - programming language. -

-

- Forge administrator cookies, recover passwords, and even - backdoor your own random number generator. -

-
- -
-

Works everywhere.

-

- DRM-free and available in all common formats: -

-
    -
  • PDF (for Mac and PC)
  • -
  • EPUB (for most ebook readers, iPad and iPhone)
  • -
  • Mobi (for Kindle)
  • -
-

- Exercises run on OS X, Windows, Linux and BSDs. -

+ + + + + +
+ +
+
+

+ Crypto101 +

+
+
+

+ Crypto 101 is an introductory course on cryptography, + freely available for programmers of all ages and skill + levels. +

+
+
+ + + + + + + +
-
- -
-

Sponsors

- - -
-

Donations

-

- Crypto 101 is available for everyone, for free, forever. - Development is - hosted on - Github, funded by free time and your donations. You - are free to donate any amount you want, and all donations - are of course entirely voluntary. Learn - more about contributing. -

- -
-
-

Bitcoin

- -
1PS3aS2GsYTqgVbt1
8wEJZNCtn2F1HanhE
-
+ +
+ +
+

Sponsors

+
+
+ +
+
+

+ Rackspace is a + world-leading cloud services provider. They have + incredibly generously offered to take care of all of + Crypto 101's extensive hosting requirements free of + charge. This project simply wouldn't be possible without + their help. +

+

Thanks, Rackspace!

+
- + +
+
+

Donations

+
+
+

+ Crypto 101 is available for everyone, for free, forever. + Development is + hosted on + Github, funded by free time and your donations. You + are free to donate any amount you want, and all donations + are of course entirely voluntary. Learn + more about contributing. +

+
+
+ +
+ + +
+

Credit cards

+
+ + + + +
+
+
-
-

Credit cards

-
- - - - -
+
+ +
+

Crypto 101: the presentation

+
+
+

+ Crypto 101 started as a presentation at PyCon 2013. It + tries to go through all of the major dramatis personae of + cryptography to make TLS work in 45 minutes. This book is + the natural extension of that, with an extensive focus on + breaking cryptography. +

+ +
-
-

Crypto 101: the presentation

-

- Crypto 101 started as a presentation at PyCon 2013. It - tries to go through all of the major dramatis personae of - cryptography to make TLS work in 45 minutes. This book is - the natural extension of that, with an extensive focus on - breaking cryptography. -

- -
- diff --git a/static/app/scripts/main.js b/static/app/scripts/main.js index b17e214..db95667 100644 --- a/static/app/scripts/main.js +++ b/static/app/scripts/main.js @@ -5,6 +5,13 @@ $(function() { $("#email-form").show(); }); + $("#email-form").on('click', function(e) { + var target = e.target + if (target === this || target.classList.contains("close") ) { + $(this).css("display", "none"); + }; + }) + $("#submit-email").click(function () { $("#submit-email").attr("disabled", "disabled"); $.ajax("https://www.crypto101.io/subscribe", { diff --git a/static/app/scripts/modernizr.js b/static/app/scripts/modernizr.js new file mode 100644 index 0000000..289c69c --- /dev/null +++ b/static/app/scripts/modernizr.js @@ -0,0 +1,2 @@ +//! Modernizr 2.6.2 | (c) Faruk Ates, Paul Irish, Alex Sexton | modernizr.com/license +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexDirection")},p.webkitbox=function(){return D("WebkitBoxFlex")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document); \ No newline at end of file diff --git a/static/app/styles/_backgrounds.scss b/static/app/styles/_backgrounds.scss new file mode 100644 index 0000000..0ca324c --- /dev/null +++ b/static/app/styles/_backgrounds.scss @@ -0,0 +1,13 @@ +.bg-purple { + background: $color-purple; +} + + +.bg-grey-lightest { + background: $color-grey-lightest; +} + + +.bg-numbers { + @include retina-image("../images/hero_background", 119px 50px); +} \ No newline at end of file diff --git a/static/app/styles/_base.scss b/static/app/styles/_base.scss new file mode 100644 index 0000000..b2b492e --- /dev/null +++ b/static/app/styles/_base.scss @@ -0,0 +1,11 @@ + +// colors +$color-white: #fff; +$color-purple: #41256E; +$color-orange: #F76B1C; +$color-orange-light: #F7842B; +$color-green: #50E3BB; +$color-notblack: #4A4A4A; +$color-grey: #C4C4C4; +$color-grey-light: #F1F1F1; +$color-grey-lightest: #F9F9F9; \ No newline at end of file diff --git a/static/app/styles/_brand.scss b/static/app/styles/_brand.scss new file mode 100644 index 0000000..f8c5344 --- /dev/null +++ b/static/app/styles/_brand.scss @@ -0,0 +1,11 @@ +.brand { + text-transform: uppercase; + font-weight: 800; + font-size: em(54); + line-height: 1; + margin-bottom: em(3); + + .text-light { + color: rgba($color-white, .6); + } +} \ No newline at end of file diff --git a/static/app/styles/_buttons.scss b/static/app/styles/_buttons.scss new file mode 100644 index 0000000..300322f --- /dev/null +++ b/static/app/styles/_buttons.scss @@ -0,0 +1,11 @@ +.btn { + height: em(36); + line-height: em(36); + border-radius: 2px; + font-size: em(24); + padding: 0 em(20); + @include box-shadow(none); + border: 0; + @include linear-gradient(bottom, $color-orange, $color-orange-light); + color: $color-white; +} \ No newline at end of file diff --git a/static/app/styles/_email-form.scss b/static/app/styles/_email-form.scss new file mode 100644 index 0000000..f14cd34 --- /dev/null +++ b/static/app/styles/_email-form.scss @@ -0,0 +1,27 @@ +.page-overlay { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0,0,0, .8); + z-index: 99; + text-align: center; + color: $color-white; + padding-top: 250px; + + .close { + color: rgba($color-white, .4); + position: absolute; + top: 10px; + right: 30px; + text-decoration: none; + font-size: 40px; + font-weight: 300; + } + + #email-message { + font-size: em(30); + margin-bottom: 40px; + } +} \ No newline at end of file diff --git a/static/app/styles/_footer.scss b/static/app/styles/_footer.scss new file mode 100644 index 0000000..2d07b4e --- /dev/null +++ b/static/app/styles/_footer.scss @@ -0,0 +1,20 @@ +.footer { + font-size: em(12); + text-align: center; + background: $color-grey-light; + color: shade($color-grey, 15%); + padding: 25px 0; + position: fixed; + bottom: 0; + z-index: -1; + width: 100%; + + p { + margin-bottom: 0; + line-height: 2; + } + + p a { + color: shade($color-grey, 35%); + } +} diff --git a/static/app/styles/_globals.scss b/static/app/styles/_globals.scss new file mode 100644 index 0000000..ae41c38 --- /dev/null +++ b/static/app/styles/_globals.scss @@ -0,0 +1,43 @@ +body { + font-family: "Open Sans"; + font-size: 15px; + margin: 0; + color: $color-notblack; +} + +.page-wrapper { + margin-bottom: 106px; // footer height + background: $color-white; +} + +img, iframe { + max-width: 100%; +} + +iframe { + width: 100%; +} + + +hr { + border: 1px solid $color-grey-light; + border-bottom: none; +} + +ul { + padding-left: 20px; +} + + +input[type="email"], +input[type="text"] { + vertical-align: top; + height: 51px; + line-height: 51px; + font-size: 20px; + padding-left: 20px; + padding-right: 20px; + @include box-shadow(none); + border-radius: 2px; + border: 1px solid $color-white; +} diff --git a/static/app/styles/_green-plus.scss b/static/app/styles/_green-plus.scss new file mode 100644 index 0000000..f4a60d6 --- /dev/null +++ b/static/app/styles/_green-plus.scss @@ -0,0 +1,10 @@ +.green-plus-before { position: relative; } +.green-plus-before:before { + content: "+"; + position: absolute; + left: -15px; + font-size: em(6); + font-weight: 400; + color: $color-green; + line-height: 51px; +} \ No newline at end of file diff --git a/static/app/styles/_grid.scss b/static/app/styles/_grid.scss new file mode 100644 index 0000000..f31e8af --- /dev/null +++ b/static/app/styles/_grid.scss @@ -0,0 +1,145 @@ +$grid-gutter-width: 40px; +$grid-columns: 6; +$reorder: false; + +$container: "container" !default; +$row: "row" !default; +$span: "mustache" !default; +$offset: "offset" !default; +$push: "push" !default; +$pull: "pull" !default; + +@mixin fluid-grid-widths($num-columns) { + $i: 1; + @while $i <= $num-columns { + .#{$span}#{$i} { + width: percentage($i / $num-columns); + } + @if $i < $num-columns { + .#{$offset}#{$i} { + margin-left: percentage($i / $num-columns); + } + } + $i: $i + 1; + } +} + +@mixin order-float($num-columns) { + $i: 1; + @while $i < $num-columns { + .#{$push}#{$i} { + left: percentage($i / $num-columns); + } + .#{$pull}#{$i} { + right: percentage($i / $num-columns); + } + $i: $i + 1; + } +} + +@mixin order-flex($i) { + -webkit-box-ordinal-group: $i; + -ms-flex-order: $i; + -webkit-order: $i; + order: $i; +} + +@mixin order-flex-x($num-columns) { + $i: 1; + @while $i <= $num-columns { + @if $i == 1 { + .#{$pull}#{$num-columns - $i} { + @include order-flex($i); + } + } + @else if $i < $num-columns { + .#{$push}#{$i - 1}, .#{$pull}#{$num-columns - $i} { + @include order-flex($i); + } + } + @else if $i <= $num-columns { + .#{$push}#{$i - 1} { + @include order-flex($i); + } + } + $i: $i + 1; + } +} + +@mixin span-x($num-columns) { + $i: 1; + @while $i <= $num-columns { + .#{$span}#{$i} { + @extend %span; + } + $i: $i + 1; + } +} + +.#{$container}, .#{$row} { + @include clearfix; +} + +.#{$container} { + margin-right: auto; + margin-left: auto; +} + +%span { + padding-right: $grid-gutter-width / 2; + padding-left: $grid-gutter-width / 2; + min-height: 1px; +} + +@include span-x($grid-columns); + +@media screen { + @media (min-width: 768px) { + .no-flexbox.no-webkitbox { + & *[class*='#{$span}'] { + position: relative; + float: left; + &.pull-right { + float: right; + } + } + @if $reorder { + @include order-float($grid-columns); + } + } + .flexbox, .webkitbox { + & .#{$row} { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + @if $reorder { + @include order-flex-x($grid-columns); + } + } + @include fluid-grid-widths($grid-columns); + .#{$container} { + max-width: 768px - $grid-gutter-width * 2; + } + .#{$row} { + margin-right: $grid-gutter-width / -2; + margin-left: $grid-gutter-width / -2; + } + *[class*='#{$span}'] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + @media (min-width: 992px) { + .#{$container} { + max-width: 940px; + } + } + @media (min-width: 1200px) { + .#{$container} { + max-width: 1200px - $grid-gutter-width; + } + } +} diff --git a/static/app/styles/_helpers.scss b/static/app/styles/_helpers.scss new file mode 100644 index 0000000..080b444 --- /dev/null +++ b/static/app/styles/_helpers.scss @@ -0,0 +1,7 @@ + +.text-grey { color: $color-grey; } +.text-white { color: $color-white; } +.text-light { font-weight: 300; } +.text-center { text-align: center; } +.text-small { font-size: em(14); } +.text-italic { font-style: italic; } \ No newline at end of file diff --git a/static/app/styles/_hero.scss b/static/app/styles/_hero.scss new file mode 100644 index 0000000..1b96bdc --- /dev/null +++ b/static/app/styles/_hero.scss @@ -0,0 +1,12 @@ + +// tilted hero +.tilted-bottom { position: relative; } +.tilted-bottom:after { + content: ""; + position: absolute; + width: 100%; + height: 30px; + bottom: -15px; + @include transform(rotate(-1deg)); + background: $color-white;; +} \ No newline at end of file diff --git a/static/app/styles/_logos.scss b/static/app/styles/_logos.scss new file mode 100644 index 0000000..e23914f --- /dev/null +++ b/static/app/styles/_logos.scss @@ -0,0 +1,26 @@ +// logos +.rackspace-logo { + @include retina-image("../images/rackspace", 340px 105px); + width: 340px; + height: 105px; + margin-left: auto; + margin-right: auto; +} + +.bitcoin-logo { + @include retina-image("../images/bitcoin", 40px 40px); + width: 40px; + height: 40px; + display: inline-block; + vertical-align: middle; + margin-top: -4px; +} + +.litecoin-logo { + @include retina-image("../images/litecoin", 40px 40px); + width: 40px; + height: 40px; + display: inline-block; + vertical-align: middle; + margin-top: -4px; +} \ No newline at end of file diff --git a/static/app/styles/_spacing.scss b/static/app/styles/_spacing.scss new file mode 100644 index 0000000..b4b51b7 --- /dev/null +++ b/static/app/styles/_spacing.scss @@ -0,0 +1,27 @@ +$positions: (top, right, bottom, left); + +@each $position in $positions { + .m-#{$position}-100 { + margin-#{$position}: 100px; + } + + .p-#{$position}-100 { + padding-#{$position}: 100px; + } + + .m-#{$position}-60 { + margin-#{$position}: 60px; + } + + .p-#{$position}-60 { + padding-#{$position}: 60px; + } + + .m-#{$position}-45 { + margin-#{$position}: 45px; + } + + .p-#{$position}-45 { + padding-#{$position}: 45px; + } +} diff --git a/static/app/styles/_twitter-widget.scss b/static/app/styles/_twitter-widget.scss new file mode 100644 index 0000000..14eac14 --- /dev/null +++ b/static/app/styles/_twitter-widget.scss @@ -0,0 +1,6 @@ +// twitter widget +#twitter-widget-0 { + vertical-align: middle; + margin-left: 20px; + margin-top: -8px; +} diff --git a/static/app/styles/_typography.scss b/static/app/styles/_typography.scss new file mode 100644 index 0000000..76a6244 --- /dev/null +++ b/static/app/styles/_typography.scss @@ -0,0 +1,39 @@ +h1 { + font-size: em(36); + margin: 0; + margin-bottom: em(5); +} + +h2 { + font-size: em(30); + margin: 0; + margin-bottom: em(10) +} + +h3 { + font-size: em(24); + margin: 0; +} + +p.lead { + font-size: em(28); + color: rgba($color-white, .9); + font-weight: 300; +} + +p { + font-size: em(20); + line-height: 1.5; + margin: 0; + margin-bottom: em(10); +} + +p a { + color: $color-orange; + text-decoration: none; + border-bottom: 1px dashed $color-grey; +} + +pre { + word-wrap: break-word; +} \ No newline at end of file diff --git a/static/app/styles/main.scss b/static/app/styles/main.scss index b0473d4..9f38e6c 100644 --- a/static/app/styles/main.scss +++ b/static/app/styles/main.scss @@ -1,162 +1,21 @@ +@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800); + @import "bourbon/bourbon"; @import "neat/neat"; -$fg: #333333; -$bg: #fefefe; - -body { - @include outer-container; - - max-width: 800px; - - background: $bg; - - font-family: $helvetica; - font-weight: 200; - - color: $fg; -} - -h1, h2 { - font-weight: 200; - text-align: center; -} - -.browsehappy { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -.hero-unit { - @include span-columns(10); - @include shift(1); - - background-color: shade($bg, 5%); - border-radius: 20px; - - margin-top: 20px; - padding: 40px 60px; - - text-align: center; - - h1, p { - margin-left: auto; - margin-right: auto; - } - - h1 { - font-size: 60px; - line-height: 60px; - } - - p, input { - font-size: 22px; - line-height: 30px; - } - - #download-link { - text-decoration: none; - } - - button, input[type=submit] { - @include button; - - display: block; - - margin-left: auto; - margin-right: auto; - - padding: 20px 30px; - - font-family: $helvetica; - font-size: 20px; - font-weight: 200; - } -} - -#sponsors { - margin-top: 50px; - div { - img.logo { - @include span-columns(6); - } - } -} - -@mixin three-points { - margin-top: 20px; - - div { - @include span-columns(4); - padding: 0px 10px; - } -} - -.benefits { - @include three-points; -} - - - -#donations { - @include span-columns(12); - - #donation-options { - text-align: center; - @include three-points; - } -} - -#presentation { - @include span-columns(12); - iframe { - display: block; - margin: 20px auto; - } -} - -.testimonials { - blockquote { - &:before { - @include span-columns(1); - content: "\201C"; - - font-size: 140px; - font-weight: 400; - - color: shade($bg, 20%); - } - - @include span-columns(11); - - p { - padding-left: 10px; - font-size: 22px; - } - - cite { - float: right; - color: tint($fg, 10%); - &:before { - content: "\2014 \2009"; - } - } - } -} - -.footer { - @include span-columns(12); - margin-top: 10px; - - color: tint($fg, 50%); - - p { - text-align: center; - } -} - -#contribution-options { - @include three-points; -} \ No newline at end of file +@import "base"; + +@import "grid"; +@import "globals"; +@import "helpers"; +@import "spacing"; +@import "typography"; +@import "backgrounds"; +@import "brand"; +@import "buttons"; +@import "logos"; +@import "green-plus"; +@import "hero"; +@import "twitter-widget"; +@import "email-form"; +@import "footer"; \ No newline at end of file