diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..67aaa21 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d0b411b..519f839 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,4 @@ prep_facebook_pages =================== [This is an HTML and CSS project from the Viking Code School Prep Work](http://www.vikingcodeschool.com/web-markup-and-coding/let-s-build-facebook). +Vadim Vainer diff --git a/about.html b/about.html new file mode 100644 index 0000000..b5c5dc7 --- /dev/null +++ b/about.html @@ -0,0 +1,186 @@ + + + + + + About + + + + + +
+ + + +
+ + +
+
+ Harry +
+
+ +
+
+ + +
+ + +
+ + + + + + +
+ + + +
+ +
+ + +
+ +
+

+ About + Edit Profile +

+ + + + +
+
+ +
+ + +
+ + +

Basic Information

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Birthday:July 31st, 1980
+ +
College: Hogwarts College
+ +
Hometown:Godrick's Hollow, England
College:Godrick's Hollow, England
+ + +
+
+ +
+ + + + + + + + + + + + + +
Email:harry@portter.edu
Telephone: 555-123-4567
+ +
+
+ +
+

Words to live By

+

+ Kirjojenkerääjä Matti Pohto on kulttuurihistoriamme kummajaisia. + Jos maailma olisi oikeudenmukainen, hänen näköispatsaansa olisi + kunniapaikalla useammassakin kaupungissa. Maaliskuun 7. olisi vakiintunut + liputuspäivä Matti Pohdon syntymän muistoksi.i Pohdon kohtalo + na oli kuitenkin jäädä unohdetuksi. Hänestä ei ole ainuttakaan kuva + a, eikä hänen nimeään tunne kuin kourallinen lähinnä kirjoista kiinnostune + ita ihmisiä. +

+

About Me

+ Kirjojenkerääjä Matti Pohto on kulttuurihistoriamme kummajaisia. + Jos maailma olisi oikeudenmukainen, hänen näköispatsaansa olisi + kunniapaikalla useammassakin kaupungissa. Maaliskuun 7. olisi vakiintunut + liputuspäivä Matti Pohdon syntymän muistoksi.i Pohdon kohtalo + na oli kuitenkin jäädä unohdetuksi. Hänestä ei ole ainuttakaan kuva + a, eikä hänen nimeään tunne kuin kourallinen lähinnä kirjoista kiinnostune + ita ihmisiä.Kirjojenkerääjä Matti Pohto on kulttuurihistoriamme kummajaisia. + Jos maailma olisi oikeudenmukainen, hänen näköispatsaansa olisi + kunniapaikalla useammassakin kaupungissa. Maaliskuun 7. olisi vakiintunut + liputuspäivä Matti Pohdon syntymän muistoksi.i Pohdon kohtalo + na oli kuitenkin jäädä unohdetuksi. Hänestä ei ole ainuttakaan kuva + a, eikä hänen nimeään tunne kuin kourallinen lähinnä kirjoista kiinnostune + ita ihmisiä. +
+
+
+ +
+
+ +
+
+
+ +
+ + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..dd39e55 --- /dev/null +++ b/index.html @@ -0,0 +1,242 @@ + + + + + + + Facebook + + + +
+ + +
+
+ + + + +
+
+
+
+ +
+
+

Connect with all your friends!

+
    +
  • + See photos and updates in your news feed. +
    • +
  • + Post your status for the world to see from your profile. +
    • +
  • + Get in touch with your friends by "friending" them. +
    • +
  • + Like things because you're a positive person! +
    • +
+
+
+
+

Sign Up

+ + +
+ + + +

Birthday

+ + + +
+ Male + Famale +
+ + +
+ +
+ +
+ +
+ +
+ + + + + + +
+ + diff --git a/pictures/.DS_Store b/pictures/.DS_Store new file mode 100644 index 0000000..415f925 Binary files /dev/null and b/pictures/.DS_Store differ diff --git a/pictures/banner.jpg b/pictures/banner.jpg new file mode 100644 index 0000000..06efd14 Binary files /dev/null and b/pictures/banner.jpg differ diff --git a/pictures/profilepic.jpg b/pictures/profilepic.jpg new file mode 100644 index 0000000..30758c0 Binary files /dev/null and b/pictures/profilepic.jpg differ diff --git a/scssstylesheets/.sass-cache/87cdf3289c00299a3ed168caceb82549d8af671f/scssstyle.scssc b/scssstylesheets/.sass-cache/87cdf3289c00299a3ed168caceb82549d8af671f/scssstyle.scssc new file mode 100644 index 0000000..415a5d7 Binary files /dev/null and b/scssstylesheets/.sass-cache/87cdf3289c00299a3ed168caceb82549d8af671f/scssstyle.scssc differ diff --git a/scssstylesheets/cssstyle.css b/scssstylesheets/cssstyle.css new file mode 100644 index 0000000..0a4a8c6 --- /dev/null +++ b/scssstylesheets/cssstyle.css @@ -0,0 +1,41 @@ +.copyrights { + width: 100%; + height: 25px; + font-family: fantasy; + color: white; + background-color: #3366ff; + text-align: center; } + +.windowslr, .left-window, .right-window { + width: 50%; + height: auto; } + +.left-window { + float: left; } + +.right-window { + float: right; } + +.main-container, .main-window { + width: 100%; + hight: 100%; } + +.main-window { + display: inline-block; + font-family: fantasy; + color: darkgray; } + +.nav-bar { + width: 100%; + height: 100px; + background-color: #3366ff; + font-family: fantasy; + color: white; } + +.nav-sign-in { + float: right; } + +.nav-logo { + float: left; } + +/*# sourceMappingURL=cssstyle.css.map */ diff --git a/scssstylesheets/cssstyle.css.map b/scssstylesheets/cssstyle.css.map new file mode 100644 index 0000000..8085763 --- /dev/null +++ b/scssstylesheets/cssstyle.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAEE,WAAW;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,MAAM;;AAKpB,uCAAU;EACR,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;;AAGd,YAAY;EAEV,KAAK,EAAE,IAAI;;AAGb,aAAa;EAEX,KAAK,EAAE,KAAK;;AAGd,6BAAe;EACX,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;;AAKf,YAAY;EAEV,OAAO,EAAE,YAAY;EACrB,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,QAAQ;;AAIjB,QAAQ;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,KAAK;;AAIZ,YAAY;EACZ,KAAK,EAAE,KAAK;;AAGZ,SAAS;EACP,KAAK,EAAC,IAAI", +"sources": ["scssstyle.scss"], +"names": [], +"file": "cssstyle.css" +} diff --git a/scssstylesheets/scssstyle.scss b/scssstylesheets/scssstyle.scss new file mode 100644 index 0000000..5043a78 --- /dev/null +++ b/scssstylesheets/scssstyle.scss @@ -0,0 +1,59 @@ + + + .copyrights{ + width: 100%; + height: 25px; + font-family: fantasy; + color: white; + background-color: #3366ff; + text-align: center; + + + } + + .windowslr{ + width: 50%; + height: auto; + } + + .left-window{ + @extend .windowslr; + float: left; + } + + .right-window{ + @extend .windowslr; + float: right; + } + + .main-container{ + width: 100%; + hight: 100%; + + + } + + .main-window{ + @extend .main-container; + display: inline-block; + font-family: fantasy; + color: darkgray; + + } + + .nav-bar{ + width: 100%; + height: 100px; + background-color: #3366ff; + font-family: fantasy; + color: white + + } + + .nav-sign-in{ + float: right; + } + + .nav-logo{ + float:left; + } diff --git a/stylesheets/about.css b/stylesheets/about.css new file mode 100644 index 0000000..0d4004d --- /dev/null +++ b/stylesheets/about.css @@ -0,0 +1,162 @@ +/* About page css*/ +.boldie{ + font-weight: bold; +} +.container{ + width: 100%; + height: 100%; + + +} +.upper-window{ + width: auto; + height: auto; + border: 2px solid blue; + margin-right: 578px; + +} +.lower-window{ + width: 65%; + height: auto; + border: 2px solid blue; + margin-right: 578px; + + +} +.info{ + width: 40%; + +} +.basic-info{ + height: auto; + + +} + +.contact-info{ + + height: auto; + + +} + +.about-me-text{ + width:45%; + height: auto; + + +} + +.nav-bar{ + width:65%; + height: 100px; +background-color: blue; +border: 2px solid blue; +margin-right: 578px; + +} +.link-bar{ + width: 80%; + height: 50px; + margin-left: 380px; + margin-top: 25px; + +} +/*==================================*/ + +.nav-logo{ + width: 10%; + + background-color: blue; + font-family: fantasy; + color: white; + display: inline; + +} + +.edit-bar{ + background-color: lightgray; + font-family: fantasy; + color: white; + width: 100%; + height: 50px; +} + +.edit-bar>h2{ + color: red; + text-align: center; + margin-top: 7px; + +} + +.alignright{ + float: right; + +} +.alignleft{ + float: left; + +} +.search-bar{ + + display: inline; + +} + +#bar-position{ + margin-left: 200px; + margin-top: 40px; +width: 600px; +} + +.username{ +font-family: fantasy; +color: white; +margin-right: 30px; +margin-top: 40px; + +} +#banner{ + +} + +#profilepic{ + position: absolute; + top: 280px; + left: 25px; +} + +td{ + +} +ul{ + list-style-type: none; + +} +li{ + float:left; + margin: 0px 15px 0px 15px; +} + +.button{ + background: blue; + color: white; + box-shadow: 4px 4px gray; + margin-right: 10px; + + +} +.center{ + +} + +#copyrights{ + width: 1086px; + height: 25px; +font-family: fantasy; +color: white; +background-color: #3366ff; +text-align: center; + + +} diff --git a/stylesheets/style.css b/stylesheets/style.css new file mode 100644 index 0000000..bf5bbb2 --- /dev/null +++ b/stylesheets/style.css @@ -0,0 +1,61 @@ +/* NavBar */ +.nav-bar{ +width: 100%; +height: 100px; +background-color: #3366ff; +font-family: fantasy; +color: white + +} +.nav-sign-in{ +float: right; +} +.nav-logo{ + float:left; +} +/* Main Container */ +.main-container{ + width: 100%; + hight: 100%; + + +} +/* Main Window */ +.main-window{ + width: 100%; + height: 100%; + display: inline-block; + + font-family: fantasy; + color: darkgray; +} + +.right-window{ + width: 50%; + height: auto; + +float: right; + +} + +.left-window{ + width: 50%; + height: auto; +float: left; + +} + + + + +/* Main Footer copyrughts */ +#copyrights{ + width: 100%; + height: 25px; +font-family: fantasy; +color: white; +background-color: #3366ff; +text-align: center; + + +}