diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..433fe54 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +#Ignore scss map files +*.css.map +.prettierrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b4f8e6a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "arrowParens": "avoid" +} diff --git a/index.html b/index.html index dc9f1a9..2839192 100755 --- a/index.html +++ b/index.html @@ -1,84 +1,88 @@ - - - - - Linked In - - - + + + + + Linked In + + + - - - - -
-
-
-
- -
-
Ankur Bag, Software Engineer
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- -
-
User 1 Posted
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias - quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur - repellendus cupiditate minima adipisci ullam sit culpa eaque - iure fugit ipsam. -

-
- -
-
-
User 1 Posted
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias - quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur - repellendus cupiditate minima adipisci ullam sit culpa eaque - iure fugit ipsam. -

-
- -
-
-
User 1 Posted
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias - quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur - repellendus cupiditate minima adipisci ullam sit culpa eaque - iure fugit ipsam. -

-
- -
-
-
-
- + + + + +
+
+
+
+ +
+
+ username goes here, + title goes here +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
User 1 Posted
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias + quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur + repellendus cupiditate minima adipisci ullam sit culpa eaque + iure fugit ipsam. +

+
+ +
+
+
User 1 Posted
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias + quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur + repellendus cupiditate minima adipisci ullam sit culpa eaque + iure fugit ipsam. +

+
+ +
+
+
User 1 Posted
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias + quidem voluptas eveniet qui, natus debitis iste ad nemo pariatur + repellendus cupiditate minima adipisci ullam sit culpa eaque + iure fugit ipsam. +

+
+ +
+
+
+
+ + diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..2f1ad79 --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,34 @@ +/* LinkedIn Challenge javascript */ +/** + * Implement the following functionality: + * Get username, job title and profile picture dynamically from the script instead + * of hard-coding the data. + * Hint : You need to use & store the data in javascript variables and + * show them on HTML file using DOM manipulation + * + * */ + +// Declare global data + +const userProfileImage = './assets/images/nonbinary.png'; +const userName = 'Gandalf the Grey'; +const userTitle = 'VP of Wizards'; + +// 1. Identify location of username, job title and profile picture +const userNameElem = document.querySelectorAll('.data-username'); +const jobTitleElem = document.querySelector('.data-jobtitle'); +const profilePictureElem = document.querySelectorAll('.data-profilepic'); + +// 2 Manipulation +// iterate through userNameElem +// change the innerHTML + +for (let el of userNameElem) { + el.innerHTML = userName; +} + +jobTitleElem.innerHTML = userTitle; + +for (let pro of profilePictureElem) { + pro.src = userProfileImage; +} 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..d5f69a2 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,156 +1,148 @@ .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 { + flex-direction: row; + } } @media screen and (min-width: 1024px) { - .container { - /** - TODO: Fix me - **/ - } + .container { + 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: 40vw; + } } @media screen and (min-width: 1024px) { - .profile-card { - /** - TODO: Fix me - **/ - } + .profile-card { + width: 35vw; + } } .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..14d8729 --- /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;EACE,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,yBCHc;EDId,cAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;AEFF;AFGE;EACE,iBAAA;AEDJ;AFEI;EACE,eAAA;AEAN;AFGE;EACE,oBAAA;EACA,iBAAA;AEDJ;;AFKA;EACE,kBAAA;AEFF;;AFKA;EACE,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;AEFF;AC5BE;EH0BF;IAMI,mBAAA;EEAF;AACF;AC3BE;EHoBF;IASI,mBAAA;EEEF;AACF;;AFCA;EACE,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBCzCqB;ED0CrB,wBAAA;AEEF;AC/CE;EHuCF;IAQI,WAAA;EEIF;AACF;AC9CE;EHiCF;IAWI,WAAA;EEMF;AACF;AFLE;EACE,kBAAA;EACA,mBAAA;AEOJ;AFNI;EACE,cAAA;EACA,eAAA;AEQN;AFLE;EACE,kBAAA;EACA,mBC1DkB;ED2DlB,kBAAA;EACA,eAAA;AEOJ;;AFHA;EACE,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBCnEe;EDoEf,wBAAA;EACA,gBAAA;AEMF;AFJE;EACE,aAAA;EACA,mBAAA;EACA,2BAAA;AEMJ;AFLI;EACE,kBAAA;EACA,mBAAA;EACA,UAAA;AEON;AFNM;EACE,eAAA;EACA,gBAAA;AEQR;AFLI;EACE,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AEON;AFNM;EACE,UAAA;EACA,gBAAA;AEQR;;AC3GE;EHyGF;IAEI,mBAAA;IACA,eAAA;IACA,6BAAA;IACA,2BAAA;EEKF;AACF;AFJE;EACE,aAAA;EACA,sBAAA;EACA,eAAA;EACA,uBAAA;EACA,mBC/Ga;EDgHb,wBAAA;EACA,gBAAA;AEMJ;AFJE;EACE,aAAA;EACA,mBAAA;EACA,2BAAA;EACA,kCAAA;EACA,kBAAA;AEMJ;AFJE;EACE,aAAA;EACA,mBAAA;EACA,2BAAA;EACA,kCAAA;EACA,kBAAA;AEMJ;AFJE;EACE,aAAA;EACA,mBAAA;EACA,2BAAA;AEMJ","file":"main.css"} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index 6034507..6ca69f7 100755 --- a/styles/main.scss +++ b/styles/main.scss @@ -2,151 +2,143 @@ @use "partials/mixins" as *; .nav { - height: 3.125rem; - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: $linkedin-blue; - color: $linkedin-white; - position: fixed; - width: 100vw; - z-index: 25; - &__logo { - padding: 0.625rem; - & img { - height: 2.05rem; - } - } - &__username { - line-height: 1.75rem; - padding: 0.625rem; - } + height: 3.125rem; + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: $linkedin-blue; + color: $linkedin-white; + position: fixed; + width: 100vw; + z-index: 25; + &__logo { + padding: 0.625rem; + & img { + height: 2.05rem; + } + } + &__username { + 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; - @include tablet { - /** - TODO: Fix me - **/ - } - @include desktop { - /** - TODO: Fix me - **/ - } + display: flex; + flex-direction: column; + position: relative; + top: 3.125rem; + @include tablet { + flex-direction: row; + } + @include desktop { + flex-direction: row; + } } .profile-card { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: $linkedin-accent-blue; - border-radius: 0.3125rem; - @include tablet { - /** - TODO: Fix me - **/ - } - @include desktop { - /** - TODO: Fix me - **/ - } - &__img { - text-align: center; - padding: 0.625rem 0; - & img { - width: 6.25rem; - height: 6.25rem; - } - } - &__title { - text-align: center; - background: $linkedin-light-blue; - padding: 1.25rem 0; - font-size: 1rem; - } + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: $linkedin-accent-blue; + border-radius: 0.3125rem; + @include tablet { + width: 40vw; + } + @include desktop { + width: 35vw; + } + &__img { + text-align: center; + padding: 0.625rem 0; + & img { + width: 6.25rem; + height: 6.25rem; + } + } + &__title { + text-align: center; + background: $linkedin-light-blue; + padding: 1.25rem 0; + font-size: 1rem; + } } .start-post { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: $linkedin-white; - border-radius: 0.3125rem; - padding: 1.25rem; + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: $linkedin-white; + border-radius: 0.3125rem; + padding: 1.25rem; - &-user { - display: flex; - flex-direction: row; - justify-content: flex-start; - &__img { - text-align: center; - padding: 0.625rem 0; - width: 20%; - & img { - width: 3.125rem; - height: 3.125rem; - } - } - &__text { - text-align: center; - padding: 0.625rem 0; - width: 80%; - display: flex; - justify-content: center; - align-items: center; - & input { - width: 80%; - height: 1.875rem; - } - } - } + &-user { + display: flex; + flex-direction: row; + justify-content: flex-start; + &__img { + text-align: center; + padding: 0.625rem 0; + width: 20%; + & img { + width: 3.125rem; + height: 3.125rem; + } + } + &__text { + text-align: center; + padding: 0.625rem 0; + width: 80%; + display: flex; + justify-content: center; + align-items: center; + & input { + width: 80%; + height: 1.875rem; + } + } + } } .posts { - @include tablet { - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-content: space-evenly; - } - &__item { - display: flex; - flex-direction: column; - margin: 1.25rem; - justify-content: center; - background: $linkedin-white; - border-radius: 0.3125rem; - padding: 1.25rem; - } - &__username { - display: flex; - flex-direction: row; - justify-content: flex-start; - font-family: "LinkedIn SourceSans"; - font-size: 1.25rem; - } - &__content { - display: flex; - flex-direction: row; - justify-content: flex-start; - font-family: "LinkedIn SourceSans"; - font-size: 1.06rem; - } - &__like { - display: flex; - flex-direction: row; - justify-content: flex-start; - } + @include tablet { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; + } + &__item { + display: flex; + flex-direction: column; + margin: 1.25rem; + justify-content: center; + background: $linkedin-white; + border-radius: 0.3125rem; + padding: 1.25rem; + } + &__username { + display: flex; + flex-direction: row; + justify-content: flex-start; + font-family: "LinkedIn SourceSans"; + font-size: 1.25rem; + } + &__content { + display: flex; + flex-direction: row; + justify-content: flex-start; + font-family: "LinkedIn SourceSans"; + font-size: 1.06rem; + } + &__like { + display: flex; + flex-direction: row; + justify-content: flex-start; + } }