diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..79b5594 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +**/.DS_Store diff --git a/assets/images/Sony-1.png b/assets/images/Sony-1.png new file mode 100644 index 0000000..629e642 Binary files /dev/null and b/assets/images/Sony-1.png differ diff --git a/index.html b/index.html index dc9f1a9..05fcc44 100755 --- a/index.html +++ b/index.html @@ -15,29 +15,29 @@ -
Ankur Bag
+
Sony Chen
- +
-
Ankur Bag, Software Engineer
+
Sony Chen, Product Designer
- +
- +
-
+
@@ -80,5 +80,7 @@
+ + diff --git a/scripts/Index.js b/scripts/Index.js new file mode 100644 index 0000000..2353512 --- /dev/null +++ b/scripts/Index.js @@ -0,0 +1,50 @@ +const loadUserProfile = () =>{ + const usernameElem = document.querySelectorAll(".data-username"); + const jobTitleElem = document.querySelector(".data-jobtitle"); + const profilePicElem = document.querySelectorAll(".data-profilepic"); + + for (let el of usernameElem){ + el.innerHTML = userProfile.username; + } + + jobTitleElem.innerHTML = userProfile.jobtitle; + + for(let pro of profilePicElem){ + pro.src = userProfile.profilepic; + } +}; + +const createPost = () => { + const username = document.querySelector(".data-username").innerHTML; + const post = document.querySelector(".data-post").value; + console.log("username, post", username, post); + + if (post) { + + const parentDiv = document.querySelector(".posts"); + + const postsItemDiv = document.createElement("div"); + postsItemDiv.classList.add("posts__item"); + + const postsUsernameDiv = document.createElement("div"); + postsUsernameDiv.classList.add("posts__username"); + postsUsernameDiv.innerText = username + " Posted"; + + const postsContentDiv = document.createElement("div"); + postsContentDiv.classList.add("posts__content"); + const postcontent = document.createElement("p"); + postcontent.innerHTML = post; + postsContentDiv.append(postcontent); + + const postsLikeDiv = document.createElement("div"); + postsLikeDiv.classList.add("posts__like"); + + postsItemDiv.append(postsUsernameDiv); + postsItemDiv.append(postsContentDiv); + postsItemDiv.append(postsLikeDiv); + + parentDiv.prepend(postsItemDiv); + } else { + alert("Error: your input shouldn't be empty!"); + } +}; \ No newline at end of file diff --git a/scripts/data.js b/scripts/data.js new file mode 100644 index 0000000..809b17f --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,10 @@ +const userProfile = { + username: "Sony Chen", + jobtitle: "Product designer", + profilepic:"./assets/images/Sony-1.png", +}; + + + + + diff --git a/styles/global.css b/styles/global.css index 22791be..cfa8dd4 100644 --- a/styles/global.css +++ b/styles/global.css @@ -20,4 +20,4 @@ body { padding: 0; font-family: "LinkedIn SourceSans", Arial, Helvetica, sans-serif; background-color: #f3f2ef; -} \ No newline at end of file +}/*# sourceMappingURL=global.css.map */ \ No newline at end of file diff --git a/styles/global.css.map b/styles/global.css.map new file mode 100644 index 0000000..a78108e --- /dev/null +++ b/styles/global.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["global.scss","partials/_variables.scss","global.css"],"names":[],"mappings":"AAGA;EACC,4CCWc;EDVd,+FAAA;AEFD;AFMA;EACC,6CCMwB;EDLxB,gGAAA;AEJD;AFQA;EACC,kCCCgB;EDAhB,6FAAA;AEND;AFUA;EACC,uCCJqB;EDKrB,8FAAA;AERD;AFYA;;EAEC,SAAA;EACA,UAAA;EACA,gEAAA;EACA,yBCpBoB;ACUrB","file":"global.css"} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index f63f75d..60a997f 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,156 +1,150 @@ .nav { - height: 3.125rem; - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: #0077b5; - color: #ffffff; - position: fixed; - width: 100vw; - z-index: 25; + height: 3.125rem; + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #0077b5; + color: #ffffff; + position: fixed; + width: 100vw; + z-index: 25; } .nav__logo { - padding: 0.625rem; + padding: 0.625rem; } .nav__logo img { - height: 2.05rem; + height: 2.05rem; } .nav__username { - line-height: 1.75rem; - padding: 0.625rem; + line-height: 1.75rem; + padding: 0.625rem; } h1 { - text-align: center; + text-align: center; } .container { - display: flex; - flex-direction: column; - position: relative; - top: 3.125rem; + display: flex; + flex-direction: column; + position: relative; + top: 3.125rem; } @media screen and (min-width: 768px) { - .container { - /** - TODO: Fix me - **/ - } + .container { + display: flex; + flex-direction: row; + } } @media screen and (min-width: 1024px) { - .container { - /** - TODO: Fix me - **/ - } + .container { + display: flex; + flex-direction: row; + } } .profile-card { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: #00a0dc; - border-radius: 0.3125rem; + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: #00a0dc; + border-radius: 0.3125rem; } @media screen and (min-width: 768px) { - .profile-card { - /** - TODO: Fix me - **/ - } + .profile-card { + width: 20rem; + } } @media screen and (min-width: 1024px) { - .profile-card { - /** - TODO: Fix me - **/ - } + .profile-card { + width: 20rem; + } } .profile-card__img { - text-align: center; - padding: 0.625rem 0; + text-align: center; + padding: 0.625rem 0; } .profile-card__img img { - width: 6.25rem; - height: 6.25rem; + width: 6.25rem; + height: 6.25rem; } .profile-card__title { - text-align: center; - background: #cfedfb; - padding: 1.25rem 0; - font-size: 1rem; + text-align: center; + background: #cfedfb; + padding: 1.25rem 0; + font-size: 1rem; } .start-post { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: #ffffff; - border-radius: 0.3125rem; - padding: 1.25rem; + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: #ffffff; + border-radius: 0.3125rem; + padding: 1.25rem; } .start-post-user { - display: flex; - flex-direction: row; - justify-content: flex-start; + display: flex; + flex-direction: row; + justify-content: flex-start; } .start-post-user__img { - text-align: center; - padding: 0.625rem 0; - width: 20%; + text-align: center; + padding: 0.625rem 0; + width: 20%; } .start-post-user__img img { - width: 3.125rem; - height: 3.125rem; + width: 3.125rem; + height: 3.125rem; } .start-post-user__text { - text-align: center; - padding: 0.625rem 0; - width: 80%; - display: flex; - justify-content: center; - align-items: center; + text-align: center; + padding: 0.625rem 0; + width: 80%; + display: flex; + justify-content: center; + align-items: center; } .start-post-user__text input { - width: 80%; - height: 1.875rem; + width: 80%; + height: 1.875rem; } @media screen and (min-width: 768px) { - .posts { - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-content: space-evenly; - } + .posts { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; + } } .posts__item { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: #ffffff; - border-radius: 0.3125rem; - padding: 1.25rem; + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: #ffffff; + border-radius: 0.3125rem; + padding: 1.25rem; } .posts__username { - display: flex; - flex-direction: row; - justify-content: flex-start; - font-family: "LinkedIn SourceSans"; - font-size: 1.25rem; + display: flex; + flex-direction: row; + justify-content: flex-start; + font-family: "LinkedIn SourceSans"; + font-size: 1.25rem; } .posts__content { - display: flex; - flex-direction: row; - justify-content: flex-start; - font-family: "LinkedIn SourceSans"; - font-size: 1.06rem; + display: flex; + flex-direction: row; + justify-content: flex-start; + font-family: "LinkedIn SourceSans"; + font-size: 1.06rem; } .posts__like { - display: flex; - flex-direction: row; - justify-content: flex-start; -} + display: flex; + flex-direction: row; + justify-content: flex-start; +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/styles/main.css.map b/styles/main.css.map new file mode 100644 index 0000000..8595480 --- /dev/null +++ b/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.scss","partials/_variables.scss","main.css","partials/_mixins.scss"],"names":[],"mappings":"AAGA;EACC,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,yBCHe;EDIf,cAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;AEFD;AFGC;EACC,iBAAA;AEDF;AFEE;EACC,eAAA;AEAH;AFGC;EACC,oBAAA;EACA,iBAAA;AEDF;;AFKA;EACC,kBAAA;AEFD;;AFKA;EACC,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;AEFD;AC5BE;EH0BF;IAME,aAAA;IACA,mBAAA;EEAA;AACF;AC5BE;EHoBF;IAUE,aAAA;IACA,mBAAA;EEEA;AACF;;AFCA;EACC,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBC3CsB;ED4CtB,wBAAA;AEED;ACjDE;EHyCF;IAQC,YAAA;EEIC;AACF;AChDE;EHmCF;IAWE,YAAA;EEMA;AACF;AFLC;EACC,kBAAA;EACA,mBAAA;AEOF;AFNE;EACC,cAAA;EACA,eAAA;AEQH;AFLC;EACC,kBAAA;EACA,mBC5DoB;ED6DpB,kBAAA;EACA,eAAA;AEOF;;AFHA;EACC,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBCrEgB;EDsEhB,wBAAA;EACA,gBAAA;AEMD;AFJC;EACC,aAAA;EACA,mBAAA;EACA,2BAAA;AEMF;AFLE;EACC,kBAAA;EACA,mBAAA;EACA,UAAA;AEOH;AFNG;EACC,eAAA;EACA,gBAAA;AEQJ;AFLE;EACC,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AEOH;AFNG;EACC,UAAA;EACA,gBAAA;AEQJ;;AC7GE;EH2GF;IAEE,mBAAA;IACA,eAAA;IACA,6BAAA;IACA,2BAAA;EEKA;AACF;AFJC;EACC,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBCjHe;EDkHf,wBAAA;EACA,gBAAA;AEMF;AFJC;EACC,aAAA;EACA,mBAAA;EACA,2BAAA;EACA,kCAAA;EACA,kBAAA;AEMF;AFJC;EACC,aAAA;EACA,mBAAA;EACA,2BAAA;EACA,kCAAA;EACA,kBAAA;AEMF;AFJC;EACC,aAAA;EACA,mBAAA;EACA,2BAAA;AEMF","file":"main.css"} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index 6034507..56950f2 100755 --- a/styles/main.scss +++ b/styles/main.scss @@ -33,14 +33,12 @@ h1 { position: relative; top: 3.125rem; @include tablet { - /** - TODO: Fix me - **/ + display: flex; + flex-direction: row; } @include desktop { - /** - TODO: Fix me - **/ + display: flex; + flex-direction: row; } } @@ -52,14 +50,10 @@ h1 { background: $linkedin-accent-blue; border-radius: 0.3125rem; @include tablet { - /** - TODO: Fix me - **/ + width: 20rem; } @include desktop { - /** - TODO: Fix me - **/ + width: 20rem; } &__img { text-align: center;