diff --git a/Friends.html b/Friends.html new file mode 100644 index 0000000..7bc3783 --- /dev/null +++ b/Friends.html @@ -0,0 +1,115 @@ + + + + + + + Welcome to Facelook + + + + + + + + + +
+
+
+ +

Facelook

+
+ +
+ +
+ Harry +
+ +
+ +
+
+ + + Harry Potter + +
+
+
+

About

+ +
+
+
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+ +
+

Hermione Granger

+

432 Friends

+
+ +
+ +
+
+ + + +
+ + + \ No newline at end of file diff --git a/Images/placeholder.png b/Images/placeholder.png new file mode 100644 index 0000000..4426abd Binary files /dev/null and b/Images/placeholder.png differ diff --git a/README.md b/README.md index d0b411b..48660c8 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). +My Facebook prep pages look better screen 1,024 px wide. \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..463912d --- /dev/null +++ b/about.html @@ -0,0 +1,111 @@ + + + + + + + Welcome to Facelook + + + + + + + + +
+
+
+ +

Facelook

+
+ +
+ +
+ Harry +
+ +
+ +
+
+ + + Harry Potter + +
+
+
+

About

+ +
+
+ +
+

Words To Live By

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et purus arcu. Pellentesque a convallis massa, quis aliquam nibh. Mauris viverra velit in nunc pretium mattis. Cras purus elit, lobortis ac mollis id, maximus non sem.

+

About Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et purus arcu. Pellentesque a convallis massa, quis aliquam nibh. Mauris viverra velit in nunc pretium mattis. Cras purus elit, lobortis ac mollis id, maximus non sem. Sed nec scelerisque lacus, id facilisis neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque scelerisque cursus bibendum. Integer lacinia eleifend risus a vestibulum. Donec sed purus at metus gravida malesuada ac ut augue. Etiam placerat id lorem eget egestas. Suspendisse lectus est, placerat vel dignissim a, aliquet varius dolor. Sed consequat, massa in molestie porta, odio elit cursus nisl, lacinia suscipit quam purus id nisi.

+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/assets/about.css b/assets/about.css new file mode 100644 index 0000000..a21fee5 --- /dev/null +++ b/assets/about.css @@ -0,0 +1,190 @@ +@import url('assets/style.css'); + + +header{ + padding: 0; +} + +.headercontainer{ + width: 80%; + display: flex; + align-items: center; + margin: 0 auto; +} + +.logo{ + width: 35px; + height: 0%; + margin-right: 10px; + align-self: center; +} + +.brand{ + display: inline-flex; +} + +#searchform{ + margin-left: 25px; + width: 50%; + align-self: flex-end; +} + +#search{ + width: 100%; + text-align: left; +} + +#searchform input:placeholder-shown{ + padding-left: 3px; +} + +.nameIdentity{ + font-size: 1.15rem; +} + +/*Body*/ + +.bodycontainer{ + width: 80%; + margin: 0 auto; +} + +section{ + margin: 11px 0; + border: 1px solid; +} + +#coverpic{ + width: 19%; + display: block; + margin: 0 auto; + transform: scale(5.26, 1.4); + position: relative; + top: 44px; + opacity: 0.5; +} + +nav{ + margin-top: -36px; + border-top: 2px solid; +} + +#profilepic{ + width: 10%; + border: 1px solid; + transform: translate(20%, -10px); +} + +span.profilename{ + font-size: 1.5rem; + font-weight: bolder; + position: relative; + top: -33px; + margin-left: 35px; +} + + +ul.nav-list{ + margin-left: 12%; +} + +.nav-list li{ + display: inline; + list-style: none; + border-right: 1px solid; + padding: 0 35px; +} + +.selected{ + background: rgba(160, 158, 158, 0.43); +} + +.nav-list li:first-child{ + border-left: 1px solid; +} + +.nav-list li:last-child{ + border-style: none; + float: right; + font-size: small; +} + +.nav-list li:last-child a{ + text-decoration: underline; +} + +.nav-list li span{ + margin-left: 2px; +} + +ul a{ + text-decoration: none; +} + +/*Main Body Container*/ + +.bodycontainer section:nth-child(2){ + margin-top: 10px; +} + +.bodycontainer section header{ + display: flex; + border-bottom: 1px solid #000; +} + + +.bodycontainer section header p { + color: #000; + font-size: 1.75rem; + font-weight: 700; + margin: 0 auto; +} + +button{ + margin-right: 5px; + background: #2a71ec; + align-self: center; +} + +.subcontainer{ + display: flex; + align-items: center; +} + +.subcontainer aside{ + font-size: 1.25rem; +} + +/*Table*/ +.noborder{ + border: 0; +} + +table{ + margin: 0 auto; + border-collapse: collapse; +} + +table thead{ + font-size: 18px; + font-weight: 700; +} + +table tr td{ + border: 0; +} + + +/*Half Section*/ + +.halfsection{ + width: 50%; + border: 0; + line-height: 1.75; + font-size: 1.1rem; +} + +.halfsection h4{ + font-size: 1.65rem; + margin: 3px 0; +} \ No newline at end of file diff --git a/assets/friends.css b/assets/friends.css new file mode 100644 index 0000000..1f8d7dd --- /dev/null +++ b/assets/friends.css @@ -0,0 +1,32 @@ +@import url("assets/about.css"); +@import url("assets/style.css"); + +.subcontainer{ + display: flex; + flex-flow: row wrap; +} + +.small-profilepic{ + width: 95px; + margin: 10px; + border: 1px solid #000; +} + +.bodycontainer .subcontainer section.friendsblock{ + width: 40%; + margin: 20px auto; + padding: 50px 0; + display: flex; + align-items: center; + justify-content: space-around; +} + +.blockname{ + display: inline-block; + text-align: center; + font-size: 1.1rem; +} + +.friendsblock button{ + font-size: 1.1rem; +} \ No newline at end of file diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..da477b8 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,153 @@ +*{ + box-sizing: border-box; + margin: 0; + font-family: 'Dekko', cursive; +} + + +/* Header */ +header{ + background: #2a71ec; + padding: 2%; + display: flex; + justify-content: space-between; + align-items: baseline; + color: white; +} + +form{ + margin: 0 15.8rem; + font-size: 1.125rem; +} + +header h1{ + align-self: center; + font-size: 2.5rem; + letter-spacing: 3px; +} + +header form label{ + display: inherit; + margin: 0 10px; +} + +.blockmainform{ + display: inline-block; +} + +header form label input{ + display: block; +} + + +header form input[type="submit"]{ + background: rgb(142, 179, 243); + font-weight: bold; +} + +/* Main container*/ + +.container{ + display: flex; + margin-top: 1.75%; + align-items: flex-start; +} + +aside{ + width: 50%; + padding: 5% 0; + align-self: center; +} + +aside h1{ + text-align: center; + font-size: 2.2rem; +} + +.list-items{ + width: 75%; + margin: 0 auto; + font-size: 20px; +} + +.list-items ul{ + margin-left: 100px; + line-height: 2.5; + list-style-position: inside; + font-weight: bold; + opacity: 0.6; +} + +.fadeWords{ + font-weight: normal; + opacity: 0.9; +} + +/*Section & Body Forms*/ + +section{ + margin: 0 auto; +} + +fieldset{ + border: 0; +} + +fieldset form{ + width: 100%; + margin: 0; +} + +legend{ + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 8px; + letter-spacing: 5px; + word-spacing: 3px; +} + +.hiddenLabel{ + position: absolute; + width: 0; + height: 0; + overflow: hidden; + visibility: hidden; +} + +#emailSignUp, #newPassword, #confirmPassword{ + display: block; + width: 100%; +} + +fieldset form input[type="email"], input[type="text"], input[type="password"]{ + margin-bottom: 15px; +} + +fieldset form input:placeholder-shown{ + padding-left: 8px; + font-size: 1.2rem; +} + + +fieldset form select{ + font-size: 1.08rem; + margin-right: 15px; + margin-bottom: 5px; +} + +.genderSelection{ + display: block; + margin: 10px 0; + font-size: 1.08rem; +} + + +#greenSubmit{ + width: 100%; + margin-top: 10px; + font-size: 1.85rem; + color: #fff; + background: #129012; +} + + diff --git a/home.html b/home.html new file mode 100644 index 0000000..cf250dd --- /dev/null +++ b/home.html @@ -0,0 +1,157 @@ + + + + + + + Welcome to Facelook + + + + + + + +
+

Facelook

+
+
+ + + +
+ + +
+
+ +
+ + +
+
+ Sign Up +
+ + + + + + + + + + + + + + +
+ + + +

Birthday

+ +
+ + + + + + + + + +
+ + + + +
+ +
+ + +
+ +
+ +
+ + + + \ No newline at end of file