From 26601bae0c12447f835c14e56ece090fba358dbe Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Tue, 29 Mar 2022 10:10:33 +0530 Subject: [PATCH 01/62] Created Landing Page --- index.html | 72 +++++++++++++++++ styles/main.css | 211 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 283 insertions(+) create mode 100644 styles/main.css diff --git a/index.html b/index.html index e69de29..fcf4857 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + Frontend Master Website + + + + + + + + + + +
+ JS + React + TS + Node + Vue3 + Angular13 + CSS + Core + Webpack +
+ + + + +
+ +
+ + + + +
+
+

Join Now and Learn Straight from the Experts Who Shape the Modern Web

+
+
+
+ +
+ +

Looking to take your first steps in Web Development?
+ Try the free Frontend Masters Bootcamp!

+ More Info > +
+ + + + + + + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..1491ecf --- /dev/null +++ b/styles/main.css @@ -0,0 +1,211 @@ +body{ + margin: 0; + padding: 0; + background: #222; + color: #e6e6e6; + font-family: Open Sans,sans-serif; + font-size: 16px; + /* line-height: 1.5; */ +} +#banner { + width: 100%; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} +#banner video { + width: 100%; + position: absolute; + height: 100%; + object-fit: cover; + top:0; + left: 0; + pointer-events: none; +} +#banner #contents{ + position: relative; + z-index: 1; + max-width: 1000px; + margin: 0 auto; + text-align: center; +} +#banner #contents h1 { + font-size: 55px; +} +#banner #contents h2 { + font-size: 34px; + margin-top: -30px; +} +#banner button, #join button { + background: #c94f17; + border: none; + border-radius: 40px; + color: #fff; + display: block; + font-size: 20px; + line-height: 1.25; + padding: 10px 20px; + text-align: center; + margin-right: 20px; + height: 60px; + width: 250px; + font-weight: bold; + +} +#banner a { + text-decoration: none; +} +#banner #contents div { + display: flex; + margin-left: 25px; +} +#icons { + display: flex; + margin: auto; + width: 70%; + margin-top: 30px; + margin-bottom: 30px; + justify-content: space-between; + flex-wrap: wrap; + +} +#icons img { + height: 90px; + width: 90px; + +} +#icons img:hover { + border: 1px solid #eff; + border-radius: 20px; + padding: 10px; + box-sizing: border-box; + +} +#slidebar { + background: #3a7bd5; /* fallback for old browsers */ +background: -webkit-linear-gradient(to right, #3a6073, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */ +background: linear-gradient(to right, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +width: 100%; +height: 600px; +margin-top: 10px; + +} +#join { + height: 700px; + width: 100%; + box-sizing: border-box; + background-image:radial-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.8)), url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); + background-size: cover; + position: absolute; + overflow: hidden; + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; + text-align: center; + +} +#join div { + position: relative; + z-index: 1; + text-align: center; + margin: auto; + width: 40%; +} +#join h1{ + font-size: 35px; + line-height: 50px; +} +#join button:hover { + background-color: chocolate; +} +#bootcamp{ + margin-top: 700px; + height: 300px; + width: 100%; + text-align: center; + /* display: flex; */ + justify-content: center; + box-sizing: border-box; + align-items: center; + background-image:url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); +} +#bootcamp img { + height: auto; + width: 240px; + margin-top: 30px; +} +#bootcamp a { + color: #dd625e; +} +#bootcamp a:hover { + color: chocolate; +} +#bootcamp p { + line-height: 27px; +} +@media all and (max-width:768px) and (min-width:381px){ + #banner { + background-size:auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + + } + #join{ + height: 500px; + text-align: center; + } + #join div:first-child{ + width: 80%; + text-align: center; + } + #join div { + margin: auto; + } + #bootcamp{ + margin-top: 500px; + } + +} +@media all and (min-width:50px) and (max-width:380px){ + #banner { + background-size:auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; + + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + + } + #banner #contents h1 { + font-size: 30px; + /* color: #222; */ + } + #banner #contents h2 { + font-size: 15px; + margin-top: -15px; + } + #contents>div { + display: flex; + flex-direction: column; + } + #contents button { + margin-top: 20px; + } + #join div:first-child { + width: 90%; + } + #join div { + margin: 20px; + } +} \ No newline at end of file From dde38260b7c5734351005bdf11883d875a6c76d3 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Tue, 29 Mar 2022 12:13:37 +0530 Subject: [PATCH 02/62] Small Changes --- components/slider.js | 18 ++ components/slides.js | 70 +++++ index.html | 29 ++ scripts/data.js | 639 +++++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 44 +++ styles/home-page.css | 131 +++++++++ 6 files changed, 931 insertions(+) create mode 100644 components/slider.js create mode 100644 components/slides.js create mode 100644 scripts/data.js create mode 100644 scripts/index.js create mode 100644 styles/home-page.css diff --git a/components/slider.js b/components/slider.js new file mode 100644 index 0000000..492f821 --- /dev/null +++ b/components/slider.js @@ -0,0 +1,18 @@ +const slider = () => { + return `
+

What They're Saying About Us (@FrontendMasters)

+
+
+
+ +
+
+
+
+
+ +
+
`; +}; + +export { slider }; diff --git a/components/slides.js b/components/slides.js new file mode 100644 index 0000000..80c2424 --- /dev/null +++ b/components/slides.js @@ -0,0 +1,70 @@ +const appendTwitterData = (data) => { + let parent = document.querySelector(".slides"); + parent.innerHTML = null; + data.map((el) => { + let slide = document.createElement("div"); + slide.className = "slide"; + + let arr = el; + arr.map((item) => { + // Slider Box + let slider_box = document.createElement("div"); + slider_box.className = "slider-box"; + + //Top + let slider_box_top = document.createElement("div"); + slider_box_top.className = "slider-box-top"; + + let profile_img = document.createElement("div"); + profile_img.className = "profile-img"; + + let img = document.createElement("img"); + img.src = item.profile_pic; + profile_img.append(img); + + let user_div = document.createElement("div"); + user_div.className = "user"; + + let profile_name = document.createElement("p"); + profile_name.className = "profile-name"; + profile_name.innerText = item.name; + + let user_name = document.createElement("p"); + user_name.className = "user-name"; + user_name.innerText = item.user_name; + + user_div.append(profile_name, user_name); + + let icon_div = document.createElement("div"); + icon_div.className = "twit-icon"; + + icon_div.innerHTML = ``; + + //Mid + let slider_box_mid = document.createElement("div"); + slider_box_mid.className = "slider-box-mid"; + + let msg = document.createElement("p"); + msg.className = "msg"; + msg.innerText = item.msg; + + //Bottom + let slider_box_bottom = document.createElement("div"); + slider_box_bottom.className = "slider-box-bottom"; + + let time = document.createElement("p"); + time.className = "time"; + time.innerText = item.time; + + slider_box_top.append(profile_img, user_div, icon_div); + slider_box_mid.append(msg); + slider_box_bottom.append(time); + slider_box.append(slider_box_top, slider_box_mid, slider_box_bottom); + + slide.append(slider_box); + }); + parent.append(slide); + }); +}; + +export { appendTwitterData }; diff --git a/index.html b/index.html index e69de29..2a5abc5 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + +
+ + + + diff --git a/scripts/data.js b/scripts/data.js new file mode 100644 index 0000000..60b050c --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,639 @@ +let twittweData = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "AJ Thompson", + user_name: "@ajthompson", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Dave Halewood", + user_name: "@halewood", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let mid_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let small_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; +localStorage.setItem("twitter_data", JSON.stringify(twittweData)); +localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); +localStorage.setItem("t_small_data", JSON.stringify(small_data)); diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..46384cb --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,44 @@ +import { slider } from "../components/slider.js"; +import { appendTwitterData } from "../components/slides.js"; +let slider_con = document.querySelector(".slider-container"); +slider_con.innerHTML = slider(); + +let twitter_data = JSON.parse(localStorage.getItem("twitter_data")); +let mid_data = JSON.parse(localStorage.getItem("t_mid_data")); +let small_data = JSON.parse(localStorage.getItem("t_small_data")); +appendTwitterData(twitter_data); + +let slides = [...document.querySelectorAll(".slide")]; +let i = 0; + +let mleft = 0; +const prevItem = () => { + if (i - 1 < 0) { + // i = slides.length; + for (let k = 0; k < slides.length - 1; k++) { + nextItem(); + } + return; + } + mleft = 0; + slides[i - 1].style.marginLeft = mleft + "px"; + i--; +}; + +const nextItem = () => { + if (i == slides.length - 1) { + for (let k = 0; k < slides.length - 1; k++) { + prevItem(); + } + return; + } + mleft = -1176; + i++; + slides[i - 1].style.marginLeft = mleft + "px"; +}; + +let prev = document.getElementById("prev"); +let next = document.getElementById("next"); + +prev.addEventListener("click", prevItem); +next.addEventListener("click", nextItem); diff --git a/styles/home-page.css b/styles/home-page.css new file mode 100644 index 0000000..36f30fa --- /dev/null +++ b/styles/home-page.css @@ -0,0 +1,131 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; +} +.slider-container { + width: 100%; + margin: auto; + display: flex; + align-items: center; + flex-direction: column; + background-color: #074179; + padding: 30px; +} +.slider { + width: 1600px; + /* height: 500px; */ + border-radius: 10px; + overflow: hidden; +} +.s-top { + font-size: 27px; + color: #fff; + margin-bottom: 20px; +} + +.s-bottom { + display: flex; + align-items: center; + justify-content: center; + max-width: 1260px; +} + +.slides { + width: 500%; + /* height: 500px; */ + display: flex; +} +/* .slide { + +} */ + +.left-btn { + margin-right: 30px; +} +.right-btn { + margin-left: 30px; +} + +#prev, +#next { + font-size: 50px; + font-weight: bolder; + color: #fff; + background: transparent; + border: none; + cursor: pointer; +} + +.slide { + display: grid; + grid-template-columns: repeat(3, 365px); + gap: 20px; + padding: 20px; + align-items: start; + /* width: 1600px; */ + transition: margin-left 0.5s ease-in-out; +} + +.slider-box { + background-color: #fff; + border-radius: 7px; + padding: 16px; +} + +.slider-box-top { + display: flex; + align-items: flex-start; + margin-bottom: 15px; + cursor: pointer; +} +.slider-box-top .profile-img { + width: 50px; + height: 50px; + border-radius: 50%; + overflow: hidden; + margin-right: 12px; +} +.slider-box-top .profile-img img { + width: 100%; + object-fit: contain; +} + +.user .profile-name { + font-size: 16px; + font-weight: 600; + margin-bottom: 4px; + color: #222; + letter-spacing: 0.5px; +} +.user .profile-name:hover { + text-decoration: underline; + cursor: pointer; +} + +.user .user-name { + color: #8a8a8a; + font-size: 14px; +} + +.twit-icon { + margin-left: auto; + color: #1da1f2; + font-size: 21px; +} + +.slider-box-mid { + line-height: 1.4; + font-size: 17px; + color: #222; + margin-bottom: 10px; + letter-spacing: 0.5px; +} + +.slider-box-bottom { + border-top: 1px solid #ccc; + font-size: 14px; + padding-top: 10px; + color: #8a8a8a; +} From dc7db4605b521c847475390824f1debd08417b85 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Tue, 29 Mar 2022 14:49:18 +0530 Subject: [PATCH 03/62] Fixed Slider --- scripts/index.js | 33 +++++++++++++++++-- {components => scripts}/slides.js | 0 styles/home-page.css | 54 +++++++++++++++++++++++++++---- 3 files changed, 78 insertions(+), 9 deletions(-) rename {components => scripts}/slides.js (100%) diff --git a/scripts/index.js b/scripts/index.js index 46384cb..31162ff 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,12 +1,22 @@ import { slider } from "../components/slider.js"; -import { appendTwitterData } from "../components/slides.js"; +import { appendTwitterData } from "./slides.js"; + +// Slider Container let slider_con = document.querySelector(".slider-container"); slider_con.innerHTML = slider(); +// get Data based on different Screen Size let twitter_data = JSON.parse(localStorage.getItem("twitter_data")); let mid_data = JSON.parse(localStorage.getItem("t_mid_data")); let small_data = JSON.parse(localStorage.getItem("t_small_data")); -appendTwitterData(twitter_data); +let screen_size = window.screen.width; +if (screen_size >= 1030) { + appendTwitterData(twitter_data); +} else if (screen_size >= 770 && screen_size <= 1029) { + appendTwitterData(mid_data); +} else if (screen_size <= 779) { + appendTwitterData(small_data); +} let slides = [...document.querySelectorAll(".slide")]; let i = 0; @@ -32,7 +42,16 @@ const nextItem = () => { } return; } - mleft = -1176; + let size = window.screen.width; + if (size >= 1030 && size <= 1330) { + mleft = -873; + } else if (screen_size >= 770 && screen_size <= 1029) { + mleft = -581; + } else if (screen_size <= 779) { + mleft = -267; + } else { + mleft = -1176; + } i++; slides[i - 1].style.marginLeft = mleft + "px"; }; @@ -42,3 +61,11 @@ let next = document.getElementById("next"); prev.addEventListener("click", prevItem); next.addEventListener("click", nextItem); + +let resizeTimeout; +window.addEventListener("resize", function (event) { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(function () { + window.location.reload(); + }, 1500); +}); diff --git a/components/slides.js b/scripts/slides.js similarity index 100% rename from components/slides.js rename to scripts/slides.js diff --git a/styles/home-page.css b/styles/home-page.css index 36f30fa..f5236f5 100644 --- a/styles/home-page.css +++ b/styles/home-page.css @@ -14,7 +14,7 @@ padding: 30px; } .slider { - width: 1600px; + max-width: 1187px; /* height: 500px; */ border-radius: 10px; overflow: hidden; @@ -28,12 +28,11 @@ .s-bottom { display: flex; align-items: center; - justify-content: center; - max-width: 1260px; + justify-content: space-between; + width: 100%; } - -.slides { - width: 500%; +.sli .slides { + /* width: 500%; */ /* height: 500px; */ display: flex; } @@ -57,6 +56,9 @@ border: none; cursor: pointer; } +.slides { + display: flex; +} .slide { display: grid; @@ -129,3 +131,43 @@ padding-top: 10px; color: #8a8a8a; } + +/* Screen */ +/* Mid Desktop screens */ +@media only screen and (min-width: 1030px) and (max-width: 1330px) { + .slider { + max-width: 887px; + } + .slide { + grid-template-columns: repeat(3, 265px); + } +} + +/* Tablet Screen */ +@media only screen and (min-width: 770px) and (max-width: 1029px) { + .slider { + max-width: 576px; + } + .slide { + grid-template-columns: repeat(2, 260px); + } +} + +/* Small Screen */ +@media only screen and (min-width: 0px) and (max-width: 779px) { + .s-top { + font-size: 20px; + color: #fff; + margin-bottom: 20px; + text-align: center; + } + .slider-container { + padding: 0; + } + .slider { + max-width: 280px; + } + .slide { + grid-template-columns: repeat(1, 230px); + } +} From b204fcea6fca030c59c2219022c670415a0d45d1 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Tue, 29 Mar 2022 17:22:50 +0530 Subject: [PATCH 04/62] Modified1 --- FAQ.html | 215 ++++++++++++++ Login.html | 137 +++++++++ components/footer.js | 41 +++ components/navbar.js | 28 ++ components/slider.js | 18 ++ index.html | 57 +++- scripts/data.js | 639 ++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 71 +++++ scripts/slides.js | 70 +++++ scripts/teacher-data.js | 99 +++++++ styles/footer.css | 125 ++++++++ styles/home-page.css | 174 +++++++++++ styles/main.css | 31 +- styles/nav.css | 153 ++++++++++ teacher.html | 125 ++++++++ 15 files changed, 1971 insertions(+), 12 deletions(-) create mode 100644 FAQ.html create mode 100644 Login.html create mode 100644 components/footer.js create mode 100644 components/navbar.js create mode 100644 components/slider.js create mode 100644 scripts/data.js create mode 100644 scripts/index.js create mode 100644 scripts/slides.js create mode 100644 scripts/teacher-data.js create mode 100644 styles/footer.css create mode 100644 styles/home-page.css create mode 100644 styles/nav.css create mode 100644 teacher.html diff --git a/FAQ.html b/FAQ.html new file mode 100644 index 0000000..c8d3d25 --- /dev/null +++ b/FAQ.html @@ -0,0 +1,215 @@ + + + + + + + Document + + + + + +
+
FAQ
+
+
+

Welcome to Frequently Asked
Questions

+

Pick a site area from the navigation, or find a common question below.

+ +
+
+

Site Area

+ Cources
+ Learning Paths
+ Join
+ My Account
+ Students
+ Teams + +
+ + +
+ + + + + \ No newline at end of file diff --git a/Login.html b/Login.html new file mode 100644 index 0000000..1b3771d --- /dev/null +++ b/Login.html @@ -0,0 +1,137 @@ + + + + + + + Document + + + + + +
+
+
+
+
+
+
+ Remember me
+ + Forgot your password? +
+
+ + + + + + diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..654a063 --- /dev/null +++ b/components/footer.js @@ -0,0 +1,41 @@ +function footer(){ + return `
+ + +
+
+
+ +
+
+ +
+
+
+
+ + + + + +
+ +
+
+

Frontend Masters is proudly made in Minneapolis, MN

+

© 2021 Frontend Masters · Terms of Service · Privacy Policy

+
+` +} +export default footer; \ No newline at end of file diff --git a/components/navbar.js b/components/navbar.js new file mode 100644 index 0000000..fb8d869 --- /dev/null +++ b/components/navbar.js @@ -0,0 +1,28 @@ +function navbar(){ + return ` ` +} + +export default navbar; \ No newline at end of file diff --git a/components/slider.js b/components/slider.js new file mode 100644 index 0000000..5e87dfd --- /dev/null +++ b/components/slider.js @@ -0,0 +1,18 @@ +const slider = () => { + return `
+

What They're Saying About Us (@FrontendMasters)

+
+
+
+ +
+
+
+
+
+ +
+
`; + }; + + export { slider }; \ No newline at end of file diff --git a/index.html b/index.html index fcf4857..514f481 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,33 @@ Frontend Master Website + + + + + - +
+ +
+ + + + - ` + +
+ ` } export default navbar; \ No newline at end of file diff --git a/grades.html b/grades.html new file mode 100644 index 0000000..558c87e --- /dev/null +++ b/grades.html @@ -0,0 +1,124 @@ + + + + + + + Document + + + + + +
+ + + + + + diff --git a/icon1.html b/icon1.html new file mode 100644 index 0000000..b797a35 --- /dev/null +++ b/icon1.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git a/index.html b/index.html index 19c4095..f4fae1d 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@

with In-Depth, Modern
Front-End Engineering Courses

- +
JS React diff --git a/styles/main.css b/styles/main.css index d310242..0b74e76 100644 --- a/styles/main.css +++ b/styles/main.css @@ -13,20 +13,22 @@ body{ } #banner { width: 100%; - /* margin-top: 100px; */ + height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; /* position: absolute; */ + + } #banner video { width: 100%; position: absolute; height: 100%; object-fit: cover; - margin-top: 80px; + margin-top: 85px; top:0; left: 0; pointer-events: none; @@ -223,4 +225,16 @@ margin-top: 10px; #join div { margin: 20px; } -} \ No newline at end of file +} +#clip1{ + background-color: #581010;; + height: 150px; + width: 100%; + /* clip-path: polygon(100% 0, 0 0, 98% 56%); + */ + /* clip-path: polygon(50% 0%, 100% 0, 100% 100%, 99% 20%, 0 1%); */ + clip-path: polygon(100% 0, 0 28%, 100% 26%); + margin-top: -30px; + margin-bottom: -120px; + +} diff --git a/styles/nav.css b/styles/nav.css index 76ddd57..e094a43 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -10,6 +10,7 @@ box-sizing: border-box; overflow: hidden; background-color: black; + /* position: absolute; */ /* position: fixed; */ @@ -89,10 +90,21 @@ a{ margin: 10px 80px; height: 50px; } +#clip{ + clip-path: polygon(100% 0, 0 0, 100% 27%); + height: 150px; + width: 100%; + background: #c94f17; + margin-top: 5px; + position: absolute; + /* margin-bottom:-20px; */ + +} @media all and (max-width:768px) and (min-width:381px){ .navbar { display: flex; flex-direction: column; + position: relative; } .header{ height: 130px; @@ -150,4 +162,5 @@ a{ cursor: pointer; } - } \ No newline at end of file + } + \ No newline at end of file diff --git a/teacher.html b/teacher.html index 5737ca9..b5da24b 100644 --- a/teacher.html +++ b/teacher.html @@ -90,6 +90,7 @@ margin-left: 20px; } } + @@ -98,6 +99,7 @@

Frontend Masters Teachers

+
From b7277c739fa2ea9a17c586f09add7ac376a9a4b4 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 08:26:12 +0530 Subject: [PATCH 11/62] FIx css --- Styles/joinnow.css | 1125 ++++++++++++++++++++++---------------------- joinnow.html | 14 +- 2 files changed, 580 insertions(+), 559 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 0e29b8f..6d33a28 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -1,586 +1,599 @@ -*{ - margin:0px; - padding:0px; - background-color: #2b2727; - font-family: Arial, Helvetica, sans-serif; -} -#clip{ - width:100%; - height:370px; - background-color: tomato; - clip-path: polygon(0 0, 100% 0, 100% 7%, 0 2%); - /* position:absolute; +* { + margin: 0px; + padding: 0px; + background-color: #2b2727; + font-family: Arial, Helvetica, sans-serif; +} +#clip { + width: 100%; + height: 370px; + background-color: tomato; + clip-path: polygon(0 0, 100% 0, 100% 7%, 0 2%); + /* position:absolute; z-index: -1; */ } -#text1{ - margin-top:-320px; - height:10px; - width:99.7%; - -} -#text1 >h1{ - color:#e6e6e6; - - font-size: 48px; - font-weight: 600; - text-align: center; -} -#text2{ - margin-top: 60px; - height:60px; - width:100%; - /* border:2px solid lime */ -} -#text2>h3{ - color:#e6e6e6; - - font-size: 39px; - font-weight: 400; - text-align: center; - margin-top: 8px; -} -#logo{ - margin-top: 30px; - height:110px; - width:100%; - /* border:2px solid lime; */ - display:flex; - justify-content: center; -} -#logo>div{ - /* border:2px solid white; */ - height:90%; - width:6%; - margin:4px 15px 15px 0; - - - -} -#logo>div>img{ - width:100%; - height:100%; +#text1 { + margin-top: -320px; + height: 10px; + width: 99.7%; } +#text1 > h1 { + color: #e6e6e6; -#text3{ - margin:10px 0; - height:50px; - width:100%; - /* border:2px solid lime */ -} -#text3>p{ - font-size: 20px; - color:white; - text-align: center; - margin-top:30px; - word-spacing: 3px; - letter-spacing: 1px; -} -#text3>p>span>a{ - color:red; - letter-spacing: 1px; -} -#box{ - height:200px; - width:100%; - /* border:2px solid lime; */ - display:flex; - justify-content: center; + font-size: 48px; + font-weight: 600; + text-align: center; +} +#text2 { + margin-top: 60px; + height: 60px; + width: 100%; + /* border:2px solid lime */ +} +#text2 > h3 { + color: #e6e6e6; + + font-size: 39px; + font-weight: 400; + text-align: center; + margin-top: 8px; +} +#logo { + margin-top: 30px; + height: 110px; + width: 100%; + /* border:2px solid lime; */ + display: flex; + justify-content: center; +} +#logo > div { + /* border:2px solid white; */ + height: 80px; + width: 80px; + border-radius: 6px; + overflow: hidden; + margin: 4px 15px 15px 0; + margin-right: 20px; +} +#logo > div > img { + width: 100%; + height: 100%; + object-fit: contain; +} + +#text3 { + margin: 10px 0; + height: 50px; + width: 100%; + /* border:2px solid lime */ +} +#text3 > p { + font-size: 16px; + color: white; + text-align: center; + margin-top: 30px; + /* word-spacing: 3px; */ + letter-spacing: 1px; +} +#text3 > p > span > a { + color: red; + letter-spacing: 1px; +} +#box { + height: 200px; + width: 100%; + /* border:2px solid lime; */ + display: flex; + justify-content: center; } -#box>div{ - /* border:2px solid blue; */ - height:95%; - width:18%; - margin:0 13px; - background: #111; - border-top: 7px solid #3e3e3e; - box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); - cursor: pointer; - position: relative; -} -#box>div:hover{ - background: rgba(17, 17, 17, 0.534); -} -#box>div>.head,.para:hover{ - background: rgba(17, 17, 17, 0.534); -} -#box>div>.head{ - width:94%; - height:45px; - /* border:1px solid white; */ - margin: 8px; - background: #111; - display:flex; - justify-content: space-between; -} -#box>div>.head>.name{ - height:100%; - width:auto; - background: #111; - /* border:1px solid yellow; */ - -} -#box>div>.head>.name>p{ - background: #111; - color:white; - font-size: 20px; - margin:10px 0 0 5px; - text-align: center; -} -#box>div>.head>.price{ - height:70%; - width:30%; - /* border:1px solid yellow; */ - margin: 4px -20px 0 0; - background-color: rgba(179, 75, 37, 0.993); - border-radius: 5px; - -} -#box>div>.head>.price>p{ - background-color: rgba(179, 75, 37, 0.993); - color:white; - font-size: 20px; - text-align: right; - margin: 7px 7px 0 0; +#box > div { + /* border:2px solid blue; */ + height: 100%; + width: 18%; + margin: 0 13px; + background: #111; + border-top: 7px solid #3e3e3e; + box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); + cursor: pointer; + position: relative; +} +#box > div:hover, +#box > div:hover > .head, +#box > div:hover > .head > .name, +#box > div:hover > .head > .name > p, +#box > div:hover > .para, +#box > div:hover > .para > p { + background: rgb(29 27 27); +} +/* #box > div > .head, +.para:hover { + background: rgba(17, 17, 17, 0.534); +} */ +#box > div > .head { + width: 94%; + height: 45px; + /* border:1px solid white; */ + margin: 8px; + background: #111; + display: flex; + justify-content: space-between; +} +#box > div > .head > .name { + height: 100%; + width: auto; + background: #111; + /* border:1px solid yellow; */ +} +#box > div > .head > .name > p { + background: #111; + color: white; + font-size: 20px; + margin: 10px 0 0 5px; + text-align: center; +} +#box > div > .head > .price { + height: 70%; + width: 30%; + /* border:1px solid yellow; */ + margin: 4px -20px 0 0; + background-color: rgba(179, 75, 37, 0.993); + border-radius: 5px; +} +#box > div > .head > .price > p { + background-color: rgba(179, 75, 37, 0.993); + color: white; + font-size: 20px; + text-align: right; + margin: 7px 7px 0 0; } -#box>div>.para>p{ - background-color: #111; - color:white; - font-size: 20px; - text-align:left; - padding: 5px 15px; - line-height: 25px; +#box > div > .para > p { + background-color: #111; + color: white; + font-size: 20px; + text-align: left; + padding: 5px 15px; + line-height: 25px; } -#twitter{ - height:auto; - width:100%; - /* border:2px solid lime; */ - display:flex; - justify-content: center; -} -#twitter>div:nth-child(1){ - /* border:3px solid rgb(133, 23, 23); */ - width:23%; - height:250px; - margin:45px 15px 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding:10px; -} -#twitter>div:nth-child(2){ - /* border:3px solid rgb(133, 23, 23); */ - width:23%; - height:340px; - margin:10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding:10px; -} -#twitter>div:nth-child(3){ - /* border:3px solid rgb(133, 23, 23); */ - width:23%; - height:300px; - margin:30px 15px 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding:10px; +#twitter { + height: auto; + width: 100%; + /* border:2px solid lime; */ + display: flex; + justify-content: center; +} +#twitter > div:nth-child(1) { + /* border:3px solid rgb(133, 23, 23); */ + width: 23%; + height: 250px; + margin: 45px 15px 10px 15px; + border-radius: 10px; + background: #fff; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + padding: 10px; +} +#twitter > div:nth-child(2) { + /* border:3px solid rgb(133, 23, 23); */ + width: 23%; + height: 340px; + margin: 10px 15px; + border-radius: 10px; + background: #fff; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + padding: 10px; +} +#twitter > div:nth-child(3) { + /* border:3px solid rgb(133, 23, 23); */ + width: 23%; + height: 300px; + margin: 30px 15px 10px 15px; + border-radius: 10px; + background: #fff; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + padding: 10px; } /* first child */ -#twitter>.twit:nth-child(1)>.one{ - /* border:1px solid green; */ - height:85px; - width:99.6%; - background: #fff; - display:flex; - justify-content: space-between; -} -#twitter>.twit:nth-child(1)>.one>.square{ - height:100%; - width:22%; - /* border:1px solid red; */ - background: #fff; -} -#twitter>.twit:nth-child(1)>.one>.rec{ - height:100%; - width:60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter>.twit:nth-child(1)>.one>.rec>h5{ - color:black; - background: #fff; - font-size: 20px; - margin:16px 0 0 15px; -} -#twitter>.twit:nth-child(1)>.one>.rec>p{ - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter>.twit:nth-child(1)>.one>.square>#pic{ - /* border:1px solid black; */ - height:80%; - width:80%; - margin:6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter>.twit:nth-child(1)>.one>.square>#pic>img{ - - height:100%; - width:100%; - border-radius: 50%; - -} -#twitter>.twit:nth-child(1)>.one>.square>#twit-logo{ - height:60%; - width:60%; - margin-left: 25px; -} -#twitter>.twit:nth-child(1)>.two{ - width:99.3%; - height:auto; - /* border:2px solid teal; */ - background: #fff; -} -#twitter>.twit:nth-child(1)>.two>p{ - font-size: 17px; - background: #fff; - color: #222; - text-align: left; - padding:15px; - line-height: 22px; -} -#twitter>.twit:nth-child(1)>.two>p>span{ - font-size: 17px; - background: #fff; - color:rgb(70, 161, 161); - text-align: left; - -} -#twitter>.twit:nth-child(1)>.three{ - width:90%; - height:auto; - /* border:2px solid blue; */ - background: #fff; - margin:15px; -} -#twitter>.twit:nth-child(1)>.three>p{ - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter>.twit:nth-child(1)>.three>hr{ - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; +#twitter > .twit:nth-child(1) > .one { + /* border:1px solid green; */ + height: 85px; + width: 99.6%; + background: #fff; + display: flex; + justify-content: space-between; +} +#twitter > .twit:nth-child(1) > .one > .square { + height: 100%; + width: 22%; + /* border:1px solid red; */ + background: #fff; +} +#twitter > .twit:nth-child(1) > .one > .rec { + height: 100%; + width: 60%; + /* border:1px solid blue; */ + background: #fff; +} +#twitter > .twit:nth-child(1) > .one > .rec > h5 { + color: black; + background: #fff; + font-size: 20px; + margin: 16px 0 0 15px; +} +#twitter > .twit:nth-child(1) > .one > .rec > p { + color: #8a8a8a; + background: #fff; + margin-left: 10px; + line-height: 22px; + font-size: 18px; +} +#twitter > .twit:nth-child(1) > .one > .square > #pic { + /* border:1px solid black; */ + height: 80%; + width: 80%; + margin: 6px 0 0 6px; + border-radius: 50%; + background: #fff; +} +#twitter > .twit:nth-child(1) > .one > .square > #pic > img { + height: 100%; + width: 100%; + border-radius: 50%; +} +#twitter > .twit:nth-child(1) > .one > .square > #twit-logo { + height: 60%; + width: 60%; + margin-left: 25px; +} +#twitter > .twit:nth-child(1) > .two { + width: 99.3%; + height: auto; + /* border:2px solid teal; */ + background: #fff; +} +#twitter > .twit:nth-child(1) > .two > p { + font-size: 17px; + background: #fff; + color: #222; + text-align: left; + padding: 15px; + line-height: 22px; +} +#twitter > .twit:nth-child(1) > .two > p > span { + font-size: 17px; + background: #fff; + color: rgb(70, 161, 161); + text-align: left; +} +#twitter > .twit:nth-child(1) > .three { + width: 90%; + height: auto; + /* border:2px solid blue; */ + background: #fff; + margin: 15px; +} +#twitter > .twit:nth-child(1) > .three > p { + font-size: 18px; + background: #fff; + color: #8a8a8a; +} +#twitter > .twit:nth-child(1) > .three > hr { + margin-bottom: 10px; + background: #fff; + color: #8a8a8a; } /* second child */ - -#twitter>.twit:nth-child(2)>.one{ - /* border:1px solid green; */ - height:85px; - width:99.6%; - background: #fff; - display:flex; - justify-content: space-between; -} -#twitter>.twit:nth-child(2)>.one>.square{ - height:100%; - width:22%; - /* border:1px solid red; */ - background: #fff; -} -#twitter>.twit:nth-child(2)>.one>.rec{ - height:100%; - width:60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter>.twit:nth-child(2)>.one>.rec>h5{ - color:black; - background: #fff; - font-size: 20px; - margin:16px 0 0 15px; -} -#twitter>.twit:nth-child(2)>.one>.rec>p{ - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter>.twit:nth-child(2)>.one>.square>#pic{ - /* border:1px solid black; */ - height:80%; - width:80%; - margin:6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter>.twit:nth-child(2)>.one>.square>#pic>img{ - - height:100%; - width:100%; - border-radius: 50%; - -} -#twitter>.twit:nth-child(2)>.one>.square>#twit-logo{ - height:60%; - width:60%; - margin-left: 25px; -} -#twitter>.twit:nth-child(2)>.two{ - width:99.3%; - height:auto; - /* border:2px solid teal; */ - background: #fff; -} -#twitter>.twit:nth-child(2)>.two>p{ - font-size: 17px; - background: #fff; - color: #222; - text-align: left; - padding:15px; - line-height: 22px; -} -#twitter>.twit:nth-child(2)>.two>p>span{ - font-size: 17px; - background: #fff; - color:rgb(70, 161, 161); - text-align: left; - -} -#twitter>.twit:nth-child(2)>.three{ - width:90%; - height:auto; - /* border:2px solid blue; */ - background: #fff; - margin:15px; -} -#twitter>.twit:nth-child(2)>.three>p{ - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter>.twit:nth-child(2)>.three>hr{ - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; +#twitter > .twit:nth-child(2) > .one { + /* border:1px solid green; */ + height: 85px; + width: 99.6%; + background: #fff; + display: flex; + justify-content: space-between; +} +#twitter > .twit:nth-child(2) > .one > .square { + height: 100%; + width: 22%; + /* border:1px solid red; */ + background: #fff; +} +#twitter > .twit:nth-child(2) > .one > .rec { + height: 100%; + width: 60%; + /* border:1px solid blue; */ + background: #fff; +} +#twitter > .twit:nth-child(2) > .one > .rec > h5 { + color: black; + background: #fff; + font-size: 20px; + margin: 16px 0 0 15px; +} +#twitter > .twit:nth-child(2) > .one > .rec > p { + color: #8a8a8a; + background: #fff; + margin-left: 10px; + line-height: 22px; + font-size: 18px; +} +#twitter > .twit:nth-child(2) > .one > .square > #pic { + /* border:1px solid black; */ + height: 80%; + width: 80%; + margin: 6px 0 0 6px; + border-radius: 50%; + background: #fff; +} +#twitter > .twit:nth-child(2) > .one > .square > #pic > img { + height: 100%; + width: 100%; + border-radius: 50%; +} +#twitter > .twit:nth-child(2) > .one > .square > #twit-logo { + height: 60%; + width: 60%; + margin-left: 25px; +} +#twitter > .twit:nth-child(2) > .two { + width: 99.3%; + height: auto; + /* border:2px solid teal; */ + background: #fff; +} +#twitter > .twit:nth-child(2) > .two > p { + font-size: 17px; + background: #fff; + color: #222; + text-align: left; + padding: 15px; + line-height: 22px; +} +#twitter > .twit:nth-child(2) > .two > p > span { + font-size: 17px; + background: #fff; + color: rgb(70, 161, 161); + text-align: left; +} +#twitter > .twit:nth-child(2) > .three { + width: 90%; + height: auto; + /* border:2px solid blue; */ + background: #fff; + margin: 15px; +} +#twitter > .twit:nth-child(2) > .three > p { + font-size: 18px; + background: #fff; + color: #8a8a8a; +} +#twitter > .twit:nth-child(2) > .three > hr { + margin-bottom: 10px; + background: #fff; + color: #8a8a8a; } /* third child */ -#twitter>.twit:nth-child(3)>.one{ - /* border:1px solid green; */ - height:85px; - width:99.6%; - background: #fff; - display:flex; - justify-content: space-between; -} -#twitter>.twit:nth-child(3)>.one>.square{ - height:100%; - width:22%; - /* border:1px solid red; */ - background: #fff; -} -#twitter>.twit:nth-child(3)>.one>.rec{ - height:100%; - width:60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter>.twit:nth-child(3)>.one>.rec>h5{ - color:black; - background: #fff; - font-size: 20px; - margin:16px 0 0 15px; -} -#twitter>.twit:nth-child(3)>.one>.rec>p{ - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter>.twit:nth-child(3)>.one>.square>#pic{ - /* border:1px solid black; */ - height:80%; - width:80%; - margin:6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter>.twit:nth-child(3)>.one>.square>#pic>img{ - - height:100%; - width:100%; - border-radius: 50%; - -} -#twitter>.twit:nth-child(3)>.one>.square>#twit-logo{ - height:60%; - width:60%; - margin-left: 25px; -} -#twitter>.twit:nth-child(3)>.two{ - width:99.3%; - height:auto; - /* border:2px solid teal; */ - background: #fff; -} -#twitter>.twit:nth-child(3)>.two>p{ - font-size: 17px; - background: #fff; - color: #222; - text-align: left; - padding:15px; - line-height: 22px; -} -#twitter>.twit:nth-child(3)>.two>p>span{ - font-size: 17px; - background: #fff; - color:rgb(70, 161, 161); - text-align: left; - -} -#twitter>.twit:nth-child(3)>.three{ - width:90%; - height:auto; - /* border:2px solid blue; */ - background: #fff; - margin:15px; -} -#twitter>.twit:nth-child(3)>.three>p{ - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter>.twit:nth-child(3)>.three>hr{ - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; +#twitter > .twit:nth-child(3) > .one { + /* border:1px solid green; */ + height: 85px; + width: 99.6%; + background: #fff; + display: flex; + justify-content: space-between; +} +#twitter > .twit:nth-child(3) > .one > .square { + height: 100%; + width: 22%; + /* border:1px solid red; */ + background: #fff; +} +#twitter > .twit:nth-child(3) > .one > .rec { + height: 100%; + width: 60%; + /* border:1px solid blue; */ + background: #fff; +} +#twitter > .twit:nth-child(3) > .one > .rec > h5 { + color: black; + background: #fff; + font-size: 20px; + margin: 16px 0 0 15px; +} +#twitter > .twit:nth-child(3) > .one > .rec > p { + color: #8a8a8a; + background: #fff; + margin-left: 10px; + line-height: 22px; + font-size: 18px; +} +#twitter > .twit:nth-child(3) > .one > .square > #pic { + /* border:1px solid black; */ + height: 80%; + width: 80%; + margin: 6px 0 0 6px; + border-radius: 50%; + background: #fff; +} +#twitter > .twit:nth-child(3) > .one > .square > #pic > img { + height: 100%; + width: 100%; + border-radius: 50%; +} +#twitter > .twit:nth-child(3) > .one > .square > #twit-logo { + height: 60%; + width: 60%; + margin-left: 25px; +} +#twitter > .twit:nth-child(3) > .two { + width: 99.3%; + height: auto; + /* border:2px solid teal; */ + background: #fff; +} +#twitter > .twit:nth-child(3) > .two > p { + font-size: 17px; + background: #fff; + color: #222; + text-align: left; + padding: 15px; + line-height: 22px; +} +#twitter > .twit:nth-child(3) > .two > p > span { + font-size: 17px; + background: #fff; + color: rgb(70, 161, 161); + text-align: left; +} +#twitter > .twit:nth-child(3) > .three { + width: 90%; + height: auto; + /* border:2px solid blue; */ + background: #fff; + margin: 15px; +} +#twitter > .twit:nth-child(3) > .three > p { + font-size: 18px; + background: #fff; + color: #8a8a8a; +} +#twitter > .twit:nth-child(3) > .three > hr { + margin-bottom: 10px; + background: #fff; + color: #8a8a8a; } - -#question{ - height:100px; - width:100%; - /* border:2px solid lime */ -} -#question>#p{ - color:white; - text-align: center; - font-size: 36px; - margin-top: 15px; - margin-bottom: 13px; -} -#question>p{ - color:white; - text-align: center; - font-size: 22px; -} -#question>p>span>a{ - color:red; +#question { + height: 100px; + width: 100%; + /* border:2px solid lime */ +} +#question > #p { + color: white; + text-align: center; + font-size: 36px; + margin-top: 15px; + margin-bottom: 13px; +} +#question > p { + color: white; + text-align: center; + font-size: 22px; +} +#question > p > span > a { + color: red; } /* form */ -#form{ - height:auto; - width:100%; - /* border:2px solid lime; */ - margin:30px auto; -} -#form>form{ - background: #111; - box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); - /* border:2px solid pink; */ - height:900px; - width:38%; - margin:10px auto; - padding:10px; -} -#form>form>h2{ - background: #111; - color:white; - text-align: left; - margin: 19px 0 0 13px; - font-size: 30px; -} -#form>form>#input{ - background-color: white; - height:36px; - width:280px; - border-radius: 7px; - margin:8px 0 0 15px; - border:none; - -} -#form>form>input{ - background-color: white; - height:36px; - width:580px; - border-radius: 7px; - margin:8px 0 0 15px; - border:none; - -} -#form>form>p{ - background: #111; - color:white; - margin:25px 0 0 15px; - font-size: 19px; -} -#form>form>p>span{ - background: #111; - color:white; - margin:25px 0 0 208px; - font-size: 19px; -} -#form>form>.g-recaptcha{ - margin:30px 0 0 20px; - width:46%; - height:80px; -} -#form>form>#terms{ - /* border:2px solid white; */ - background-color: #2b2727; - color:rgba(255, 255, 255, 0.705); - height:60px; - width:92%; - margin:30px 0 0 20px; -} -#form>form>#terms>p{ - background-color: #2b2727; - margin-top: 30px; - padding:5px; - font-size: 16px; -} -#form>form>#terms>p>a{ - color:rgba(255, 0, 0, 0.61); - background-color: #2b2727; -} -#form>form>button{ - height:70px; - width:200px; - border-radius: 40px; - background-color: red; - border: none; - margin:25px 0 0 19px; - font-size: 22px; - color:white; +#form { + width: 41%; + /* border:2px solid lime; */ + margin: 30px auto; +} +#form > form { + background: #111; + box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); + /* border:2px solid pink; */ + width: 100%; + margin: 10px auto; + padding: 30px; +} +#form > form > h2 { + background: #111; + color: white; + text-align: left; + margin-bottom: 12px; + font-size: 30px; +} +#form > form > #input { + background-color: white; + border-radius: 7px; + border: none; +} +#form > form > input { + background-color: white; + border-radius: 7px; + width: 97%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 12px; + outline: none; + border: none; +} +#form .form-div { + display: flex; + background-color: #111; +} +#form .form-div > div { + background-color: #111; + width: 50%; +} +#form .form-div > div:first-child { + margin-right: 46px; +} +#form .form-div > div > p { + background-color: #111; + color: #fff; + margin-bottom: 12px; +} +#form .form-div > div > input { + background-color: white; + border-radius: 7px; + width: 92%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 12px; + outline: none; + border: none; } +#form > form > p { + background: #111; + color: white; + margin-bottom: 12px; + font-size: 19px; +} +#form > form > p > span { + background: #111; + color: white; + margin: 25px 0 0 208px; + font-size: 19px; +} +#form > form > .g-recaptcha { + margin: 20px 0; + width: 46%; + height: 80px; +} +#form > form > #terms { + /* border:2px solid white; */ + background-color: #2b2727; + color: rgba(255, 255, 255, 0.705); + width: 100%; + margin: 20px 0; + padding: 10px 6px; +} +#form > form > #terms > p { + background-color: #2b2727; + font-size: 15px; +} +#form > form > #terms > p > a { + color: rgba(255, 0, 0, 0.61); + background-color: #2b2727; +} +#form > form > button { + height: 70px; + width: 200px; + border-radius: 40px; + background-color: #c02d28; + border: none; + font-size: 22px; + color: white; +} diff --git a/joinnow.html b/joinnow.html index 1f6e13b..79bc5bc 100644 --- a/joinnow.html +++ b/joinnow.html @@ -43,7 +43,7 @@

Node

- CSS + CSS
Core @@ -115,8 +115,16 @@

Register for a Monthly Team Account

Email (you'll need to confirm this email address)

-

First Name Last Name

- +
+
+

First Name

+ +
+
+

Last Name

+ +
+

Password

Password Again

From da471489bb2af194dbc161bbfcd818d08b1caf5b Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 09:15:54 +0530 Subject: [PATCH 12/62] com --- index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index e69de29..0000000 From 1d9242195b00628a9dd806262dd30533a3fc790c Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 09:35:29 +0530 Subject: [PATCH 13/62] Fix small Changes --- components/navbar.js | 60 ++++++++------ learn.html | 24 ++++++ scripts/learn-page.js | 3 + styles/learn-page.css | 6 ++ styles/nav.css | 184 +++++++++++------------------------------- 5 files changed, 116 insertions(+), 161 deletions(-) create mode 100644 learn.html create mode 100644 scripts/learn-page.js create mode 100644 styles/learn-page.css diff --git a/components/navbar.js b/components/navbar.js index 5598d50..1c87de4 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,29 +1,39 @@ function navbar() { - return ` `; + return `
+
+ +
+
+ +
+
+ + + + + + + + +`; } export default navbar; diff --git a/learn.html b/learn.html new file mode 100644 index 0000000..8e95daf --- /dev/null +++ b/learn.html @@ -0,0 +1,24 @@ + + + + + + + + + Paths to Learning JavaScript, React, and More Skills You Need. + + + + + + +
+ + + + diff --git a/scripts/learn-page.js b/scripts/learn-page.js new file mode 100644 index 0000000..dab251c --- /dev/null +++ b/scripts/learn-page.js @@ -0,0 +1,3 @@ +import navbar from "../components/navbar.js"; +let header = document.querySelector(".header"); +header.innerHTML = navbar(); diff --git a/styles/learn-page.css b/styles/learn-page.css new file mode 100644 index 0000000..d55e723 --- /dev/null +++ b/styles/learn-page.css @@ -0,0 +1,6 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; +} diff --git a/styles/nav.css b/styles/nav.css index 7299c30..86b9c4e 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,159 +1,71 @@ .header { - border-bottom: 1px solid black; width: 100%; - height: 80px; - top: 0%; - left: 0; - padding-left: 0; - box-sizing: border-box; - overflow: hidden; - background-color: black; background: linear-gradient(90deg, #c02d28, #e66225); - /* position: fixed; */ -} -.header ul { - list-style-type: none; -} -* { - margin: 0; - padding: 0; -} -a { - text-decoration: none; + color: #e6e6e6; + position: relative; + z-index: 99; + position: relative; } -.navbar { + +.header-wrap { + background: rgba(0, 0, 0, 0.7); + padding: 14px 112px; display: flex; justify-content: space-between; + flex-wrap: wrap; align-items: center; - padding: 0; - background: rgba(0, 0, 0, 0.7); - /* background-color: black; */ -} -.hamburger { - display: none; } -.navbar .diagonal { - fill: #e66225; - height: 24px; - left: 0; - pointer-events: none; - position: absolute; - top: 100%; +.header-wrap .left { + width: 40%; +} +.header-wrap .left .logo { + width: 250px; +} +.header-wrap .left .logo img { width: 100%; + height: 100%; + object-fit: contain; } -.bar { - display: block; - width: 25px; - height: 1.5px; - margin: 8px auto; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: #fff; -} -.nav-menu { +.header-wrap .right ul { display: flex; - justify-content: space-between; align-items: center; } - -.nav-item { - margin-left: 25px; -} - -.nav-link { - font-size: 20px; - font-weight: 400; - color: rgb(177, 165, 165); -} -.nav-link:hover { - color: white; -} -.navbar button { - background: #c94f17; - border: none; +.header-wrap .right ul li:last-child { + background-color: #c02d28; border-radius: 40px; - + transition: background 0.2s ease; + margin-left: 14px; +} +.header-wrap .right ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; color: #fff; - display: block; - font-size: 20px; - line-height: 1.25; - padding: 7px 20px; - text-align: center; - /* margin-right: 20px; */ - height: 40px; - width: 150px; - font-weight: bold; - box-sizing: border-box; } -.navbar button:hover { - background-color: chocolate; +.header-wrap .right ul li:last-child:hover { + background: #d43530; } -#logo { - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 80px; - height: 50px; +.header-wrap .right ul li { + list-style: none; } -@media all and (max-width: 768px) and (min-width: 381px) { - .navbar { - display: flex; - flex-direction: column; - } - .header { - height: 130px; - } +.header-wrap .right ul li a { + margin: 0 10px; + text-decoration: none; + color: #aaaaaa; + transition: color 0.2s ease; +} +.header-wrap .right ul li a:hover { + color: #e6e6e6; } -@media all and (min-width: 50px) and (max-width: 380px) { - .header .hamburger { - display: block; - cursor: pointer; - } - #logo { - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 20px; - height: 50px; - } - .hamburger.active .bar:nth-child(2) { - opacity: 0; - } - - .hamburger.active .bar:nth-child(1) { - transform: translateY(8px) rotate(45deg); - } - - .hamburger.active .bar:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); - } - - .nav-menu { - position: fixed; - /* position: relative; */ - left: -100%; - top: 5rem; - flex-direction: column; - background-color: #000000d0; - width: 100%; - border-radius: 10px; - text-align: center; - transition: 0.3s; - box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); - } - - .nav-menu.active { - left: 0; - } - - .nav-item { - margin: 2.5rem 0; - } - .header .hamburger { - display: block; - cursor: pointer; - } +.header .diagonal { + fill: #e66225; + height: 24px; + left: 0; + pointer-events: none; + position: absolute; + top: 100%; + width: 100%; } From f6682ca0649b8c7987e020c767bbc7583ca8d902 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 10:06:42 +0530 Subject: [PATCH 14/62] Fix Active bar --- Styles/joinnow.css | 25 ++++++++++++++++++++++ joinnow.html | 8 +++---- scripts/joinnow.js | 53 ++++++++++++++++++++++++++++------------------ 3 files changed, 61 insertions(+), 25 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 6d33a28..30f6ba2 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -597,3 +597,28 @@ font-size: 22px; color: white; } + +#box > .active { + background-color: #90221e; +} +#box > .active > div { + background-color: #90221e; +} +#box > .active > div > div.name { + background-color: #90221e; +} +#box > .active > div > div.name > p { + background-color: #90221e; +} +#box > .active > div > p { + background-color: #90221e; +} + +#box > div.active:hover, +#box > div.active:hover > .head, +#box > div.active:hover > .head > .name, +#box > div.active:hover > .head > .name > p, +#box > div.active:hover > .para, +#box > div.active:hover > .para > p { + background: #90221e; +} diff --git a/joinnow.html b/joinnow.html index 9e490fb..77c80d1 100644 --- a/joinnow.html +++ b/joinnow.html @@ -57,7 +57,7 @@

If you already have an account, please login

-
+

MONTHLY

@@ -70,7 +70,7 @@

Access all premium courses, workshops, and mobile apps. Renewed monthly.

-
+

YEARLY

@@ -83,7 +83,7 @@

Access everything. Renewed yearly. Save $78 per year!

-
+

MONTHLY TEAM

@@ -96,7 +96,7 @@

Access for 10 people at your company, renewed monthly. Save 50% on our monthly plans!

-
+

YEARLY TEAM

diff --git a/scripts/joinnow.js b/scripts/joinnow.js index ee5cd59..bb37b57 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,25 +1,36 @@ // let first=document.getElementById("first") +// function myFunction(){ +// document.getElementById("first").style.backgroundColor="red"; -function myFunction(){ - document.getElementById("first").style.backgroundColor="red"; - - -} -function myFunction1(){ - - document.getElementById("sec").style.backgroundColor="red"; - - -} -function myFunction2(){ - - document.getElementById("third").style.backgroundColor="red"; - - -} -function myFunction3(){ +// } +// function myFunction1(){ + +// document.getElementById("sec").style.backgroundColor="red"; + +// } +// function myFunction2(){ + +// document.getElementById("third").style.backgroundColor="red"; - document.getElementById("fourth").style.backgroundColor="red"; - -} \ No newline at end of file +// } +// function myFunction3(){ + +// document.getElementById("fourth").style.backgroundColor="red"; + +// } + +let plan_boxes = document.querySelectorAll("#box>div"); + +plan_boxes.forEach((item) => { + item.addEventListener("click", () => { + colorChange(item); + }); +}); + +function colorChange(item) { + plan_boxes.forEach((el) => { + el.classList.remove("active"); + }); + item.classList.add("active"); +} From d813978dee31f657511d1e2977ae985d7d8b80fa Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 10:18:19 +0530 Subject: [PATCH 15/62] colorchange comp --- css.png | Bin 10364 -> 0 bytes joinnow.html | 2 +- scripts/joinnow.js | 4 ++++ 3 files changed, 5 insertions(+), 1 deletion(-) delete mode 100644 css.png diff --git a/css.png b/css.png deleted file mode 100644 index 7acdffafb8f0ab9dce266f0c277c84cfe8281d7d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10364 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 G0sjLRY@js& diff --git a/joinnow.html b/joinnow.html index 9e490fb..9ec4dac 100644 --- a/joinnow.html +++ b/joinnow.html @@ -57,7 +57,7 @@

If you already have an account, please login

-
+

MONTHLY

diff --git a/scripts/joinnow.js b/scripts/joinnow.js index ee5cd59..64fad27 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -3,6 +3,10 @@ function myFunction(){ document.getElementById("first").style.backgroundColor="red"; + document.getElementsByClassName("head").style.backgroundColor="red"; + document.getElementsByClassName("name").style.backgroundColor="red"; + document.getElementsByClassName("para").style.backgroundColor="red"; + } From 01fd77d7a5c7c936d13ceff82d3efd285ed93f1e Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 10:30:13 +0530 Subject: [PATCH 16/62] media --- Styles/joinnow.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 30f6ba2..3a35c5e 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -622,3 +622,7 @@ #box > div.active:hover > .para > p { background: #90221e; } + +@media screen (min-width:){ + +} From 44bb88f1675465da6afa4b1ce4d9030f6fdae35a Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 11:50:04 +0530 Subject: [PATCH 17/62] media half comp --- Styles/joinnow.css | 120 ++++++++++++++++++++++++++++++++++++++++++--- scripts/joinnow.js | 21 -------- 2 files changed, 114 insertions(+), 27 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 3a35c5e..04dad9d 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -187,8 +187,8 @@ #twitter > div:nth-child(3) { /* border:3px solid rgb(133, 23, 23); */ width: 23%; - height: 300px; - margin: 30px 15px 10px 15px; + height: 330px; + margin: 10px 15px 10px 15px; border-radius: 10px; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; @@ -273,7 +273,7 @@ height: auto; /* border:2px solid blue; */ background: #fff; - margin: 15px; + margin: 5px; } #twitter > .twit:nth-child(1) > .three > p { font-size: 18px; @@ -364,7 +364,7 @@ height: auto; /* border:2px solid blue; */ background: #fff; - margin: 15px; + margin: 5px; } #twitter > .twit:nth-child(2) > .three > p { font-size: 18px; @@ -455,7 +455,7 @@ height: auto; /* border:2px solid blue; */ background: #fff; - margin: 15px; + margin: 5px; } #twitter > .twit:nth-child(3) > .three > p { font-size: 18px; @@ -623,6 +623,114 @@ background: #90221e; } -@media screen (min-width:){ +@media only screen and (min-width: 1001px) and (max-width: 1320px){ + #twitter > div:nth-child(3) { + width: 25%; + height: 400px; + } + #twitter > div:nth-child(2) { + width: 25%; + height: 420px; + } + #twitter > div:nth-child(1) { + width: 25%; + height: 260px; + } + #form { + width: 71%; + margin: 80px auto; + } + #box > div { + width: 22%; + margin: 0 8px; + } + +} + +@media only screen and (min-width: 780px) and (max-width: 1000px){ + + #text1 > h1{ + font-size: 38px; + } + #text2 > h3{ + font-size: 28px; + } + #twitter > div:nth-child(3) { + width: 35%; + height: 420px; + padding:6px; + } + #twitter > div:nth-child(2) { + width: 35%; + height: 420px; + padding:6px; + } + #twitter > div:nth-child(1) { + width: 35%; + height: 260px; + padding:6px; + } + #form { + width: 71%; + margin: 80px auto; + } + #box > div { + width: 22%; + margin: 0 8px; + } +} + +@media only screen and (min-width: 391px) and (max-width: 779px){ + + #text1 > h1{ + font-size: 30px; + } + #text2 > h3{ + font-size: 22px; + } + /* #twitter > div:nth-child(3) { + width: 35%; + height: 420px; + padding:6px; + box-sizing: border-box; + + } + #twitter > div:nth-child(2) { + width: 35%; + height: 420px; + padding:6px; + } + #twitter > div:nth-child(1) { + width: 35%; + height: 260px; + padding:6px; + } */ + #form { + width: 81%; + margin: 100px auto; + } + #box > div { + width: 25%; + margin: 0 2px; + } + #logo{ + display: flex; + flex-wrap: wrap; + } + #text3{ + margin-top: 170px; + } + #question{ + margin-top: 200px; + } + #twitter{ + display:grid; + grid-template-columns: repeat(1,100%); + + border:2px solid green; + } + #twitter>div{ + border:2px solid red; + } } diff --git a/scripts/joinnow.js b/scripts/joinnow.js index bb37b57..83e49e1 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,24 +1,3 @@ -// let first=document.getElementById("first") - -// function myFunction(){ -// document.getElementById("first").style.backgroundColor="red"; - -// } -// function myFunction1(){ - -// document.getElementById("sec").style.backgroundColor="red"; - -// } -// function myFunction2(){ - -// document.getElementById("third").style.backgroundColor="red"; - -// } -// function myFunction3(){ - -// document.getElementById("fourth").style.backgroundColor="red"; - -// } let plan_boxes = document.querySelectorAll("#box>div"); From 6640a5589f047a2cde10c918968e6ab0abb59113 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 15:11:49 +0530 Subject: [PATCH 18/62] Issue in Progress-bar --- components/navbar.js | 16 +++- index.html | 5 +- learn.html | 106 +++++++++++++++++++++++ scripts/learn-page.js | 23 +++++ styles/learn-page.css | 195 ++++++++++++++++++++++++++++++++++++++++++ styles/nav.css | 59 +++++++++++++ 6 files changed, 400 insertions(+), 4 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index 1c87de4..f7ca78d 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -19,7 +19,21 @@ function navbar() {
  • Join Now
    • +
    +
    + +
    +
    +
    + +
    - + diff --git a/index.html b/index.html index 09d1e5f..cd0cfd1 100644 --- a/index.html +++ b/index.html @@ -146,10 +146,9 @@

    import footer from "./components/footer.js"; document.querySelector("#footer").innerHTML = footer(); - const hamburger = document.querySelector(".hamburger"); - const navMenu = document.querySelector(".nav-menu"); + const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); hamburger.addEventListener("click", function () { - hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); }); diff --git a/learn.html b/learn.html index 8e95daf..7b0b337 100644 --- a/learn.html +++ b/learn.html @@ -19,6 +19,112 @@
    + +
    +
    + + + + + + + + + + + + + + + + + + +

    Learning Paths

    +

    + Guided paths to expand your abilities as a well-rounded engineer! +

    +
    +
    +
    +
    +
    +
    +
    0%
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Beginner

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, + dolorum. +

    +
    + +
    +
    +
    + diff --git a/scripts/learn-page.js b/scripts/learn-page.js index dab251c..c582151 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,3 +1,26 @@ import navbar from "../components/navbar.js"; let header = document.querySelector(".header"); header.innerHTML = navbar(); +const numb = document.querySelector(".numb"); +let counter = 0; +let id = setInterval(() => { + if (counter == 100) { + let right_div = document.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = document.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } +}, 20); diff --git a/styles/learn-page.css b/styles/learn-page.css index d55e723..44dc7ac 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -4,3 +4,198 @@ box-sizing: border-box; font-family: Open Sans, sans-serif; } +.path-container { + width: 100%; + padding-top: 40px; + background-color: #222222; +} + +.p-top, +.p-bottom { + max-width: 950px; + margin: auto; +} + +.p-top { + text-align: center; + color: #fff; +} +.p-top svg { + width: 130px; +} +.p-top h1 { + margin-bottom: 15px; +} +.p-top h2 { + font-size: 16px; + font-weight: 400; +} + +.p-bottom { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.p-bottom .p-box { + width: 32%; + background-color: #383838; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, + rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + padding: 10px; + text-align: center; +} + +.circular { + height: 100px; + width: 100px; + position: relative; +} +.circular .inner, +.circular .outer, +.circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .inner { + top: 50%; + left: 50%; + height: 80px; + width: 80px; + margin: -40px 0 0 -40px; + background-color: #dde6f0; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .circle { + z-index: 1; + box-shadow: none; +} +.circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: #4158d0; +} +.circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 100px, 50px); +} +.circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 50px, 100px, 0px); +} +.circle .bar .progress, +.dot span { + background: #4158d0; +} +.circle .left .progress { + z-index: 1; + animation: left 1s linear both; +} +@keyframes left { + 100% { + transform: rotate(180deg); + } +} +.circle .right { + z-index: 3; + transform: rotate(180deg); +} +.circle .reverse { + /* transform: rotate(0deg); */ +} + +.circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ +} +@keyframes right { + 100% { + transform: rotate(180deg); + } +} + +.circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; +} +.circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; +} +.circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; +} +@keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +.circle .reverse .progress { + animation: rightRreverse 1s linear both; +} +@keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +@keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} +@keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} diff --git a/styles/nav.css b/styles/nav.css index 86b9c4e..04b8dd0 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -69,3 +69,62 @@ top: 100%; width: 100%; } +.menu { + display: none; +} +.mobile { + display: none; +} + +@media all and (max-width: 768px) and (min-width: 381px) { + .header-wrap { + padding: 14px; + } +} + +@media all and (min-width: 50px) and (max-width: 380px) { + .header-wrap { + padding: 11px 12px; + } + .header-wrap .left .logo { + width: 197px; + } + .header-wrap .right { + display: none; + } + .mobile { + display: none; + background: rgba(0, 0, 0, 0.7); + text-align: left; + padding: 11px 12px; + } + .header .active { + display: block; + } + .mobile ul li { + list-style: none; + margin-bottom: 18px; + } + .mobile ul li a { + color: #aaaaaa; + text-decoration: none; + } + .mobile ul li:last-child { + background-color: #c02d28; + border-radius: 40px; + transition: background 0.2s ease; + text-align: center; + } + .mobile ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; + color: #fff; + } + .menu { + display: flex; + } + .menu .icon { + font-size: 32px; + } +} From 407f106fc8065e2cd5455511c4dae2476f6f09a0 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 16:07:35 +0530 Subject: [PATCH 19/62] Modified5 --- components/navbar.js | 80 ++++++++----- index.html | 17 ++- styles/nav.css | 272 +++++++++++++++++++------------------------ 3 files changed, 176 insertions(+), 193 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index 7499ac3..f7ca78d 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,31 +1,53 @@ -function navbar(){ - return ` -
    - ` +function navbar() { + return `
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + + + + + + +`; } -export default navbar; \ No newline at end of file +export default navbar; diff --git a/index.html b/index.html index f4fae1d..761e3b1 100644 --- a/index.html +++ b/index.html @@ -105,16 +105,13 @@

    Join Now and Learn Straight from the Experts Who Shape the Modern Web

    import footer from "./components/footer.js" document.querySelector("#footer").innerHTML=footer() - const hamburger = document.querySelector(".hamburger"); - const navMenu = document.querySelector(".nav-menu"); - console.log(hamburger) - hamburger.addEventListener("click",function(){ - - hamburger.classList.toggle("active"); - navMenu.classList.toggle("active"); - - }) - + +// document.querySelector("#footer").innerHTML = footer(); + const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); diff --git a/styles/nav.css b/styles/nav.css index e094a43..319ae39 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,166 +1,130 @@ - -.header{ - border-bottom: 1px solid black; +.header { width: 100%; - height: 80px; - top: 0%; - left: 0; - padding-left: 0; - padding-right: 20px; - box-sizing: border-box; - overflow: hidden; - background-color: black; - /* position: absolute; */ - - /* position: fixed; */ - -} -.header ul { - list-style-type: none; -} -*{ - margin: 0; - padding: 0; -} -a{ - text-decoration: none; -} -.navbar { + background: linear-gradient(90deg, #c02d28, #e66225); + color: #e6e6e6; + position: relative; + z-index: 99; + position: relative; + } + + .header-wrap { + background: rgba(0, 0, 0, 0.7); + padding: 14px 112px; display: flex; justify-content: space-between; + flex-wrap: wrap; align-items: center; - padding: 0; - /* background-color: black; */ -} -.hamburger { - display: none; -} - -.bar { - display: block; - width: 25px; - height: 1.5px; - margin: 8px auto; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: #fff; -} -.nav-menu { + } + + .header-wrap .left { + width: 40%; + } + .header-wrap .left .logo { + width: 250px; + } + .header-wrap .left .logo img { + width: 100%; + height: 100%; + object-fit: contain; + } + + .header-wrap .right ul { display: flex; - justify-content: space-between; align-items: center; -} - -.nav-item { - margin-left: 25px; -} - -.nav-link{ - font-size: 20px; - font-weight: 400; - color: rgb(177, 165, 165); -} -.nav-link:hover{ - color:white; -} -.navbar button { - background: #c94f17; - border: none; + } + .header-wrap .right ul li:last-child { + background-color: #c02d28; border-radius: 40px; - + transition: background 0.2s ease; + margin-left: 14px; + } + .header-wrap .right ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; color: #fff; - display: block; - font-size: 20px; - line-height: 1.25; - padding: 7px 20px; - text-align: center; - /* margin-right: 20px; */ - height: 40px; - width: 150px; - font-weight: bold; - box-sizing: border-box; -} -.navbar button:hover{ - background-color: chocolate; -} -#logo{ - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 80px; - height: 50px; -} -#clip{ - clip-path: polygon(100% 0, 0 0, 100% 27%); - height: 150px; + } + .header-wrap .right ul li:last-child:hover { + background: #d43530; + } + .header-wrap .right ul li { + list-style: none; + } + .header-wrap .right ul li a { + margin: 0 10px; + text-decoration: none; + color: #aaaaaa; + transition: color 0.2s ease; + } + .header-wrap .right ul li a:hover { + color: #e6e6e6; + } + + .header .diagonal { + fill: #e66225; + height: 24px; + left: 0; + pointer-events: none; + position: absolute; + top: 100%; width: 100%; - background: #c94f17; - margin-top: 5px; - position: absolute; - /* margin-bottom:-20px; */ - -} -@media all and (max-width:768px) and (min-width:381px){ -.navbar { - display: flex; - flex-direction: column; - position: relative; -} -.header{ - height: 130px; -} -} -@media all and (min-width: 50px) and (max-width:380px) { - .header .hamburger { - display: block; - cursor: pointer; + } + .menu { + display: none; + } + .mobile { + display: none; + } + + @media all and (max-width: 768px) and (min-width: 381px) { + .header-wrap { + padding: 14px; + } + } + + @media all and (min-width: 50px) and (max-width: 380px) { + .header-wrap { + padding: 11px 12px; + } + .header-wrap .left .logo { + width: 197px; + } + .header-wrap .right { + display: none; + } + .mobile { + display: none; + background: rgba(0, 0, 0, 0.7); + text-align: left; + padding: 11px 12px; + } + .header .active { + display: block; + } + .mobile ul li { + list-style: none; + margin-bottom: 18px; + } + .mobile ul li a { + color: #aaaaaa; + text-decoration: none; + } + .mobile ul li:last-child { + background-color: #c02d28; + border-radius: 40px; + transition: background 0.2s ease; + text-align: center; + } + .mobile ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; + color: #fff; } - #logo{ - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 20px; - height: 50px; + .menu { + display: flex; } - .hamburger.active .bar:nth-child(2) { - opacity: 0; - } - - .hamburger.active .bar:nth-child(1) { - transform: translateY(8px) rotate(45deg); - } - - .hamburger.active .bar:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); - } - - .nav-menu { - position: fixed; - /* position: relative; */ - left: -100%; - top: 5rem; - flex-direction: column-reverse; - background-color: #000000d0; - width: 100%; - border-radius: 10px; - text-align: center; - transition: 0.3s; - box-shadow: - 0 10px 27px rgba(0, 0, 0, 0.05); - } - - .nav-menu.active { - left: 0; - } - - .nav-item { - margin: 2.5rem 0; - } - - .header .hamburger { - display: block; - cursor: pointer; - } - + .menu .icon { + font-size: 32px; } - \ No newline at end of file + } \ No newline at end of file From 99ba6accc52ed77b13da5c55d64763818748eea0 Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 16:22:31 +0530 Subject: [PATCH 20/62] complete --- Styles/joinnow.css | 391 ++++++++++++--------------------------------- joinnow.html | 25 +-- scripts/joinnow.js | 26 +++ 3 files changed, 140 insertions(+), 302 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 04dad9d..48a1599 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -157,138 +157,27 @@ line-height: 25px; } + + + #twitter { height: auto; width: 100%; - /* border:2px solid lime; */ display: flex; justify-content: center; + align-items: center; } -#twitter > div:nth-child(1) { - /* border:3px solid rgb(133, 23, 23); */ +#twitter > div { + width: 23%; - height: 250px; margin: 45px 15px 10px 15px; border-radius: 10px; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 10px; } -#twitter > div:nth-child(2) { - /* border:3px solid rgb(133, 23, 23); */ - width: 23%; - height: 340px; - margin: 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding: 10px; -} -#twitter > div:nth-child(3) { - /* border:3px solid rgb(133, 23, 23); */ - width: 23%; - height: 330px; - margin: 10px 15px 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding: 10px; -} - -/* first child */ - -#twitter > .twit:nth-child(1) > .one { - /* border:1px solid green; */ - height: 85px; - width: 99.6%; - background: #fff; - display: flex; - justify-content: space-between; -} -#twitter > .twit:nth-child(1) > .one > .square { - height: 100%; - width: 22%; - /* border:1px solid red; */ - background: #fff; -} -#twitter > .twit:nth-child(1) > .one > .rec { - height: 100%; - width: 60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter > .twit:nth-child(1) > .one > .rec > h5 { - color: black; - background: #fff; - font-size: 20px; - margin: 16px 0 0 15px; -} -#twitter > .twit:nth-child(1) > .one > .rec > p { - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter > .twit:nth-child(1) > .one > .square > #pic { - /* border:1px solid black; */ - height: 80%; - width: 80%; - margin: 6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter > .twit:nth-child(1) > .one > .square > #pic > img { - height: 100%; - width: 100%; - border-radius: 50%; -} -#twitter > .twit:nth-child(1) > .one > .square > #twit-logo { - height: 60%; - width: 60%; - margin-left: 25px; -} -#twitter > .twit:nth-child(1) > .two { - width: 99.3%; - height: auto; - /* border:2px solid teal; */ - background: #fff; -} -#twitter > .twit:nth-child(1) > .two > p { - font-size: 17px; - background: #fff; - color: #222; - text-align: left; - padding: 15px; - line-height: 22px; -} -#twitter > .twit:nth-child(1) > .two > p > span { - font-size: 17px; - background: #fff; - color: rgb(70, 161, 161); - text-align: left; -} -#twitter > .twit:nth-child(1) > .three { - width: 90%; - height: auto; - /* border:2px solid blue; */ - background: #fff; - margin: 5px; -} -#twitter > .twit:nth-child(1) > .three > p { - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter > .twit:nth-child(1) > .three > hr { - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; -} -/* second child */ - -#twitter > .twit:nth-child(2) > .one { +#twitter > .twit > .one { /* border:1px solid green; */ height: 85px; width: 99.6%; @@ -296,32 +185,32 @@ display: flex; justify-content: space-between; } -#twitter > .twit:nth-child(2) > .one > .square { +#twitter > .twit > .one > .square { height: 100%; width: 22%; /* border:1px solid red; */ background: #fff; } -#twitter > .twit:nth-child(2) > .one > .rec { +#twitter > .twit > .one > .rec { height: 100%; width: 60%; /* border:1px solid blue; */ background: #fff; } -#twitter > .twit:nth-child(2) > .one > .rec > h5 { +#twitter > .twit > .one > .rec > h5 { color: black; background: #fff; font-size: 20px; margin: 16px 0 0 15px; } -#twitter > .twit:nth-child(2) > .one > .rec > p { +#twitter > .twit > .one > .rec > p { color: #8a8a8a; background: #fff; margin-left: 10px; line-height: 22px; font-size: 18px; } -#twitter > .twit:nth-child(2) > .one > .square > #pic { +#twitter > .twit > .one > .square > #pic { /* border:1px solid black; */ height: 80%; width: 80%; @@ -329,23 +218,23 @@ border-radius: 50%; background: #fff; } -#twitter > .twit:nth-child(2) > .one > .square > #pic > img { +#twitter > .twit > .one > .square > #pic > img { height: 100%; width: 100%; border-radius: 50%; } -#twitter > .twit:nth-child(2) > .one > .square > #twit-logo { +#twitter > .twit > .one > .square > #twit-logo { height: 60%; width: 60%; margin-left: 25px; } -#twitter > .twit:nth-child(2) > .two { +#twitter > .twit > .two { width: 99.3%; height: auto; /* border:2px solid teal; */ background: #fff; } -#twitter > .twit:nth-child(2) > .two > p { +#twitter > .twit > .two > p { font-size: 17px; background: #fff; color: #222; @@ -353,120 +242,30 @@ padding: 15px; line-height: 22px; } -#twitter > .twit:nth-child(2) > .two > p > span { +#twitter > .twit > .two > p > span { font-size: 17px; background: #fff; color: rgb(70, 161, 161); text-align: left; } -#twitter > .twit:nth-child(2) > .three { +#twitter > .twit > .three { width: 90%; height: auto; /* border:2px solid blue; */ background: #fff; margin: 5px; } -#twitter > .twit:nth-child(2) > .three > p { +#twitter > .twit > .three > p { font-size: 18px; background: #fff; color: #8a8a8a; } -#twitter > .twit:nth-child(2) > .three > hr { +#twitter > .twit > .three > hr { margin-bottom: 10px; background: #fff; color: #8a8a8a; } -/* third child */ - -#twitter > .twit:nth-child(3) > .one { - /* border:1px solid green; */ - height: 85px; - width: 99.6%; - background: #fff; - display: flex; - justify-content: space-between; -} -#twitter > .twit:nth-child(3) > .one > .square { - height: 100%; - width: 22%; - /* border:1px solid red; */ - background: #fff; -} -#twitter > .twit:nth-child(3) > .one > .rec { - height: 100%; - width: 60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter > .twit:nth-child(3) > .one > .rec > h5 { - color: black; - background: #fff; - font-size: 20px; - margin: 16px 0 0 15px; -} -#twitter > .twit:nth-child(3) > .one > .rec > p { - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter > .twit:nth-child(3) > .one > .square > #pic { - /* border:1px solid black; */ - height: 80%; - width: 80%; - margin: 6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter > .twit:nth-child(3) > .one > .square > #pic > img { - height: 100%; - width: 100%; - border-radius: 50%; -} -#twitter > .twit:nth-child(3) > .one > .square > #twit-logo { - height: 60%; - width: 60%; - margin-left: 25px; -} -#twitter > .twit:nth-child(3) > .two { - width: 99.3%; - height: auto; - /* border:2px solid teal; */ - background: #fff; -} -#twitter > .twit:nth-child(3) > .two > p { - font-size: 17px; - background: #fff; - color: #222; - text-align: left; - padding: 15px; - line-height: 22px; -} -#twitter > .twit:nth-child(3) > .two > p > span { - font-size: 17px; - background: #fff; - color: rgb(70, 161, 161); - text-align: left; -} -#twitter > .twit:nth-child(3) > .three { - width: 90%; - height: auto; - /* border:2px solid blue; */ - background: #fff; - margin: 5px; -} -#twitter > .twit:nth-child(3) > .three > p { - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter > .twit:nth-child(3) > .three > hr { - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; -} #question { height: 100px; @@ -588,7 +387,7 @@ color: rgba(255, 0, 0, 0.61); background-color: #2b2727; } -#form > form > button { +#form > form > #button { height: 70px; width: 200px; border-radius: 40px; @@ -623,19 +422,8 @@ background: #90221e; } -@media only screen and (min-width: 1001px) and (max-width: 1320px){ - #twitter > div:nth-child(3) { - width: 25%; - height: 400px; - } - #twitter > div:nth-child(2) { - width: 25%; - height: 420px; - } - #twitter > div:nth-child(1) { - width: 25%; - height: 260px; - } +@media only screen and (min-width: 1001px) and (max-width: 1320px) { + #form { width: 71%; margin: 80px auto; @@ -644,32 +432,15 @@ width: 22%; margin: 0 8px; } - } -@media only screen and (min-width: 780px) and (max-width: 1000px){ - - #text1 > h1{ +@media only screen and (min-width: 780px) and (max-width: 1000px) { + #text1 > h1 { font-size: 38px; } - #text2 > h3{ + #text2 > h3 { font-size: 28px; } - #twitter > div:nth-child(3) { - width: 35%; - height: 420px; - padding:6px; - } - #twitter > div:nth-child(2) { - width: 35%; - height: 420px; - padding:6px; - } - #twitter > div:nth-child(1) { - width: 35%; - height: 260px; - padding:6px; - } #form { width: 71%; margin: 80px auto; @@ -678,59 +449,99 @@ width: 22%; margin: 0 8px; } + #twitter{ + flex-direction: column; + } + #twitter>div{ + width:50%; + } } -@media only screen and (min-width: 391px) and (max-width: 779px){ - - #text1 > h1{ +@media only screen and (min-width: 391px) and (max-width: 779px) { + #text1 > h1 { font-size: 30px; } - #text2 > h3{ + #text2 > h3 { font-size: 22px; } - /* #twitter > div:nth-child(3) { - width: 35%; - height: 420px; - padding:6px; - box-sizing: border-box; + #form { + width: 84%; + margin-top: 450px; + margin-left:10px; } - #twitter > div:nth-child(2) { - width: 35%; - height: 420px; - padding:6px; + + #logo { + display: flex; + flex-wrap: wrap; } - #twitter > div:nth-child(1) { - width: 35%; - height: 260px; - padding:6px; - } */ - #form { - width: 81%; - margin: 100px auto; + #text3 { + margin-top: 170px; } - #box > div { - width: 25%; - margin: 0 2px; + + #twitter{ + flex-direction: column; + } + #twitter>div{ + width:50%; + } + #box{ + display: grid; + grid-template-columns: repeat(2,1fr); + gap:10px; + } + #box>div{ + width:80%; + box-sizing: border-box; + margin: 0px 10px; + + } +} + +@media only screen and (min-width: 50px) and (max-width: 390px) { + #text1 > h1 { + font-size: 25px; + padding:10px; } - #logo{ + #text2 > h3 { + font-size: 18px; + padding:10px; + margin-top: 110px; + } + #form { + width: 85%; + + margin-top: 370px; + margin-left:10px; + } + + #logo { display: flex; flex-wrap: wrap; } - #text3{ - margin-top: 170px; - } - #question{ - margin-top: 200px; + #text3 { + margin-top: 410px; } + #twitter{ - display:grid; - grid-template-columns: repeat(1,100%); - - border:2px solid green; + flex-direction: column; } #twitter>div{ - border:2px solid red; + width:80%; + margin-left:40px; } + #box{ + flex-direction: column; + margin-top: 350px; + gap: 20px; + } + #box>div{ + width:80%; + margin: auto; + + } + #form>div>.g-recaptcha{ + width:80px; + } } diff --git a/joinnow.html b/joinnow.html index 77c80d1..8ab4659 100644 --- a/joinnow.html +++ b/joinnow.html @@ -114,24 +114,25 @@

    Register for a Monthly Team Account

    Email (you'll need to confirm this email address)

    - +

    First Name

    - +

    Last Name

    - +

    Password

    - +

    Password Again

    - +

    Choose Your Payment Method

    +
    - @@ -142,18 +143,18 @@

    Register for a Monthly Team Account

    By clicking Start Learning, you agree to our Terms of Service and Privacy Policy.

    - + Start Learning
    -
    -
    - +
    +
    + +
    -
    Anthony R. 🇫🇷🚀💻

    @AnthonyHexium

    @@ -166,7 +167,7 @@
    Anthony R. 🇫🇷🚀💻

    @catalinmpit @FrontendMasters This is the best investment I made in my career. I mean, by faaaaaaaar.

    -
    +

    6:36pm · Aug 20, 2020

    diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 83e49e1..742d6d8 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -13,3 +13,29 @@ function colorChange(item) { }); item.classList.add("active"); } + + +document.querySelector("#form").addEventListener("submit",myFormSubmit); + +var signinobj=JSON.parse(localStorage.getItem("registeredIds")) || []; + //console.log(signinArr); +function myFormSubmit(event){ + event.preventDefault(); + var signinobj=[{ + email:document.querySelector("#email").value, + fname:document.querySelector("#first_name").value, + lname:document.querySelector("#last_name").value, + password:document.querySelector("#password").value, + password_again:document.querySelector("#password_again").value, + placeholder:document.querySelector("#placeholder").value, + card_num:document.querySelector("#card_num").value, + }]; + document.querySelector("#email").value="" + + + localStorage.setItem("registeredIds",JSON.stringify(signinobj)); + + + window.location.href="https://frontendmasters.com/" + + } From d36d260fe11213168412bae901fbe8a5f3a5f56a Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 16:32:02 +0530 Subject: [PATCH 21/62] Modified 6 --- FAQ.html | 16 +++++----------- Login.html | 16 +++++----------- grades.html | 5 +++++ icon1.html | 29 ++++++++++++++++++++++------- styles/nav.css | 9 ++++++++- teacher.html | 16 +++++----------- 6 files changed, 50 insertions(+), 41 deletions(-) diff --git a/FAQ.html b/FAQ.html index c8d3d25..810d92e 100644 --- a/FAQ.html +++ b/FAQ.html @@ -200,16 +200,10 @@

    Site Area

    import footer from "./components/footer.js" document.querySelector("#footer").innerHTML=footer() +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); - \ No newline at end of file diff --git a/Login.html b/Login.html index 1b3771d..ccc2252 100644 --- a/Login.html +++ b/Login.html @@ -122,16 +122,10 @@ document.querySelector("#footer").innerHTML=footer() +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); - diff --git a/grades.html b/grades.html index 558c87e..91a9460 100644 --- a/grades.html +++ b/grades.html @@ -119,6 +119,11 @@ import footer from "./components/footer.js" document.querySelector("#footer").innerHTML=footer() +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); diff --git a/icon1.html b/icon1.html index b797a35..01e1d97 100644 --- a/icon1.html +++ b/icon1.html @@ -5,16 +5,31 @@ Document + + +
    + - \ No newline at end of file + + + + diff --git a/styles/nav.css b/styles/nav.css index 319ae39..cd648ff 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -6,7 +6,14 @@ z-index: 99; position: relative; } - + body { + font-family: Open Sans,sans-serif; + } + *{ + margin: 0; + padding: 0; + + } .header-wrap { background: rgba(0, 0, 0, 0.7); padding: 14px 112px; diff --git a/teacher.html b/teacher.html index b5da24b..4db1c87 100644 --- a/teacher.html +++ b/teacher.html @@ -111,17 +111,11 @@

    Frontend Masters Teachers

    document.querySelector("#footer").innerHTML=footer() +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); - \ No newline at end of file From 94cc3bcf386f2c0ee220ebc4edd7c18500198f56 Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Wed, 30 Mar 2022 16:32:20 +0530 Subject: [PATCH 22/62] all comp --- joinnow.html | 2 +- scripts/joinnow.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/joinnow.html b/joinnow.html index 8ab4659..f7f73df 100644 --- a/joinnow.html +++ b/joinnow.html @@ -54,7 +54,7 @@

    -

    If you already have an account, please login

    +

    If you already have an account, please login

    diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 742d6d8..990a144 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,4 +1,8 @@ + + +let box=document.getElementById("first") +box.classList.add("active") let plan_boxes = document.querySelectorAll("#box>div"); plan_boxes.forEach((item) => { @@ -30,7 +34,13 @@ function myFormSubmit(event){ placeholder:document.querySelector("#placeholder").value, card_num:document.querySelector("#card_num").value, }]; - document.querySelector("#email").value="" + document.querySelector("#email").value=""; + document.querySelector("#first_name").value=""; + document.querySelector("#last_name").value=""; + document.querySelector("#password").value=""; + document.querySelector("#password_again").value=""; + document.querySelector("#placeholder").value=""; + document.querySelector("#card_num").value=""; localStorage.setItem("registeredIds",JSON.stringify(signinobj)); From 437051da51bda289086a41e2582fc34d2cc62211 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 18:01:43 +0530 Subject: [PATCH 23/62] Modified 7 --- icon1.html | 42 ++++++++++++++++++++++++++++++++++++++++-- scripts/icon1.js | 16 ++++++++++++++++ styles/nav.css | 1 + 3 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 scripts/icon1.js diff --git a/icon1.html b/icon1.html index 01e1d97..21821f7 100644 --- a/icon1.html +++ b/icon1.html @@ -8,12 +8,50 @@
    -
    +
    + +
    +
    + + + +

    Core Coursework

    +

    (take these in order)

    +
    diff --git a/scripts/icon1.js b/scripts/icon1.js new file mode 100644 index 0000000..9d7dfcd --- /dev/null +++ b/scripts/icon1.js @@ -0,0 +1,16 @@ +var icon1arr = [ + { + img : "https://static.frontendmasters.com/assets/courses/2018-02-27-js-fundamentals-functional-v2/thumb.webp", + name:"JavaScript: From Fundamentals to Functional JS, v2", + photo:"https://static.frontendmasters.com/assets/teachers/gandolfo/thumb.webp", + title:"Bianca Gandilfo", + com:"Thumbtack", + des:"Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript.", + time:"8 hours, 11 minutes " + + } +] + +icon1arr.map(function(el){ + +}) \ No newline at end of file diff --git a/styles/nav.css b/styles/nav.css index cd648ff..cc9e8ea 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -8,6 +8,7 @@ } body { font-family: Open Sans,sans-serif; + background-color: #222; } *{ margin: 0; From 1a7d470ac1f1dd6b7f7c63cf21c45c16285b6d7c Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 18:50:47 +0530 Subject: [PATCH 24/62] modify1 --- styles/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/main.css b/styles/main.css index 0b74e76..c2e9418 100644 --- a/styles/main.css +++ b/styles/main.css @@ -234,7 +234,7 @@ margin-top: 10px; */ /* clip-path: polygon(50% 0%, 100% 0, 100% 100%, 99% 20%, 0 1%); */ clip-path: polygon(100% 0, 0 28%, 100% 26%); - margin-top: -30px; + margin-top: -20px; margin-bottom: -120px; } From 2e5d40d0065d1dc199e125d77941d3f8dd52a801 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 20:05:11 +0530 Subject: [PATCH 25/62] MOdify2 --- icon1.html | 14 ++++-- learn.html | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 learn.html diff --git a/icon1.html b/icon1.html index 21821f7..4ff1ae7 100644 --- a/icon1.html +++ b/icon1.html @@ -46,9 +46,17 @@
    - - - +

    Core Coursework

    (take these in order)

    diff --git a/learn.html b/learn.html new file mode 100644 index 0000000..33c47c1 --- /dev/null +++ b/learn.html @@ -0,0 +1,132 @@ + + + + + + + + + Paths to Learning JavaScript, React, and More Skills You Need. + + + + + + +
    + + +
    +
    + + + + + + + + + + + + + + + + + + +

    Learning Paths

    +

    + Guided paths to expand your abilities as a well-rounded engineer! +

    +
    +
    +
    +
    +
    +
    +
    0%
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Beginner

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, + dolorum. +

    +
    + +
    +
    +
    + + + + + + From 02110f3ed13d2b00b6c0ed27d122dbd2dd8ff496 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Wed, 30 Mar 2022 23:34:50 +0530 Subject: [PATCH 26/62] Modify3 --- components/display.js | 61 +++++++++++++++ icon1.html | 173 +++++++++++++++++++++++++++++++++++++++++- scripts/icon1.js | 74 ++++++++++++++++-- styles/main.css | 2 + 4 files changed, 304 insertions(+), 6 deletions(-) create mode 100644 components/display.js diff --git a/components/display.js b/components/display.js new file mode 100644 index 0000000..798a5d2 --- /dev/null +++ b/components/display.js @@ -0,0 +1,61 @@ + +function display(data,main){ + data.map(function(el){ + let div = document.createElement("div"); + div.setAttribute("id","div") + let div1 = document.createElement("div"); + div1.setAttribute("id","div1") + let img = document.createElement("img") + img.src=el.img + img.setAttribute("id","img") + let img1 = document.createElement("img") + img1.src=el.photo + img1.setAttribute("id","img1") + let h3 = document.createElement("h3") + h3.innerText=el.name + let h4 = document.createElement("h4"); + h4.innerText=el.title + let p = document.createElement("p"); + p.innerText=el.com + let div2 = document.createElement("div") + let div3 = document.createElement("div") + div3.append(h4,p) + div2.append(img1,div3) + div3.setAttribute("id","div3") + div2.setAttribute("id","div2") + div2.style.display="flex" + p.setAttribute("id","p") + let p1 = document.createElement("p"); + p1.innerText=el.des + p1.setAttribute("id","p1") + let p2 = document.createElement("p"); + p2.innerText=el.time + p2.setAttribute("id","p2") + let div4 = document.createElement("div") + let div5= document.createElement("div") + div5.append(p2,div4) + div4.innerText="CC" + div5.setAttribute("id","div5") + div4.setAttribute("id","div4") + let btn = document.createElement("button") + btn.innerText="Watch Free Preview" + let btn1 = document.createElement("button") + btn1.innerText="Get Full Access" + btn.setAttribute("id","btn") + btn1.setAttribute("id","btn1") + let div6 = document.createElement("div") + div6.append(btn,btn1) + div6.style.display="flex" + div6.setAttribute("id","div6") + div1.append(h3,div2,p1,div5,div6) + div.append(img,div1) + div.addEventListener("click",function(){ + window.location.href="display.html" + let displayArr=[]; + displayArr.push(el) + }) + main.append(div) + }) +} + +export {display}; \ No newline at end of file diff --git a/icon1.html b/icon1.html index 4ff1ae7..8946977 100644 --- a/icon1.html +++ b/icon1.html @@ -38,6 +38,175 @@ font-size: 21px; font-weight: 400; } + #div { + display: flex; + background-color: black; + height: 400px; + width: 90%; + margin: 25px auto; + /* padding: 20px 0px; */ + box-sizing: border-box; + } + #main h3 { + color: #dd625e; + font-size: 30px; + } + #main h3:hover { + transition: color .2s; + + } + #img { + opacity: .5; + height: 400px; + } + #img1 { + border-radius: 50%; + height: 70px; + width: 70px; + } + #div1 { + padding: 25px 20px; + } + h4 { + color: #e6e6e6; + + } + #p { + color: #8a8a8a; + + } + #div2 { + margin-top: 15px; + text-align: left; + margin-bottom: 15px; + } + #div3 { + margin-top:12.5px ; + margin-left: 20px; + line-height: 25px; + font-size: 20px; + } + #p1 { + color: #e6e6e6; + line-height: 25px; + margin-bottom: 15px; + + } + #p2 { + color: #8a8a8a; + margin-bottom: 35px; + + + } + #main h3:hover { + color: #8a8a8a; + + } + #div5 { + display: flex; + } + #div4 { + /* background: wheat; */ + color: #222; + margin-left: 5px; + padding: 0 4px; + + + } + #btn { + background: #c94f17; + border: none; + border-radius: 40px; + color: #fff; + display: block; + font-size: 15px; + line-height: 1.25; + padding: 10px 10px; + text-align: center; + margin-right: 20px; + height: 40px; + width: 200px; + font-weight: bold; + /* background: #c94f17; */ + + } + #btn1 { + background-color: #c02d28; + border: none; + border-radius: 40px; + color: #fff; + display: block; + font-size: 15px; + line-height: 1.25; + padding: 10px 10px; + text-align: center; + margin-right: 20px; + height: 40px; + width: 170px; + font-weight: bold; + } + #btn:hover { + background-color: #8a8a8a; + } + #btn1:hover { + background-color: #8a8a8a; + } + #div:hover #img { + opacity: 1; + } + @media all and (max-width:768px) and (min-width:381px){ + #img { + position: absolute; + } + #div1 { + position: relative; + margin-left: 100px; + background-color: #000000d0; + } + #div { + background-color: transparent; + + } +#main h3 { + font-size: 25px; + } + #p2 { + margin-bottom: 15px; + } + } + @media all and (min-width: 50px) and (max-width: 380px) { + + #img { + position: absolute; + height: 500px; + } + #div1 { + position: relative; + margin-left: 20px; + background-color: #000000d0; + } + #div { + background-color: transparent; + height: 500px; + + } +#main h3 { + font-size: 25px; + } + #p2 { + margin-bottom: 15px; + } + #div6 { + flex-direction: column; + /* text-align: center; */ + } + #btn1 { + margin-top: 15px; + width: 200px; + } + } + + @@ -60,6 +229,7 @@

    Core Coursework

    (take these in order)

    +
    @@ -78,4 +248,5 @@

    Core Coursework

    }); - + + diff --git a/scripts/icon1.js b/scripts/icon1.js index 9d7dfcd..0fa79d8 100644 --- a/scripts/icon1.js +++ b/scripts/icon1.js @@ -8,9 +8,73 @@ var icon1arr = [ des:"Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript.", time:"8 hours, 11 minutes " - } + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-01-07-javascript-hard-parts-v2/thumb.webp", + name:"JavaScript: The Hard Parts, v2", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Take your JavaScript to the next level. Gain an understanding of callbacks, higher order functions, closure, asynchronous and object-oriented JavaScript!", + time:"6 hours, 41 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-04-03-deep-javascript-v3/thumb.webp", + name:"Deep JavaScript Foundations, v3", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Dive into JavaScript's core language features: types & coercion, scope & closure, and JavaScript's object oriented system.", + time:"10 hours, 32 minutes " + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-04-05-js-recent-parts/thumb.webp", + name:"JavaScript: The Recent Parts", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Get up to speed with new JavaScript features like tagged template literals, destructuring, iterators, generators, regex improvements and async await.", + time:"4 hours, 9 minutes " + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-10-javascript-new-hard-parts/thumb.webp", + name:"JavaScript: The New Hard Parts", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await!", + time:"4 hours, 46 minutes " + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-06-18-functional-javascript-v3/thumb.webp", + name:"Functional-Light JavaScript, v3", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Improve your JavaScript by applying functional programming concepts like function purity, point-free, partial-application, currying, composition, immutability, recursion, list operations like map, reduce & filter...plus even more advanced concepts like monads and transduction!", + time:"10 hours, 1 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-03-17-hardcore-js-v2/thumb.webp", + name:"Hardcore Functional Programming in JavaScript, v2", + photo:"https://static.frontendmasters.com/assets/teachers/lonsdorf/thumb@2x.webp", + title:"Brian Lonsdorf", + com:"Salesforce", + des:"Learn functional programming concepts such as pure functions, currying, composition, functors, and monads, and see functional concepts in action in a real-world web app!", + time:"3 hours, 44 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-08-28-javascript-accessibility/thumb.webp", + name:"Accessibility in JavaScript Applications", + photo:"https://static.frontendmasters.com/assets/teachers/sutton/thumb@2x.webp", + title:"Marcy Sutton", + com:"Gatsby", + des:"Produce innovative and inclusive JavaScript-powered web apps! Learn to remove barriers and allow people with disabilities to use your modern JavaScript web applications.", + time:"4 hours, 6 minutes " + } ] - -icon1arr.map(function(el){ - -}) \ No newline at end of file +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon1arr,main) \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index c2e9418..a278c74 100644 --- a/styles/main.css +++ b/styles/main.css @@ -87,6 +87,7 @@ body{ width: 90px; margin-top: 10px; margin-left: 10px; + opacity: .5; } #icons img:hover { @@ -94,6 +95,7 @@ body{ border-radius: 20px; padding: 10px; box-sizing: border-box; + opacity: 1; } #slidebar { From 9cfac60e1ab38defdc9991c4264a550cd58ef075 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 23:43:19 +0530 Subject: [PATCH 27/62] 90% Done Learn-page --- components/path.js | 78 +++++++++++++++++ learn.html | 123 +++++---------------------- scripts/data.js | 191 ++++++++++++++++++++++++++++++++++++++++++ scripts/learn-page.js | 77 ++++++++++++----- styles/learn-page.css | 142 +++++++++++++++++++++++++++---- 5 files changed, 467 insertions(+), 144 deletions(-) create mode 100644 components/path.js diff --git a/components/path.js b/components/path.js new file mode 100644 index 0000000..ed810a6 --- /dev/null +++ b/components/path.js @@ -0,0 +1,78 @@ +const pathContainer = (svg, title, msg) => { + return `
    + ${svg} +

    ${title}

    +

    + ${msg} +

    +
    +
    +
    + `; +}; + +const getElem = (tag_name, class_name) => { + let tag = document.createElement(tag_name); + tag.className = class_name; + return tag; +}; + +const appedData = (data, parent) => { + parent.innerHTML = null; + data.map((el) => { + let p_box = getElem("div", "p-box"); + + // Progress Bar + let circular = getElem("div", "circular"); + + let inner = getElem("div", "inner"); + + let outer = getElem("div", "outer"); + + let numb = getElem("div", `numb ${el.class}`); + let numb_img_box = getElem("div", "img"); + if (el.img == "") { + numb_img_box.innerHTML = el.icon; + } else { + let img = getElem("img", ""); + img.src = el.img; + numb_img_box.append(img); + } + let p = getElem("p", ""); + p.innerHTML = "0%"; + numb.append(numb_img_box, p); + + let circle = getElem("div", "circle"); + let dot = getElem("div", "dot"); + let span = getElem("div", el.class); + dot.append(span); + + let bar_left = getElem("div", "bar left"); + let left_progress = getElem("div", "progress"); + bar_left.append(left_progress); + + let bar_right = getElem("div", "bar right"); + let right_progress = getElem("div", "progress"); + bar_right.append(right_progress); + + let desc = getElem("div", "desc"); + + let title = getElem("h3", "title"); + title.innerText = el.title; + + let description = getElem("p", ""); + description.innerText = el.desc; + + let btn = getElem("button", el.class); + btn.innerText = "Start"; + + circle.append(dot, bar_left, bar_right); + circular.append(inner, outer, numb, circle); + desc.append(title, description); + + p_box.append(circular, desc, btn); + parent.append(p_box); + }); +}; + +export { pathContainer, appedData }; diff --git a/learn.html b/learn.html index 7b0b337..31413d5 100644 --- a/learn.html +++ b/learn.html @@ -14,117 +14,32 @@ + +
    -
    -
    - - - - - - - - - - - - - - - - - - -

    Learning Paths

    -

    - Guided paths to expand your abilities as a well-rounded engineer! -

    -
    -
    -
    -
    -
    -
    -
    0%
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Beginner

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, - dolorum. -

    -
    - -
    -
    -
    +
    + +
    + + diff --git a/scripts/data.js b/scripts/data.js index 60b050c..4146b1e 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -634,6 +634,197 @@ let small_data = [ }, ], ]; + +let learn_data = [ + { + title: "Beginner", + desc: "Your Path to Becoming a Career-Ready Web Developer!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Professional", + desc: "Go From Professional Web Developer to Lead Engineer", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Expert", + desc: "Mind-Expanding Web Development Techniques to Emerging APIs in the Web Browser", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Computer Science", + desc: "Learning Computer Science with JavaScript", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Fullstack", + desc: "Expand Your Abilities and Master the Server", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Design to Code", + desc: "Make Your Designs Come to Life Through Code!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, +]; + +let map_svg = ` + + + + + + + + + + + + + + + + +`; + +let topic_icon = ``; + +let elective_data = [ + { + title: "JavaScript", + desc: "Write Professional, Modern JavaScript", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", + icon: ``, + class: "js", + }, + { + title: "CSS", + desc: "Learn CSS, from Laying Out Websites to Performant Animations", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/dj/370768/png/370768.png", + icon: ``, + class: "css", + }, + { + title: "Node.js", + desc: "Build Web APIs and Applications with Node.js", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/kk/353117/png/node-node-js-logo.png", + icon: ``, + class: "node", + }, + { + title: "React.js", + desc: "Be Productive with React.js, Today's Most Popular Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/tx/353401/png/react-logo.png", + icon: ``, + class: "react", + }, + { + title: "Vue.js", + desc: "Learn Vue.js, An Easy to Pick Up and Powerful Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ep/353380/png/vuejs-logo.png", + icon: ``, + class: "vue", + }, + { + title: "Angular", + desc: "Learn Angular, a TypeScript-based web application framework led by Google", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/mm/370537/png/370537.png", + icon: ``, + class: "angular", + }, +]; + +localStorage.setItem("elective_data", JSON.stringify(elective_data)); +localStorage.setItem("topic_icon", topic_icon); +localStorage.setItem("map_svg", map_svg); +localStorage.setItem("learn_data", JSON.stringify(learn_data)); localStorage.setItem("twitter_data", JSON.stringify(twittweData)); localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); localStorage.setItem("t_small_data", JSON.stringify(small_data)); diff --git a/scripts/learn-page.js b/scripts/learn-page.js index c582151..f3701e1 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,26 +1,59 @@ +import { pathContainer, appedData } from "../components/path.js"; import navbar from "../components/navbar.js"; let header = document.querySelector(".header"); header.innerHTML = navbar(); -const numb = document.querySelector(".numb"); -let counter = 0; -let id = setInterval(() => { - if (counter == 100) { - let right_div = document.querySelector(".bar.right"); - right_div.classList.add("reverse"); - let left_div = document.querySelector(".bar.left"); - left_div.classList.add("reverse-left"); - let innerId = setInterval(() => { - if (counter == 0) { - clearInterval(innerId); - } else { - counter -= 1; - numb.textContent = counter + "%"; - } - }, 20); - clearInterval(id); - } else { - counter += 1; - numb.textContent = counter + "%"; - } -}, 20); +let map_svg = localStorage.getItem("map_svg"); +let topic_icon = localStorage.getItem("topic_icon"); +let path_conatiner = document.querySelector(".path-container"); +let elective_conatiner = document.querySelector(".elective-container"); +path_conatiner.innerHTML = pathContainer( + map_svg, + "Learning Paths", + "Guided paths to expand your abilities as a well-rounded engineer!" +); +elective_conatiner.innerHTML = pathContainer( + topic_icon, + "Topic Paths:", + "Focus on a specific area in web development." +); + +let learn_data = JSON.parse(localStorage.getItem("learn_data")); +let path_bottom = document.querySelector(".path-container > .p-bottom"); + +appedData(learn_data, path_bottom); +let elective_bottom = document.querySelector(".elective-container > .p-bottom"); +let elective_data = JSON.parse(localStorage.getItem("elective_data")); +appedData(elective_data, elective_bottom); + +// console.log(elective_bottom); + +const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); +}; + +const p_box = document.querySelectorAll(".p-box"); +p_box.forEach((el) => { + updateProgress(el); +}); diff --git a/styles/learn-page.css b/styles/learn-page.css index 44dc7ac..4fb5079 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -4,7 +4,8 @@ box-sizing: border-box; font-family: Open Sans, sans-serif; } -.path-container { +.path-container, +.elective-container { width: 100%; padding-top: 40px; background-color: #222222; @@ -33,22 +34,30 @@ .p-bottom { display: flex; - gap: 10px; + gap: 20px; flex-wrap: wrap; + margin-top: 20px; + border-top: 1px solid #ffffff69; + padding-top: 20px; } .p-bottom .p-box { - width: 32%; + max-width: 303px; background-color: #383838; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; - padding: 10px; + padding: 20px; text-align: center; } .circular { - height: 100px; - width: 100px; + height: 200px; + width: 200px; position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; } .circular .inner, .circular .outer, @@ -61,12 +70,9 @@ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); } .circular .inner { - top: 50%; - left: 50%; - height: 80px; - width: 80px; - margin: -40px 0 0 -40px; - background-color: #dde6f0; + height: 164px; + width: 164px; + background-color: #222222; border-radius: 100%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } @@ -83,26 +89,79 @@ font-size: 18px; font-weight: 500; color: #4158d0; + display: flex; + align-items: center; + justify-content: center; +} +.circular .numb.orange { + color: #c63528; +} +.circular .numb p { + font-size: 70px; + color: #fff; } +.circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; +} +.circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; +} + .circular .bar { position: absolute; height: 100%; width: 100%; background: #fff; -webkit-border-radius: 100%; - clip: rect(0px, 100px, 100px, 50px); + clip: rect(0px, 220px, 220px, 100px); } .circle .bar .progress { position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; - clip: rect(0px, 50px, 100px, 0px); + clip: rect(0px, 100px, 200px, 0px); } .circle .bar .progress, .dot span { background: #4158d0; } +.circle .bar .progress, +.dot span.orange { + background: #c63528; +} +.circle .bar .progress, +.dot span.js { + background: #b3911c; +} +.circle .bar .progress, +.dot span.css { + background: #278cc7; +} +.circle .bar .progress, +.dot span.node { + background: #00873a; +} +.circle .bar .progress, +.dot span.react { + background: #008697; +} +.circle .bar .progress, +.dot span.vue { + background: #00bb83; +} +.circle .bar .progress, +.dot span.angular { + background: #ff002f; +} .circle .left .progress { z-index: 1; animation: left 1s linear both; @@ -116,10 +175,6 @@ z-index: 3; transform: rotate(180deg); } -.circle .reverse { - /* transform: rotate(0deg); */ -} - .circle .right .progress { animation: right 1s linear both; animation-delay: 1s; @@ -142,6 +197,7 @@ margin-top: -5px; animation: dot 2s linear both; transform-origin: 0% 50%; + display: none; } .circle .dot span { position: absolute; @@ -154,6 +210,7 @@ animation: leftRreverse 1s linear both; animation-delay: 1s; } + @keyframes leftRreverse { 0% { transform: rotate(180deg); @@ -199,3 +256,52 @@ z-index: 4; } } + +.desc { + padding: 0 10px; + color: #fff; + height: 157px; + line-height: 25px; +} +.desc .title { + font-size: 27px; + margin-bottom: 20px; +} + +.desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; +} + +.p-box button { + margin: 0 auto; + min-width: 175px; + font-size: 14px; + padding: 10px 20px; + border-radius: 20px; + border: none; + color: #fff; + cursor: pointer; +} +.p-box button.orange { + background-color: #c63528; +} +.p-box button.js { + background-color: #b3911c; +} +.p-box button.css { + background-color: #278cc7; +} +.p-box button.node { + background-color: #00873a; +} +.p-box button.react { + background-color: #008697; +} +.p-box button.vue { + background-color: #00bb83; +} +.p-box button.angular { + background-color: #ff002f; +} From 3bbcdcd73291b08dc24ac2dfb55544bf2ed5ab57 Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Thu, 31 Mar 2022 00:51:06 +0530 Subject: [PATCH 28/62] complete --- joinnow.html | 2 +- scripts/joinnow.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/joinnow.html b/joinnow.html index f7f73df..153e511 100644 --- a/joinnow.html +++ b/joinnow.html @@ -112,7 +112,7 @@

    -

    Register for a Monthly Team Account

    +

    Register for a Monthly Account

    Email (you'll need to confirm this email address)

    diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 990a144..184d4b0 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -16,6 +16,7 @@ function colorChange(item) { el.classList.remove("active"); }); item.classList.add("active"); + } @@ -49,3 +50,26 @@ function myFormSubmit(event){ window.location.href="https://frontendmasters.com/" } + + document.querySelector("#first").addEventListener("click",changeCol) + document.querySelector("#sec").addEventListener("click",changeCol1) + document.querySelector("#third").addEventListener("click",changeCol2) + document.querySelector("#fourth").addEventListener("click",changeCol3) + + function changeCol(){ + let text=document.querySelector("#title") + text.innerHTML="Register for a Monthly Account" + } + function changeCol1(){ + let text=document.querySelector("#title") + text.innerHTML="Register for a Yearly Account" + } + function changeCol2(){ + let text=document.querySelector("#title") + text.innerHTML="Register for a Monthly Team Account" + } + function changeCol3(){ + let text=document.querySelector("#title") + text.innerHTML="Register for a Yearly Team Account" + } + From ea6b81faa7f16e50f23542ac3de1b8ea9111bfa5 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 01:25:22 +0530 Subject: [PATCH 29/62] Done Icons --- components/display.js | 3 + icon1.html | 186 +++++++++++++++++++++++++++++++++++++++++- icon2.html | 0 icon3.html | 0 icon4.html | 0 icon5.html' | 0 icon6.html | 0 icon7.html | 0 icon8.html | 0 icon9.html | 0 scripts/icon1.js | 25 +++++- scripts/icon2.js | 39 +++++++++ scripts/icon3.js | 39 +++++++++ scripts/icon4.js | 51 ++++++++++++ scripts/icon5.js | 30 +++++++ scripts/icon6.js | 29 +++++++ scripts/icon7.js | 38 +++++++++ scripts/icon8.js | 29 +++++++ scripts/icon9.js | 30 +++++++ 19 files changed, 496 insertions(+), 3 deletions(-) create mode 100644 icon2.html create mode 100644 icon3.html create mode 100644 icon4.html create mode 100644 icon5.html' create mode 100644 icon6.html create mode 100644 icon7.html create mode 100644 icon8.html create mode 100644 icon9.html create mode 100644 scripts/icon2.js create mode 100644 scripts/icon3.js create mode 100644 scripts/icon4.js create mode 100644 scripts/icon5.js create mode 100644 scripts/icon6.js create mode 100644 scripts/icon7.js create mode 100644 scripts/icon8.js create mode 100644 scripts/icon9.js diff --git a/components/display.js b/components/display.js index 798a5d2..9ffe9dc 100644 --- a/components/display.js +++ b/components/display.js @@ -53,6 +53,9 @@ function display(data,main){ window.location.href="display.html" let displayArr=[]; displayArr.push(el) + }) + btn1.addEventListener("click",function(){ + window.location.href="joinnow.html" }) main.append(div) }) diff --git a/icon1.html b/icon1.html index 8946977..1b5bc90 100644 --- a/icon1.html +++ b/icon1.html @@ -11,6 +11,9 @@ #grid { width: 100%; height: 400px; + align-items: center; + display: flex; + justify-content: center; background-image: url("https://www.xmple.com/wallpaper/graph-paper-green-grid-1920x1080-c2-071c0b-0f4719-l2-1-50-a-0-f-20.svg"); } #grid + div{ @@ -145,6 +148,163 @@ width: 170px; font-weight: bold; } + + +.circular { + height: 200px; + width: 200px; + position: relative; + /* border: 1px solid #fff; */ +} +.circular .inner, +.circular .outer, +.circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .inner { + top: 50%; + left: 50%; + height: 180px; + width: 180px; + margin: -40px 0 0 -40px; + /* background-color: ; */ + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .circle { + z-index: 1; + box-shadow: none; +} +.circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: #eff; +} +.circular .bar { + position: absolute; + height: 100%; + width: 100%; + /* background: #fff; */ + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 100px, 50px); +} +.circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 50px, 100px, 0px); +} +.circle .bar .progress, +.dot span { + background: #4158d0; +} +.circle .left .progress { + z-index: 1; + animation: left 1s linear both; +} +@keyframes left { + 100% { + transform: rotate(180deg); + } +} +.circle .right { + z-index: 3; + transform: rotate(180deg); +} +.circle .reverse { + /* transform: rotate(0deg); */ +} + +.circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ +} +@keyframes right { + 100% { + transform: rotate(180deg); + } +} + +.circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; +} +.circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; +} +.circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; +} +@keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +.circle .reverse .progress { + animation: rightRreverse 1s linear both; +} +@keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +@keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} +@keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} #btn:hover { background-color: #8a8a8a; } @@ -154,6 +314,7 @@ #div:hover #img { opacity: 1; } + @media all and (max-width:768px) and (min-width:381px){ #img { position: absolute; @@ -206,13 +367,34 @@ } } - + #js { + height: 100px; + margin-left: -100px; + width: 100px; + opacity: .5; + }
    - +
    +
    +
    +
    0%
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    { + if (counter == 100) { + let right_div = document.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = document.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } +}, 20); \ No newline at end of file diff --git a/scripts/icon2.js b/scripts/icon2.js new file mode 100644 index 0000000..7441839 --- /dev/null +++ b/scripts/icon2.js @@ -0,0 +1,39 @@ +var icon2arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-04-complete-react-v6/thumb.webp", + name:"Complete Intro to React, v6", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:"Brian Holt", + com: "Stripe", + des:"Much more than an intro, you’ll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, like Parcel, ESLint, Prettier, and React Router!", + time:"5 hours, 41 minute" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-04-intermediate-react-v3/thumb.webp", + name:"Intermediate React, v3", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:"Brian Holt", + com: "Stripe", + des:"Build scalable React applications while learning React hooks in-depth, CSS-in-JS with TailwindCSS, increase performance with code splitting and server-side rendering, add TypeScript, state management with Redux, test your app with Jest …and more!", + time:"6 hours, 7 minutes " + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-02-14-pure-react-state/thumb.webp", + name:"State Management in Pure React, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", + time:"4 hours, 27 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", + name:"React and TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Ship React apps with more code confidence using TypeScript! Migrate your app to TypeScript, type simple and advanced React components, and learn all types shipped with React for writing React with TypeScript.", + time:"5 hours, 3 minutes" + + } +] diff --git a/scripts/icon3.js b/scripts/icon3.js new file mode 100644 index 0000000..258dcb7 --- /dev/null +++ b/scripts/icon3.js @@ -0,0 +1,39 @@ +var icon3arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp", + name:"TypeScript Fundamentals, v3", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", + time:"4 hours, 27 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-04-intermediate-typescript/thumb.webp", + name:"Intermediate TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", + time:"2 hours, 48 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-11-11-production-typescript/thumb.webp", + name:"Production-Grade TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"Use the TypeScript language at scale to increase the developer experience and productivity of your teams! You’ll learn to manage even the most ambitious TypeScript projects with confidence and ease.", + time:"5 hours, 10 minute" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", + name:" React and TypeScript", + // name:"State Management in Pure React, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", + time:"4 hours, 27 minutes" + } +] \ No newline at end of file diff --git a/scripts/icon4.js b/scripts/icon4.js new file mode 100644 index 0000000..0ac3b4f --- /dev/null +++ b/scripts/icon4.js @@ -0,0 +1,51 @@ +var icon4arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-07-20-node-js-v2/thumb.webp", + name:"Introduction to Node.js, v2", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", + time:"4 hours, 51 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-05-24-servers-node-js/thumb.webp", + name:"The Hard Parts of Servers & Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Uncover the most challenging, yet most powerful features in Node.js, to help you write and debug professional server code.", + time:"5 hours, 16 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-07-09-digging-into-node/thumb.we,bp", + title:"Digging Into Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Learn the fundamental concepts of programming in Node.js: CLI programming, file system access, asynchrony, streams, HTTP servers & routing, database persistence, and child processes.", + time:"4 hours, 0 minute" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-18-api-design-nodejs-v3/thumb.webp", + name:"API Design in Node.js, v3", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Use Express to build a REST API in Node.js – handle REST API verb methods to create, read, update and delete resources from a MongoDB database.", + time:"3 hours, 34 minutes" + + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-11-25-server-graphql-nodejs/thumb.webp", + name:"Server-Side GraphQL in Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", + time:"4 hours, 51 minutes" + + } +] \ No newline at end of file diff --git a/scripts/icon5.js b/scripts/icon5.js new file mode 100644 index 0000000..227d07f --- /dev/null +++ b/scripts/icon5.js @@ -0,0 +1,30 @@ +var icon5arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2020-10-20-vue-3/thumb.webp", + name:"Introduction to Vue 3", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", + time:"4 hours, 57 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-10-27-vue-nuxt-apps/thumb.webp", + name:"Building Applications with Vue & Nuxt", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", + time:"3 hours, 37 minutes" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-02-18-production-vue/thumb.webp", + name:"Production-Grade Vue.js", + photo:"https://static.frontendmasters.com/assets/teachers/hong/thumb@2x.webp", + title:"Ben Hong", + com:"Netlify", + des:"Learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, best practices for architecting increasingly complex applications, and more.", + time:"4 hours, 37 minutes" + } +] \ No newline at end of file diff --git a/scripts/icon6.js b/scripts/icon6.js new file mode 100644 index 0000000..0bff362 --- /dev/null +++ b/scripts/icon6.js @@ -0,0 +1,29 @@ +var icon6arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2022-02-01-angular-13/thumb.webp", + name:"Angular 13 Fundamentals", + photo:"https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb@2x.webp", + title:"Lukas Ruebbelke", + com:"Venmo", + des:"Learn Angular through building an app with real-world features! We start off using the Angular CLI to get set up quickly. Then we'll move on to Angular core concepts like components, templates, routing, forms, server-side communicati,on, and more.", + time:"6 hours, 52 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp", + name:"TypeScript Fundamentals, v3", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com: "LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative team", + time:"4 hours, 27 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-01-19-production-angular/thumb.webp", + name:"Production-Grade Angular", + photo:"https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb@2x.webp", + title:"Lukas Ruebbelke", + com:"Venmo", + des:"Learn how to structure your projects leveraging Angular CLI and Nx. Create shared modules and apply unit tests and end-to-end testing. Analyze performance and ship your app to production using Docker.", + time:"6 hours, 57 minutes" + } +] \ No newline at end of file diff --git a/scripts/icon7.js b/scripts/icon7.js new file mode 100644 index 0000000..4fc8075 --- /dev/null +++ b/scripts/icon7.js @@ -0,0 +1,38 @@ +var icon7arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2021-12-14-getting-started-css/thumb.webp", + name:"Getting Started with CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more. You'll even build a professional portfolio website by the end of the course!", + time:"3 hours, 19 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-10-26-css-grid-flexbox-v2/thumb.webp", + name:"CSS Grid & Flexbox for Responsive Layouts, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Learn the essential CSS layout techniques for building responsive, beautiful websites. You'll use CSS Grid and Flexbox along with responsive images to build out real-world web layouts!", + time:"5 hours, 49 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", + name:"SVG Essentials & Animation, v2", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", + time:"4 hours, 12 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-12-advanced-css-layouts/thumb.webp", + name:"Advanced CSS Layouts", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. Combined with CSS Calc & Custom Properties, they revolutionize the way we lay out web pages with CSS!", + time:"3 hours, 46 minutes" + } +] \ No newline at end of file diff --git a/scripts/icon8.js b/scripts/icon8.js new file mode 100644 index 0000000..4bb935b --- /dev/null +++ b/scripts/icon8.js @@ -0,0 +1,29 @@ +var icon8arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2020-09-25-d3/thumb.webp", + name:"Introduction to D3.js", + photo:"https://static.frontendmasters.com/assets/teachers/wu/thumb@2x.webp", + title:"Shirley Wu", + com:"Data Sketches", + des:"Build cu charts with D3.js using data binding with the enter-update-exit pattern. You'll learn scales and to animate between different D3 layouts for building truly interactive charts.", + time:"5 hours, 59 minutes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-09-11-d3-js-custom-charts/thumb.webp", + name:"Building Custom Data Visualizations", + photo:"https://static.frontendmasters.com/assets/teachers/wu/thumb@2x.webp", + title:"Shirley Wu", + com:"Data Sketches", + des:"Learn the visualization principles and process for building custom advanced data visualizations with D3.js and SVG with S,hirley Wu.", + time:"4 hours, 24 minutes " + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", + name:"SVG Essentials & Animation, v2", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", + time:"4 hours, 12 minutes CC" + } +] \ No newline at end of file diff --git a/scripts/icon9.js b/scripts/icon9.js new file mode 100644 index 0000000..8766133 --- /dev/null +++ b/scripts/icon9.js @@ -0,0 +1,30 @@ +var icon9arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2018-06-29-webpack-fundamentals/thumb.webp", + name:"Webpack 4 Fundamentals", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"Learn the core concepts of Webpack 4. Start from scratch by adding Webpack with npm and build up a pipeline with popular loaders from the Webpack ecosystem!", + time:"4 hours, 10 minute" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-01-performance-webpack/thumb.webp", + name:"Web Performance with Webpack", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"Make websites load instantly using Webpack for lazy loading JavaScript with code splitting, removing unused code with tree shaking and prefetching assets", + time:" hours, 43 minutes " + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-02-webpack-plugins/thumb.webp", + name:"Webpack Plugins System", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"earn the Webpack 4 plugin system, tour the Webpack source code and learn to build custom plugins and custom Webpack loaders.", + time:"1 hours, 34 minutes" + } +] \ No newline at end of file From 620100f7a7485c2c75d8e6ecaf050f3b72c997fc Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 01:52:05 +0530 Subject: [PATCH 30/62] Changes --- Styles/joinnow.css | 26 ++++++++++++++++---------- components/footer.js | 2 +- components/navbar.js | 2 +- joinnow.html | 26 ++++++++++++++++++++++---- 4 files changed, 40 insertions(+), 16 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 48a1599..e5d84f0 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -1,17 +1,10 @@ * { margin: 0px; padding: 0px; - background-color: #2b2727; + /* background-color: #2b2727; */ font-family: Arial, Helvetica, sans-serif; } -#clip { - width: 100%; - height: 370px; - background-color: tomato; - clip-path: polygon(0 0, 100% 0, 100% 7%, 0 2%); - /* position:absolute; - z-index: -1; */ -} + #text1 { margin-top: -320px; height: 10px; @@ -421,6 +414,9 @@ #box > div.active:hover > .para > p { background: #90221e; } +#body { + margin-top: 400px; +} @media only screen and (min-width: 1001px) and (max-width: 1320px) { @@ -443,7 +439,7 @@ } #form { width: 71%; - margin: 80px auto; + margin: 80px 0px; } #box > div { width: 22%; @@ -496,6 +492,7 @@ margin: 0px 10px; } + } @media only screen and (min-width: 50px) and (max-width: 390px) { @@ -544,4 +541,13 @@ #form>div>.g-recaptcha{ width:80px; } + #question { + height: 200px; + } + #question #p { + font-size: 28px; + } + #question p { + font-size: 15px; + } } diff --git a/components/footer.js b/components/footer.js index 4f3bce4..6d07964 100644 --- a/components/footer.js +++ b/components/footer.js @@ -9,7 +9,7 @@ function footer(){
  • Guides
  • Pricing
    •
  • Login
    •  -
  • Join Now
    •  +
  • Join Now
    •
  • FAQ
    •
    diff --git a/components/navbar.js b/components/navbar.js index f7ca78d..a14a6d3 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -31,7 +31,7 @@ function navbar() {
  • Learn
  • Pricing
  • Login
    • -
  • Join Now
    • +
  • Join Now
    • + + Document - -
    +
    +
    @@ -226,8 +228,24 @@
    J.
    - + - \ No newline at end of file + + + + From d6daa850bad60abcea3eb7c17cc0900394c9c370 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Thu, 31 Mar 2022 09:17:08 +0530 Subject: [PATCH 31/62] Complete learn page --- components/navbar.js | 16 +- components/path.js | 36 ++++- index.html | 14 +- learn.html | 4 + scripts/index.js | 24 ++- scripts/learn-page.js | 51 ++---- styles/learn-page.css | 29 ++-- styles/main.css | 357 +++++++++++++++++++++--------------------- styles/nav.css | 11 +- 9 files changed, 284 insertions(+), 258 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index f7ca78d..727950f 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,6 @@ function navbar() { - return `
    + return `
    +
    `; } -export default navbar; +const hamburgerClick = () => { + const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); +}; + +export { navbar, hamburgerClick }; diff --git a/components/path.js b/components/path.js index ed810a6..d19bfaf 100644 --- a/components/path.js +++ b/components/path.js @@ -48,11 +48,11 @@ const appedData = (data, parent) => { dot.append(span); let bar_left = getElem("div", "bar left"); - let left_progress = getElem("div", "progress"); + let left_progress = getElem("div", `progress ${el.class}`); bar_left.append(left_progress); let bar_right = getElem("div", "bar right"); - let right_progress = getElem("div", "progress"); + let right_progress = getElem("div", `progress ${el.class}`); bar_right.append(right_progress); let desc = getElem("div", "desc"); @@ -74,5 +74,35 @@ const appedData = (data, parent) => { parent.append(p_box); }); }; +const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); +}; -export { pathContainer, appedData }; +const addEventToBox = () => { + const p_box = document.querySelectorAll(".p-box"); + p_box.forEach((el) => { + updateProgress(el); + }); +}; +export { pathContainer, appedData, addEventToBox }; diff --git a/index.html b/index.html index cd0cfd1..594e4c8 100644 --- a/index.html +++ b/index.html @@ -139,19 +139,7 @@

    - + diff --git a/scripts/index.js b/scripts/index.js index 31162ff..5c0ccb5 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,13 @@ +import { navbar, hamburgerClick } from "../components/navbar.js"; import { slider } from "../components/slider.js"; import { appendTwitterData } from "./slides.js"; +import footer from "../components/footer.js"; + +document.querySelector(".header").innerHTML = navbar(); +document.querySelector("#footer").innerHTML = footer(); + +// Click Event on Hamburger Icon +hamburgerClick(); // Slider Container let slider_con = document.querySelector(".slider-container"); @@ -18,6 +26,7 @@ if (screen_size >= 1030) { appendTwitterData(small_data); } +// Slider JS let slides = [...document.querySelectorAll(".slide")]; let i = 0; @@ -62,10 +71,11 @@ let next = document.getElementById("next"); prev.addEventListener("click", prevItem); next.addEventListener("click", nextItem); -let resizeTimeout; -window.addEventListener("resize", function (event) { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(function () { - window.location.reload(); - }, 1500); -}); +// On window resizing Event +// let resizeTimeout; +// window.addEventListener("resize", function (event) { +// clearTimeout(resizeTimeout); +// resizeTimeout = setTimeout(function () { +// window.location.reload(); +// }, 1500); +// }); diff --git a/scripts/learn-page.js b/scripts/learn-page.js index f3701e1..e5b13de 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,8 +1,17 @@ -import { pathContainer, appedData } from "../components/path.js"; -import navbar from "../components/navbar.js"; +import { pathContainer, appedData, addEventToBox } from "../components/path.js"; +import { navbar, hamburgerClick } from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); header.innerHTML = navbar(); +footer_container.innerHTML = footer(); + +// Click Event on Hamburger Icon +hamburgerClick(); +// Path-Container Top Component let map_svg = localStorage.getItem("map_svg"); let topic_icon = localStorage.getItem("topic_icon"); let path_conatiner = document.querySelector(".path-container"); @@ -18,42 +27,14 @@ elective_conatiner.innerHTML = pathContainer( "Focus on a specific area in web development." ); +// Path-Container bottom Component let learn_data = JSON.parse(localStorage.getItem("learn_data")); let path_bottom = document.querySelector(".path-container > .p-bottom"); - -appedData(learn_data, path_bottom); let elective_bottom = document.querySelector(".elective-container > .p-bottom"); let elective_data = JSON.parse(localStorage.getItem("elective_data")); -appedData(elective_data, elective_bottom); - -// console.log(elective_bottom); -const updateProgress = (item) => { - let counter = 0; - let numb = item.querySelector(".numb>p"); - let id = setInterval(() => { - if (counter == 100) { - let right_div = item.querySelector(".bar.right"); - right_div.classList.add("reverse"); - let left_div = item.querySelector(".bar.left"); - left_div.classList.add("reverse-left"); - let innerId = setInterval(() => { - if (counter == 0) { - clearInterval(innerId); - } else { - counter -= 1; - numb.textContent = counter + "%"; - } - }, 20); - clearInterval(id); - } else { - counter += 1; - numb.textContent = counter + "%"; - } - }, 20); -}; +appedData(learn_data, path_bottom); +appedData(elective_data, elective_bottom); -const p_box = document.querySelectorAll(".p-box"); -p_box.forEach((el) => { - updateProgress(el); -}); +// Add Event on every p_box +addEventToBox(); diff --git a/styles/learn-page.css b/styles/learn-page.css index 4fb5079..9d3491f 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -10,6 +10,9 @@ padding-top: 40px; background-color: #222222; } +.elective-container { + padding-bottom: 40px; +} .p-top, .p-bottom { @@ -39,6 +42,7 @@ margin-top: 20px; border-top: 1px solid #ffffff69; padding-top: 20px; + justify-content: center; } .p-bottom .p-box { max-width: 303px; @@ -130,36 +134,29 @@ -webkit-border-radius: 100%; clip: rect(0px, 100px, 200px, 0px); } -.circle .bar .progress, -.dot span { +.circle .bar .progress { background: #4158d0; } -.circle .bar .progress, -.dot span.orange { +.circle .bar .progress { background: #c63528; } -.circle .bar .progress, -.dot span.js { +.circle .bar .progress.js { background: #b3911c; } -.circle .bar .progress, -.dot span.css { +.circle .bar .progress.css { background: #278cc7; } -.circle .bar .progress, -.dot span.node { +.circle .bar .progress.node { background: #00873a; } -.circle .bar .progress, -.dot span.react { +.circle .bar .progress.react { background: #008697; } -.circle .bar .progress, -.dot span.vue { +.circle .bar .progress.vue { background: #00bb83; } -.circle .bar .progress, -.dot span.angular { + +.circle .bar .progress.angular { background: #ff002f; } .circle .left .progress { diff --git a/styles/main.css b/styles/main.css index 9037721..955d04b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,37 +1,36 @@ -body{ - margin: 0; - padding: 0; - background: #222; - color: #e6e6e6; - font-family: Open Sans,sans-serif; - font-size: 16px; - /* line-height: 1.5; */ -} -*{ - box-sizing: border-box; - +body { + margin: 0; + padding: 0; + background: #222; + color: #e6e6e6; + font-family: Open Sans, sans-serif; + font-size: 16px; + /* line-height: 1.5; */ +} +* { + box-sizing: border-box; } #banner { - width: 100%; - /* margin-top: 100px; */ - height: 100vh; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - /* position: absolute; */ + width: 100%; + /* margin-top: 100px; */ + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + /* position: absolute; */ } #banner video { - width: 100%; - position: absolute; - height: 100%; - object-fit: cover; - margin-top: 80px; - top:0; - left: 0; - pointer-events: none; -} -#banner #contents{ + width: 100%; + position: absolute; + height: 100%; + object-fit: cover; + margin-top: 80px; + top: 0; + left: 0; + pointer-events: none; +} +#banner #contents { position: relative; z-index: 1; max-width: 1000px; @@ -39,188 +38,188 @@ body{ text-align: center; } #banner #contents h1 { - font-size: 55px; + font-size: 55px; } #banner #contents h2 { - font-size: 34px; - margin-top: 0px; - margin-bottom: 15px; -} -#banner button, #join button { - background: #c94f17; - border: none; - border-radius: 40px; + font-size: 34px; + margin-top: 0px; + margin-bottom: 15px; +} +#banner button, +#join button { + background: #c94f17; + border: none; + border-radius: 40px; - color: #fff; - display: block; - font-size: 20px; - line-height: 1.25; - padding: 10px 20px; - text-align: center; - margin-right: 20px; - height: 60px; - width: 250px; - font-weight: bold; - + color: #fff; + display: block; + font-size: 20px; + line-height: 1.25; + padding: 10px 20px; + text-align: center; + margin-right: 20px; + height: 60px; + width: 250px; + font-weight: bold; } #banner a { - text-decoration: none; + text-decoration: none; } #banner #contents div { - display: flex; - margin-left: 25px; + display: flex; + margin-left: 25px; } #icons { - display: flex; - margin: auto; - width: 70%; - margin-top: 30px; - margin-bottom: 30px; - justify-content: space-between; - flex-wrap: wrap; - + display: flex; + margin: auto; + width: 70%; + margin-top: 30px; + margin-bottom: 30px; + justify-content: space-between; + flex-wrap: wrap; } #icons img { - height: 90px; - width: 90px; - margin-top: 10px; - margin-left: 10px; - + height: 90px; + width: 90px; + margin-top: 10px; + margin-left: 10px; + object-fit: contain; + transition: transform 0.5s ease; } #icons img:hover { - border: 1px solid #eff; - border-radius: 20px; - padding: 10px; - box-sizing: border-box; - + transform: scale(1.2); + box-sizing: border-box; } #slidebar { - background: #3a7bd5; /* fallback for old browsers */ -background: -webkit-linear-gradient(to right, #3a6073, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */ -background: linear-gradient(to right, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ -width: 100%; -height: 600px; -margin-top: 10px; - + background: #3a7bd5; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + width: 100%; + height: 600px; + margin-top: 10px; } #join { - height: 700px; - width: 100%; - box-sizing: border-box; - background-image:radial-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.8)), url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); - background-size: cover; - position: absolute; - overflow: hidden; - align-items: center; - display: flex; - justify-content: center; - margin-bottom: 50px; - text-align: center; - + height: 700px; + width: 100%; + box-sizing: border-box; + background-image: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), + url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); + background-size: cover; + position: absolute; + overflow: hidden; + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; + text-align: center; } #join div { - position: relative; - z-index: 1; - text-align: center; - margin: auto; - width: 40%; + position: relative; + z-index: 1; + text-align: center; + margin: auto; + width: 40%; } -#join h1{ - font-size: 35px; - line-height: 50px; +#join h1 { + font-size: 35px; + line-height: 50px; } #join button:hover { - background-color: chocolate; + background-color: chocolate; } -#bootcamp{ - margin-top: 700px; - height: 350px; - width: 100%; - text-align: center; - /* display: flex; */ - justify-content: center; - box-sizing: border-box; - align-items: center; - background-image:url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); +#bootcamp { + margin-top: 700px; + height: 350px; + width: 100%; + text-align: center; + /* display: flex; */ + justify-content: center; + box-sizing: border-box; + align-items: center; + background-image: url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); } #bootcamp img { - height: auto; - width: 240px; - margin-top: 30px; + height: auto; + width: 240px; + margin-top: 30px; } #bootcamp a { - color: #dd625e; - /* margin-top: 15px; */ + color: #dd625e; + /* margin-top: 15px; */ } #bootcamp a:hover { - color: chocolate; + color: chocolate; } #bootcamp p { - line-height: 27px; - margin-bottom: 15px; + line-height: 27px; + margin-bottom: 15px; } - -@media all and (max-width:768px) and (min-width:381px){ - #banner { - background-size:auto, cover; - z-index: 2; - object-fit: cover; - height: 100vh; - background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); - } - #banner video { - display: none; - - } - #join{ - height: 500px; - text-align: center; - } - #join div:first-child{ - width: 80%; - text-align: center; - } - /* #join button { +@media all and (max-width: 768px) and (min-width: 381px) { + #banner { + background-size: auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + } + #join { + height: 500px; + text-align: center; + } + #join div:first-child { + width: 80%; + text-align: center; + } + /* #join button { background-color: #222; } */ - #bootcamp{ - margin-top: 500px; - } - -} -@media all and (min-width:50px) and (max-width:380px){ - #banner { - background-size:auto, cover; - z-index: 2; - object-fit: cover; - height: 100vh; - - background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); - } - #banner video { - display: none; + #bootcamp { + margin-top: 500px; + } +} +@media all and (min-width: 50px) and (max-width: 380px) { + #banner { + background-size: auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; - } - #banner #contents h1 { - font-size: 30px; - /* color: #222; */ - } - #banner #contents h2 { - font-size: 15px; - /* margin-top: -15px; */ - } - #contents>div { - display: flex; - flex-direction: column; - } - #contents button { - margin-top: 20px; - } - #join div:first-child { - width: 90%; - } - #join div { - margin: 20px; - } -} \ No newline at end of file + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + } + #banner #contents h1 { + font-size: 30px; + /* color: #222; */ + } + #banner #contents h2 { + font-size: 15px; + /* margin-top: -15px; */ + } + #contents > div { + display: flex; + flex-direction: column; + } + #contents button { + margin-top: 20px; + } + #join div:first-child { + width: 90%; + } + #join div { + margin: 20px; + } +} diff --git a/styles/nav.css b/styles/nav.css index 04b8dd0..118c54c 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -6,10 +6,13 @@ z-index: 99; position: relative; } - -.header-wrap { +.wrap { background: rgba(0, 0, 0, 0.7); +} +.header-wrap { + max-width: 1180px; padding: 14px 112px; + margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; @@ -79,6 +82,10 @@ @media all and (max-width: 768px) and (min-width: 381px) { .header-wrap { padding: 14px; + max-width: 592px; + } + .header-wrap .right ul li a { + margin: 0 6px; } } From da72248b3ae35058f0f59ed3085f669c6d79bbe7 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 10:42:07 +0530 Subject: [PATCH 32/62] Modify4 --- icon1.html | 174 +---------------------------------------------- scripts/icon1.js | 23 ------- 2 files changed, 3 insertions(+), 194 deletions(-) diff --git a/icon1.html b/icon1.html index 1b5bc90..a6dd7b4 100644 --- a/icon1.html +++ b/icon1.html @@ -150,161 +150,7 @@ } -.circular { - height: 200px; - width: 200px; - position: relative; - /* border: 1px solid #fff; */ -} -.circular .inner, -.circular .outer, -.circular .circle { - position: absolute; - z-index: 6; - height: 100%; - width: 100%; - border-radius: 100%; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); -} -.circular .inner { - top: 50%; - left: 50%; - height: 180px; - width: 180px; - margin: -40px 0 0 -40px; - /* background-color: ; */ - border-radius: 100%; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); -} -.circular .circle { - z-index: 1; - box-shadow: none; -} -.circular .numb { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10; - font-size: 18px; - font-weight: 500; - color: #eff; -} -.circular .bar { - position: absolute; - height: 100%; - width: 100%; - /* background: #fff; */ - -webkit-border-radius: 100%; - clip: rect(0px, 100px, 100px, 50px); -} -.circle .bar .progress { - position: absolute; - height: 100%; - width: 100%; - -webkit-border-radius: 100%; - clip: rect(0px, 50px, 100px, 0px); -} -.circle .bar .progress, -.dot span { - background: #4158d0; -} -.circle .left .progress { - z-index: 1; - animation: left 1s linear both; -} -@keyframes left { - 100% { - transform: rotate(180deg); - } -} -.circle .right { - z-index: 3; - transform: rotate(180deg); -} -.circle .reverse { - /* transform: rotate(0deg); */ -} -.circle .right .progress { - animation: right 1s linear both; - animation-delay: 1s; - /* animation: rightRreverse 4s linear both; - animation-delay: 16s; */ -} -@keyframes right { - 100% { - transform: rotate(180deg); - } -} - -.circle .dot { - z-index: 2; - position: absolute; - left: 50%; - top: 50%; - width: 50%; - height: 10px; - margin-top: -5px; - animation: dot 2s linear both; - transform-origin: 0% 50%; -} -.circle .dot span { - position: absolute; - right: 0; - width: 10px; - height: 10px; - border-radius: 100%; -} -.circle .reverse-left .progress { - animation: leftRreverse 1s linear both; - animation-delay: 1s; -} -@keyframes leftRreverse { - 0% { - transform: rotate(180deg); - } - 100% { - transform: rotate(0deg); - } -} -.circle .reverse .progress { - animation: rightRreverse 1s linear both; -} -@keyframes rightRreverse { - 0% { - transform: rotate(180deg); - } - 100% { - transform: rotate(0deg); - } -} -@keyframes dot { - 0% { - transform: rotate(-90deg); - } - 50% { - transform: rotate(90deg); - z-index: 4; - } - 100% { - transform: rotate(270deg); - z-index: 4; - } -} -@keyframes dot-reverse { - 0% { - transform: rotate(-90deg); - } - 50% { - transform: rotate(90deg); - z-index: 4; - } - 100% { - transform: rotate(270deg); - z-index: 4; - } -} #btn:hover { background-color: #8a8a8a; } @@ -378,24 +224,10 @@
    -
    -
    -
    -
    0%
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    + + -
    +

    { - if (counter == 100) { - let right_div = document.querySelector(".bar.right"); - right_div.classList.add("reverse"); - let left_div = document.querySelector(".bar.left"); - left_div.classList.add("reverse-left"); - let innerId = setInterval(() => { - if (counter == 0) { - clearInterval(innerId); - } else { - counter -= 1; - - numb.textContent = counter + "%"; - } - }, 20); - clearInterval(id); - } else { - counter += 1; - numb.textContent = counter + "%"; - } -}, 20); \ No newline at end of file From 44a8f3ca1f2aad38aec3b2f77f1ea50370e3922f Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Thu, 31 Mar 2022 12:09:42 +0530 Subject: [PATCH 33/62] join complete --- Styles/joinnow.css | 1 + joinnow.html | 8 +++- scripts/joinnow.js | 109 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 94 insertions(+), 24 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 48a1599..8a75830 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -545,3 +545,4 @@ width:80px; } } + diff --git a/joinnow.html b/joinnow.html index 153e511..35bcd4c 100644 --- a/joinnow.html +++ b/joinnow.html @@ -115,30 +115,36 @@

    Register for a Monthly Account

    Email (you'll need to confirm this email address)

    +

    First Name

    +

    Last Name

    +

    Password

    +

    Password Again

    +

    Choose Your Payment Method


    +

    - +

    By clicking Start Learning, you agree to our Terms of Service and Privacy Policy.

    diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 184d4b0..594cce1 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -23,33 +23,96 @@ function colorChange(item) { document.querySelector("#form").addEventListener("submit",myFormSubmit); var signinobj=JSON.parse(localStorage.getItem("registeredIds")) || []; + + +let a=document.getElementById("erremail") +let b=document.getElementById("errfname") +let c=document.getElementById("errlname") +let d=document.getElementById("errpassword") +let e=document.getElementById("errpasswordagain") +let f=document.getElementById("errcardname") +let g=document.getElementById("errcheck") //console.log(signinArr); function myFormSubmit(event){ - event.preventDefault(); + event.preventDefault(); + + if + ( + (document.getElementById("email").value=="")|| + (document.getElementById("first_name").value=="")|| + (document.getElementById("last_name").value=="")|| + (document.getElementById("password").value=="")|| + (document.getElementById("password_again").value=="")|| + (document.getElementById("placeholder").value=="")|| + (document.getElementById("card_num").value=="") + ) + { + a.innerText="Please enter a valid email." + a.style.color="red"; + a.style.fontStyle="italic"; + a.style.fontSize="16px"; + + b.innerText="Please enter your first name." + b.style.color="red"; + b.style.fontStyle="italic"; + b.style.fontSize="16px"; + + c.innerText="Please enter your last name." + c.style.color="red"; + c.style.fontStyle="italic"; + c.style.fontSize="16px"; + + d.innerText="Please enter correct password" + d.style.color="red"; + d.style.fontStyle="italic"; + d.style.fontSize="16px"; + + e.innerText="Please enter a matching password." + e.style.color="red"; + e.style.fontStyle="italic"; + e.style.fontSize="16px"; + + f.innerText="Your card number is incomplete." + f.style.color="red"; + f.style.fontStyle="italic"; + f.style.fontSize="16px"; + + g.innerText="Please check the box." + g.style.color="red"; + g.style.fontStyle="italic"; + g.style.fontSize="16px"; + + } + + else{ + var signinobj=[{ - email:document.querySelector("#email").value, - fname:document.querySelector("#first_name").value, - lname:document.querySelector("#last_name").value, - password:document.querySelector("#password").value, - password_again:document.querySelector("#password_again").value, - placeholder:document.querySelector("#placeholder").value, - card_num:document.querySelector("#card_num").value, - }]; - document.querySelector("#email").value=""; - document.querySelector("#first_name").value=""; - document.querySelector("#last_name").value=""; - document.querySelector("#password").value=""; - document.querySelector("#password_again").value=""; - document.querySelector("#placeholder").value=""; - document.querySelector("#card_num").value=""; - - - localStorage.setItem("registeredIds",JSON.stringify(signinobj)); - - - window.location.href="https://frontendmasters.com/" + email:document.querySelector("#email").value, + fname:document.querySelector("#first_name").value, + lname:document.querySelector("#last_name").value, + password:document.querySelector("#password").value, + password_again:document.querySelector("#password_again").value, + placeholder:document.querySelector("#placeholder").value, + card_num:document.querySelector("#card_num").value, + }]; + document.querySelector("#email").value=""; + document.querySelector("#first_name").value=""; + document.querySelector("#last_name").value=""; + document.querySelector("#password").value=""; + document.querySelector("#password_again").value=""; + document.querySelector("#placeholder").value=""; + document.querySelector("#card_num").value=""; - } + + localStorage.setItem("registeredIds",JSON.stringify(signinobj)); + + window.location.href="https://frontendmasters.com/" + } + + + } + + document.querySelector("#first").addEventListener("click",changeCol) document.querySelector("#sec").addEventListener("click",changeCol1) From b0a2d131ba2f18a855ea65b5df9e3f98fd29a12a Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 13:25:44 +0530 Subject: [PATCH 34/62] Login Changes --- joinnow.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/joinnow.html b/joinnow.html index 3e56eb4..75e3524 100644 --- a/joinnow.html +++ b/joinnow.html @@ -116,27 +116,27 @@

    Register for a Monthly Account

    Email (you'll need to confirm this email address)

    - +

    First Name

    - +

    Last Name

    - +

    Password

    - +

    Password Again

    - +

    Choose Your Payment Method


    - - MM/YY CVC"> +
    From 6850d476ab6c420e6cf1f47b25df8fb1fe5fd4d1 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 13:32:15 +0530 Subject: [PATCH 35/62] Fixed1 --- styles/main.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/styles/main.css b/styles/main.css index a278c74..dadc341 100644 --- a/styles/main.css +++ b/styles/main.css @@ -91,11 +91,13 @@ body{ } #icons img:hover { - border: 1px solid #eff; - border-radius: 20px; - padding: 10px; + /* border: 1px solid #eff; */ + /* border-radius: 20px; */ + /* padding: 10px; */ box-sizing: border-box; opacity: 1; + transform: scale(1.2); + /* box-sizing: border-box; */ } #slidebar { From dba106bc1bbc719e16d73c140039a48d6e24ae03 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 13:43:36 +0530 Subject: [PATCH 36/62] Learn PAge --- components/path.js | 108 +++++++++++++++ learn.html | 135 ++++--------------- scripts/learn-page.js | 46 +++++++ styles/learn-page.css | 304 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 484 insertions(+), 109 deletions(-) create mode 100644 components/path.js create mode 100644 scripts/learn-page.js create mode 100644 styles/learn-page.css diff --git a/components/path.js b/components/path.js new file mode 100644 index 0000000..eb37f8d --- /dev/null +++ b/components/path.js @@ -0,0 +1,108 @@ +const pathContainer = (svg, title, msg) => { + return `
    + ${svg} +

    ${title}

    +

    + ${msg} +

    +
    +
    +
    + `; + }; + + const getElem = (tag_name, class_name) => { + let tag = document.createElement(tag_name); + tag.className = class_name; + return tag; + }; + + const appedData = (data, parent) => { + parent.innerHTML = null; + data.map((el) => { + let p_box = getElem("div", "p-box"); + + // Progress Bar + let circular = getElem("div", "circular"); + + let inner = getElem("div", "inner"); + + let outer = getElem("div", "outer"); + + let numb = getElem("div", `numb ${el.class}`); + let numb_img_box = getElem("div", "img"); + if (el.img == "") { + numb_img_box.innerHTML = el.icon; + } else { + let img = getElem("img", ""); + img.src = el.img; + numb_img_box.append(img); + } + let p = getElem("p", ""); + p.innerHTML = "0%"; + numb.append(numb_img_box, p); + + let circle = getElem("div", "circle"); + let dot = getElem("div", "dot"); + let span = getElem("div", el.class); + dot.append(span); + + let bar_left = getElem("div", "bar left"); + let left_progress = getElem("div", `progress ${el.class}`); + bar_left.append(left_progress); + + let bar_right = getElem("div", "bar right"); + let right_progress = getElem("div", `progress ${el.class}`); + bar_right.append(right_progress); + + let desc = getElem("div", "desc"); + + let title = getElem("h3", "title"); + title.innerText = el.title; + + let description = getElem("p", ""); + description.innerText = el.desc; + + let btn = getElem("button", el.class); + btn.innerText = "Start"; + + circle.append(dot, bar_left, bar_right); + circular.append(inner, outer, numb, circle); + desc.append(title, description); + + p_box.append(circular, desc, btn); + parent.append(p_box); + }); + }; + const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); + }; + + const addEventToBox = () => { + const p_box = document.querySelectorAll(".p-box"); + p_box.forEach((el) => { + updateProgress(el); + }); + }; + export { pathContainer, appedData, addEventToBox }; \ No newline at end of file diff --git a/learn.html b/learn.html index 33c47c1..88dcee0 100644 --- a/learn.html +++ b/learn.html @@ -12,121 +12,38 @@ Paths to Learning JavaScript, React, and More Skills You Need. - - + + + + +
    -
    -
    - - - - - - - - - - - - - - - - - - -

    Learning Paths

    -

    - Guided paths to expand your abilities as a well-rounded engineer! -

    -
    -
    -
    -
    -
    -
    -
    0%
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Beginner

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, - dolorum. -

    -
    - -
    -
    -
    +
    + +
    + + + + - - - + + \ No newline at end of file diff --git a/scripts/learn-page.js b/scripts/learn-page.js new file mode 100644 index 0000000..4fa7d32 --- /dev/null +++ b/scripts/learn-page.js @@ -0,0 +1,46 @@ +import { pathContainer, appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); +// Click Event on Hamburger Icon +// hamburgerClick(); + +// Path-Container Top Component +let map_svg = localStorage.getItem("map_svg"); +let topic_icon = localStorage.getItem("topic_icon"); +let path_conatiner = document.querySelector(".path-container"); +let elective_conatiner = document.querySelector(".elective-container"); +path_conatiner.innerHTML = pathContainer( + map_svg, + "Learning Paths", + "Guided paths to expand your abilities as a well-rounded engineer!" +); +elective_conatiner.innerHTML = pathContainer( + topic_icon, + "Topic Paths:", + "Focus on a specific area in web development." +); + +// Path-Container bottom Component +let learn_data = JSON.parse(localStorage.getItem("learn_data")); +let path_bottom = document.querySelector(".path-container > .p-bottom"); +let elective_bottom = document.querySelector(".elective-container > .p-bottom"); +let elective_data = JSON.parse(localStorage.getItem("elective_data")); + +appedData(learn_data, path_bottom); +appedData(elective_data, elective_bottom); + +// Add Event on every p_box +addEventToBox(); \ No newline at end of file diff --git a/styles/learn-page.css b/styles/learn-page.css new file mode 100644 index 0000000..d6c23a5 --- /dev/null +++ b/styles/learn-page.css @@ -0,0 +1,304 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; + } + .path-container, + .elective-container { + width: 100%; + padding-top: 40px; + background-color: #222222; + } + .elective-container { + padding-bottom: 40px; + } + + .p-top, + .p-bottom { + max-width: 950px; + margin: auto; + } + + .p-top { + text-align: center; + color: #fff; + } + .p-top svg { + width: 130px; + } + .p-top h1 { + margin-bottom: 15px; + } + .p-top h2 { + font-size: 16px; + font-weight: 400; + } + + .p-bottom { + display: flex; + gap: 20px; + flex-wrap: wrap; + margin-top: 20px; + border-top: 1px solid #ffffff69; + padding-top: 20px; + justify-content: center; + } + .p-bottom .p-box { + max-width: 303px; + background-color: #383838; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, + rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + padding: 20px; + text-align: center; + } + + .circular { + height: 200px; + width: 200px; + position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; + } + .circular .inner, + .circular .outer, + .circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .inner { + height: 164px; + width: 164px; + background-color: #222222; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .circle { + z-index: 1; + box-shadow: none; + } + .circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: #4158d0; + display: flex; + align-items: center; + justify-content: center; + } + .circular .numb.orange { + color: #c63528; + } + .circular .numb p { + font-size: 70px; + color: #fff; + } + .circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; + } + .circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; + } + + .circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 220px, 220px, 100px); + } + .circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 200px, 0px); + } + .circle .bar .progress { + background: #4158d0; + } + .circle .bar .progress { + background: #c63528; + } + .circle .bar .progress.js { + background: #b3911c; + } + .circle .bar .progress.css { + background: #278cc7; + } + .circle .bar .progress.node { + background: #00873a; + } + .circle .bar .progress.react { + background: #008697; + } + .circle .bar .progress.vue { + background: #00bb83; + } + + .circle .bar .progress.angular { + background: #ff002f; + } + .circle .left .progress { + z-index: 1; + animation: left 1s linear both; + } + @keyframes left { + 100% { + transform: rotate(180deg); + } + } + .circle .right { + z-index: 3; + transform: rotate(180deg); + } + .circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ + } + @keyframes right { + 100% { + transform: rotate(180deg); + } + } + + .circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; + display: none; + } + .circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; + } + .circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; + } + + @keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + .circle .reverse .progress { + animation: rightRreverse 1s linear both; + } + @keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + @keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + @keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + + .desc { + padding: 0 10px; + color: #fff; + height: 157px; + line-height: 25px; + } + .desc .title { + font-size: 27px; + margin-bottom: 20px; + } + + .desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; + } + + .p-box button { + margin: 0 auto; + min-width: 175px; + font-size: 14px; + padding: 10px 20px; + border-radius: 20px; + border: none; + color: #fff; + cursor: pointer; + } + .p-box button.orange { + background-color: #c63528; + } + .p-box button.js { + background-color: #b3911c; + } + .p-box button.css { + background-color: #278cc7; + } + .p-box button.node { + background-color: #00873a; + } + .p-box button.react { + background-color: #008697; + } + .p-box button.vue { + background-color: #00bb83; + } + .p-box button.angular { + background-color: #ff002f; + } \ No newline at end of file From a696b5918765edff51aec94385a222f764bfe59d Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 15:09:56 +0530 Subject: [PATCH 37/62] Fixed2 --- components/navbar.js | 2 +- icon1.html | 228 +++---------------------------------------- scripts/data.js | 3 +- scripts/icon1.js | 11 +++ styles/icon.css | 211 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 241 insertions(+), 214 deletions(-) create mode 100644 styles/icon.css diff --git a/components/navbar.js b/components/navbar.js index a14a6d3..4bd6f30 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -16,7 +16,7 @@ function navbar() {
  • Learn
  • Pricing
  • Login
    • -
  • Join Now
    • +
  • Join Now
    • diff --git a/icon1.html b/icon1.html index a6dd7b4..24d81c5 100644 --- a/icon1.html +++ b/icon1.html @@ -7,219 +7,23 @@ Document -
    diff --git a/scripts/data.js b/scripts/data.js index b84d64d..cc9009d 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -636,4 +636,5 @@ let twittweData = [ ]; localStorage.setItem("twitter_data", JSON.stringify(twittweData)); localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); - localStorage.setItem("t_small_data", JSON.stringify(small_data)); \ No newline at end of file + localStorage.setItem("t_small_data", JSON.stringify(small_data)); + \ No newline at end of file diff --git a/scripts/icon1.js b/scripts/icon1.js index 78b17f6..a189edb 100644 --- a/scripts/icon1.js +++ b/scripts/icon1.js @@ -73,6 +73,17 @@ var icon1arr = [ time:"4 hours, 6 minutes " } ] +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc: "Write Professional, Modern JavaScript", +icon: "", +img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", +title: "JavaScript" + + } +] // background: #181818; let main=document.getElementById("main") import {display} from "../components/display.js" diff --git a/styles/icon.css b/styles/icon.css new file mode 100644 index 0000000..3525543 --- /dev/null +++ b/styles/icon.css @@ -0,0 +1,211 @@ +#grid { + width: 100%; + height: 400px; + align-items: center; + display: flex; + justify-content: center; + background-image: url("https://www.xmple.com/wallpaper/graph-paper-green-grid-1920x1080-c2-071c0b-0f4719-l2-1-50-a-0-f-20.svg"); +} + #grid + div{ + width: 90%; + margin: auto; + padding-bottom: 15px; + border-bottom: 1px solid #e6e6e6;; + color: #e6e6e6; + text-align: center; + line-height: 45px; + margin-top: 50px; + + } #grid + div svg { + /* font-size: 100px; + */ + height: 100px; + width: 100px; + + /* background-color: orange; */ + } + #grid + div h1 { + font-size: 46px; + } + #grid + div p { + font-size: 21px; + font-weight: 400; + } + #div { + display: flex; + background-color: black; + height: 400px; + width: 90%; + margin: 25px auto; + /* padding: 20px 0px; */ + box-sizing: border-box; + } + #main h3 { + color: #dd625e; + font-size: 30px; + } + #main h3:hover { + transition: color .2s; + + } + #img { + opacity: .5; + height: 400px; + } + #img1 { + border-radius: 50%; + height: 70px; + width: 70px; + } + #div1 { + padding: 25px 20px; + } + h4 { + color: #e6e6e6; + + } + #p { + color: #8a8a8a; + + } + #div2 { + margin-top: 15px; + text-align: left; + margin-bottom: 15px; + } + #div3 { + margin-top:12.5px ; + margin-left: 20px; + line-height: 25px; + font-size: 20px; + } + #p1 { + color: #e6e6e6; + line-height: 25px; + margin-bottom: 15px; + + } + #p2 { + color: #8a8a8a; + margin-bottom: 35px; + + + } +#main h3:hover { + color: #8a8a8a; + + } + #div5 { + display: flex; + } + #div4 { + /* background: wheat; */ + color: #222; + margin-left: 5px; + padding: 0 4px; + + + } + #btn { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 200px; +font-weight: bold; +/* background: #c94f17; */ + + } + #btn1 { + background-color: #c02d28; + border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 170px; +font-weight: bold; + } + + + + #btn:hover { + background-color: #8a8a8a; + } + #btn1:hover { + background-color: #8a8a8a; + } + #div:hover #img { + opacity: 1; + } + + @media all and (max-width:768px) and (min-width:381px){ +#img { + position: absolute; +} + #div1 { + position: relative; + margin-left: 100px; + background-color: #000000d0; +} +#div { + background-color: transparent; + +} +#main h3 { + font-size: 25px; +} +#p2 { + margin-bottom: 15px; +} +} +@media all and (min-width: 50px) and (max-width: 380px) { + + #img { + position: absolute; + height: 500px; +} + #div1 { + position: relative; + margin-left: 20px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 500px; + +} +#main h3 { + font-size: 25px; +} +#p2 { + margin-bottom: 15px; +} +#div6 { + flex-direction: column; + /* text-align: center; */ +} +#btn1 { + margin-top: 15px; + width: 200px; +} +} + +#js { + height: 100px; + margin-left: -100px; + width: 100px; + opacity: .5; +} \ No newline at end of file From 2932c980fd0064a74026203706f344be11a9838a Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Thu, 31 Mar 2022 15:46:18 +0530 Subject: [PATCH 38/62] issues --- Login.html | 183 +++++++++++++++++++++---------------------- components/navbar.js | 10 +-- index.html | 51 ------------ 3 files changed, 90 insertions(+), 154 deletions(-) diff --git a/Login.html b/Login.html index ccc2252..efad889 100644 --- a/Login.html +++ b/Login.html @@ -1,131 +1,126 @@ - - - - + + + + Document - - - - - + +
    -
    -
    -
    -
    -
    - Remember me
    - - Forgot your password? +
    +
    +
    +
    +
    + Remember me
    + + Forgot your password?
    - + - + diff --git a/components/navbar.js b/components/navbar.js index 727950f..b622597 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -52,12 +52,4 @@ function navbar() {
    `; } -const hamburgerClick = () => { - const hamburger = document.querySelector(".menu"); - const navMenu = document.querySelector(".mobile"); - hamburger.addEventListener("click", function () { - navMenu.classList.toggle("active"); - }); -}; - -export { navbar, hamburgerClick }; +export navbar ; diff --git a/index.html b/index.html index a11c544..b69af6c 100644 --- a/index.html +++ b/index.html @@ -62,57 +62,6 @@

    with In-Depth, Modern
    Front-End Engineering Courses

    -
    - - JS - - - React - - - TS - - Node - Vue3 - Angular13 - CSS - Core - Webpack -
    - From bc2107242b3dc996fca8c69256e6fe70630c9b7d Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 21:22:11 +0530 Subject: [PATCH 39/62] Modify5 --- components/display.js | 16 +- icon1.html | 13 +- scripts/data.js | 1468 +++++++++++++++++++++++------------------ scripts/icon1.js | 45 +- styles/icon.css | 355 +++++++++- 5 files changed, 1232 insertions(+), 665 deletions(-) diff --git a/components/display.js b/components/display.js index 9ffe9dc..2e664ae 100644 --- a/components/display.js +++ b/components/display.js @@ -1,6 +1,9 @@ function display(data,main){ data.map(function(el){ + let plus1 = document.createElement("div") + plus1.setAttribute("class","plus1") + plus1.innerText="+" let div = document.createElement("div"); div.setAttribute("id","div") let div1 = document.createElement("div"); @@ -44,6 +47,14 @@ function display(data,main){ btn.setAttribute("id","btn") btn1.setAttribute("id","btn1") let div6 = document.createElement("div") + let box = document.createElement("div") + let h6 = document.createElement("h6") + h6.innerText=el.head1 + let box_p = document.createElement("p") + + box_p.innerText=el.de + box.setAttribute("id","box") + box.append(h6,box_p) div6.append(btn,btn1) div6.style.display="flex" div6.setAttribute("id","div6") @@ -54,10 +65,13 @@ function display(data,main){ let displayArr=[]; displayArr.push(el) }) + btn1.addEventListener("click",function(){ window.location.href="joinnow.html" }) - main.append(div) + document.getElementById("line").append(plus1) + main.append(box,div) + }) } diff --git a/icon1.html b/icon1.html index 24d81c5..3db51a2 100644 --- a/icon1.html +++ b/icon1.html @@ -8,7 +8,7 @@ - +
    - - +
    + +
    + +
    + +
    +
    diff --git a/scripts/data.js b/scripts/data.js index cc9009d..734f7ec 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -1,640 +1,830 @@ let twittweData = [ - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "AJ Thompson", - user_name: "@ajthompson", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Dave Halewood", - user_name: "@halewood", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - ]; - - let mid_data = [ - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Bhargav", - user_name: "@CodeWithBhargav", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Kevin Powell", - user_name: "@kevinjPowell", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", - }, - ], - ]; - - let small_data = [ - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - ], - ]; - localStorage.setItem("twitter_data", JSON.stringify(twittweData)); - localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); - localStorage.setItem("t_small_data", JSON.stringify(small_data)); - \ No newline at end of file + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "AJ Thompson", + user_name: "@ajthompson", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Dave Halewood", + user_name: "@halewood", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let mid_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let small_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let learn_data = [ + { + title: "Beginner", + desc: "Your Path to Becoming a Career-Ready Web Developer!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Professional", + desc: "Go From Professional Web Developer to Lead Engineer", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Expert", + desc: "Mind-Expanding Web Development Techniques to Emerging APIs in the Web Browser", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Computer Science", + desc: "Learning Computer Science with JavaScript", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Fullstack", + desc: "Expand Your Abilities and Master the Server", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Design to Code", + desc: "Make Your Designs Come to Life Through Code!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, +]; + +let map_svg = ` + + + + + + + + + + + + + + + + +`; + +let topic_icon = ``; + +let elective_data = [ + { + title: "JavaScript", + desc: "Write Professional, Modern JavaScript", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", + icon: ``, + class: "js", + }, + { + title: "CSS", + desc: "Learn CSS, from Laying Out Websites to Performant Animations", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/dj/370768/png/370768.png", + icon: ``, + class: "css", + }, + { + title: "Node.js", + desc: "Build Web APIs and Applications with Node.js", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/kk/353117/png/node-node-js-logo.png", + icon: ``, + class: "node", + }, + { + title: "React.js", + desc: "Be Productive with React.js, Today's Most Popular Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/tx/353401/png/react-logo.png", + icon: ``, + class: "react", + }, + { + title: "Vue.js", + desc: "Learn Vue.js, An Easy to Pick Up and Powerful Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ep/353380/png/vuejs-logo.png", + icon: ``, + class: "vue", + }, + { + title: "Angular", + desc: "Learn Angular, a TypeScript-based web application framework led by Google", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/mm/370537/png/370537.png", + icon: ``, + class: "angular", + }, +]; + +localStorage.setItem("elective_data", JSON.stringify(elective_data)); +localStorage.setItem("topic_icon", topic_icon); +localStorage.setItem("map_svg", map_svg); +localStorage.setItem("learn_data", JSON.stringify(learn_data)); +localStorage.setItem("twitter_data", JSON.stringify(twittweData)); +localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); +localStorage.setItem("t_small_data", JSON.stringify(small_data)); \ No newline at end of file diff --git a/scripts/icon1.js b/scripts/icon1.js index a189edb..86aa016 100644 --- a/scripts/icon1.js +++ b/scripts/icon1.js @@ -6,7 +6,10 @@ var icon1arr = [ title:"Bianca Gandilfo", com:"Thumbtack", des:"Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript.", - time:"8 hours, 11 minutes " + time:"8 hours, 11 minutes ", + head1:"Editor's Notes", + de:"A practical introduction to JavaScript and an overview of the language, Bianca covers what you need to know to be competent at writing JavaScript." + }, { @@ -73,19 +76,43 @@ var icon1arr = [ time:"4 hours, 6 minutes " } ] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon1arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + var progress1 =[ { class: "js", color: "#c94f17", -desc: "Write Professional, Modern JavaScript", +desc: "From JavaScript foundations, all the way to Hardcore Functional JavaScript, find out how far you can go with your JavaScript abilities!", icon: "", -img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", -title: "JavaScript" +img: " https://www.bing.com/th?id=OIP.fxMFAWgcs9ASnyZoIMeLJAHaHa&w=174&h=170&c=8&rs=1&qlt=90&o=6&dpr=1.41&pid=3.1&rm=2", +title: "Write Professional, Modern JavaScript" } ] -// background: #181818; -let main=document.getElementById("main") -import {display} from "../components/display.js" -// console.log(navbar) -display(icon1arr,main) +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/styles/icon.css b/styles/icon.css index 3525543..31ec260 100644 --- a/styles/icon.css +++ b/styles/icon.css @@ -1,10 +1,13 @@ #grid { width: 100%; - height: 400px; + height: 450px; align-items: center; + /* position: absolute; */ display: flex; justify-content: center; - background-image: url("https://www.xmple.com/wallpaper/graph-paper-green-grid-1920x1080-c2-071c0b-0f4719-l2-1-50-a-0-f-20.svg"); + box-sizing: border-box; + padding: 20px 0px; + background-image: url("https://img.freepik.com/free-photo/abstract-luxury-black-gradient-with-border-vignette-background-studio-backdrop-well-use-as-backdrop-background-studio-background-gradient-frame_1258-71732.jpg?w=900&t=st=1648721928~exp=1648722528~hmac=62a730aef1eb9e8d92fde0e28efabc134d6d26dc2823681e94c6f2450218a1b1"); } #grid + div{ width: 90%; @@ -31,14 +34,85 @@ font-size: 21px; font-weight: 400; } + +#main1 { + display: flex; + margin-left: 20px; + width: 90%; + margin: auto; + margin-bottom: 50px; + /* justify-content: space-between; */ +} +#line { + height: 3390px; + max-height: 5000px; + width: 10px; + background: #3e3e3e; + margin-left: 20px; + margin-top: 25px; + position: absolute; + box-sizing: border-box; + margin-right: 20px; + /* line-height: 400px; */ +} +#box { + background: #3e3e3e; + /* display: flex; */ + /* background-color: black; */ + height: 100px; + width: 95%; + margin: 25px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + /* color: #278cc7; */ + color: #e6e6e6; + padding: 20px 50px; + border-radius: 20px; + /* display: none; */ + +} +#box h6 { + font-size: 20px; + margin-bottom: 12px; + color: #fff; +} +#line .plus1 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: -20px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 370px; + +} +#line .plus2 { + /* margin-top: 300px; */ + border-radius: 50%; +} + +#line .plus1:hover { + background-color: grey; + + /* color: #222; */ +} + #div { display: flex; background-color: black; height: 400px; - width: 90%; - margin: 25px auto; + width: 95%; + margin: 25px auto ; /* padding: 20px 0px; */ box-sizing: border-box; + margin-left: 60px; } #main h3 { color: #dd625e; @@ -175,7 +249,10 @@ font-weight: bold; #img { position: absolute; - height: 500px; + height: 550px; +} +#main1 { + width: 100%; } #div1 { position: relative; @@ -184,7 +261,8 @@ font-weight: bold; } #div { background-color: transparent; - height: 500px; + height: 550px; + width: 80%; } #main h3 { @@ -201,11 +279,264 @@ font-weight: bold; margin-top: 15px; width: 200px; } +.elective-container{ + width: 100%; + padding: 10px 0px; + padding-top: 90px; +} +#grid { + height: 550px; +} } -#js { - height: 100px; - margin-left: -100px; - width: 100px; - opacity: .5; -} \ No newline at end of file + + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; + } + + .elective-container { + width: 70%; + padding-top: 40px; + /* background-color: #222222; */ + position: relative; + text-align: center; + } + .elective-container { + padding-bottom: 10px; + } + .elective-container button { + display: none; + } + + + + + + + .circular { + height: 200px; + width: 200px; + position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + } + .circular .inner, + .circular .outer, + .circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .inner { + height: 164px; + width: 164px; + background-color: #222222; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .circle { + z-index: 1; + box-shadow: none; + } + .circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: red; + display: flex; + align-items: center; + justify-content: center; + } + .circular .numb.orange { + color: #c63528; + } + .circular .numb p { + font-size: 70px; + color: #fff; + } + .circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; + } + .circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; + } + + .circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 220px, 220px, 100px); + } + .circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 200px, 0px); + } + .circle .bar .progress { + background: #4158d0; + } + .circle .bar .progress { + background: #c63528; + } + .circle .bar .progress.js { + background: #b3911c; + } + .circle .bar .progress.css { + background: #278cc7; + } + .circle .bar .progress.node { + background: #00873a; + } + .circle .bar .progress.react { + background: #008697; + } + .circle .bar .progress.vue { + background: #00bb83; + } + + .circle .bar .progress.angular { + background: #ff002f; + } + .circle .left .progress { + z-index: 1; + animation: left 1s linear both; + } + @keyframes left { + 100% { + transform: rotate(180deg); + } + } + .circle .right { + z-index: 3; + transform: rotate(180deg); + } + .circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ + } + @keyframes right { + 100% { + transform: rotate(180deg); + } + } + + .circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; + display: none; + } + .circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; + } + .circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; + } + + @keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + .circle .reverse .progress { + animation: rightRreverse 1s linear both; + } + @keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + @keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + @keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + + .desc { + padding: 0 10px; + color: #fff; + /* height: 157px; */ + line-height: 22px; + } + .desc .title { + font-size: 27px; + margin-bottom: 15px; + } + .title { + font-size: 35px; + line-height: 28px; + } + .desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; + } + + + \ No newline at end of file From f15ca602eb0aae0ef122bc6dfb0723b14f48fe75 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Thu, 31 Mar 2022 23:03:21 +0530 Subject: [PATCH 40/62] Modify8 --- components/display.js | 16 +++++++++++++--- styles/icon.css | 18 ++++++++++-------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/components/display.js b/components/display.js index 2e664ae..050d42d 100644 --- a/components/display.js +++ b/components/display.js @@ -4,6 +4,8 @@ function display(data,main){ let plus1 = document.createElement("div") plus1.setAttribute("class","plus1") plus1.innerText="+" + let line = document.createElement("div"); + line.setAttribute("id","line") let div = document.createElement("div"); div.setAttribute("id","div") let div1 = document.createElement("div"); @@ -69,10 +71,18 @@ function display(data,main){ btn1.addEventListener("click",function(){ window.location.href="joinnow.html" }) - document.getElementById("line").append(plus1) - main.append(box,div) - + // document.getElementById("line").append(plus1) + main.append(line,plus1,box,div) + + if(box.style.display=="none"){ + div.style.marginTop="-80px" + + } + else{ + div.style.marginTop="0px" + } }) + } export {display}; \ No newline at end of file diff --git a/styles/icon.css b/styles/icon.css index 31ec260..ed0faef 100644 --- a/styles/icon.css +++ b/styles/icon.css @@ -35,8 +35,8 @@ font-weight: 400; } -#main1 { - display: flex; +#main { + /* display: flex; */ margin-left: 20px; width: 90%; margin: auto; @@ -44,8 +44,8 @@ /* justify-content: space-between; */ } #line { - height: 3390px; - max-height: 5000px; + height: 700px; + /* max-height: 500px; */ width: 10px; background: #3e3e3e; margin-left: 20px; @@ -69,7 +69,8 @@ color: #e6e6e6; padding: 20px 50px; border-radius: 20px; - /* display: none; */ + display: none; + margin-top: -50px; } #box h6 { @@ -77,12 +78,12 @@ margin-bottom: 12px; color: #fff; } -#line .plus1 { +#main .plus1 { position: relative; background: #3e3e3e; height: 50px; width: 50px; - margin-left: -20px; + margin-left: 0px; font-size: 35px; /* padding: 5px; */ color:#fff; @@ -90,7 +91,8 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 370px; + margin-top: 25px; + /* margin-bottom: 370px; */ } #line .plus2 { From 224313204e323ff46719c01f35986dcfc16eccd3 Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Thu, 31 Mar 2022 23:54:12 +0530 Subject: [PATCH 41/62] home incomp --- Styles/home.css | 223 +++++++++++++++++++++++++++++++++++++++++++++ home.html | 86 +++++++++++++++++ scripts/home.js | 0 scripts/joinnow.js | 2 + thumb (1).webp | Bin 0 -> 12680 bytes thumb (4).webp | Bin 0 -> 10046 bytes thumb.webp | Bin 0 -> 6118 bytes 7 files changed, 311 insertions(+) create mode 100644 Styles/home.css create mode 100644 home.html create mode 100644 scripts/home.js create mode 100644 thumb (1).webp create mode 100644 thumb (4).webp create mode 100644 thumb.webp diff --git a/Styles/home.css b/Styles/home.css new file mode 100644 index 0000000..247daa7 --- /dev/null +++ b/Styles/home.css @@ -0,0 +1,223 @@ +*{ + margin:0; + padding:0; +} +body{ + background-color: #222222; + color: #e6e6e6; + font-family: Open Sans,sans-serif; +} +#clip{ + background-color: #DF5826; + clip-path: polygon(0 0, 100% 0, 100% 6%, 0 2%); + + height:370px; + width:100%; + /* border:5px solid black; */ +} +#head{ + height:50px; + max-width:75%; + border:2px solid blue; + margin: auto; + margin-top: -300px ; +} +#cointainer{ + max-width:75%; + margin:auto; + border: 2px solid green; + margin-top: 20px; + display:flex; + /* flex-wrap: wrap; */ +} +#cointainer>div{ + border:2px solid teal; + +} +#first_parent{ + width:50%; + margin:0 25px 0 0; +} +#second_child{ + width:50%; + margin: 0 0 0 25px; +} +/*.................first_parent.....................*/ +/* ................#continue_watching............... */ + +#continue_watching{ + max-width: 100%; + border:1px solid yellowgreen; + padding:15px 0 15px 0; +} +#continue_watching p{ + font-size: 25px; + +} +#continue_watching p span{ + color:white; +} + +/* ................#welcome............... */ + +#welcome{ + max-width: 100%; + border:1px solid yellowgreen; + margin:15px 0 15px 0; + background-color: black; +} +#welcome>div{ + width:100%; + border:1px solid pink; + margin:5px 0 5px 0; + +} + +/* ................#welcome_one............... */ + +#welcome #welcome_one>h6{ + font-size: 20px; + padding-left:15px; + padding-top: 10px; + line-height: 28px; +} +#welcome #welcome_one>p{ + padding-left:15px; + line-height: 28px; + font-size: 17px; + color:rgb(255, 255, 255); +} +#welcome #welcome_one>#p{ + color:rgb(158, 147, 147); + padding-left:15px; + line-height: 25px; + padding-bottom: 10px; +} + +/* ................#welcome_two............... */ + +#welcome #welcome_two{ + display:flex; + height:80px; + +} +#welcome #welcome_two> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_two> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_two> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_three............... */ + +#welcome #welcome_three{ + display:flex; + height:80px; + +} +#welcome #welcome_three> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_three> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_three> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_three............... */ + +#welcome #welcome_four{ + display:flex; + height:80px; + +} +#welcome #welcome_four> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_four> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_four> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_five............... */ + +#welcome_five{ + padding:30px 0 20px 0; +} +#welcome_five p{ + margin-left: 15px; +} + +/* ................#learning............... */ + +#learning{ + max-width: 100%; + border:1px solid yellowgreen; + padding:15px 0 15px 0; +} +#learning p{ + font-size: 25px; + +} +#learning p span{ + color:red; + font-size: 18px; + margin-left: 120px; +} + + +#beginner{ + max-width: 100%; + border:1px solid yellowgreen; + +} +#beginner #option{ + width:100%; + border: 2px solid blue; + height:50px; + padding:25px 0 35px 0; + +} +#beginner #option #select{ + width:80%; + padding:10px; + border-radius: 10px; + margin-left: 50px; + border: 2px solid rgb(0, 140, 255); +} +#course{ + max-width: 100%; + border:1px solid yellowgreen; + height:50px; + margin:5px 0 5px 0; +} +#fullstack{ + max-width: 100%; + border:1px solid yellowgreen; + height:50px; + margin:5px 0 5px 0; +} \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..1435a8d --- /dev/null +++ b/home.html @@ -0,0 +1,86 @@ + + + + + + + + + + Home + + +
    + + +
    + +
    +
    +

    Continue Watching

    +
    +
    +
    +
    Welcome Susmita Mandal
    +

    You haven't started watching any courses yet... but no worries!

    +

    Below are some great courses to check out:

    +
    + +
    +
    + +
    +
    +

    Testing Web Apps with Cypress

    +

    Steve Kinney

    +
    +
    +
    +
    + +
    +
    +

    AWS For Front-end Engineer,v2

    +

    Steve Kinney

    +
    +
    + +
    +
    +

    Your Learning Path Progress See All

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + \ No newline at end of file diff --git a/scripts/home.js b/scripts/home.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 594cce1..2757ae9 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -36,6 +36,7 @@ let g=document.getElementById("errcheck") function myFormSubmit(event){ event.preventDefault(); + if ( (document.getElementById("email").value=="")|| @@ -84,6 +85,7 @@ function myFormSubmit(event){ } + else{ var signinobj=[{ diff --git a/thumb (1).webp b/thumb (1).webp new file mode 100644 index 0000000000000000000000000000000000000000..6d6d88c9a097a8967bcba93bdfe6bcf8a5d269ca GIT binary patch literal 12680 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 CVTpSH literal 0 HcmV?d00001 diff --git a/thumb (4).webp b/thumb (4).webp new file mode 100644 index 0000000000000000000000000000000000000000..b88ea9070a4138a7d7e0a3f1f03a8dd7bdb5011a GIT binary patch literal 10046 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 literal 0 HcmV?d00001 From 27c429645d2cf68f976994122831310c603201aa Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Fri, 1 Apr 2022 00:49:52 +0530 Subject: [PATCH 42/62] icons complete --- components/display.js | 15 +++------ icon1.html | 2 +- icon2.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon3.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon4.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon5.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon5.html' | 0 icon6.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon7.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon8.html | 75 +++++++++++++++++++++++++++++++++++++++++++ icon9.html | 75 +++++++++++++++++++++++++++++++++++++++++++ index.html | 18 +++++------ scripts/icon1.js | 29 +++++++++++++---- scripts/icon2.js | 57 +++++++++++++++++++++++++++++--- scripts/icon3.js | 57 +++++++++++++++++++++++++++++--- scripts/icon4.js | 69 ++++++++++++++++++++++++++++++++++----- scripts/icon5.js | 47 ++++++++++++++++++++++++--- scripts/icon6.js | 50 ++++++++++++++++++++++++++--- scripts/icon7.js | 51 ++++++++++++++++++++++++++--- scripts/icon8.js | 47 ++++++++++++++++++++++++--- scripts/icon9.js | 47 ++++++++++++++++++++++++--- styles/icon.css | 67 +++++++++++++++++++++++++++++++------- 22 files changed, 1079 insertions(+), 77 deletions(-) create mode 100644 icon5.html delete mode 100644 icon5.html' diff --git a/components/display.js b/components/display.js index 050d42d..22a172b 100644 --- a/components/display.js +++ b/components/display.js @@ -51,7 +51,7 @@ function display(data,main){ let div6 = document.createElement("div") let box = document.createElement("div") let h6 = document.createElement("h6") - h6.innerText=el.head1 + h6.innerText="Editor's Notes" let box_p = document.createElement("p") box_p.innerText=el.de @@ -62,7 +62,7 @@ function display(data,main){ div6.setAttribute("id","div6") div1.append(h3,div2,p1,div5,div6) div.append(img,div1) - div.addEventListener("click",function(){ + img.addEventListener("click",function(){ window.location.href="display.html" let displayArr=[]; displayArr.push(el) @@ -73,14 +73,9 @@ function display(data,main){ }) // document.getElementById("line").append(plus1) main.append(line,plus1,box,div) - - if(box.style.display=="none"){ - div.style.marginTop="-80px" - - } - else{ - div.style.marginTop="0px" - } + plus1.addEventListener("click",function(){ + box.style.display="block" + }) }) } diff --git a/icon1.html b/icon1.html index 3db51a2..8b0ac56 100644 --- a/icon1.html +++ b/icon1.html @@ -52,7 +52,7 @@

    Core Coursework

    -
    +
    diff --git a/icon2.html b/icon2.html index e69de29..54564dd 100644 --- a/icon2.html +++ b/icon2.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon3.html b/icon3.html index e69de29..44bc84f 100644 --- a/icon3.html +++ b/icon3.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon4.html b/icon4.html index e69de29..0450b86 100644 --- a/icon4.html +++ b/icon4.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon5.html b/icon5.html new file mode 100644 index 0000000..00e98c0 --- /dev/null +++ b/icon5.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon5.html' b/icon5.html' deleted file mode 100644 index e69de29..0000000 diff --git a/icon6.html b/icon6.html index e69de29..303b9aa 100644 --- a/icon6.html +++ b/icon6.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon7.html b/icon7.html index e69de29..5c99080 100644 --- a/icon7.html +++ b/icon7.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon8.html b/icon8.html index e69de29..cd26968 100644 --- a/icon8.html +++ b/icon8.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/icon9.html b/icon9.html index e69de29..08e7f5e 100644 --- a/icon9.html +++ b/icon9.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
    +
    + +
    + + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    + +
    + +
    +
    + + + + + + + diff --git a/index.html b/index.html index 761e3b1..64f8a40 100644 --- a/index.html +++ b/index.html @@ -51,15 +51,15 @@

    with In-Depth, Modern
    Front-End Engineering Courses

    - JS - React - TS - Node - Vue3 - Angular13 - CSS - Core - Webpack + JS + React + TS + Node + Vue3 + Angular13 + CSS + Core + Webpack
    diff --git a/scripts/icon1.js b/scripts/icon1.js index 86aa016..2f84596 100644 --- a/scripts/icon1.js +++ b/scripts/icon1.js @@ -19,7 +19,9 @@ var icon1arr = [ title:"Will Sentance", com:"Codesmith", des:"Take your JavaScript to the next level. Gain an understanding of callbacks, higher order functions, closure, asynchronous and object-oriented JavaScript!", - time:"6 hours, 41 minutes" + time:"6 hours, 41 minutes", + head1:"Editor's Notes", + de:"Will’s course emphasizes not only understanding JavaScript, but also communicating your understanding of the language’s most important concepts. Communicating is a necessary skill for becoming a high-performing engineer." }, { img:"https://static.frontendmasters.com/assets/courses/2019-04-03-deep-javascript-v3/thumb.webp", @@ -28,7 +30,9 @@ var icon1arr = [ title:"Kyle Simpson", com:"You Don't Know JS", des:"Dive into JavaScript's core language features: types & coercion, scope & closure, and JavaScript's object oriented system.", - time:"10 hours, 32 minutes " + time:"10 hours, 32 minutes ", + de:"Kyle’s course builds by reinforcing many of the foundational concepts covered in Will’s course, but goes even deeper. He also covers types and the type coercion that goes on under the hood of JavaScript.", + head1:"Editor's Notes" }, { img:"https://static.frontendmasters.com/assets/courses/2019-04-05-js-recent-parts/thumb.webp", @@ -37,7 +41,9 @@ var icon1arr = [ title:"Kyle Simpson", com:"You Don't Know JS", des:"Get up to speed with new JavaScript features like tagged template literals, destructuring, iterators, generators, regex improvements and async await.", - time:"4 hours, 9 minutes " + time:"4 hours, 9 minutes ", + head1:"Editor's Notes", + de:"Modern JavaScript builds on top of the foundations and adds more to the language. Kyle’s JavaScript the Recent Parts course will give you a deeper understanding those newer features added to the JavaScrip" }, { img:"https://static.frontendmasters.com/assets/courses/2018-07-10-javascript-new-hard-parts/thumb.webp", @@ -46,7 +52,9 @@ var icon1arr = [ title:"Will Sentance", com:"Codesmith", des:"Develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await!", - time:"4 hours, 46 minutes " + time:"4 hours, 46 minutes ", + head1:"Editor's Notes", + de:"Understanding asynchronous and functional programming deeply will increase your programming abilities drastically. The first course is part 2 of Will’s “Hard Parts” series. With this one, he’s focusing on the new asynchronous features in JavaScript." }, { img:"https://static.frontendmasters.com/assets/courses/2019-06-18-functional-javascript-v3/thumb.webp", @@ -55,7 +63,10 @@ var icon1arr = [ title:"Kyle Simpson", com:"You Don't Know JS", des:"Improve your JavaScript by applying functional programming concepts like function purity, point-free, partial-application, currying, composition, immutability, recursion, list operations like map, reduce & filter...plus even more advanced concepts like monads and transduction!", - time:"10 hours, 1 minutes" + time:"10 hours, 1 minutes", + head1:"Editor's Notes", + de:"Functional programming is a set of tools such as map/reduce/filter, pure functions, and immutability. These tools are sure to make you a more effective developer through composing pure functions together to write more predictable and bug-free code." + }, { img:"https://static.frontendmasters.com/assets/courses/2020-03-17-hardcore-js-v2/thumb.webp", @@ -64,7 +75,9 @@ var icon1arr = [ title:"Brian Lonsdorf", com:"Salesforce", des:"Learn functional programming concepts such as pure functions, currying, composition, functors, and monads, and see functional concepts in action in a real-world web app!", - time:"3 hours, 44 minutes" + time:"3 hours, 44 minutes", + head1:"Editor's Notes", + de:"There’s a push with new languages that compile to JavaScript which are born of a functional nature like Elm and PureScript. In this course, we see how far we can take pure JavaScript towards more traditional functional programming." }, { img:"https://static.frontendmasters.com/assets/courses/2019-08-28-javascript-accessibility/thumb.webp", @@ -73,7 +86,9 @@ var icon1arr = [ title:"Marcy Sutton", com:"Gatsby", des:"Produce innovative and inclusive JavaScript-powered web apps! Learn to remove barriers and allow people with disabilities to use your modern JavaScript web applications.", - time:"4 hours, 6 minutes " + time:"4 hours, 6 minutes ", + head1:"Editor's Notes", + de:"When you add lots of dynamic functionality with JavaScript, it’s important to keep your web apps accessible through announcing changes and focusable elements to screen readers and accommodate those with disabilities." } ] diff --git a/scripts/icon2.js b/scripts/icon2.js index 7441839..4b44295 100644 --- a/scripts/icon2.js +++ b/scripts/icon2.js @@ -6,7 +6,9 @@ var icon2arr =[ title:"Brian Holt", com: "Stripe", des:"Much more than an intro, you’ll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, like Parcel, ESLint, Prettier, and React Router!", - time:"5 hours, 41 minute" + time:"5 hours, 41 minute", + head1:"Editor's Notes", + de:"Learn to build an entire real-world, modern application from scratch in today’s tools!" }, { img:"https://static.frontendmasters.com/assets/courses/2021-05-04-intermediate-react-v3/thumb.webp", @@ -15,7 +17,9 @@ var icon2arr =[ title:"Brian Holt", com: "Stripe", des:"Build scalable React applications while learning React hooks in-depth, CSS-in-JS with TailwindCSS, increase performance with code splitting and server-side rendering, add TypeScript, state management with Redux, test your app with Jest …and more!", - time:"6 hours, 7 minutes " + time:"6 hours, 7 minutes ", + head1:"Editor's Notes", + de:"Learn the tools in the surrounding React ecosystem." }, { img:"https://static.frontendmasters.com/assets/courses/2020-02-14-pure-react-state/thumb.webp", @@ -24,7 +28,10 @@ var icon2arr =[ title:"Steve Kinney", com: "Temporal", des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", - time:"4 hours, 27 minutes" + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Learn patterns for managing state throughout your React application." + }, { img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", @@ -33,7 +40,49 @@ var icon2arr =[ title:"Steve Kinney", com: "Temporal", des:"Ship React apps with more code confidence using TypeScript! Migrate your app to TypeScript, type simple and advanced React components, and learn all types shipped with React for writing React with TypeScript.", - time:"5 hours, 3 minutes" + time:"5 hours, 3 minutes", + head1:"Editor's Notes", + de:"Learn patterns for managing state throughout your React application." } ] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon2arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc:"React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.", +icon: "", +img:"https://th.bing.com/th/id/R.21cef5f5ff8f0a831ed1692e91e7154a?rik=aLpwwKogBecykg&riu=http%3a%2f%2fyycjs.com%2freal-world-react%2fimg%2freact-logo.png&ehk=Da48R0vYoMh7ImQa8E9fc04Z5BaQHyOkz3qjQ6IddFo%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1", +title: "Be Productive with React.js, Today's Most Popular Framework" + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon3.js b/scripts/icon3.js index 258dcb7..055be2d 100644 --- a/scripts/icon3.js +++ b/scripts/icon3.js @@ -6,7 +6,9 @@ var icon3arr =[ title:"Mike North", com:"LinkedIn", des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", - time:"4 hours, 27 minutes" + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable." }, { img:"https://static.frontendmasters.com/assets/courses/2021-08-04-intermediate-typescript/thumb.webp", @@ -15,7 +17,10 @@ var icon3arr =[ title:"Mike North", com:"LinkedIn", des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", - time:"2 hours, 48 minutes" + time:"2 hours, 48 minutes", + de:"Grow from being a contributor to a TypeScript codebase to being on the path to becoming “the TypeScript expert” for your team", + head1:"Editor's Notes" + }, { img:"https://static.frontendmasters.com/assets/courses/2020-11-11-production-typescript/thumb.webp", @@ -24,7 +29,10 @@ var icon3arr =[ title:"Mike North", com:"LinkedIn", des:"Use the TypeScript language at scale to increase the developer experience and productivity of your teams! You’ll learn to manage even the most ambitious TypeScript projects with confidence and ease.", - time:"5 hours, 10 minute" + time:"5 hours, 10 minute", + head1:"Editor's Notes", + de:"Grow from being a contributor to a TypeScript codebase to being on the path to becoming “the TypeScript expert” for your team." + }, { img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", @@ -34,6 +42,45 @@ var icon3arr =[ title:"Steve Kinney", com: "Temporal", des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", - time:"4 hours, 27 minutes" + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Learn to manage even the most ambitious TypeScript projects with confidence and ease." } -] \ No newline at end of file +] +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon3arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +title:"Add Types to Your Web and Node.js Apps with TypeScript", +icon: "", +img:"https://th.bing.com/th/id/OIP.ts3lYA8TB3a6qWmDknphoQHaHa?pid=ImgDet&w=300&h=300&rs=1", +desc:"Write robust JavaScript with a superior developer experience for your teams with Typescript." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon4.js b/scripts/icon4.js index 0ac3b4f..91d91c2 100644 --- a/scripts/icon4.js +++ b/scripts/icon4.js @@ -6,7 +6,10 @@ var icon4arr =[ title:"Scott Moss", Com:"Netflix", des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", - time:"4 hours, 51 minutes" + time:"4 hours, 51 minutes", + head1:"Editor's Notes", + de:"Go under the hood of Node.js and gain a mental model of how writing JavaScript on the server with Node.js works." + }, { img:"https://static.frontendmasters.com/assets/courses/2019-05-24-servers-node-js/thumb.webp", @@ -15,16 +18,22 @@ var icon4arr =[ title:"Will Sentance", com:"Codesmith", des:"Uncover the most challenging, yet most powerful features in Node.js, to help you write and debug professional server code.", - time:"5 hours, 16 minutes" + time:"5 hours, 16 minutes", + head1:"Editor's Notes", + de:"Get the deep fundamental concepts of Node.js with Kyle Simpson, author of the ‘You Don’t Know JS’ Bo" + }, { - img:"https://static.frontendmasters.com/assets/courses/2019-07-09-digging-into-node/thumb.we,bp", - title:"Digging Into Node.js", + img:"https://static.frontendmasters.com/assets/courses/2019-11-25-server-graphql-nodejs/thumb.webp", + + name:"Digging Into Node.js", photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", title:"Kyle Simpson", com:"You Don't Know JS", des:"Learn the fundamental concepts of programming in Node.js: CLI programming, file system access, asynchrony, streams, HTTP servers & routing, database persistence, and child processes.", - time:"4 hours, 0 minute" + time:"4 hours, 0 minute", + head1:"Editor's Notes", + de:"Building APIs is the foundation of any back-end application." }, { @@ -34,7 +43,9 @@ var icon4arr =[ title:"Scott Moss", Com:"Netflix", des:"Use Express to build a REST API in Node.js – handle REST API verb methods to create, read, update and delete resources from a MongoDB database.", - time:"3 hours, 34 minutes" + time:"3 hours, 34 minutes", + head1:"Editor's Notes", + de:"GraphQL is the new standard for building flexible APIs." }, @@ -45,7 +56,49 @@ var icon4arr =[ title:"Scott Moss", Com:"Netflix", des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", - time:"4 hours, 51 minutes" + time:"4 hours, 51 minutes", + head1:"Editor's Notes", + de:"Jem teaches you the essentials for setting up and launching servers in a two-part series." } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon4arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc:"Node.js has emerged as one of the main server-side language choices that powers the web!", +icon: "", +img:"https://cdn.pixabay.com/photo/2015/04/23/17/41/node-js-736399_960_720.png", +title: "Build Web APIs and Applications with Node.js" + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon5.js b/scripts/icon5.js index 227d07f..3f78484 100644 --- a/scripts/icon5.js +++ b/scripts/icon5.js @@ -6,7 +6,8 @@ var icon5arr = [ title:"Sarah Drasner", com: "Netlify", des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", - time:"4 hours, 57 minutes" + time:"4 hours, 57 minutes", + de:"Get a dynamic and fun introduction to Vue from Sarah Drasner!" }, { img:"https://static.frontendmasters.com/assets/courses/2020-10-27-vue-nuxt-apps/thumb.webp", @@ -15,7 +16,8 @@ var icon5arr = [ title:"Sarah Drasner", com: "Netlify", des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", - time:"3 hours, 37 minutes" + time:"3 hours, 37 minutes", + de:"Learn how to build a variety of applications in the real world." }, { @@ -25,6 +27,43 @@ var icon5arr = [ title:"Ben Hong", com:"Netlify", des:"Learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, best practices for architecting increasingly complex applications, and more.", - time:"4 hours, 37 minutes" + time:"4 hours, 37 minutes", + de:"Learn best practices in order to build Vue.js apps that can scale and grow!" } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon5arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png", + title:"Learn Vue.js, An Easy to Pick Up and Powerful Framework ", + desc:"Vue is easy to pick up and integrate with other libraries or existing projects, but can scale up to power sophisticated web applications." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon6.js b/scripts/icon6.js index 0bff362..8db9f9e 100644 --- a/scripts/icon6.js +++ b/scripts/icon6.js @@ -6,7 +6,8 @@ var icon6arr =[ title:"Lukas Ruebbelke", com:"Venmo", des:"Learn Angular through building an app with real-world features! We start off using the Angular CLI to get set up quickly. Then we'll move on to Angular core concepts like components, templates, routing, forms, server-side communicati,on, and more.", - time:"6 hours, 52 minutes" + time:"6 hours, 52 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" }, { img:"https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp", @@ -15,7 +16,9 @@ var icon6arr =[ title:"Mike North", com: "LinkedIn", des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative team", - time:"4 hours, 27 minutes" + time:"4 hours, 27 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" + }, { img:"https://static.frontendmasters.com/assets/courses/2021-01-19-production-angular/thumb.webp", @@ -24,6 +27,45 @@ var icon6arr =[ title:"Lukas Ruebbelke", com:"Venmo", des:"Learn how to structure your projects leveraging Angular CLI and Nx. Create shared modules and apply unit tests and end-to-end testing. Analyze performance and ship your app to production using Docker.", - time:"6 hours, 57 minutes" + time:"6 hours, 57 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" + } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon6arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://raw.githubusercontent.com/CAST-Extend/resources/master/com.castsoftware.angularjs.png", + title:"Learn Angular, a TypeScript-based web application framework led by Google", + desc:"Angular is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations." + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon7.js b/scripts/icon7.js index 4fc8075..31d3421 100644 --- a/scripts/icon7.js +++ b/scripts/icon7.js @@ -6,7 +6,8 @@ var icon7arr = [ title:"Jen Kramer", com:"Freelance Instructor", des:"Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more. You'll even build a professional portfolio website by the end of the course!", - time:"3 hours, 19 minutes" + time:"3 hours, 19 minutes", + de:"Use CSS to layout and visually style web pages so you’re websites aren’t just functional, but they look nice as well!" }, { img:"https://static.frontendmasters.com/assets/courses/2021-10-26-css-grid-flexbox-v2/thumb.webp", @@ -15,7 +16,8 @@ var icon7arr = [ title:"Jen Kramer", com:"Freelance Instructor", des:"Learn the essential CSS layout techniques for building responsive, beautiful websites. You'll use CSS Grid and Flexbox along with responsive images to build out real-world web layouts!", - time:"5 hours, 49 minutes" + time:"5 hours, 49 minutes", + de:"The most essential tools to bring your designs to life are modern CSS layout tools such as Flexbox and CSS Grid." }, { img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", @@ -24,7 +26,9 @@ var icon7arr = [ title:"Sarah Drasner", com: "Netlify", des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", - time:"4 hours, 12 minutes" + time:"4 hours, 12 minutes", + de:"Use CSS to layout and visually style web pages so you’re websites aren’t just functional, but they look nice as well!" + }, { img:"https://static.frontendmasters.com/assets/courses/2019-09-12-advanced-css-layouts/thumb.webp", @@ -33,6 +37,43 @@ var icon7arr = [ title:"Jen Kramer", com:"Freelance Instructor", des:"Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. Combined with CSS Calc & Custom Properties, they revolutionize the way we lay out web pages with CSS!", - time:"3 hours, 46 minutes" + time:"3 hours, 46 minutes", + de:"The most essential tools to bring your designs to life are modern CSS layout tools such as Flexbox and CSS Grid." } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon7arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://th.bing.com/th/id/R.6b2018f5c6532f6c29806ef06ffb158d?rik=A1DOk4SIw4rtiw&riu=http%3a%2f%2f1000marcas.net%2fwp-content%2fuploads%2f2021%2f02%2fCSS-Logo.png&ehk=ON8ObCxBDE%2f%2fZS37%2fZkw9lFVSiR1xOwAcDkS%2bdFm6vc%3d&risl=&pid=ImgRaw&r=0", + title:"Learn CSS, from Laying Out Websites to Performant Animations", + desc:"CSS is rich in capabilities and is more than simply laying out pages! Replace costly JavaScript with CSS." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon8.js b/scripts/icon8.js index 4bb935b..d3152aa 100644 --- a/scripts/icon8.js +++ b/scripts/icon8.js @@ -6,7 +6,8 @@ var icon8arr = [ title:"Shirley Wu", com:"Data Sketches", des:"Build cu charts with D3.js using data binding with the enter-update-exit pattern. You'll learn scales and to animate between different D3 layouts for building truly interactive charts.", - time:"5 hours, 59 minutes" + time:"5 hours, 59 minutes", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." }, { img:"https://static.frontendmasters.com/assets/courses/2018-09-11-d3-js-custom-charts/thumb.webp", @@ -15,7 +16,8 @@ var icon8arr = [ title:"Shirley Wu", com:"Data Sketches", des:"Learn the visualization principles and process for building custom advanced data visualizations with D3.js and SVG with S,hirley Wu.", - time:"4 hours, 24 minutes " + time:"4 hours, 24 minutes ", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." }, { img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", @@ -24,6 +26,43 @@ var icon8arr = [ title:"Sarah Drasner", com: "Netlify", des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", - time:"4 hours, 12 minutes CC" + time:"4 hours, 12 minutes CC", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon8arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://assets.website-files.com/57e53b27f0345c214ef43b64/5a245c9eb1a83e0001a5a066_D3-logo.png", + title:"Turn Data into Visualizations with D3.js", + desc:'everage your web development skills to make your web pages interact and visualize data with D3.js!' + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon9.js b/scripts/icon9.js index 8766133..8ba04fd 100644 --- a/scripts/icon9.js +++ b/scripts/icon9.js @@ -6,7 +6,8 @@ var icon9arr =[ title:"Sean Larkin", com:"Microsoft", des:"Learn the core concepts of Webpack 4. Start from scratch by adding Webpack with npm and build up a pipeline with popular loaders from the Webpack ecosystem!", - time:"4 hours, 10 minute" + time:"4 hours, 10 minute", + de:"This course walks you through everything you need to know to create custom build processes." }, { img:"https://static.frontendmasters.com/assets/courses/2018-07-01-performance-webpack/thumb.webp", @@ -15,7 +16,8 @@ var icon9arr =[ title:"Sean Larkin", com:"Microsoft", des:"Make websites load instantly using Webpack for lazy loading JavaScript with code splitting, removing unused code with tree shaking and prefetching assets", - time:" hours, 43 minutes " + time:" hours, 43 minutes ", + de:"This course walks you through everything you need to know to create custom build processes." }, { @@ -25,6 +27,43 @@ var icon9arr =[ title:"Sean Larkin", com:"Microsoft", des:"earn the Webpack 4 plugin system, tour the Webpack source code and learn to build custom plugins and custom Webpack loaders.", - time:"1 hours, 34 minutes" + time:"1 hours, 34 minutes", + de:"This course walks you through everything you need to know to create custom build processes." } -] \ No newline at end of file +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon9arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://th.bing.com/th/id/OIP.xQCjgB2DVqhtqGoGw9E6TQHaHa?w=177&h=180&c=7&r=0&o=5&dpr=1.41&pid=1.7", + title:"Learn Webpack, the most popular and flexible build tool for JavaScript", + desc:"Webpack enables you to integrate your favorite tools and take control of how you deliver your JavaScript, CSS, and more!​" + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/styles/icon.css b/styles/icon.css index ed0faef..40c6269 100644 --- a/styles/icon.css +++ b/styles/icon.css @@ -44,7 +44,7 @@ /* justify-content: space-between; */ } #line { - height: 700px; + height: 540px; /* max-height: 500px; */ width: 10px; background: #3e3e3e; @@ -55,11 +55,29 @@ margin-right: 20px; /* line-height: 400px; */ } +#plus2 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 65px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + /* text-align: center; */ + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + border-radius: 50%; + margin-bottom: 40px; +} #box { background: #3e3e3e; /* display: flex; */ /* background-color: black; */ height: 100px; + /* max-height: 250px; */ width: 95%; margin: 25px auto ; /* padding: 20px 0px; */ @@ -71,13 +89,19 @@ border-radius: 20px; display: none; margin-top: -50px; + /* max-height: 180px; + */ + /* height: ; */ } #box h6 { font-size: 20px; - margin-bottom: 12px; + margin-bottom: 7px; color: #fff; } +#box p { + line-height: 20px; +} #main .plus1 { position: relative; background: #3e3e3e; @@ -95,12 +119,9 @@ /* margin-bottom: 370px; */ } -#line .plus2 { - /* margin-top: 300px; */ - border-radius: 50%; -} -#line .plus1:hover { + +#main .plus1:hover { background-color: grey; /* color: #222; */ @@ -111,7 +132,7 @@ background-color: black; height: 400px; width: 95%; - margin: 25px auto ; + margin: 10px auto ; /* padding: 20px 0px; */ box-sizing: border-box; margin-left: 60px; @@ -243,6 +264,16 @@ font-weight: bold; #main h3 { font-size: 25px; } +#box { + height: 140px; +} +#plus2 { + margin-top: -55px; + margin-left: 27px; +} +#line{ + height: 600px; +} #p2 { margin-bottom: 15px; } @@ -252,10 +283,10 @@ font-weight: bold; #img { position: absolute; height: 550px; + width: 100%; } -#main1 { - width: 100%; -} + + #div1 { position: relative; margin-left: 20px; @@ -264,8 +295,20 @@ font-weight: bold; #div { background-color: transparent; height: 550px; - width: 80%; + + +} +#box { + height: 200px; + padding: 20px 25px; +} +#plus2 { + margin-top: -55px; + margin-left: 15px; +} +#line{ + height: 800px; } #main h3 { font-size: 25px; From f5dcfe9c6376664902f69e68dce9afe45ca55999 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Fri, 1 Apr 2022 00:58:42 +0530 Subject: [PATCH 43/62] merge susmita branch --- Login.html | 123 +++------------------- components/forgot-password.js | 20 ++++ components/login.js | 25 +++++ components/navbar.js | 2 +- forgot-password.html | 33 ++++++ icon1.html | 121 ++++++++++++++------- learn.html | 2 - scripts/forgot-password.js | 60 +++++++++++ scripts/login-page.js | 68 ++++++++++++ styles/footer.css | 192 +++++++++++++++++----------------- styles/login.css | 135 ++++++++++++++++++++++++ 11 files changed, 532 insertions(+), 249 deletions(-) create mode 100644 components/forgot-password.js create mode 100644 components/login.js create mode 100644 forgot-password.html create mode 100644 scripts/forgot-password.js create mode 100644 scripts/login-page.js create mode 100644 styles/login.css diff --git a/Login.html b/Login.html index efad889..fc8ac20 100644 --- a/Login.html +++ b/Login.html @@ -4,122 +4,29 @@ - Document + + Log In to Frontend Masters + - +
    -
    -
    -
    -
    -
    -
    - Remember me
    - - Forgot your password? -
    -
    + + + + + + - + + diff --git a/icon1.html b/icon1.html index 24d81c5..aff9814 100644 --- a/icon1.html +++ b/icon1.html @@ -1,39 +1,75 @@ - - - - + + + + Document - - - - + + + + - - - - + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" + integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" + crossorigin="anonymous" + referrerpolicy="no-referrer" + /> + + +
    - - - -
    + + + + + +
    - + + + + + + + -

    Core Coursework

    -

    (take these in order)

    + c11.193-17.731,34.606-23.093,52.4-12C305.092,29.148,310.453,52.56,299.361,70.354z" + > + +

    Core Coursework

    +

    (take these in order)

    - + - + diff --git a/learn.html b/learn.html index 2fa3c39..893c111 100644 --- a/learn.html +++ b/learn.html @@ -12,7 +12,6 @@ Paths to Learning JavaScript, React, and More Skills You Need. - <<<<<<< HEAD @@ -20,7 +19,6 @@ - >>>>>>> muskan { + event.preventDefault(); + let email = document.querySelector("#email").value; + let new_pass = document.querySelector("#new-pass").value; + let success = false; + for (let i = 0; i < data.length; i++) { + let el = data[i]; + if (el.email === email) { + el.password = new_pass; + success = true; + break; + } + } + let alert_box = document.querySelector(".alert-msg"); + if (success) { + // localStorage.setItem("logged_user", JSON.stringify(logged_user)); + console.log(data); + } else { + alert_box.innerText = "Email doesn't Exist in our database. Try again"; + alert_box.classList.add("active-alert"); + } +}; + +forgot_password_form.addEventListener("submit", resetPassword); diff --git a/scripts/login-page.js b/scripts/login-page.js new file mode 100644 index 0000000..cca5b5a --- /dev/null +++ b/scripts/login-page.js @@ -0,0 +1,68 @@ +import login from "../components/login.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +let login_container = document.querySelector(".login-container"); +login_container.innerHTML = login(); + +document.querySelector(".header").innerHTML = navbar(); + +document.querySelector("#footer").innerHTML = footer(); + +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); + +let data = [ + { + name: "Aniket", + email: "aniket@gmail.com", + password: "test", + }, + { + name: "Miles", + email: "aniket0123@gmail.com", + password: "test", + }, + { + name: "Haresh", + email: "haresh2910@gmail.com", + password: "test", + }, + { + name: "Krunal", + email: "krunal3103@gmail.com", + password: "test", + }, +]; + +let login_form = document.querySelector("#login-form"); + +const loginUser = () => { + event.preventDefault(); + let regesiterData = JSON.parse(localStorage.getItem("registerData")) || []; + let email = document.querySelector("#email").value; + let password = document.querySelector("#password").value; + // if + let success = false; + let logged_user = null; + for (let i = 0; i < data.length; i++) { + let el = data[i]; + if (el.email === email && el.password == password) { + success = true; + logged_user = el; + break; + } + } + let alert_box = document.querySelector(".alert-msg"); + if (success) { + localStorage.setItem("logged_user", JSON.stringify(logged_user)); + } else { + alert_box.innerText = "That wasn't correct. Try again?"; + alert_box.classList.add("active-alert"); + } +}; + +login_form.addEventListener("submit", loginUser); diff --git a/styles/footer.css b/styles/footer.css index 0e48cc4..02e4487 100644 --- a/styles/footer.css +++ b/styles/footer.css @@ -1,125 +1,121 @@ #footer { - height: 300px; - width: 100%; - background-color:black; - padding: 35px; - box-sizing: border-box; - + height: 300px; + width: 100%; + background-color: black; + padding: 35px; + box-sizing: border-box; } #footer #footer1 { - display: flex; - margin-left: 30px; - + display: flex; + margin-left: 30px; } #footer #footer1 ul { -list-style-type: none; -float: left; -display: flex; -margin-top: 18px; -margin-left: 50px; + list-style-type: none; + float: left; + display: flex; + margin-top: 18px; + margin-left: 50px; } #footer #footer1 ul li { - width: auto; - margin-left: 25px; + width: auto; + margin-left: 25px; } -#footer a{ -text-decoration: none; -color: rgb(177, 165, 165); +#footer a { + text-decoration: none; + color: rgb(177, 165, 165); } #footer a:hover { - color: #eff; + color: #eff; } #footer .logo { - height: 40px; - width: 240px; - background-image: url("https://static.frontendmasters.com/assets/fm/js/static/frontendmasters.e1e10b58c1.svg"); + height: 40px; + width: 240px; + background-image: url("https://static.frontendmasters.com/assets/fm/js/static/frontendmasters.e1e10b58c1.svg"); } #footer #footer2 { - display: flex; - margin-left: 22px; - margin-top: 15px; - + display: flex; + margin-left: 22px; + margin-top: 15px; } #footer #footer2 img { - height: 72px; - width: 170px; + height: 72px; + width: 170px; } #footer #footer2 #apple { - height: 50px; - width: 160px; - margin-top:15px; - margin-right: 20px; + height: 50px; + width: 160px; + margin-top: 15px; + margin-right: 20px; } -#footer #footer3, #footer #footer4 { - display: flex; - justify-content: space-between; - margin-left: 27px; - color: #8a8a8a; - margin-right: 30px; - margin-top: 20px; +#footer #footer3, +#footer #footer4 { + display: flex; + justify-content: space-between; + margin-left: 27px; + color: #8a8a8a; + margin-right: 30px; + margin-top: 20px; } #footer #footer3 div:last-child a { - text-decoration: underline; - color: #c94f17; + text-decoration: underline; + color: #c94f17; } #footer #footer3 i { -margin-right: 10px; -/* border-radius: 10%; */ + margin-right: 10px; + /* border-radius: 10%; */ } -@media all and (max-width:768px) and (min-width:381px){ - - #footer #footer1 { - flex-direction: column; - - } - #footer #footer1 ul{ - margin-left:-20px; - } - #footer #footer2 #apple { - margin-top: 10px; - } - #footer #footer3, #footer #footer4 { - flex-direction: column; - } - #footer { - height: 400px; - padding-left: 25px; - padding-right: 25px; - } - #footer #footer3 > div:last-child{ - margin-top: 20px; - } - #footer #footer4 > p:last-child{ - margin-top: 20px; - } - +@media all and (max-width: 768px) and (min-width: 381px) { + #footer #footer1 { + flex-direction: column; + } + #footer #footer1 ul { + margin-left: -20px; + } + #footer #footer2 #apple { + margin-top: 10px; + } + #footer #footer3, + #footer #footer4 { + flex-direction: column; + } + #footer { + height: 400px; + padding-left: 25px; + padding-right: 25px; + } + #footer #footer3 > div:last-child { + margin-top: 20px; + } + #footer #footer4 > p:last-child { + margin-top: 20px; + } } -@media all and (min-width:50px) and (max-width:380px){ - - #footer #footer1 { - flex-direction: column; - - } - #footer #footer1 ul{ - /* margin-left:-20px; +@media all and (min-width: 50px) and (max-width: 380px) { + #footer #footer1 { + flex-direction: column; + } + #footer #footer1 ul { + /* margin-left:-20px; */ - display: none; - } - #footer #footer2 #apple { - margin-top: 10px; - } - #footer #footer3, #footer #footer4 , #footer #footer2{ - flex-direction: column; - } - #footer { - height: 500px; - padding-left: 25px; - padding-right: 25px; - } - #footer #footer3 > div:last-child{ - margin-top: 20px; - } - #footer #footer4 > p:last-child{ - margin-top: 20px; - } + display: none; + } + #footer #footer2 #apple { + margin-top: 10px; + } + #footer #footer3, + #footer #footer4, + #footer #footer2 { + flex-direction: column; + } + #footer { + height: 500px; + padding-left: 25px; + padding-right: 25px; + } + #footer #footer3 > div:last-child { + margin-top: 20px; + } + #footer #footer4 > p:last-child { + margin-top: 20px; + } } diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 0000000..a9cc103 --- /dev/null +++ b/styles/login.css @@ -0,0 +1,135 @@ +* { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-family: Open Sans, sans-serif; +} + +.login-container, +.forgot-password-container { + width: 100%; + background-color: #222222; +} + +.login-wrap, +.forgot-wrap { + max-width: 600px; + margin: auto; + padding: 30px; +} + +.login-wrap form, +.forgot-wrap form { + width: 91%; + display: flex; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #fff; +} +.vertical-margin { + display: flex; + flex-direction: column; + margin: 20px 0; +} +.vertical-margin label { + margin-bottom: 5px; +} + +.vertical-margin input { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; + color: #222; + display: block; + font-family: inherit; + padding: 8px 10px; + font-size: 17px; + width: 100%; +} +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; +} +.checkbox-container, +.submit-container { + display: flex; + align-items: center; +} +.checkbox-container input[type="checkbox"] { + margin-right: 10px; + transform: scale(1.33); +} +.submit-container { + margin-top: 20px; + flex-wrap: wrap; +} +.alert-msg { + background: rgba(255, 255, 255, 0.2); + border: 1px solid #8a8a8a; + border-radius: 5px; + margin: 20px 0; + padding: 5px 10px; + border-color: #e66225; + color: #e66225; + display: none; +} +.alert-msg.active-alert { + display: block; +} + +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 105px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} + +.f-submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 202px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} +.f-submit-container input[type="submit"]:hover { + background: #d43530; +} +.submit-container input[type="submit"]:hover { + background: #d43530; +} +.submit-container a { + color: #dd625e; + transition: color 0.2s ease; +} +.submit-container a:hover { + color: #e58480; +} + +@media all and (min-width: 50px) and (max-width: 380px) { + .submit-container input[type="submit"] { + margin-bottom: 20px; + } +} From 1198c4c19d8c28c9bb7438feb04e9b6211f40a58 Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Fri, 1 Apr 2022 03:03:04 +0530 Subject: [PATCH 44/62] bootcamp --- bootcamp.html | 76 ++++++++ scripts/bootcamp.js | 194 ++++++++++++++++++++ styles/bootcamp.css | 432 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 702 insertions(+) create mode 100644 bootcamp.html create mode 100644 scripts/bootcamp.js create mode 100644 styles/bootcamp.css diff --git a/bootcamp.html b/bootcamp.html new file mode 100644 index 0000000..3dd2a04 --- /dev/null +++ b/bootcamp.html @@ -0,0 +1,76 @@ + + + + + + + Document + + + + + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + +

    Core Coursework

    +

    (take these in order)

    +
    +
    +
    +
    +
    +

    If you would like to remove the bootcamp from your site experience, click unenroll below.

    + +
    +
    + + + + + + + diff --git a/scripts/bootcamp.js b/scripts/bootcamp.js new file mode 100644 index 0000000..eb26313 --- /dev/null +++ b/scripts/bootcamp.js @@ -0,0 +1,194 @@ +var bootcampArr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-01-introduction-html/thumb.webp", + name:"Introduction to HTML", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Learn the basics of HTML, like commonly-used elements and how to create a web page, how to add elements like links, headings, and images, and then practice your new skills by writing the markup for a book chapter.", + time:"1 hours, 47 minutes", + de:"Learn patterns for managing state throughout your React application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-02-introduction-css/thumb.webp", + name:"Introduction to CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"1 hours, 30 minutes", + des:"Learn the basics of CSS, like how to import styles into an HTML file, how to target specific elements on a page using selectors, useful tools, how to add spacing to a page, and a few ways to create basic layouts. Then, practice your new skills by coding the layout for a blog page.", + de:"Learn patterns for managing state throughout your React application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-03-html-forms/thumb.webp", + name:"HTML Forms", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"2 hours, 47 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create forms using HTML and CSS. You’ll be able to differentiate between the different types of input fields that exist in HTML and when to use each one. Then, you’ll learn how to handle form submission, form submission issues, and form styling." + + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-04-embeds-github-pages/thumb.webp", + name:"Website Embeds & GitHub Pages", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"3 hours, 27 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to leverage embedded web fonts and Google Maps into your web pages and how to host a website for free on GitHub Pages. Then, practice your new skills by creating a portfolio website." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-05-calculator-html-css/thumb.webp", + name:"Calculator Project: HTML & CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"3 hours, 10 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create the structure and appearance for the HTML and CSS of the calculator on iOS devices in the first part of the calculator exercise." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-06-introduction-javascript/thumb.webp", + name:"Introduction to JavaScript", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"4 hours, 20 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Learn the basics of JavaScript, like its primitives, how to control the flow of a program, what scope is and why it matters, and data structures that can be used in programming. Then, practice your new skills in two exercises: by coding quiz questions that demonstrate important JavaScript concepts and by making a set of tests written in JavaScript pass. Finally, learn about the DOM, an essential part of building web pages." + }, + { + name:"Calculator Project: JavaScript", + img:"https://static.frontendmasters.com/assets/courses/2019-09-07-calculator-javascript/thumb.webp", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"1 hours, 10 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create the underlying functionality for the JavaScript of the calculator on iOS devices in the final part of the calculator exercise. You’ll practice breaking a problem down into simple, achievable steps, and end up with a working calculator that performs basic math operations." + }, + { + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"3 hours, 30 minutes", + + de:"Learn patterns for managing state throughout your React application.", + img:"https://static.frontendmasters.com/assets/courses/2019-09-08-javascript-in-websites/thumb.webp", + name:"Using JavaScript in Websites", + des:"Learn how to incorporate JavaScript into your websites by first seeing how to use third-party libraries and then creating two projects: an image carousel that uses JavaScript code, and then an application that retrieves data about dog breeds from an API." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-09-web-game-project/thumb.webp", + name:"Build a Game Project: Feed-A-Star-Mole", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"3 hours, 50 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Build a working feed-a-star-mole game from the ground up that utilizes the skills you learned in previous bootcamp courses to structure, lay out, style, and add functionality to a group of hungry moles that appear and disappear as the user tries to feed them. The exercise is broken up into an introduction to what the final product will look like, the HTML and CSS solution for the game, and then the JavaScript solution." + } +] +let main=document.getElementById("main") + +import navbar from "../components/navbar.js" + // console.log(navbar) + document.querySelector(".header").innerHTML=navbar() + import footer from "../components/footer.js" + +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + function display(data,main){ + data.map(function(el){ + let plus1 = document.createElement("div") + plus1.setAttribute("class","plus1") + plus1.innerText="+" + let line = document.createElement("div"); + line.setAttribute("id","line") + let div = document.createElement("div"); + div.setAttribute("id","div") + let div1 = document.createElement("div"); + div1.setAttribute("id","div1") + let img = document.createElement("img") + img.src=el.img + img.setAttribute("id","img") + let img1 = document.createElement("img") + img1.src=el.photo + img1.setAttribute("id","img1") + let h3 = document.createElement("h3") + h3.innerText=el.name + let h4 = document.createElement("h4"); + h4.innerText=el.title + let p = document.createElement("p"); + p.innerText=el.com + let div2 = document.createElement("div") + let div3 = document.createElement("div") + div3.append(h4,p) + div2.append(img1,div3) + div3.setAttribute("id","div3") + div2.setAttribute("id","div2") + div2.style.display="flex" + p.setAttribute("id","p") + let p1 = document.createElement("p"); + p1.innerText=el.des + p1.setAttribute("id","p1") + let p2 = document.createElement("p"); + p2.innerText=el.time + p2.setAttribute("id","p2") + let div4 = document.createElement("div") + let div5= document.createElement("div") + div5.append(p2,div4) + div4.innerText="CC" + div5.setAttribute("id","div5") + div4.setAttribute("id","div4") + let btn = document.createElement("button") + btn.innerText="Watch Course" + btn.setAttribute("id","btn") + let box = document.createElement("div") + let h6 = document.createElement("h6") + h6.innerText="Editor's Notes" + let box_p = document.createElement("p") + + box_p.innerText=el.de + box.setAttribute("id","box") + box.append(h6,box_p) + + + + div1.append(h3,div2,p1,div5,btn) + div.append(img,div1) + img.addEventListener("click",function(){ + window.location.href="display.html" + let displayArr=[]; + displayArr.push(el) + }) + + btn.addEventListener("click",function(){ + window.location.href="joinnow.html" + }) + // document.getElementById("line").append(plus1) + main.append(line,plus1,box,div) + plus1.addEventListener("click",function(){ + box.style.display="block" + }) + }) + +} +display(bootcampArr,main) \ No newline at end of file diff --git a/styles/bootcamp.css b/styles/bootcamp.css new file mode 100644 index 0000000..5630cc9 --- /dev/null +++ b/styles/bootcamp.css @@ -0,0 +1,432 @@ +#bootcamp{ + height: 400px; + width: 100%; + background-color: teal; + display: flex; + align-items: center; + /* justify-content:center; */ + justify-content: space-evenly; + flex-wrap: wrap; + text-align: center; + background-image:url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); +} +.circle-progress { +-webkit-text-size-adjust: 100%; +tab-size: 4; +color: #e6e6e6; +font-family: Open Sans,sans-serif; +font-size: 0px; +line-height: 1.5; +box-sizing: border-box; +position: relative; +width: 300px; +margin-left: 25px; +margin-top: -25px; +/* background-image: #222; */ + +} +.icon-backpack { + position: absolute; + opacity: .6; + /* margin-left: -100px; */ + margin-left: -210px; + margin-top: 30px; +} +.header-progress-completed { +-webkit-text-size-adjust: 100%; +tab-size: 4; +color: #e6e6e6; +font-family: Open Sans,sans-serif; +font-size: 16px; +line-height: 1.5; +box-sizing: border-box; +background: #222; +border-radius: 50%; +height: 250px; +/* left: 9%; */ +width: 250px; +position: absolute; +opacity: 0.5; +/* position: absolute; */ +/* top: 9%; */ +transition-delay: 1s; +transition-duration: 1s; +transition-property: opacity; +margin-left: 50px; +/* width: 82%; */ +z-index: 2; +/* margin-left: -120px; */ +/* margin-top: -80px; */ +} +#head { + width: 40%; + /* margin-left: 100px; */ + text-align:left; + color: #e6e6e6; +} +#head h1 { + color: #fff; + margin-bottom: 15px; +} +#head p { + line-height: 25px; +} +#grid{ +width: 90%; +margin: auto; +padding-bottom: 15px; +border-bottom: 1px solid #e6e6e6;; +color: #e6e6e6; +text-align: center; +line-height: 45px; +margin-top: 50px; + +} #grid svg { +/* font-size: 100px; +*/ +height: 100px; +width: 100px; + +/* background-color: orange; */ +} +#grid h1 { +font-size: 46px; +} +#grid p { +font-size: 21px; +font-weight: 400; +} + + +#main { + /* display: flex; */ + margin-left: 20px; + width: 90%; + margin: auto; + margin-bottom: 50px; + /* justify-content: space-between; */ +} +#line { + height: 540px; + /* max-height: 500px; */ + width: 10px; + background: #3e3e3e; + margin-left: 20px; + margin-top: 25px; + position: absolute; + box-sizing: border-box; + margin-right: 20px; + /* line-height: 400px; */ +} +#plus2 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 65px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + /* text-align: center; */ + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + border-radius: 50%; + margin-bottom: 40px; +} +#box { + background: #3e3e3e; + /* display: flex; */ + /* background-color: black; */ + height: 100px; + /* max-height: 250px; */ + width: 95%; + margin: 25px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + /* color: #278cc7; */ + color: #e6e6e6; + padding: 20px 50px; + border-radius: 20px; + display: none; + margin-top: -50px; + /* max-height: 180px; + */ + /* height: ; */ + +} +#box h6 { + font-size: 20px; + margin-bottom: 7px; + color: #fff; +} +#box p { + line-height: 20px; +} +#main .plus1 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 0px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + /* margin-bottom: 370px; */ + +} + + +#main .plus1:hover { + background-color: grey; + + /* color: #222; */ +} + + #div { + display: flex; + background-color: black; + height: 430px; + width: 95%; + margin: 10px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + } + #main h3 { + color: #dd625e; + font-size: 30px; + } + #main h3:hover { + transition: color .2s; + + } + #img { + opacity: .5; + height: 430px; + } + #img1 { + border-radius: 50%; + height: 70px; + width: 70px; + } + #div1 { + padding: 25px 20px; + } + h4 { + color: #e6e6e6; + + } + #p { + color: #8a8a8a; + + } + #div2 { + margin-top: 15px; + text-align: left; + margin-bottom: 15px; + } + #div3 { + margin-top:12.5px ; + margin-left: 20px; + line-height: 25px; + font-size: 20px; + } + #p1 { + color: #e6e6e6; + line-height: 25px; + margin-bottom: 15px; + + } + #p2 { + color: #8a8a8a; + margin-bottom: 35px; + + + } +#main h3:hover { + color: #8a8a8a; + + } + #div5 { + display: flex; + } + #div4 { + /* background: wheat; */ + color: #222; + margin-left: 15px; + padding: 0 4px; + background-color: #8a8a8a; + height: 20px; + box-sizing: border-box; + border-radius: 10px; + padding: 1.5px 2.5px; + width: 30px; + + + } + #btn { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 200px; +font-weight: bold; +/* background: #c94f17; */ + + } + + + + + #btn:hover { + background-color: #8a8a8a; + } + #btn1:hover { + background-color: #8a8a8a; + } + #div:hover #img { + opacity: 1; + } +#bottom { + background: #3e3e3e; + height: 200px; + width: 100%; + + +} +#bottom > div { + color: #e6e6e6; + /* padding: 50px; */ + width: 50%; + margin: auto; + text-align: center; + justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + +} +#bottom > div > p { + margin-bottom: 15px; + font-size: 18px; +} +#bottom button { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 18px; +line-height: 1.25; +padding: 8px 10px; +text-align: center; +/* margin-right: 20px; */ +margin-left: 25px; +height: 45px; +width: 280px; +font-weight: bold; + +} + @media all and (max-width:768px) and (min-width:381px){ +#img { + position: absolute; + height: 500px; +} + #div1 { + position: relative; + margin-left: 100px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 500px; + +} +#main h3 { + font-size: 25px; +} +#box { + height: 140px; +} +#plus2 { + margin-top: -55px; + margin-left: 27px; +} +#line{ + height: 600px; +} +#p2 { + margin-bottom: 15px; +} +} +@media all and (min-width: 50px) and (max-width: 380px) { + + #img { + position: absolute; + height: 650px; + width: 100%; +} + + + #div1 { + position: relative; + margin-left: 20px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 650px; + + +} +#box { + height: 200px; + padding: 20px 25px; +} + +#plus2 { + margin-top: -55px; + margin-left: 15px; +} +#line{ + height: 800px; +} +#main h3 { + font-size: 25px; +} +#p2 { + margin-bottom: 15px; +} +#div6 { + flex-direction: column; + /* text-align: center; */ +} +#btn1 { + margin-top: 15px; + width: 200px; +} +.elective-container{ + width: 100%; + padding: 10px 0px; + padding-top: 90px; +} +#grid { + height: 550px; +} +} From 6ccda472914127d737d004d2c31ac75644ceaadf Mon Sep 17 00:00:00 2001 From: Muskan Shaw Date: Fri, 1 Apr 2022 03:27:22 +0530 Subject: [PATCH 45/62] more --- Styles/more.css | 621 ++++++++++++++++++++++++++++++++++++++++++++++++ more.html | 161 +++++++++++++ scripts/more.js | 37 +++ 3 files changed, 819 insertions(+) create mode 100644 Styles/more.css create mode 100644 more.html create mode 100644 scripts/more.js diff --git a/Styles/more.css b/Styles/more.css new file mode 100644 index 0000000..6e33ee6 --- /dev/null +++ b/Styles/more.css @@ -0,0 +1,621 @@ + + + body{ + background-color:#222; + } + + #main img{ + height:573px; + width:100%; + position: relative; + + + } + #logo img{ + position: absolute; + margin-top: -460px; + height:280px; + width:280px; + padding-left: 220px; + } + #heading { + position: absolute; + margin-top: -460px; + color: #e6e6e6; + padding-left: 550px; + font-size: 16px; + font-family: Open, Helvetica, sans-serif; + line-height: 40px; + } + #para{ + line-height: 25px; + font-family: Arial, Helvetica, sans-serif; + } + button{ + height:60px; + width:220px; + border-radius: 30px; + font-family: Arial, Helvetica, sans-serif; + font-size: 18px; + background-color: #c02d28; + color: white; + border: none; + } + i{ + font-size:50px; + margin-left: 10px; + color:gray; + padding: 8px; + box-sizing: border-box; + background-color: #e6e6e6; + border-radius: 50%; + margin-top: 10px; + + } + #main2{ + height:3000px; + width:100%; + /* border:2px solid blue; */ + } + #content{ + height:300px; + width:490px; + /* border:1px solid yellow; */ + margin-left: 165px; + margin-top: 70px; + line-height: 35px; + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + color:#e6e6e6; + } + + #content2{ + line-height: 25px; + color: #e6e6e6; + } + hr{ + + width:65%; + color:1px solid grey; + } + #swap{ + height:300px; + width:45%; + /* border: 2px solid green; */ + margin-left: 100px; + margin-top: 20px; + } + #swap img{ + height:300px; + width:90%; + /* border: 2px solid green; */ + margin-left: 60px; + margin-top: 20px; + } + #para2{ + height:200px; + width:35%; + /* border:1px solid cyan; */ + margin-left: 750px; + margin-top: -250px; + color: #e6e6e6; + line-height: 25px; + font-size: 19px; + + } + + #hr2 hr{ + width:65%; + margin-top: 90px; + } + #bootcamp{ + height:60px; + width:25%; + /* border:1px solid red; */ + margin-left: 520px; + font-size: 30px; + color: #e6e6e6; + font-family: Arial, Helvetica, sans-serif; + margin-top: 30px; + } + + + #que{ + height: 800px; + width:60%; + /* border: 2px solid cyan; */ + margin-left: 20%; + line-height: 60px; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + } + #abc{ + display: grid; + grid-template-columns: 400px 200px; + line-height: 30px; + margin-left: 390px; + padding-left: 10px; + width: 540px; + margin-top: 0px; + border-bottom: 1px solid grey; + /* border-right: 1px solid blue; */ + } + #anchor>a{ + display: block; + color: #dd625e; + font-size: 21px; + font-family: Arial, Helvetica, sans-serif; + } + #anchor{ + padding-top: 10px; + line-height: 60px; + } + #hour{ + font-size: 16px; + color:#e6e6e6; + line-height: 44px; + /* border:1px solid green */ + } + #total{ + margin-top: 15px; + margin-left: 400px; + color:white; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + } + #to{ + margin-top: -25px; + margin-left: 800px; + color: #e6e6e6; + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + } + #content3{ + height:350px; + width:480px; + /* border:1px solid yellow; */ + margin-left: 145px; + margin-top: 170px; + + line-height: 45px; + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + color:#e6e6e6; + } + #tag{ + line-height: 25px; + } + + + + form { + width: 40%; + /* border:2px solid lime; */ + margin: 30px auto; + + } + #form > form { + background: #3e3e3e; + + /* border:2px solid pink; */ + width: 35%; + height:670px; + margin: 10px auto; + padding: 60px; + padding-top: 15px; + margin-left: 670px; + margin-top: -450px; + + } + #form > form > h2 { + background:#3e3e3e; + color: #e6e6e6; + text-align: left; + margin-bottom: 12px; + font-size: 30px; + } + #form > form > #input { + background-color: #e6e6e6; + border-radius: 7px; + border: none; + } + #form > form > input { + background-color: #e6e6e6; + border-radius: 7px; + width: 97%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 12px; + outline: none; + border: none; + } + #form .form-div { + display: flex; + background-color: #3e3e3e; + } + #form .form-div > div { + background-color: #3e3e3e; + width: 50%; + } + #form .form-div > div:first-child { + margin-right: 46px; + } + #form .form-div > div > p { + background-color: #3e3e3e; + color: #fff; + margin-bottom: 12px; + } + #form .form-div > div > input { + background-color: #e6e6e6; + border-radius: 7px; + width: 92%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 12px; + outline: none; + border: none; + } + + #form > form > p { + background: #3e3e3e; + color: #e6e6e6; + margin-bottom: 12px; + font-size: 19px; + } + #form > form > p > span { + background: #3e3e3e; + color: #e6e6e6; + margin: 25px 0 0 208px; + font-size: 19px; + } + #form > form > .g-recaptcha { + margin: 20px 0; + width: 46%; + height: 80px; + } + #form > form > #terms { + /* border:2px solid white; */ + /* background-color: #2b2727; */ + color: rgba(255, 255, 255, 0.705); + width: 100%; + margin: 20px 0; + padding: 10px 6px; + } + #form > form > #terms > p { + /* background-color: #2b2727; */ + font-size: 15px; + } + #form > form > #terms > p > a { + color: rgba(255, 0, 0, 0.61); + /* background-color: #2b2727; */ + } + #form > form > #button { + height: 70px; + width: 200px; + border-radius: 40px; + background-color: #c02d28; + border: none; + font-size: 22px; + color: white; + } + + + + #la{ + line-height: 40px; + } + + #ref{ + color: #c02d28; + font-family: Arial, Helvetica, sans-serif; + } + + #bottom{ + margin-top: 100px; + + + } + #faQ{ + height:40px; + width:100px; + /* border: 1px solid cyan; */ + margin-top: 40px; + margin-left: 600px; + padding-top: 20px; + color: white; + padding-left: 10px; + font-size: 40px; + font-family: Arial, Helvetica, sans-serif; + } + + #que{ + height:350px; + width:800px; + /* border: 1px solid cyan; */ + margin-top: 20px; + margin-left: 270px; + padding-top: 20px; + color: white; + padding-left: 10px; + font-size: 40px; + font-family: Arial, Helvetica, sans-serif; + } + #ch1{ + height:40px; + width:90%; + /* border: 1px solid cyan; */ + color: white; + background-color:#891814; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 15px; + align-content: center; + margin-left: 40px; + padding-left: 20px; + } + #ch2{ + width: 91%; + font-size: 15px; + margin-left: 40px; + margin-right: 30px; + line-height: 28px; + /* border: 1px solid red; */ + background-color: white; + color: #3e3e3e; + font-family: Arial, Helvetica, sans-serif; + padding-left: 10px; + + } + .ch3{ + height:45px; + width:91%; + border: 1px solid gray; + font-size: 15px; + background-color: #d3d3d3; + color: rgb(12, 12, 12); + font-size: 20px; + font-weight: 700; + margin-left: 40px; + padding-left: 9px; + } + #frame{ + height:320px; + width:560px; + /* border:1px solid green; */ + margin-left: 520px; + margin-top: -280px; + + } + /* #main { + position: absolute; + } */ + +#clip1 { + clip-path: polygon(0 70%, 0% 100%, 100% 100%); + height: 250px; + width: 100%; + background-color: #000000d0; + position: relative; + margin-top: -250px; + +} +#clip2 { + height: 250px; + width: 100%; + background-color: #000000d0; + position: relative; + margin-top: -250px; + clip-path: polygon(0 100%, 100% 70%, 100% 100%, 0 100%); + +} + @media all and (min-width:50px) and (max-width:380px){ + + #main img{ + height:700px; + width:100%; + position: relative; + + + } + #logo img{ + position: absolute; + margin-top: -640px; + height:200px; + width:205px; + padding-left: 60px; + } + + #heading { + position: absolute; + margin-top:-450px; + color: #e6e6e6; + padding-left:50px; + font-size: 14px; + font-family: Open, Helvetica, sans-serif; + line-height: 40px; + text-align: center; + width: 250px; + } + .fa-twitter{ + display:none; + background-image: none; + + } + + #content,#content2{ + +text-align: center; +margin-left: 10px; + +height: auto; +font-size: 14px; + } + #content>h2{ + width: 250px; + margin-left: 50px; + margin-top: -50px; + } + #content2{ + width: 250px; + margin-left: 50px; + margin-top: -20px; + color: #e6e6e6; + font-family: Open Sans,sans-serif; + font-size: 17px; + line-height: 1.5; + + } + #frame{ + height:250px; + width:530px; + /* border:1px solid green; */ + margin-left: 0px; + margin-top: -0px; + + } + + #para2{ + height:200px; + width:310px; + /* border:1px solid cyan; */ + margin-left: 20px; + /* margin-top: -250px; */ + color: #e6e6e6; + line-height: 20px; + font-size: 14px; + + + } + #swap img{ + height:150px; + width:400px; + + margin-left: 100px; + margin-top: 280px; + margin-left: -100px; + padding-right: 10px; + } + #hr2 hr{ + width:65%; + margin-top: 0px; + } + + #bootcamp{ + height:90px; + width:75%; + /* border:1px solid red; */ + margin-left: 80px; + font-size: 20px; + color: #e6e6e6; + font-family: Arial, Helvetica, sans-serif; + margin-top: 210px; + } + #abc{ + display: grid; + grid-template-columns: 170px 120px; + + + margin-left: 30px; + width: 300px; + margin-top: 0px; + border-bottom: 1px solid grey; + font-size: 10px; + + } + #anchor>a{ + display: block; + color: #dd625e; + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 18px; + /* line-height: 35px; */ + + } + #anchor{ + padding-top: 10px; + line-height: 30px; + + } + + #hour{ + font-size: 16px; + color:#e6e6e6; + line-height: 25px; + margin-left: 40px; + margin-top: -5px; + + /* border:1px solid green */ + } + #total{ + margin-left: 40px; + width: 160px; + font-size: 16px; + } + #to{ + margin-left: 240px; + font-size: 16px; + margin-top: -35px; + + } + #content3{ + height:350px; + width:480px; + /* border:1px solid yellow; */ + margin-left: -60px; + margin-top: 120px; + text-align: center; + line-height: 45px; + font-size: 13px; + font-family: Arial, Helvetica, sans-serif; + color:#e6e6e6; + } + #tag{ + display: block; + line-height: 20px; + width: 200px; + margin-left: 140px; + + } + #form{ + margin-left:-660px; + width: 600px; + margin-top: 400px; + padding-top: 0px; + } + #la{ + line-height: 25px; + width: 250px; + } + #faQ{ + margin-left: 130px; + font-size: 26px; + } + #que{ + margin-left: -30px; + width: 400px; + } + #ch1{ + width:230px; + height: 60px; + line-height: 30px; + margin-left: 60px; + + } + #ch2{ + width: 240px; + height:400px; + margin-left: 60px; + + } + .ch3{ + width: 240px; + height:85px; + line-height: 30px; + margin-left: 60px; + + } + } + + \ No newline at end of file diff --git a/more.html b/more.html new file mode 100644 index 0000000..e13b2f4 --- /dev/null +++ b/more.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + Document + + + + + +
    +
    + +

    Join the Frontend Masters Web
    Development Bootcamp...Free!

    +

    Get access to everything you need to get started developing websites.
    + Learn HTML, CSS and JavaScript through project-based learning.

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

    What is the Bootcamp, and how does it work?

    +

    The Frontend Masters Bootcamp is a complete crash course, and everything you need to get up and running with HTML, CSS and JavaScript. By completing the coursework contained in the Bootcamp, along with practice, you will be well on your way into the world of web development!

    +
    +
    +
    +
    + +
    +

    Why Frontend Masters?

    +

    All of our courses are taught by industry leading experts, people actively shaping the craft of web development. In addition, our courses are regularly updated to keep pace with the latest evolutions to ensure you're learning industry best practices and the latest techniques.

    + +
    +
    +
    +
    +
    Bootcamp Curriculum
    +
    + +

    1 hours, 47 minutes

    +

    4 hours, 11 minutes

    +

    2 hours, 4 minutes

    +

    0 hours, 54 minutes

    +

    0 hours, 48 minutes

    +

    5 hours, 23 minutes

    +

    1 hours, 13 minutes

    +

    3 hours, 2 minutes

    +

    2 hours, 14 minutes

    + +
    + +
    + +
    Total Hours to Learn HTML, CSS & JS
    + +
    21 hours, 6 minutes
    +

    Ready to join the
    Bootcamp?

    +

    Create a free account, and get access to everything you
    need to learn HTML, CSS and JavaScript!
    + + If you already have a Frontend Masters' account,
    please login and return to this page. Otherwise sign-up for a
    free account now.

    +
    + +
    + + +

    Email (you'll need to confirm this email address)

    + +
    +
    +

    First Name

    + +
    +
    +

    Last Name

    + +
    +
    +

    Password

    + +

    Password Again

    + + + + + +
    +
    + + +
    +

    + If you're having trouble signing up, please contact support@frontendmasters.com

    + +
    +
    +
    FAQ
    +
    +
    Q:This is completely free? What's the catch?
    +
    A: This is completely free - and we believe by educating more people about web development, we get a better web - with more voices empowered to share their ideas, apps and perspectives. So the catch is we hope you build something awesome. Oh, and if you'd like to become a customer in the future to take more advanced courses and take your career to the next level, that would be cool too. 😀
    +
    Q:How long will will this Bootcamp be available?
    +
    Q:What will this Bootcamp teach me?
    +
    Q:Where can I go after completing the Bootcamp?
    + +
    +
    + + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/more.js b/scripts/more.js new file mode 100644 index 0000000..243f8b0 --- /dev/null +++ b/scripts/more.js @@ -0,0 +1,37 @@ +let arr=[] + +// document.querySelector("#terms").addEventListener("click",submitfun) + function submitfun(event){ + let Email= document.querySelector("#email").value + let firstname= document.querySelector("#first_name").value + let lastname= document.querySelector("#last_name").value + let password= document.querySelector("#password").value + let passagain= document.querySelector("#password_again").value + event.preventDefault(event) + console.log("hello",Email) + + + if(password==passagain){ + console.log(password,passagain) + obj={ + Email:Email, + firstname:firstname, + lastname:lastname, + password:password, + passagain:passagain + + } + arr.push(obj) + localStorage.setItem("more",JSON.stringify(arr)) + } + else{ + alert("please insert correct password") + + + } + if(arr.length>0){ + window.location.href=("https://frontendmasters.com/bootcamp/") + } + console.log(arr) + + } From 40cf086e365567d07113a768d88c0d495b3075d1 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Fri, 1 Apr 2022 04:29:20 +0530 Subject: [PATCH 46/62] Fix join now page update header --- Styles/joinnow.css | 667 +++++++++++----------------------------- account.html | 21 ++ components/navbar.js | 64 +++- joinnow.html | 339 ++++++++------------ scripts/account-page.js | 15 + scripts/index.js | 8 +- scripts/joinnow.js | 189 ++++-------- scripts/login-page.js | 30 +- styles/main.css | 7 + styles/nav.css | 19 ++ 10 files changed, 502 insertions(+), 857 deletions(-) create mode 100644 account.html create mode 100644 scripts/account-page.js diff --git a/Styles/joinnow.css b/Styles/joinnow.css index c538b10..a9f7167 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -1,554 +1,251 @@ * { - margin: 0px; - padding: 0px; - /* background-color: #2b2727; */ - font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + font-family: Open Sans, sans-serif; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; } -#text1 { - margin-top: -320px; - height: 10px; - width: 99.7%; +.join-now-container { + width: 100%; + background-color: #222222; + color: #fff; } -#text1 > h1 { - color: #e6e6e6; - font-size: 48px; - font-weight: 600; - text-align: center; +.join-head { + max-width: 1200px; + margin: auto; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 20px; } -#text2 { - margin-top: 60px; - height: 60px; - width: 100%; - /* border:2px solid lime */ +.join-head h1 { + font-size: 46px; + margin: 0 20px 10px; } -#text2 > h3 { - color: #e6e6e6; - font-size: 39px; - font-weight: 400; - text-align: center; - margin-top: 8px; +.join-head h2 { + font-size: 31px; + margin: 0 20px 10px; } -#logo { - margin-top: 30px; - height: 110px; - width: 100%; - /* border:2px solid lime; */ + +.lang-logo-wrap { + max-width: 1200px; + margin: auto; + padding: 0 40px; display: flex; justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 20px; } -#logo > div { - /* border:2px solid white; */ +.lang-logo-wrap > .lang-logo { height: 80px; width: 80px; - border-radius: 6px; - overflow: hidden; - margin: 4px 15px 15px 0; - margin-right: 20px; + margin: 20px; } -#logo > div > img { +.lang-logo-wrap > .lang-logo > img { width: 100%; height: 100%; object-fit: contain; } - -#text3 { - margin: 10px 0; - height: 50px; - width: 100%; - /* border:2px solid lime */ -} -#text3 > p { - font-size: 16px; - color: white; +.goto { + padding-top: 10px; text-align: center; - margin-top: 30px; - /* word-spacing: 3px; */ - letter-spacing: 1px; + margin: 20px 0; } -#text3 > p > span > a { - color: red; - letter-spacing: 1px; +.goto a { + color: #dd625e; } -#box { - height: 200px; - width: 100%; - /* border:2px solid lime; */ + +.subscriptions { + max-width: 1200px; + margin: auto; + padding: 40px; display: flex; justify-content: center; + flex-wrap: wrap; + gap: 40px; } -#box > div { - /* border:2px solid blue; */ - height: 100%; - width: 18%; - margin: 0 13px; - background: #111; - border-top: 7px solid #3e3e3e; - box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); +.sub-box { + max-width: 210px; + display: flex; + flex-direction: column; + border-top: 8px solid #3e3e3e; + flex-wrap: wrap; + padding: 20px; + padding-bottom: 40px; + background-color: #111111; cursor: pointer; - position: relative; + font-weight: bold; } -#box > div:hover, -#box > div:hover > .head, -#box > div:hover > .head > .name, -#box > div:hover > .head > .name > p, -#box > div:hover > .para, -#box > div:hover > .para > p { - background: rgb(29 27 27); -} -/* #box > div > .head, -.para:hover { - background: rgba(17, 17, 17, 0.534); -} */ -#box > div > .head { - width: 94%; - height: 45px; - /* border:1px solid white; */ - margin: 8px; - background: #111; +.sub-box:hover { + background-color: #1a1a1a; +} + +.sub-head { display: flex; justify-content: space-between; -} -#box > div > .head > .name { - height: 100%; - width: auto; - background: #111; - /* border:1px solid yellow; */ -} -#box > div > .head > .name > p { - background: #111; - color: white; - font-size: 20px; - margin: 10px 0 0 5px; - text-align: center; -} -#box > div > .head > .price { - height: 70%; - width: 30%; - /* border:1px solid yellow; */ - margin: 4px -20px 0 0; - background-color: rgba(179, 75, 37, 0.993); - border-radius: 5px; -} -#box > div > .head > .price > p { - background-color: rgba(179, 75, 37, 0.993); - color: white; - font-size: 20px; - text-align: right; - margin: 7px 7px 0 0; + margin-bottom: 20px; + position: relative; } -#box > div > .para > p { - background-color: #111; - color: white; - font-size: 20px; - text-align: left; - padding: 5px 15px; - line-height: 25px; +.sub-price { + background: #d85519; + padding: 4px 16px; + border-radius: 4px; + position: absolute; + right: -32px; + top: -4px; + box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); } - - - -#twitter { - height: auto; - width: 100%; - display: flex; - justify-content: center; - align-items: center; +.sub-box.active { + transform: scale(1.091); + background-color: #90221e; + border-top: 8px solid #c02d28; + box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%); } -#twitter > div { - width: 23%; - margin: 45px 15px 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding: 10px; +.registration-container { + background: #111; + box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); + margin-bottom: 30px; + margin: auto; + margin-top: 20px; + padding: 30px 30px 20px; + max-width: 600px; + padding-top: 40px; + padding-bottom: 40px; } -#twitter > .twit > .one { - /* border:1px solid green; */ - height: 85px; - width: 99.6%; - background: #fff; +.registration-container form { + width: 91%; display: flex; - justify-content: space-between; -} -#twitter > .twit > .one > .square { - height: 100%; - width: 22%; - /* border:1px solid red; */ - background: #fff; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #fff; } -#twitter > .twit > .one > .rec { - height: 100%; - width: 60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter > .twit > .one > .rec > h5 { - color: black; - background: #fff; - font-size: 20px; - margin: 16px 0 0 15px; -} -#twitter > .twit > .one > .rec > p { - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter > .twit > .one > .square > #pic { - /* border:1px solid black; */ - height: 80%; - width: 80%; - margin: 6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter > .twit > .one > .square > #pic > img { - height: 100%; - width: 100%; - border-radius: 50%; +.registration-container h2 { + margin-bottom: 20px; } -#twitter > .twit > .one > .square > #twit-logo { - height: 60%; - width: 60%; - margin-left: 25px; +.vertical-margin { + display: flex; + flex-direction: column; + margin-bottom: 20px; } -#twitter > .twit > .two { - width: 99.3%; - height: auto; - /* border:2px solid teal; */ - background: #fff; +.vertical-margin label { + margin-bottom: 5px; } -#twitter > .twit > .two > p { - font-size: 17px; - background: #fff; + +.vertical-margin input, +.vertical-margin select { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; color: #222; - text-align: left; - padding: 15px; - line-height: 22px; -} -#twitter > .twit > .two > p > span { + display: block; + font-family: inherit; + padding: 8px 10px; font-size: 17px; - background: #fff; - color: rgb(70, 161, 161); - text-align: left; -} -#twitter > .twit > .three { - width: 90%; - height: auto; - /* border:2px solid blue; */ - background: #fff; - margin: 5px; -} -#twitter > .twit > .three > p { - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter > .twit > .three > hr { - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; -} - - -#question { - height: 100px; width: 100%; - /* border:2px solid lime */ } -#question > #p { - color: white; - text-align: center; - font-size: 36px; - margin-top: 15px; - margin-bottom: 13px; -} -#question > p { - color: white; - text-align: center; - font-size: 22px; +.vertical-margin select { + width: 104%; } -#question > p > span > a { - color: red; +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; } -/* form */ - -#form { - width: 41%; - /* border:2px solid lime; */ - margin: 30px auto; -} -#form > form { - background: #111; - box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); - /* border:2px solid pink; */ - width: 100%; - margin: 10px auto; - padding: 30px; -} -#form > form > h2 { - background: #111; - color: white; - text-align: left; - margin-bottom: 12px; - font-size: 30px; -} -#form > form > #input { - background-color: white; - border-radius: 7px; - border: none; -} -#form > form > input { - background-color: white; - border-radius: 7px; - width: 97%; - padding: 7px 12px; - font-size: 17px; - margin: 0px; - margin-bottom: 12px; - outline: none; - border: none; -} -#form .form-div { +.horizontal { display: flex; - background-color: #111; } -#form .form-div > div { - background-color: #111; +.horizontal > div { width: 50%; } -#form .form-div > div:first-child { - margin-right: 46px; -} -#form .form-div > div > p { - background-color: #111; - color: #fff; - margin-bottom: 12px; -} -#form .form-div > div > input { - background-color: white; - border-radius: 7px; - width: 92%; - padding: 7px 12px; - font-size: 17px; - margin: 0px; - margin-bottom: 12px; - outline: none; - border: none; +.horizontal > div:first-child { + margin-right: 41px; } -#form > form > p { - background: #111; - color: white; - margin-bottom: 12px; - font-size: 19px; -} -#form > form > p > span { - background: #111; - color: white; - margin: 25px 0 0 208px; - font-size: 19px; -} -#form > form > .g-recaptcha { - margin: 20px 0; - width: 46%; - height: 80px; -} -#form > form > #terms { - /* border:2px solid white; */ - background-color: #2b2727; - color: rgba(255, 255, 255, 0.705); +.card { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; + color: #222; + display: block; + font-family: inherit; + padding: 20px 10px; + font-size: 17px; width: 100%; - margin: 20px 0; - padding: 10px 6px; -} -#form > form > #terms > p { - background-color: #2b2727; - font-size: 15px; -} -#form > form > #terms > p > a { - color: rgba(255, 0, 0, 0.61); - background-color: #2b2727; -} -#form > form > #button { - height: 70px; - width: 200px; - border-radius: 40px; - background-color: #c02d28; - border: none; - font-size: 22px; - color: white; + background-color: #fff; + position: relative; } -#box > .active { - background-color: #90221e; -} -#box > .active > div { - background-color: #90221e; -} -#box > .active > div > div.name { - background-color: #90221e; -} -#box > .active > div > div.name > p { - background-color: #90221e; -} -#box > .active > div > p { - background-color: #90221e; +.card:hover { + border-color: #e66225; + outline: 0; } -#box > div.active:hover, -#box > div.active:hover > .head, -#box > div.active:hover > .head > .name, -#box > div.active:hover > .head > .name > p, -#box > div.active:hover > .para, -#box > div.active:hover > .para > p { - background: #90221e; +.card #card_number { + position: absolute; + top: 10px; + left: 19px; + border: none; + outline: none; } -#body { - margin-top: 400px; +.card #expiry { + position: absolute; + top: 10px; + right: 57px; + width: 10%; + border: none; + outline: none; } - -@media only screen and (min-width: 1001px) and (max-width: 1320px) { - - #form { - width: 71%; - margin: 80px auto; - } - #box > div { - width: 22%; - margin: 0 8px; - } +.card #cvc { + position: absolute; + right: 0px; + width: 10%; + top: 10px; + border: none; + outline: none; } -@media only screen and (min-width: 780px) and (max-width: 1000px) { - #text1 > h1 { - font-size: 38px; - } - #text2 > h3 { - font-size: 28px; - } - #form { - width: 71%; - margin: 80px 0px; - } - #box > div { - width: 22%; - margin: 0 8px; - } - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:50%; - } +.term-of-service { + background: #222; + color: #aaa; + font-size: 14px; + margin-bottom: 20px; + padding: 10px; + margin-top: 20px; + width: 100%; } - -@media only screen and (min-width: 391px) and (max-width: 779px) { - #text1 > h1 { - font-size: 30px; - } - #text2 > h3 { - font-size: 22px; - } - #form { - width: 84%; - - margin-top: 450px; - margin-left:10px; - } - - #logo { - display: flex; - flex-wrap: wrap; - } - #text3 { - margin-top: 170px; - } - - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:50%; - } - #box{ - display: grid; - grid-template-columns: repeat(2,1fr); - gap:10px; - } - #box>div{ - width:80%; - box-sizing: border-box; - margin: 0px 10px; - - } - +.term-of-service a { + color: #dd625e; } -@media only screen and (min-width: 50px) and (max-width: 390px) { - #text1 > h1 { - font-size: 25px; - padding:10px; - } - #text2 > h3 { - font-size: 18px; - padding:10px; - margin-top: 110px; - } - #form { - width: 85%; - - margin-top: 370px; - margin-left:10px; - } - - #logo { - display: flex; - flex-wrap: wrap; - } - #text3 { - margin-top: 410px; - } - - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:80%; - margin-left:40px; - } - #box{ - flex-direction: column; - margin-top: 350px; - gap: 20px; - - } - #box>div{ - width:80%; - margin: auto; - - } - #form>div>.g-recaptcha{ - width:80px; - } - #question { - height: 200px; - } - #question #p { - font-size: 28px; - } - #question p { - font-size: 15px; - } +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 190px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} +.submit-container input[type="submit"]:hover { + background: #d43530; } - diff --git a/account.html b/account.html new file mode 100644 index 0000000..a93a4ea --- /dev/null +++ b/account.html @@ -0,0 +1,21 @@ + + + + + + + My Account + + + + + +
    + + + + + + + + diff --git a/components/navbar.js b/components/navbar.js index 20b3540..ac19c12 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,66 @@ function navbar() { - return `
    + let logged_user = JSON.parse(localStorage.getItem("logged_user")); + if (logged_user) { + console.log(logged_user); + return `
    +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + + + + + + + +
    `; + } else { + return `
    `; + } } export default navbar; diff --git a/joinnow.html b/joinnow.html index c2ad164..e165228 100644 --- a/joinnow.html +++ b/joinnow.html @@ -1,257 +1,176 @@ - - - - - - - + + + + + + + - Document - - -
    - -
    - -
    -

    - Master Modern JavaScript to Full Stack -

    -
    -
    -

    - 100+ Courses, Learning Paths & Mobile Apps for "On the Go" Learning -

    -
    - - -
    -

    If you already have an account, please login

    -
    -
    -
    -
    -
    + Frontend Masters Pricing + + +
    +
    +
    +

    Master Modern JavaScript to Full Stack

    +

    + 100+ Courses, Learning Paths & Mobile Apps for "On the Go" Learning +

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

    + If you already have an account, please + login. +

    +
    +
    +
    +

    MONTHLY

    -
    +

    $39

    -
    +

    Access all premium courses, workshops, and mobile apps. Renewed monthly.

    -
    -
    -
    +
    +
    +

    YEARLY

    -
    +

    $390

    -
    +

    Access everything. Renewed yearly. Save $78 per year!

    -
    -
    -
    +
    +
    +

    MONTHLY TEAM

    -
    +

    $195

    -
    +

    Access for 10 people at your company, renewed monthly. Save 50% on our monthly plans!

    -
    -
    -
    +
    +
    +

    YEARLY TEAM

    -
    +

    $1950

    -
    +

    Access for 10 people at your company, renewed yearly. Save 50% on our yearly plans!

    +
    +
    +

    Register for a Monthly Account

    +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + +
    +
    By clicking Start Learning, you agree to our Terms + of Service and Privacy Policy.
    +
    + +
    +
    +
    -
    -
    -

    Register for a Monthly Account

    -

    Email (you'll need to confirm this email address)

    - -

    -
    -
    -

    First Name

    - -

    -
    -
    -

    Last Name

    - -

    -
    -
    -

    Password

    - -

    -

    Password Again

    - -

    -

    Choose Your Payment Method

    - -
    - - - MM/YY CVC"> -

    - -
    -

    -
    -

    By clicking Start Learning, you agree to our Terms - of Service and Privacy Policy.

    -
    - Start Learning - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    Anthony R. 🇫🇷🚀💻
    -

    @AnthonyHexium

    -
    -
    - -
    -
    -
    -

    @catalinmpit @FrontendMasters This is the best investment I made in my career. I mean, by faaaaaaaar.

    -
    -
    -
    -

    6:36pm · Aug 20, 2020

    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    Andrew Rowley
    -

    @_internetdrew

    -
    -
    - -
    -
    -
    -

    Listen, if you’ve been questioning whether or not you should subscribe to @FrontendMasters, I’ll tell you right now, just do it. - - Literally learned nothing new as far as what I’m using but have a completely different sense of understanding of HOW to make things play together!

    -
    -
    -
    -

    9:26pm · Dec 14, 2021

    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    J.
    -

    @jsilvax

    -
    -
    - -
    -
    -
    -

    I’ve been using @FrontendMasters for years now. It’s crazy seeing it grow over the years and how there’s just so much great content to learn from. I feel like every company should have a subscription for their devs on there. The best bang for your buck.

    -
    -
    -
    -

    2:53am · Aug 28, 2020

    -
    -
    -
    -
    -

    Questions on your account?

    -

    Ask us anything! 😀 support@frontendmasters.com

    -
    -
    - - - - + + - + diff --git a/scripts/account-page.js b/scripts/account-page.js new file mode 100644 index 0000000..83ed869 --- /dev/null +++ b/scripts/account-page.js @@ -0,0 +1,15 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML = footer(); + +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); diff --git a/scripts/index.js b/scripts/index.js index 5c0ccb5..ad567ca 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,4 @@ -import { navbar, hamburgerClick } from "../components/navbar.js"; +import navbar from "../components/navbar.js"; import { slider } from "../components/slider.js"; import { appendTwitterData } from "./slides.js"; import footer from "../components/footer.js"; @@ -7,7 +7,11 @@ document.querySelector(".header").innerHTML = navbar(); document.querySelector("#footer").innerHTML = footer(); // Click Event on Hamburger Icon -hamburgerClick(); +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); // Slider Container let slider_con = document.querySelector(".slider-container"); diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 594cce1..8c0e9d2 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,138 +1,61 @@ +let sub_box = document.querySelectorAll(".sub-box"); + +let data = [ + "Register for a Monthly Account", + "Register for a Yearly Account", + "Register for a Monthly Team Account", + "Register for a Yearly Team Account", +]; +const changePlan = (el, msg) => { + sub_box.forEach((item) => { + item.classList.remove("active"); + }); + el.classList.add("active"); + let title = document.querySelector(".plan"); + title.innerText = msg; +}; - - -let box=document.getElementById("first") -box.classList.add("active") -let plan_boxes = document.querySelectorAll("#box>div"); - -plan_boxes.forEach((item) => { +sub_box.forEach((item, index) => { item.addEventListener("click", () => { - colorChange(item); + let msg = data[index]; + changePlan(item, msg); }); }); -function colorChange(item) { - plan_boxes.forEach((el) => { - el.classList.remove("active"); - }); - item.classList.add("active"); - -} - - -document.querySelector("#form").addEventListener("submit",myFormSubmit); - -var signinobj=JSON.parse(localStorage.getItem("registeredIds")) || []; - - -let a=document.getElementById("erremail") -let b=document.getElementById("errfname") -let c=document.getElementById("errlname") -let d=document.getElementById("errpassword") -let e=document.getElementById("errpasswordagain") -let f=document.getElementById("errcardname") -let g=document.getElementById("errcheck") - //console.log(signinArr); -function myFormSubmit(event){ - event.preventDefault(); - - if - ( - (document.getElementById("email").value=="")|| - (document.getElementById("first_name").value=="")|| - (document.getElementById("last_name").value=="")|| - (document.getElementById("password").value=="")|| - (document.getElementById("password_again").value=="")|| - (document.getElementById("placeholder").value=="")|| - (document.getElementById("card_num").value=="") - ) - { - a.innerText="Please enter a valid email." - a.style.color="red"; - a.style.fontStyle="italic"; - a.style.fontSize="16px"; - - b.innerText="Please enter your first name." - b.style.color="red"; - b.style.fontStyle="italic"; - b.style.fontSize="16px"; - - c.innerText="Please enter your last name." - c.style.color="red"; - c.style.fontStyle="italic"; - c.style.fontSize="16px"; - - d.innerText="Please enter correct password" - d.style.color="red"; - d.style.fontStyle="italic"; - d.style.fontSize="16px"; - - e.innerText="Please enter a matching password." - e.style.color="red"; - e.style.fontStyle="italic"; - e.style.fontSize="16px"; - - f.innerText="Your card number is incomplete." - f.style.color="red"; - f.style.fontStyle="italic"; - f.style.fontSize="16px"; - - g.innerText="Please check the box." - g.style.color="red"; - g.style.fontStyle="italic"; - g.style.fontSize="16px"; - - } - - else{ - - var signinobj=[{ - email:document.querySelector("#email").value, - fname:document.querySelector("#first_name").value, - lname:document.querySelector("#last_name").value, - password:document.querySelector("#password").value, - password_again:document.querySelector("#password_again").value, - placeholder:document.querySelector("#placeholder").value, - card_num:document.querySelector("#card_num").value, - }]; - document.querySelector("#email").value=""; - document.querySelector("#first_name").value=""; - document.querySelector("#last_name").value=""; - document.querySelector("#password").value=""; - document.querySelector("#password_again").value=""; - document.querySelector("#placeholder").value=""; - document.querySelector("#card_num").value=""; - - - localStorage.setItem("registeredIds",JSON.stringify(signinobj)); - - window.location.href="https://frontendmasters.com/" - } - - - } - - - - document.querySelector("#first").addEventListener("click",changeCol) - document.querySelector("#sec").addEventListener("click",changeCol1) - document.querySelector("#third").addEventListener("click",changeCol2) - document.querySelector("#fourth").addEventListener("click",changeCol3) - - function changeCol(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Monthly Account" - } - function changeCol1(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Yearly Account" - } - function changeCol2(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Monthly Team Account" - } - function changeCol3(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Yearly Team Account" - } - +let form = document.querySelector("#register"); + +const storeData = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.getElementById("email").value; + let fn = document.getElementById("first_name").value; + let ln = document.getElementById("last_name").value; + let password = document.getElementById("password").value; + let payment_type = document.getElementById("payment_option").value; + let card_number = document.getElementById("card_number").value; + let expiry = document.getElementById("expiry").value; + let cvc = document.getElementById("cvc").value; + + let detail = { + email, + fn, + ln, + password, + payment_type, + card_number, + expiry, + cvc, + }; + login_data.push(detail); + localStorage.setItem("login_data", JSON.stringify(login_data)); + document.getElementById("email").value = ""; + document.getElementById("first_name").value = ""; + document.getElementById("last_name").value = ""; + document.getElementById("password").value = ""; + document.getElementById("password_again").value = ""; + document.getElementById("card_number").value = ""; + document.getElementById("expiry").value = ""; + document.getElementById("cvc").value = ""; + window.location.href = "Login.html"; +}; +form.addEventListener("submit", storeData); diff --git a/scripts/login-page.js b/scripts/login-page.js index cca5b5a..f89ecd8 100644 --- a/scripts/login-page.js +++ b/scripts/login-page.js @@ -15,41 +15,19 @@ hamburger.addEventListener("click", function () { navMenu.classList.toggle("active"); }); -let data = [ - { - name: "Aniket", - email: "aniket@gmail.com", - password: "test", - }, - { - name: "Miles", - email: "aniket0123@gmail.com", - password: "test", - }, - { - name: "Haresh", - email: "haresh2910@gmail.com", - password: "test", - }, - { - name: "Krunal", - email: "krunal3103@gmail.com", - password: "test", - }, -]; - let login_form = document.querySelector("#login-form"); const loginUser = () => { event.preventDefault(); - let regesiterData = JSON.parse(localStorage.getItem("registerData")) || []; + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.querySelector("#email").value; let password = document.querySelector("#password").value; // if let success = false; let logged_user = null; - for (let i = 0; i < data.length; i++) { - let el = data[i]; + for (let i = 0; i < login_data.length; i++) { + let el = login_data[i]; if (el.email === email && el.password == password) { success = true; logged_user = el; diff --git a/styles/main.css b/styles/main.css index 7698a68..efa47ea 100644 --- a/styles/main.css +++ b/styles/main.css @@ -83,7 +83,9 @@ body { width: 90px; margin-top: 10px; margin-left: 10px; + object-fit: contain; opacity: 0.5; + transition: all 0.5s ease; } #icons img:hover { /* border: 1px solid #eff; */ @@ -125,6 +127,10 @@ body { margin-bottom: 50px; text-align: center; } +#join div div a { + text-decoration: none; + cursor: pointer; +} #join div { position: relative; z-index: 1; @@ -138,6 +144,7 @@ body { } #join button:hover { background-color: chocolate; + cursor: pointer; } #bootcamp { margin-top: 700px; diff --git a/styles/nav.css b/styles/nav.css index 118c54c..7a87c95 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,3 +1,11 @@ +* { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-family: Open Sans, sans-serif; +} + .header { width: 100%; background: linear-gradient(90deg, #c02d28, #e66225); @@ -50,6 +58,17 @@ .header-wrap .right ul li:last-child:hover { background: #d43530; } +.header-wrap .right ul li.logout:last-child { + background-color: transparent; + margin-left: 0; +} +.header-wrap .right ul li.logout:last-child a#logout { + color: #aaaaaa; +} +.header-wrap .right ul li.logout:last-child:hover a#logout { + color: #fff; + background-color: transparent; +} .header-wrap .right ul li { list-style: none; } From e7ffecbb92b286f5e58fcc93aca8fbd79653f326 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 1 Apr 2022 10:37:24 +0530 Subject: [PATCH 47/62] update --- courses.html | 46 +- menuButton1.png | Bin 0 -> 11644 bytes menuButton2.png | Bin 0 -> 10042 bytes scripts/courses.js | 39 +- scripts/coursesData.js | 1008 ++++++++++++++++++++++++++++++++++++++++ styles/courses.css | 147 ++++-- 6 files changed, 1200 insertions(+), 40 deletions(-) create mode 100644 menuButton1.png create mode 100644 menuButton2.png create mode 100644 scripts/coursesData.js diff --git a/courses.html b/courses.html index 7e67bef..0bc726b 100644 --- a/courses.html +++ b/courses.html @@ -8,7 +8,23 @@ -
    +
    +

    Frontend Masters Courses

    + +
    + +
    +
    + + +
    +
    + diff --git a/menuButton1.png b/menuButton1.png new file mode 100644 index 0000000000000000000000000000000000000000..16a8d6dbe84b924047c3bd8fc26828f98741ee9a GIT binary patch literal 11644 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 literal 0 HcmV?d00001 diff --git a/menuButton2.png b/menuButton2.png new file mode 100644 index 0000000000000000000000000000000000000000..27fdf1d1725a3cb759bccab91df2ae699c3f3712 GIT binary patch literal 10042 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%0AqxdQ>#P1zL2?i#580rOfhJ0F}L0$ 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 literal 0 HcmV?d00001 diff --git a/scripts/courses.js b/scripts/courses.js index 79b375e..50c1166 100644 --- a/scripts/courses.js +++ b/scripts/courses.js @@ -2,13 +2,14 @@ const append = (data, parent)=>{ - // parent.innerHTML = null; + parent.innerHTML = null; data.forEach((el) => { // console.log('el:', el); + let mainClass = document.createElement("div"); - mainClass.className = "c"; + mainClass.className = "mainClass"; let outerDiv = document.createElement("div"); @@ -32,17 +33,27 @@ const append = (data, parent)=>{ btn1.innerText = "Watch Free Preview"; btn1.id = "btn1"; + let link1 = document.createElement("a"); + link1.href = "https://frontendmasters.com/courses/angular-13/"; + + link1.append(btn1); + let btn2 = document.createElement('button'); btn2.innerText = "Get Full Access"; btn2.id = "btn2"; + + let link2 = document.createElement('a'); + link2.href = "https://frontendmasters.com/join/ "; + + link2.append(btn2); let title = document.createElement("h2"); title.innerText = el.title; title.className ="title"; - btnClass.append(btn1, btn2); + btnClass.append(link1, link2); let instructorClass = document.createElement("div"); @@ -111,18 +122,28 @@ const append = (data, parent)=>{ parent.append(mainClass); + + }) +} + function search(data,inputValue) { + var searchText = inputValue.value.toLowerCase(); + console.log(searchText); + var filterData = data.filter(function (item) { + var elem = item.title.toLowerCase(); + return elem.includes(searchText); + }); + console.log('filterData:', filterData) + + append(filterData, main); + } +export { append, search }; +// export default append; - - - - }) -} -export default append; diff --git a/scripts/coursesData.js b/scripts/coursesData.js new file mode 100644 index 0000000..78058ba --- /dev/null +++ b/scripts/coursesData.js @@ -0,0 +1,1008 @@ +let coursesData = [ + { + title: "Angular 9 Fundamentals", + href: "\/courses\/angular-9\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 29, 2020", + free: false, + bookmarked: false, + watched: false, + org: "Netflix", + time: "9 hours, 6 minutes ", + }, + + { + title: "State Machines in JavaScript with XState", + href: "\/courses\/xstate\/", + instructorName: "David Khourshid", + instructorSlug: "david-khourshid", + date: "Jun 15, 2020", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate Gatsby with Gatsby Themes", + href: "\/courses\/intermediate-gatsby\/", + instructorName: "Jason Lengstorf", + instructorSlug: "jason-lengstorf", + date: "Dec 17, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Gatsby", + href: "\/courses\/gatsby\/", + instructorName: "Jason Lengstorf", + instructorSlug: "jason-lengstorf", + date: "Jun 13, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate React, v2", + href: "\/courses\/intermediate-react-v2\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 11, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v5", + href: "\/courses\/complete-react-v5\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 4, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "TypeScript 3 Fundamentals, v2", + href: "\/courses\/typescript-v2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Mar 26, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to GraphQL", + href: "\/courses\/graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Jan 22, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Angular Core", + href: "\/courses\/angular-core\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Dec 21, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Node.js", + href: "\/courses\/node-js\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Nov 28, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "AWS for Front-End Engineers (ft. S3, Cloudfront \u0026 Route 53)", + href: "\/courses\/aws-frontend-react\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Oct 16, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate React", + href: "\/courses\/intermediate-react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 14, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React v4", + href: "\/courses\/complete-react-v4\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Mastering Chrome Developer Tools v2", + href: "\/courses\/chrome-dev-tools-v2\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Sep 12, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Rapid Development on AWS: React, Node.js \u0026 GraphQL", + href: "\/courses\/aws-react-node-graphql\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Jul 16, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced GraphQL", + href: "\/courses\/advanced-graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "May 23, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Testing React Applications, v2", + href: "\/courses\/testing-react\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "May 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced React Patterns", + href: "\/courses\/advanced-react-patterns\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "May 2, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "SQL Fundamentals", + href: "\/courses\/sql-fundamentals\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Apr 9, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Four Semesters of Computer Science in 5 Hours, Part 2", + href: "\/courses\/computer-science-2\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Apr 2, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Full Stack for Front-Ends Part 2", + href: "\/courses\/full-stack-v2\/", + instructorName: "Jem Young", + instructorSlug: "jem-young", + date: "Feb 14, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: + "REST \u0026 GraphQL API Design in Node.js, v2 (using Express \u0026 MongoDB)", + href: "\/courses\/api-node-rest-graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Feb 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Awesomer Apps with Angular", + href: "\/courses\/building-apps-angular\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Feb 7, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "TypeScript Fundamentals", + href: "\/courses\/typescript\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Feb 6, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "CSS Grids and Flexbox for Responsive Web Design", + href: "\/courses\/css-grids-flexbox\/", + instructorName: "Jen Kramer", + instructorSlug: "jen-kramer", + date: "Jan 30, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript: The Hard Parts", + href: "\/courses\/javascript-hard-parts\/", + instructorName: "Will Sentance", + instructorSlug: "will-sentance", + date: "Jan 22, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced State Management in React (feat. Redux and MobX)", + href: "\/courses\/react-state\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Dec 4, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Progressive Web Applications and Offline", + href: "\/courses\/progressive-web-apps\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Nov 9, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Vue.js", + href: "\/courses\/vue\/", + instructorName: "Sarah Drasner", + instructorSlug: "sarah-drasner", + date: "Sep 14, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Functional-Light JavaScript, v2", + href: "\/courses\/functional-javascript-v2\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 14, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Deep JavaScript Foundations", + href: "\/courses\/javascript-foundations\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jul 18, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v3 (feat. Redux, Router \u0026 Flow)", + href: "\/courses\/react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 26, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Testing JavaScript Applications (feat. React and Redux)", + href: "\/courses\/testing-javascript\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "Jun 20, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Data Visualization with d3.js v4", + href: "\/courses\/d3-v4\/", + instructorName: "Shirley Wu", + instructorSlug: "shirley-wu", + date: "May 18, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Firebase \u002b React: Real-time, Serverless Web Apps", + href: "\/courses\/firebase-react\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Mar 31, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Data Structures and Algorithms in JavaScript", + href: "\/courses\/data-structures-algorithms\/", + instructorName: "Bianca Gandolfo", + instructorSlug: "bianca-gandolfo", + date: "Mar 29, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced Ember 2.x", + href: "\/courses\/advanced-ember-2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Mar 29, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Full Stack for Front End Engineers", + href: "\/courses\/full-stack\/", + instructorName: "Jem Young", + instructorSlug: "jem-young", + date: "Mar 28, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Build Cross-Platform Desktop Apps with Electron", + href: "\/courses\/electron\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Mar 27, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Reactive Angular 2", + href: "\/courses\/reactive-angular\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Mar 20, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Awesome Web Apps with Angular 2", + href: "\/courses\/web-apps-angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Mar 15, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v2 (feat. Router v4 and Redux)", + href: "\/courses\/complete-intro-react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Mar 6, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Website Accessibility", + href: "\/courses\/web-accessibility\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Feb 13, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Elm", + href: "\/courses\/elm\/", + instructorName: "Richard Feldman", + instructorSlug: "richard-feldman", + date: "Feb 5, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "ES6: The Right Parts", + href: "\/courses\/es6-right-parts\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jan 10, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Zero to Production Node.js on Amazon Web Services", + href: "\/courses\/production-node-aws\/", + instructorName: "Kevin Whinnery", + instructorSlug: "kevin-whinnery", + date: "Dec 28, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Webpack 2 Deep Dive", + href: "\/courses\/webpack\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "Nov 10, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "React Native (feat. Redux)", + href: "\/courses\/react-native\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Oct 27, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Mastering Chrome Developer Tools", + href: "\/courses\/chrome-dev-tools\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Oct 6, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Introduction to React (feat. Redux and React Router)", + href: "\/courses\/react-intro\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Aug 9, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Four Semesters of Computer Science in 5 Hours", + href: "\/courses\/computer-science\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jul 12, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Reactive Angular 2 with ngrx", + href: "\/courses\/reactive-angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 1, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Build Web Apps with Angular 2", + href: "\/courses\/angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "May 4, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Functional-Lite JavaScript", + href: "\/courses\/functional-js-lite\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Mar 8, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced SVG Animation", + href: "\/courses\/svg-animation\/", + instructorName: "Sarah Drasner", + instructorSlug: "sarah-drasner", + date: "Feb 19, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Ember 2.x", + href: "\/courses\/ember-2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Jan 26, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "API Design in Node.js (using Express \u0026 Mongo)", + href: "\/courses\/api-design-nodejs\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Dec 30, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Component-Based Architecture in AngularJS 1.x and ES6", + href: "\/courses\/angular-components-es6\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Dec 30, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Web Apps (with React, Ampersand, ES6 and Webpack)", + href: "\/courses\/modern-web-apps\/", + instructorName: "Henrik Joreteg", + instructorSlug: "henrik-joreteg", + date: "Dec 1, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Meteor", + href: "\/courses\/meteor\/", + instructorName: "Chris Mather", + instructorSlug: "chris-mather", + date: "Nov 10, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Unit Testing JavaScript (with CoffeeScript)", + href: "\/courses\/unit-testing-javascript\/", + instructorName: "Justin Searls", + instructorSlug: "justin-searls", + date: "Oct 16, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Coercion in JavaScript", + href: "\/courses\/javascript-coercion\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 19, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to JavaScript Programming", + href: "\/courses\/javascript-basics\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 19, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "UI Prototyping with Framer.js", + href: "\/courses\/ui-prototyping-framer\/", + instructorName: "Jay Stakelon", + instructorSlug: "jay-stakelon", + date: "Jul 8, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "AngularJS 1.x Application Development", + href: "\/courses\/angular-app-dev\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 5, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "React.js (with Introduction to Flux Architecture)", + href: "\/courses\/react-intro-to-flux\/", + instructorName: "Ryan Florence", + instructorSlug: "ryan-florence", + date: "May 8, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive HTML Email Design", + href: "\/courses\/responsive-email\/", + instructorName: "Justine Jordan", + instructorSlug: "justine-jordan", + date: "Apr 13, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced JS Fundamentals to jQuery \u0026 Pure DOM Scripting", + href: "\/courses\/javascript-jquery-dom\/", + instructorName: "Justin Meyer", + instructorSlug: "justin-meyer", + date: "Mar 21, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript: From Fundamentals to Functional JS", + href: "\/courses\/js-fundamentals-to-functional\/", + instructorName: "Bianca Gandolfo", + instructorSlug: "bianca-gandolfo", + date: "Jan 16, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JS.Next: ES6 \/ ES2015", + href: "\/courses\/jsnext-es6\/", + instructorName: "Aaron Frost", + instructorSlug: "aaron-frost", + date: "Dec 15, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive Typography", + href: "\/courses\/responsive-typography\/", + instructorName: "Jason Pamental", + instructorSlug: "jason-pamental", + date: "Nov 17, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Web Development", + href: "\/courses\/web-development\/", + instructorName: "Nina Zakharenko", + instructorSlug: "nina-zakharenko", + date: "Oct 16, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Choosing a JavaScript Framework", + href: "\/courses\/javascript-frameworks-showdown\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 10, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Hardcore Functional Programming in JavaScript", + href: "\/courses\/functional-javascript\/", + instructorName: "Brian Lonsdorf", + instructorSlug: "brian-lonsdorf", + date: "Aug 15, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Real-Time Web with Node.js", + href: "\/courses\/realtime-html5-nodejs\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jul 12, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced JavaScript", + href: "\/courses\/advanced-javascript\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jun 14, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "HTML5 Media: Audio, Video \u0026 WebRTC", + href: "\/courses\/html5-media-apis\/", + instructorName: "Mark Boas", + instructorSlug: "mark-boas", + date: "Apr 8, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Front-End Tooling and Workflows with Grunt and Beyond", + href: "\/courses\/workflows-and-tooling\/", + instructorName: "David Mosher", + instructorSlug: "david-mosher", + date: "Mar 6, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Interactive Data Visualization with D3.js", + href: "\/courses\/interactive-data-visualization-d3-js\/", + instructorName: "Ian Johnson", + instructorSlug: "ian-johnson", + date: "Dec 20, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Angular 1.x Essentials", + href: "\/courses\/angularjs-in-depth\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Nov 19, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Backbone.js (with Introduction to Testing)", + href: "\/courses\/backbone-js-in-depth-testing-mocha-sinon\/", + instructorName: "Sam Breed", + instructorSlug: "sam-breed", + date: "Oct 16, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "CSS3 In-Depth", + href: "\/courses\/css3-in-depth\/", + instructorName: "Estelle Weyl", + instructorSlug: "estelle-weyl", + date: "Aug 25, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Web UI Architecture", + href: "\/courses\/web-ui-architecture\/", + instructorName: "Garann Means", + instructorSlug: "garann-means", + date: "Jul 3, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Lean Front-End Engineering", + href: "\/courses\/lean-front-end-engineering\/", + instructorName: "Bill Scott", + instructorSlug: "bill-scott", + date: "Jun 7, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive Web Design", + href: "\/courses\/responsive-web-design\/", + instructorName: "Ben Callahan", + instructorSlug: "ben-callahan", + date: "Apr 30, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Website Performance", + href: "\/courses\/website-performance\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Mar 29, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript the Good Parts", + href: "\/courses\/javascript-the-good-parts\/", + instructorName: "Douglas Crockford", + instructorSlug: "douglas-crockford", + date: "Feb 19, 2013", + free: false, + bookmarked: false, + watched: false, + }, + ]; + +console.log(coursesData); + + + //instructor_image data + + for (let i = 0; i < 87; i++) { + if (i < 10) { + coursesData[i].instructor_img_url = + "./instructors_images/instructor_00" + (i + 1) + ".webp"; + } else { + coursesData[i].instructor_img_url = + "./instructors_images/instructor_0" + (i + 1) + ".webp"; + } + } + + //course_images data + for (let i = 0; i < 87; i++) { + if (i < 10) { + coursesData[i].course_img_url = + "./course_images/course_00" + (i + 1) + ".webp"; + } else { + coursesData[i].course_img_url = + "./course_images/course_0" + (i + 1) + ".webp"; + } + } + + //description data + for (let i = 0; i < 87; i++) { + coursesData[i].course_description = + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nobis maiores perspiciatis dolor! Id voluptatum aliquam quia, reiciendis debitis ut magnam pariatur! Dolor consectetur alias esse quasi, fugiat perspiciatis temporibus?"; + } + + //time Data + + for (let i = 1; i < 87; i++) { + coursesData[i].time = + Math.floor(Math.random() * 13) + + " " + + "hours" + + " " + + Math.floor(Math.random() * 60) + + " " + + "Minutes"; + } + + console.log(coursesData); \ No newline at end of file diff --git a/styles/courses.css b/styles/courses.css index 86415bc..3686e34 100644 --- a/styles/courses.css +++ b/styles/courses.css @@ -1,33 +1,111 @@ *{ font-family: sans-serif; + margin: 0; } body{ background-color: #222222; } - + + .header{ + width: 85%; + margin:auto; + /* height: 100px; */ + /* border: 1px solid red; */ + color: #e6e6e6; + padding: 25px 0px 25px 0px; + display: flex; + /* justify-content: flex-end; */ + justify-content: space-between; + } + input{ + width: 30%; + background-color:#3e3e3e; + border: none; + border-radius:5px; + color: white; + } + ::-webkit-input-placeholder{ + color:grey; + } + + #wrap{ + width: 100%; + height: 40px; + background-color: #161616; + /* border: 1px solid red; */ + padding: 0 30px; + /* margin: 0 50px 0 50px; */ + /* margin-bottom:50px; */ + } + #nav{ + display:block; + margin-left: 7%; + } + #nav>a{ + padding: 0px 10px; + line-height: 40px; + font-size: 16px; + text-decoration: none; + color: grey; + } + #expand{ + width: 100%; + /* height: 100px; */ + /* margin: auto; */ + margin-top:10px; + margin-bottom: 10px; + /* border: 1px solid green; */ + display:flex; + flex-direction: row; + justify-content: flex-end; + gap: 10px; + } + #menuButton{ + width: 20px; + height: 20px; + } #main { - width: 80%; + width: 85%; margin: auto; height: auto; /* border: 5px solid red; */ /* padding: 30px; */ - display: grid; + /* display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, 1fr); - grid-gap:80px; + grid-gap:80px; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + /* align-items: flex-start; */ + justify-content: space-between; + + + /* margin-top: 0px; */ } - .c { - width: 451px; - height: 377px; + .mainClass { + width: 49%; + height: 400px;; + /* min-height: 200px; */ position: relative; + margin-bottom: 25px; + /* display: flex; */ + /* display: flex; */ + /* flex-direction: row; */ + /* flex-wrap: wrap; */ + /* align-items: flex-start; */ + /* justify-content: flex-start; */ /* border: 5px solid red; */ /* background-color: aqua; */ } #outer { - width: 377.5px; - height: 360px; + /* width: 377.5px; */ + width: auto; + height: 85%; + /* margin: 10px; */ + /* min-height: auto; */ /* border: 5px solid yellow; */ opacity: 1; @@ -35,52 +113,58 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* min-height: 360px; */ + /* border: 1px solid red; */ + height:85%; position: absolute; - top:-.01px; + top: 0px;; left: 80px; - - + z-index: 5; background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); } .btnClass{ - height: 20px; - width: 87%; + height: 20%; + width:100%; /* border:solid 1px white; */ - padding: 15px; - margin-left: 0px; + padding: 35px; + /* margin-left: 0px; */ + margin-right: 50px; } .descriptionClass{ - height: 280px; + height: 70%; width: 100%; /* border:solid 1px white; */ } .description{ color: white; margin-left:20px; + margin-right:20px; font-size:14px; } .title{ color: #DD625E; margin-left: 20px; + margin-right: 20px; + margin-top:20px; } .instructorClass{ - height: 80px; + min-height: 80px; width: 100%; /* border:solid 1px red; */ } .descrClass{ - height: 100px; + min-height: 100px; width: 100%; /* border:solid 1px green; */ } .timeClass{ - height: 40px; + min-height: 40px; width: 100%; display: inline-block; @@ -105,7 +189,7 @@ .instructor_img{ - height: 78px; + min-height: 78px; width: 78px; border-radius: 100%; margin-left: 20px; @@ -118,7 +202,8 @@ .anchorClass{ display: flex; - flex-direction: row; + flex-direction: row; + margin-right: 20px; } .instructorName{ @@ -131,7 +216,7 @@ background-color:#C02D28; color: white; padding: 10px 20px; - /* height: 45px; */ + /* min-height: 45px; */ margin-left: 0px; border: none; border-radius:40px; @@ -157,8 +242,10 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; @@ -173,8 +260,10 @@ grid-template-columns: repeat(1 ,1fr); } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; From ae576cc6d4b94f65102848739d224f7ac8ad84e0 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 1 Apr 2022 14:30:51 +0530 Subject: [PATCH 48/62] unused file deleted --- courses.html | 6 +++++- scripts/courses.js | 14 ++++++++++++++ styles/courses.css | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/courses.html b/courses.html index 0bc726b..a59cb89 100644 --- a/courses.html +++ b/courses.html @@ -6,9 +6,12 @@ Document + + -
    +
    +

    Frontend Masters Courses

    @@ -25,6 +28,7 @@

    Frontend Masters Courses

    + - + + diff --git a/scripts/dashboard.js b/scripts/dashboard.js new file mode 100644 index 0000000..1352c3a --- /dev/null +++ b/scripts/dashboard.js @@ -0,0 +1,30 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +document.querySelector(".header").innerHTML = navbar(); +document.querySelector("#footer").innerHTML = footer(); + +// Click Event on Hamburger Icon +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); + +const logout = () => { + window.location.href = "index.html"; + localStorage.removeItem("logged_user"); +}; +// For logout +let logout_btn = document.getElementById("logout"); +if (logout_btn) { + logout_btn.addEventListener("click", logout); +} + +let user = document.getElementById("user"); +let user_name = document.getElementById("user_name"); + +let logged_user = JSON.parse(localStorage.getItem("logged_user")); +console.log(logged_user); +user.innerText = "Welcome Back, " + logged_user.fn + " " + logged_user.ln; +user_name.innerText = "Welcome Back, " + logged_user.fn + " " + logged_user.ln; diff --git a/scripts/login-page.js b/scripts/login-page.js index a80a899..a5d75d7 100644 --- a/scripts/login-page.js +++ b/scripts/login-page.js @@ -50,7 +50,7 @@ const loginUser = () => { let alert_box = document.querySelector(".alert-msg"); if (success) { localStorage.setItem("logged_user", JSON.stringify(logged_user)); - window.location.href = "account.html"; + window.location.href = "dashboard.html"; } else { alert_box.innerText = "That wasn't correct. Try again?"; alert_box.classList.add("active-alert"); From 21c972a37f7730284068b5a93daeb56a28885e8f Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Sat, 2 Apr 2022 08:27:03 +0530 Subject: [PATCH 61/62] save --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 81d285c..7d32ae9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Frontend Master Website - + From 8fcd0e9d41e9152cb922502b3f23394944a146ee Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Sat, 2 Apr 2022 10:40:21 +0530 Subject: [PATCH 62/62] twitter data done --- scripts/data.js | 355 +++++++++++++++++------------------------------- 1 file changed, 128 insertions(+), 227 deletions(-) diff --git a/scripts/data.js b/scripts/data.js index 4146b1e..9711f11 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -2,7 +2,7 @@ let twittweData = [ [ { name: "Negar Jamalifard", - user_name: "@NegarDev", + user_name: "@@NegarDev", profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", @@ -14,7 +14,7 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + time: "4:56pm · Dec 16, 2021", }, { name: "Bhargav", @@ -22,7 +22,7 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", + time: "12:56pm · Nov 30, 2021", }, { name: "Kevin Powell", @@ -30,325 +30,226 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", + time: "10:44pm · Oct 11, 2020", }, { name: "AJ Thompson", user_name: "@ajthompson", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + "https://pbs.twimg.com/profile_images/1236097570637844486/YNWHjUtv_reasonably_small.jpg", msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", - time: "8:56pm · Dec 16, 2021", + time: "3:57pm · Oct 11,2020", }, { name: "Dave Halewood", user_name: "@halewood", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + "https://pbs.twimg.com/profile_images/1057964722585305088/jZJUDPhj_reasonably_small.jpg", msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", - time: "8:56pm · Dec 16, 2021", + time: "8:33pm · Oct 5, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Andrew Poe", + user_name: "@andrewtpoe", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/599651293423128578/-7h5hALt_reasonably_small.png", + msg: "@FrontendMasters is dollar for dollar the best money I've spent on continued education as a developer. So much A+ content.", + time: "2:50pm · Oct 21, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "PurpleDoll lvl0", + user_name: "@purpledoll001", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1216765400534409216/iKnNkFof_reasonably_small.jpg", + msg: "What an incredible XSTATE course you have on @FrontendMasters @DavidKPiano. Amazing tool and amazing way to reach our brains :D", + time: "9:48pm · Sep 2, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Sarah Drasner", + user_name: "@sarah_edo", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1281071936605323266/wc1KRZLK_reasonably_small.jpg", + msg: "I've really been enjoying @scotups courses, he's got everything from Next.js to GraphQL, to API design. He's a great instructor, does an amazing job walking through things and speaking to community and preferences too, hard to do! https://t.co/KaJnQw3HFo", + time: "6:07pm Oct 1,2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Gustavo Sanchez", + user_name: "@gusanchedev", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1260995399088824328/Z8L5nVjn_reasonably_small.jpg", + msg: "I just completed "JavaScript: The Hard Parts, v2" by @willsentance on @FrontendMasters! https://t.co/fB36c8Ohiv No better resource for full understanding Closures, asynchronous JS and classes and prototypes. Thanks @willsentance", + time: "5:51pm · Aug 21, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Tracey “3Shots” Berg-Fulton", + user_name: "@BergFulton", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1395830541409206277/DNlCTovQ_reasonably_small.jpg", + msg: "OMG @sarah_edo 's Intro to Vue course on @FrontendMasters is *so good*. I've made a few attempts to learn but this is the first time the lightbulb has fully come on. https://t.co/Nwp7QzbyqW", + time: "5:44pm · Aug 27, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "J.", + user_name: "@jsilvax", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1395830541409206277/DNlCTovQ_reasonably_small.jpg", + msg: "I’ve been using @FrontendMasters for years now. It’s crazy seeing it grow over the years and how there’s just so much great content to learn from. I feel like every company should have a subscription for their devs on there. The best bang for your buck.", + time: "2:53am · Aug 28, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Megan Sullivan", + user_name: "@meganesulli", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1298757926790680576/bI2v6ehX_reasonably_small.jpg", + msg: "Just finished "Accessibility in JavaScript Applications" by @marcysutton on @FrontendMasters 🎉 10/10, would recommend! Good pace, great explanations, lots of code examples. Now I'm excited to make some #a11y improvements to my own projects! 🧠⚙️ https://t.co/gvliKoyehW", + time: "11:15pm · Aug 25, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Anthony R. 🇫🇷🚀💻", + user_name: "@AnthonyHexium", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1388480669903466496/qBizVmo3_reasonably_small.jpg", + msg: "@catalinmpit @FrontendMasters This is the best investment I made in my career. I mean, by faaaaaaaar.", + time: "6:36pm · Aug 20, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Jeremy Stuart Barnes", + user_name: "@JeremyStuBarnes", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1204835226016346112/aXwPlrg4_reasonably_small.jpg", + msg: "I'm finishing up @FrontendMasters course "Full Stack for Front-End Engineers, v2" and it is one of the most enlightening courses I've taken on how the web works and learning about all of the intimidating ideas around servers, packets, proxies, etc. Highly recommend!", + time: "5:32pm · Aug 16, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Marco Monsanto", + user_name: "@marcomonsanto2", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1482381957560471554/I93pjNXG_reasonably_small.jpg", + msg: "Shout-out to @JemYoung and @willsentance for their amazing courses in @FrontendMasters!! Not only the content is amazing but they are also incredibly easy to watch and stay engaged.", + time: "1:50pm · Aug 1, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Sandeep Ranjan", + user_name: "@sandeepranjan_", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1500588301400809473/NQ5s9b7O_reasonably_small.jpg", + msg: "Thank you @FrontendMasters & @stevekinney for this awesome course State Management with Redux. Finally got confident with Redux.", + time: "11:43pm · Apr 28, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Kevin", + user_name: "@optimistic_updt", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1243303350042415104/yrucLbdT_reasonably_small.jpg", + msg: "Im in love with Frontend Masters and @holtbt!! Just working my way through the React lessons and I just love the way @holtbt explains the concepts and configs he runs. Awesome job!! #reactjs", + time: "8:06am · Jul 25, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Joss Stancek", + user_name: "@JossWriteCode", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/3186893733/e380c06fba1c4e2ba4538d77ccb6ad8d_reasonably_small.jpeg", + msg: "Watching JavaScript: The Hard Parts, v2 with @willsentance on @FrontendMasters. He is an amazing teacher. I now understand what's happening on every line of a JS promise. Feels so good!", + time: "3:55pm · Jul 22, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Jay Papisan", + user_name: "@papistan1", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1139758277699313664/7xmfaORG_reasonably_small.jpg", + msg: "Building out our @storybookjs + Design System for work with a little help from @EmmaBostian 's @FrontendMasters DS & React course - super concise and helpful to get up and running fast🔥", + time: "3:37am · Jul 19, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "billyhunt", + user_name: "@billyhunt", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1655720266/headshot-small_reasonably_small.jpg", + msg: "I really enjoyed watching @scotups's Client-Side GraphQL in React class on @FrontendMasters this weekend. He is a good teacher.", + time: "2:29pm · Jul 13, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Melvin", + user_name: "@Melvin_manni", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1502654407242047491/NvKStHkL_reasonably_small.jpg", + msg: "@holtbt React course on @FrontendMasters provided more insight and helped me appreciate React more. I already know some of the things being taught but i had no problem re-learning it. So far that is the best React course I've come across. 💯", + time: "8:56am · Jul 4, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Caleb Lovell", + user_name: "@NCaleb_Lovell", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1119737710057385984/tDO-nNID_reasonably_small.png", + msg: "@holtbt Hey Brian, many thanks for your course on containers and Docker on @FrontendMasters! SO glad to finally grasp how they work. I've lost many hours to failing with Docker because I didn't understand the internals. No more! Looking forward to Intro to Linux. Thanks!!", + time: "5:50pm · Jun 26, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Jimmy", + user_name: "@jimmyaldape", profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + msg: "@FrontendMasters courses are already paying off. Can’t stop. Won’t stop.", + time: "9:56pm · Jun 9, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Stefan Fejes", + user_name: "@fejas713", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1176389111634112512/70t8NtS3_reasonably_small.jpg", + msg: "@FrontendMasters is like a fully fledged University at this point. There're many courses to chose from industry leading professionals. Having the ability to learn what you want when you want it is phenomenal.", + time: "11:51am · Apr 7, 2019", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Sam Ratemo", + user_name: "@sammyeast", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1197971799251664897/-3c53xLD_reasonably_small.jpg", + msg: "@scotups following your node.js v3 on frontend masters, loving it. its straight 🔥🔥", + time: "10:51pm · Apr 3, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Olivia Oddo", + user_name: "@OliviaOddo", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/950536864787656704/Kd3wLQJx_reasonably_small.jpg", + msg:"Thank you @TheLarkInn and @stevekinney for your @FrontendMasters courses! I don’t think I would have landed my new job as a build infrastructure/web performance engineer without y’all 😍", + time: "6:44pm · Oct 18, 2018", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Nhu Phan 👩🏻‍💻🧘🏻‍♀️", + user_name: "@Nhuphan0404", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1251337586661974016/eheDTCuo_reasonably_small.jpg", + msg: "I have recently spent most of my time on @FrontendMasters, 👩🏻‍💻 with the beginning path🤓 , I tend to understand things clearly rather than doing without understanding it. Can't recommend FM enough, its content is amazing, feel like it is tailor-made for me 🤪🤓.", + time: "3:33am · Mar 1, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Ricky Garcia", + user_name: "@RickyGarcia", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1261295422061940736/zo-7G1lq_reasonably_small.jpg", + msg:"I loved, LOVED, Javascript the Hardparts taught by @willsentance on @FrontendMasters. What an incredible deep dive. #FrontEnd #webdevelopment", + time: "6:27pm · Jan 26, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Kelly Watson", + user_name: "@KellyWatson", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/935215363792560128/MY76hbgO_reasonably_small.jpg", + msg: "@ArlanWasHere @FrontendMasters - it’s really worth the subscription. The tracks are fantastic. I wish I would have started there instead of cobbling together online places to learn on my own.", + time: "5:21pm · Apr 3, 2019", }, ], + ]; let mid_data = [