diff --git a/Login.html b/Login.html index ccc2252..fc8ac20 100644 --- a/Login.html +++ b/Login.html @@ -1,131 +1,33 @@ - - - - - Document - - - - - + + + + + + Log In to Frontend Masters + + + + + +
-
-
-
-
-
-
- Remember me
- - Forgot your password? -
-
+ + +
+ + - + + - - + + diff --git a/Styles/dashboard.css b/Styles/dashboard.css new file mode 100644 index 0000000..dc2545f --- /dev/null +++ b/Styles/dashboard.css @@ -0,0 +1,377 @@ +* { + 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 { + max-width: 80%; + /* border: 2px solid blue; */ + margin: auto; + padding: 20px 0 20px 0; + margin-top: 3%; +} +#head h1 { + font-size: 36px; + color: #e6e6e6; + font-weight: 600; +} +#cointainer { + max-width: 80%; + margin: auto; + /* border: 2px solid green; */ + margin-top: 20px; + display: flex; + margin-bottom: 70px; + /* 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: 4% 0 4% 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: 96%; + /* border: 1px solid pink; */ + margin: 3% 0 0 2%; +} + +/* ................#welcome_one............... */ + +#welcome_one > h6 { + font-size: 20px; + padding-left: 15px; + padding-top: 10px; + line-height: 25px; +} +#welcome_one > p { + padding-left: 15px; + line-height: 25px; + font-size: 17px; + color: rgb(255, 255, 255); +} +#welcome_one > #p { + color: rgb(158, 147, 147); + padding-left: 15px; + line-height: 25px; + padding-bottom: 10px; +} + +/* ................#welcome_two............... */ + +#welcome_two { + display: flex; + +} +.image { + width: 14%; + height:70px; + /* border: 3px solid red; */ +} +.text { + width: 80%; + /* border: 3px solid red; */ + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 2%; +} +.text p { + color: #a7a799; +} +.text p a { + text-decoration: none; + color: #9c341d; + font-size: 18px; +} +.text p a:hover { + text-decoration: underline; +} +.image > img { + height: 100%; + width: 100%; + object-fit: contain; +} + +/* ................#welcome_three............... */ + +#welcome_three { + display: flex; + /* height:80px; */ +} + +/* ................#welcome_three............... */ + +#welcome_four { + display: flex; + /* height:80px; */ +} + +/* ................#welcome_five............... */ + +#welcome_five { + padding: 30px 0 20px 0; +} +#welcome_five p { + margin-left: 15px; +} +#welcome_five p a { + font-size: 16px; + text-decoration: none; + color: #cd564a; +} +#welcome_five p a:hover{ + text-decoration: underline; +} + +/* ................#learning............... */ + +.learning { + max-width: 100%; + /* border: 1px solid yellowgreen; */ + padding: 2.5% 2%; + margin: 3% 0; +} +.learning p { + font-size: 25px; +} +/* .learning p span { + color: red; + font-size: 18px; +} */ + +#beginner { + max-width: 100%; + margin:5% 0; + /* border: 1px solid yellowgreen; */ +} +#beginner #option { + width: 100%; + /* border: 2px solid blue; */ + /* height:50px; */ + padding: 25px 0 25px 0; + background-color: black; +} +#beginner #option #select { + width: 85%; + padding: 10px; + border-radius: 10px; + margin: 0 7.5%; +} +#beginner #circle { + /* border: 2px solid red; */ + background-color: #383838; + display: flex; +} +#progress_bar { + /* border: 5px solid yellow; */ + width: 50%; +} +#content { + /* border: 2px solid yellow; */ + width: 50%; +} +#content h2 { + margin: 30% 0 5% 5%; + color: #eee2e2; + font-size: 30px; +} +#content p { + padding: 0 25% 0 5%; + color: #eee2e2; + font-size: 18px; + line-height: 26px; +} +#content a { + margin: 20px 0 0 20px; + color: #cd564a; + font-size: 16px; + line-height: 35px; +} +#fullstack { + max-width: 100%; + background-color: black; +} +#fullstack>div{ + margin:3% 0 0 2%; +} +#fullstack #welcome_two, +#fullstack #welcome_three, +#fullstack #welcome_four { + background-color: black; +} +#video { + width: 100%; + height: 300px; + background-color: #383838; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +#video .img-box { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; +} +#video .img-box img { + width: 100%; + height: 100%; + object-fit: cover; +} +#video .button { + position: absolute; + /* left: 0; + top: 0; */ + z-index: 1; +} +#video_youtube iframe{ + width:98%; + +} + +.button button{ + background-color: #d1561c; + height:60px; + width:200px; + border-radius: 30px; + color:white; + font-size: 25px; + border-style: none; + +} +.button button:hover{ + background-color: #f18350; +} +.paragraph { + /* border: 3px solid lime; */ + background-color: black; + padding: 20px 0 20px 0; +} +.paragraph h4 { + font-size: 17px; + padding: 0 5%; +} +.paragraph p { + font-size: 14px; + padding: 0 5%; + color: #a8a0a0; + line-height: 20px; +} +.paragraph p span{ + color:rgb(138, 9, 9); +} +#second { + background-color: black; +} +#welcome_four, #welcome_three, #welcome_two { + margin: 1% 0 1% 2%; +} +hr{ + width:98%; + margin: auto; + color:grey; + margin-top: 2%; +} + +@media only screen and (min-width: 381px) and (max-width: 768px) { + #cointainer { + display: flex; + flex-direction: column; + width: 100%; + } + #cointainer > div { + width: 98%; + margin: auto; + } + .text p { + line-height: 16px; + font-size: 18px; + } + .text p a { + font-size: 16px; + } + /* #beginner #circle{ + flex-direction: column; + } + #beginner #circle > div{ + width:90%; + margin:auto; + } + */ +} +@media only screen and (min-width: 50px) and (max-width: 380px) { + #cointainer { + display: flex; + flex-direction: column; + width: 100%; + } + #cointainer > div { + width: 100%; + margin: auto; + } + .text p { + line-height: 17px; + font-size: 12px; + } + .text p a { + font-size: 14px; + } + #beginner #circle { + display: flex; + flex-direction: column; + } + #beginner #circle > div { + width: 90%; + margin: auto; + } + .button button{ + width:80%; + } + #video_youtube iframe{ + width:98%; + } +} diff --git a/Styles/joinnow.css b/Styles/joinnow.css index e5d84f0..eebaa6b 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -1,553 +1,337 @@ * { - 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; -} -#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; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #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; + width: 100%; } -#twitter > .twit > .three { - width: 90%; - height: auto; - /* border:2px solid blue; */ - background: #fff; - margin: 5px; +.vertical-margin select { + width: 104%; } -#twitter > .twit > .three > p { - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter > .twit > .three > hr { - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; } - -#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; +.horizontal { + display: flex; } -#question > p { - color: white; - text-align: center; - font-size: 22px; +.horizontal > div { + width: 50%; } -#question > p > span > a { - color: red; +.horizontal > div:first-child { + margin-right: 41px; } -/* 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; */ +.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: 10px auto; - padding: 30px; + background-color: #fff; + position: relative; } -#form > form > h2 { - background: #111; - color: white; - text-align: left; - margin-bottom: 12px; - font-size: 30px; + +.card:hover { + border-color: #e66225; + outline: 0; } -#form > form > #input { - background-color: white; - border-radius: 7px; + +.card #card_number { + position: absolute; + top: 10px; + left: 19px; 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; +.card #expiry { + position: absolute; + top: 10px; + right: 57px; + width: 10%; + border: none; outline: none; +} +.card #cvc { + position: absolute; + right: 0px; + width: 10%; + top: 10px; border: none; + outline: 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); +.term-of-service { + background: #222; + color: #aaa; + font-size: 14px; + margin-bottom: 20px; + padding: 10px; + margin-top: 20px; 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; +.term-of-service a { + color: #dd625e; } -#form > form > #button { - height: 70px; - width: 200px; - border-radius: 40px; - background-color: #c02d28; + +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; border: none; - font-size: 22px; - color: white; + 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; } -#box > .active { - background-color: #90221e; +.twitter-container { + display: flex; + gap: 20px; + max-width: 1200px; + margin: auto; + padding: 30px; + align-items: center; + flex-wrap: wrap; } -#box > .active > div { - background-color: #90221e; + +.twitter-box { + flex: 1; + background: #fff; + border-radius: 10px; + color: #222; + line-height: 1.4; + min-width: 240px; + padding: 16px; + position: relative; + text-align: left; } -#box > .active > div > div.name { - background-color: #90221e; + +.twitter-box-top { + color: #222; + display: flex; + align-items: center; + margin-bottom: 12px; } -#box > .active > div > div.name > p { - background-color: #90221e; + +.profile-img { + width: 10%; + margin-right: 10px; } -#box > .active > div > p { - background-color: #90221e; +.profile-img img { + width: 100%; + object-fit: cover; + border-radius: 50%; } -#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; +.profile-name { + font-weight: bold; } -#body { - margin-top: 400px; +.user-name { + color: #8a8a8a; + font-size: 14px; } -@media only screen and (min-width: 1001px) and (max-width: 1320px) { - - #form { - width: 71%; - margin: 80px auto; - } - #box > div { - width: 22%; - margin: 0 8px; - } +.twit-icon { + margin-left: auto; + font-size: 27px; + color: #1da1f2; } -@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%; - } +.twitter-box-mid { + font-size: 17px; + margin: 10px 0; + margin-bottom: 10px; } -@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; - - } - +.twitter-box-bottom { + border-top: 1px solid #ccc; + font-size: 14px; + color: #8a8a8a; + padding-top: 10px; } -@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; - } +.que-container { + max-width: 1200px; + margin: auto; + padding: 20px 0 80px; + text-align: center; +} +.que-container h3 { + font-size: 27px; + margin: 0; + padding: 0 0 10px; +} +.que-container p { + font-size: 21px; + margin: 0; + padding: 0; +} +.que-container p a { + color: #dd625e; } diff --git a/account.html b/account.html new file mode 100644 index 0000000..84ab19e --- /dev/null +++ b/account.html @@ -0,0 +1,22 @@ + + + + + + + My Account + + + + + + +
+ +
+ + + + + + diff --git a/components/account-page.js b/components/account-page.js new file mode 100644 index 0000000..c885297 --- /dev/null +++ b/components/account-page.js @@ -0,0 +1,168 @@ +const account = () => { + return `
+

My Account

+
+ + +
+
`; +}; + +export default account; diff --git a/components/footer.js b/components/footer.js index 6d07964..0bdb851 100644 --- a/components/footer.js +++ b/components/footer.js @@ -1,13 +1,13 @@ -function footer(){ - return `
+function footer() { + return `
-` +`; } -export default footer; \ No newline at end of file +export default footer; diff --git a/components/forgot-password.js b/components/forgot-password.js new file mode 100644 index 0000000..05e78df --- /dev/null +++ b/components/forgot-password.js @@ -0,0 +1,20 @@ +const forgot = () => { + return `
+
+
+
+ + +
+
+ + +
+
+ +
+
+
`; +}; + +export default forgot; diff --git a/components/joinnow.js b/components/joinnow.js new file mode 100644 index 0000000..4172b65 --- /dev/null +++ b/components/joinnow.js @@ -0,0 +1,152 @@ +const joinnow = () => { + return `
+

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.
+
+ +
+
+
+ +
+

Questions on your account?

+

+ Ask us anything! 😀 support@frontendmasters.com +

+
`; +}; + +export default joinnow; diff --git a/components/login.js b/components/login.js new file mode 100644 index 0000000..9f19b94 --- /dev/null +++ b/components/login.js @@ -0,0 +1,25 @@ +const login = () => { + return ``; +}; + +export default login; diff --git a/components/navbar.js b/components/navbar.js index 4bd6f30..d967d2f 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,67 @@ 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/components/path.js b/components/path.js index eb37f8d..d19bfaf 100644 --- a/components/path.js +++ b/components/path.js @@ -1,108 +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 + 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 }; diff --git a/components/slider.js b/components/slider.js index 5e87dfd..492f821 100644 --- a/components/slider.js +++ b/components/slider.js @@ -1,18 +1,18 @@ const slider = () => { - return `
-

What They're Saying About Us (@FrontendMasters)

+ return `
+

What They're Saying About Us (@FrontendMasters)

+
+
+
+
-
-
- -
-
-
-
-
- -
-
`; - }; - - export { slider }; \ No newline at end of file +
+
+
+
+ +
+
`; +}; + +export { slider }; diff --git a/course_images/course_001.webp b/course_images/course_001.webp new file mode 100644 index 0000000..720a6f6 Binary files /dev/null and b/course_images/course_001.webp differ diff --git a/course_images/course_002.webp b/course_images/course_002.webp new file mode 100644 index 0000000..6d6d88c Binary files /dev/null and b/course_images/course_002.webp differ diff --git a/course_images/course_003.webp b/course_images/course_003.webp new file mode 100644 index 0000000..b88ea90 Binary files /dev/null and b/course_images/course_003.webp differ diff --git a/course_images/course_004.webp b/course_images/course_004.webp new file mode 100644 index 0000000..7c0212f Binary files /dev/null and b/course_images/course_004.webp differ diff --git a/course_images/course_005.webp b/course_images/course_005.webp new file mode 100644 index 0000000..5b0b412 Binary files /dev/null and b/course_images/course_005.webp differ diff --git a/course_images/course_006.webp b/course_images/course_006.webp new file mode 100644 index 0000000..b6d7c38 Binary files /dev/null and b/course_images/course_006.webp differ diff --git a/course_images/course_007.webp b/course_images/course_007.webp new file mode 100644 index 0000000..8ecadb7 Binary files /dev/null and b/course_images/course_007.webp differ diff --git a/course_images/course_008.webp b/course_images/course_008.webp new file mode 100644 index 0000000..af81794 Binary files /dev/null and b/course_images/course_008.webp differ diff --git a/course_images/course_009.webp b/course_images/course_009.webp new file mode 100644 index 0000000..2d9408c Binary files /dev/null and b/course_images/course_009.webp differ diff --git a/course_images/course_010.webp b/course_images/course_010.webp new file mode 100644 index 0000000..25c1c58 Binary files /dev/null and b/course_images/course_010.webp differ diff --git a/course_images/course_011.webp b/course_images/course_011.webp new file mode 100644 index 0000000..110010e Binary files /dev/null and b/course_images/course_011.webp differ diff --git a/course_images/course_012.webp b/course_images/course_012.webp new file mode 100644 index 0000000..4b46ff8 Binary files /dev/null and b/course_images/course_012.webp differ diff --git a/course_images/course_013.webp b/course_images/course_013.webp new file mode 100644 index 0000000..4bfe1bd Binary files /dev/null and b/course_images/course_013.webp differ diff --git a/course_images/course_014.webp b/course_images/course_014.webp new file mode 100644 index 0000000..4b0779e Binary files /dev/null and b/course_images/course_014.webp differ diff --git a/course_images/course_015.webp b/course_images/course_015.webp new file mode 100644 index 0000000..5dc59b2 Binary files /dev/null and b/course_images/course_015.webp differ diff --git a/course_images/course_016.webp b/course_images/course_016.webp new file mode 100644 index 0000000..1841d38 Binary files /dev/null and b/course_images/course_016.webp differ diff --git a/course_images/course_017.webp b/course_images/course_017.webp new file mode 100644 index 0000000..370bfc4 Binary files /dev/null and b/course_images/course_017.webp differ diff --git a/course_images/course_018.webp b/course_images/course_018.webp new file mode 100644 index 0000000..7d3b498 Binary files /dev/null and b/course_images/course_018.webp differ diff --git a/course_images/course_019.webp b/course_images/course_019.webp new file mode 100644 index 0000000..1ad6b94 Binary files /dev/null and b/course_images/course_019.webp differ diff --git a/course_images/course_020.webp b/course_images/course_020.webp new file mode 100644 index 0000000..272c947 Binary files /dev/null and b/course_images/course_020.webp differ diff --git a/course_images/course_021.webp b/course_images/course_021.webp new file mode 100644 index 0000000..7cd003f Binary files /dev/null and b/course_images/course_021.webp differ diff --git a/course_images/course_022.webp b/course_images/course_022.webp new file mode 100644 index 0000000..6e03a2d Binary files /dev/null and b/course_images/course_022.webp differ diff --git a/course_images/course_023.webp b/course_images/course_023.webp new file mode 100644 index 0000000..e60257e Binary files /dev/null and b/course_images/course_023.webp differ diff --git a/course_images/course_024.webp b/course_images/course_024.webp new file mode 100644 index 0000000..6f2da10 Binary files /dev/null and b/course_images/course_024.webp differ diff --git a/course_images/course_025.webp b/course_images/course_025.webp new file mode 100644 index 0000000..ab63233 Binary files /dev/null and b/course_images/course_025.webp differ diff --git a/course_images/course_026.webp b/course_images/course_026.webp new file mode 100644 index 0000000..e92f390 Binary files /dev/null and b/course_images/course_026.webp differ diff --git a/course_images/course_027.webp b/course_images/course_027.webp new file mode 100644 index 0000000..b403b84 Binary files /dev/null and b/course_images/course_027.webp differ diff --git a/course_images/course_028.webp b/course_images/course_028.webp new file mode 100644 index 0000000..4e9f2d2 Binary files /dev/null and b/course_images/course_028.webp differ diff --git a/course_images/course_029.webp b/course_images/course_029.webp new file mode 100644 index 0000000..5f67132 Binary files /dev/null and b/course_images/course_029.webp differ diff --git a/course_images/course_030.webp b/course_images/course_030.webp new file mode 100644 index 0000000..70e1446 Binary files /dev/null and b/course_images/course_030.webp differ diff --git a/course_images/course_031.webp b/course_images/course_031.webp new file mode 100644 index 0000000..f6ba9aa Binary files /dev/null and b/course_images/course_031.webp differ diff --git a/course_images/course_032.webp b/course_images/course_032.webp new file mode 100644 index 0000000..2f01b73 Binary files /dev/null and b/course_images/course_032.webp differ diff --git a/course_images/course_033.webp b/course_images/course_033.webp new file mode 100644 index 0000000..7408540 Binary files /dev/null and b/course_images/course_033.webp differ diff --git a/course_images/course_034.webp b/course_images/course_034.webp new file mode 100644 index 0000000..326bb52 Binary files /dev/null and b/course_images/course_034.webp differ diff --git a/course_images/course_035.webp b/course_images/course_035.webp new file mode 100644 index 0000000..eca7251 Binary files /dev/null and b/course_images/course_035.webp differ diff --git a/course_images/course_036.webp b/course_images/course_036.webp new file mode 100644 index 0000000..922495d Binary files /dev/null and b/course_images/course_036.webp differ diff --git a/course_images/course_037.webp b/course_images/course_037.webp new file mode 100644 index 0000000..d74e268 Binary files /dev/null and b/course_images/course_037.webp differ diff --git a/course_images/course_038.webp b/course_images/course_038.webp new file mode 100644 index 0000000..40a8c17 Binary files /dev/null and b/course_images/course_038.webp differ diff --git a/course_images/course_039.webp b/course_images/course_039.webp new file mode 100644 index 0000000..b9a7dff Binary files /dev/null and b/course_images/course_039.webp differ diff --git a/course_images/course_040.webp b/course_images/course_040.webp new file mode 100644 index 0000000..7d57ca9 Binary files /dev/null and b/course_images/course_040.webp differ diff --git a/course_images/course_041.webp b/course_images/course_041.webp new file mode 100644 index 0000000..1f2785f Binary files /dev/null and b/course_images/course_041.webp differ diff --git a/course_images/course_042.webp b/course_images/course_042.webp new file mode 100644 index 0000000..b734eee Binary files /dev/null and b/course_images/course_042.webp differ diff --git a/course_images/course_043.webp b/course_images/course_043.webp new file mode 100644 index 0000000..4ac64c3 Binary files /dev/null and b/course_images/course_043.webp differ diff --git a/course_images/course_044.webp b/course_images/course_044.webp new file mode 100644 index 0000000..7814de4 Binary files /dev/null and b/course_images/course_044.webp differ diff --git a/course_images/course_045.webp b/course_images/course_045.webp new file mode 100644 index 0000000..037a699 Binary files /dev/null and b/course_images/course_045.webp differ diff --git a/course_images/course_046.webp b/course_images/course_046.webp new file mode 100644 index 0000000..5ebce02 Binary files /dev/null and b/course_images/course_046.webp differ diff --git a/course_images/course_047.webp b/course_images/course_047.webp new file mode 100644 index 0000000..856aa94 Binary files /dev/null and b/course_images/course_047.webp differ diff --git a/course_images/course_048.webp b/course_images/course_048.webp new file mode 100644 index 0000000..46d0282 Binary files /dev/null and b/course_images/course_048.webp differ diff --git a/course_images/course_049.webp b/course_images/course_049.webp new file mode 100644 index 0000000..3813efe Binary files /dev/null and b/course_images/course_049.webp differ diff --git a/course_images/course_050.webp b/course_images/course_050.webp new file mode 100644 index 0000000..ca35302 Binary files /dev/null and b/course_images/course_050.webp differ diff --git a/course_images/course_051.webp b/course_images/course_051.webp new file mode 100644 index 0000000..38be6a2 Binary files /dev/null and b/course_images/course_051.webp differ diff --git a/course_images/course_052.webp b/course_images/course_052.webp new file mode 100644 index 0000000..dc9ac37 Binary files /dev/null and b/course_images/course_052.webp differ diff --git a/course_images/course_053.webp b/course_images/course_053.webp new file mode 100644 index 0000000..d936c61 Binary files /dev/null and b/course_images/course_053.webp differ diff --git a/course_images/course_054.webp b/course_images/course_054.webp new file mode 100644 index 0000000..ad85cac Binary files /dev/null and b/course_images/course_054.webp differ diff --git a/course_images/course_055.webp b/course_images/course_055.webp new file mode 100644 index 0000000..1fac5af Binary files /dev/null and b/course_images/course_055.webp differ diff --git a/course_images/course_056.webp b/course_images/course_056.webp new file mode 100644 index 0000000..560c278 Binary files /dev/null and b/course_images/course_056.webp differ diff --git a/course_images/course_057.webp b/course_images/course_057.webp new file mode 100644 index 0000000..438f10a Binary files /dev/null and b/course_images/course_057.webp differ diff --git a/course_images/course_058.webp b/course_images/course_058.webp new file mode 100644 index 0000000..e9dac62 Binary files /dev/null and b/course_images/course_058.webp differ diff --git a/course_images/course_059.webp b/course_images/course_059.webp new file mode 100644 index 0000000..9389291 Binary files /dev/null and b/course_images/course_059.webp differ diff --git a/course_images/course_060.webp b/course_images/course_060.webp new file mode 100644 index 0000000..7b7a672 Binary files /dev/null and b/course_images/course_060.webp differ diff --git a/course_images/course_061.webp b/course_images/course_061.webp new file mode 100644 index 0000000..31af6da Binary files /dev/null and b/course_images/course_061.webp differ diff --git a/course_images/course_062.webp b/course_images/course_062.webp new file mode 100644 index 0000000..e1d45a6 Binary files /dev/null and b/course_images/course_062.webp differ diff --git a/course_images/course_063.webp b/course_images/course_063.webp new file mode 100644 index 0000000..ae88258 Binary files /dev/null and b/course_images/course_063.webp differ diff --git a/course_images/course_064.webp b/course_images/course_064.webp new file mode 100644 index 0000000..445c527 Binary files /dev/null and b/course_images/course_064.webp differ diff --git a/course_images/course_065.webp b/course_images/course_065.webp new file mode 100644 index 0000000..1c30b04 Binary files /dev/null and b/course_images/course_065.webp differ diff --git a/course_images/course_066.webp b/course_images/course_066.webp new file mode 100644 index 0000000..b43ef97 Binary files /dev/null and b/course_images/course_066.webp differ diff --git a/course_images/course_067.webp b/course_images/course_067.webp new file mode 100644 index 0000000..434b031 Binary files /dev/null and b/course_images/course_067.webp differ diff --git a/course_images/course_068.webp b/course_images/course_068.webp new file mode 100644 index 0000000..e128e1c Binary files /dev/null and b/course_images/course_068.webp differ diff --git a/course_images/course_069.webp b/course_images/course_069.webp new file mode 100644 index 0000000..0f006a7 Binary files /dev/null and b/course_images/course_069.webp differ diff --git a/course_images/course_070.webp b/course_images/course_070.webp new file mode 100644 index 0000000..78a48f4 Binary files /dev/null and b/course_images/course_070.webp differ diff --git a/course_images/course_071.webp b/course_images/course_071.webp new file mode 100644 index 0000000..eca2e1a Binary files /dev/null and b/course_images/course_071.webp differ diff --git a/course_images/course_072.webp b/course_images/course_072.webp new file mode 100644 index 0000000..70f0655 Binary files /dev/null and b/course_images/course_072.webp differ diff --git a/course_images/course_073.webp b/course_images/course_073.webp new file mode 100644 index 0000000..57c32b5 Binary files /dev/null and b/course_images/course_073.webp differ diff --git a/course_images/course_074.webp b/course_images/course_074.webp new file mode 100644 index 0000000..291613f Binary files /dev/null and b/course_images/course_074.webp differ diff --git a/course_images/course_075.webp b/course_images/course_075.webp new file mode 100644 index 0000000..de0cb5b Binary files /dev/null and b/course_images/course_075.webp differ diff --git a/course_images/course_076.webp b/course_images/course_076.webp new file mode 100644 index 0000000..1af7bab Binary files /dev/null and b/course_images/course_076.webp differ diff --git a/course_images/course_077.webp b/course_images/course_077.webp new file mode 100644 index 0000000..b68952f Binary files /dev/null and b/course_images/course_077.webp differ diff --git a/course_images/course_078.webp b/course_images/course_078.webp new file mode 100644 index 0000000..45e8559 Binary files /dev/null and b/course_images/course_078.webp differ diff --git a/course_images/course_079.webp b/course_images/course_079.webp new file mode 100644 index 0000000..162a997 Binary files /dev/null and b/course_images/course_079.webp differ diff --git a/course_images/course_080.webp b/course_images/course_080.webp new file mode 100644 index 0000000..ed97bfd Binary files /dev/null and b/course_images/course_080.webp differ diff --git a/course_images/course_081.webp b/course_images/course_081.webp new file mode 100644 index 0000000..4a744c3 Binary files /dev/null and b/course_images/course_081.webp differ diff --git a/course_images/course_082.webp b/course_images/course_082.webp new file mode 100644 index 0000000..8743935 Binary files /dev/null and b/course_images/course_082.webp differ diff --git a/course_images/course_083.webp b/course_images/course_083.webp new file mode 100644 index 0000000..4d51003 Binary files /dev/null and b/course_images/course_083.webp differ diff --git a/course_images/course_084.webp b/course_images/course_084.webp new file mode 100644 index 0000000..a81bda4 Binary files /dev/null and b/course_images/course_084.webp differ diff --git a/course_images/course_085.webp b/course_images/course_085.webp new file mode 100644 index 0000000..0d6a910 Binary files /dev/null and b/course_images/course_085.webp differ diff --git a/course_images/course_086.webp b/course_images/course_086.webp new file mode 100644 index 0000000..3fa2b6d Binary files /dev/null and b/course_images/course_086.webp differ diff --git a/course_images/course_087.webp b/course_images/course_087.webp new file mode 100644 index 0000000..206abeb Binary files /dev/null and b/course_images/course_087.webp differ diff --git a/course_images/course_088.webp b/course_images/course_088.webp new file mode 100644 index 0000000..8b6d5ef Binary files /dev/null and b/course_images/course_088.webp differ diff --git a/course_images/course_089.webp b/course_images/course_089.webp new file mode 100644 index 0000000..e56fa73 Binary files /dev/null and b/course_images/course_089.webp differ diff --git a/course_images/course_090.webp b/course_images/course_090.webp new file mode 100644 index 0000000..9a0085a Binary files /dev/null and b/course_images/course_090.webp differ diff --git a/course_images/course_091.webp b/course_images/course_091.webp new file mode 100644 index 0000000..1e04239 Binary files /dev/null and b/course_images/course_091.webp differ diff --git a/course_images/course_092.webp b/course_images/course_092.webp new file mode 100644 index 0000000..d25d172 Binary files /dev/null and b/course_images/course_092.webp differ diff --git a/course_images/course_093.webp b/course_images/course_093.webp new file mode 100644 index 0000000..4c03c05 Binary files /dev/null and b/course_images/course_093.webp differ diff --git a/course_images/course_094.webp b/course_images/course_094.webp new file mode 100644 index 0000000..10b9db2 Binary files /dev/null and b/course_images/course_094.webp differ diff --git a/course_images/course_095.webp b/course_images/course_095.webp new file mode 100644 index 0000000..f8eae4a Binary files /dev/null and b/course_images/course_095.webp differ diff --git a/course_images/course_096.webp b/course_images/course_096.webp new file mode 100644 index 0000000..6cb811f Binary files /dev/null and b/course_images/course_096.webp differ diff --git a/course_images/course_097.webp b/course_images/course_097.webp new file mode 100644 index 0000000..1d71a23 Binary files /dev/null and b/course_images/course_097.webp differ diff --git a/course_images/course_098.webp b/course_images/course_098.webp new file mode 100644 index 0000000..b1c788c Binary files /dev/null and b/course_images/course_098.webp differ diff --git a/course_images/course_099.webp b/course_images/course_099.webp new file mode 100644 index 0000000..ccfaac3 Binary files /dev/null and b/course_images/course_099.webp differ diff --git a/course_images/course_100.webp b/course_images/course_100.webp new file mode 100644 index 0000000..f9aa73b Binary files /dev/null and b/course_images/course_100.webp differ diff --git a/course_images/course_101.webp b/course_images/course_101.webp new file mode 100644 index 0000000..f5dc22a Binary files /dev/null and b/course_images/course_101.webp differ diff --git a/course_images/course_102.webp b/course_images/course_102.webp new file mode 100644 index 0000000..908a31d Binary files /dev/null and b/course_images/course_102.webp differ diff --git a/course_images/course_103.webp b/course_images/course_103.webp new file mode 100644 index 0000000..62a77df Binary files /dev/null and b/course_images/course_103.webp differ diff --git a/course_images/course_104.webp b/course_images/course_104.webp new file mode 100644 index 0000000..493fade Binary files /dev/null and b/course_images/course_104.webp differ diff --git a/course_images/course_105.webp b/course_images/course_105.webp new file mode 100644 index 0000000..58db20c Binary files /dev/null and b/course_images/course_105.webp differ diff --git a/course_images/course_106.webp b/course_images/course_106.webp new file mode 100644 index 0000000..e12b5e5 Binary files /dev/null and b/course_images/course_106.webp differ diff --git a/courses.html b/courses.html new file mode 100644 index 0000000..a59cb89 --- /dev/null +++ b/courses.html @@ -0,0 +1,1075 @@ + + + + + + + Document + + + + + +
+
+

Frontend Masters Courses

+ +
+ +
+
+ + +
+
+ + + + + diff --git a/dashboard.html b/dashboard.html new file mode 100644 index 0000000..ff1b979 --- /dev/null +++ b/dashboard.html @@ -0,0 +1,324 @@ + + + + + + + + + + + + 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

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

Beginner

+

Your Path to Becoming a Career-Ready Web Developer!

+ View Path +
+
+
+
+

New Courses

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

Testing Web Apps with Cypress

+

Steve Kinney

+
+
+
+
+
+ +
+
+

AWS For Front-end Engineer,v2

+

Steve Kinney

+
+
+
+
+
+
+
+

Upcoming Workshops

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

Testing Web Apps with Cypress

+

Steve Kinney

+
+
+ +
+
+
+ +
+
+

AWS For Front-end Engineer,v2

+

Steve Kinney

+
+
+
+
+ +
+

+ Your Bookmarks + +

+
+ +
+

You don't have any bookmarks yet...

+

+ You can bookmark courses from either the + course catalog, or in the player and they will show up + here! +

+
+ +
+

+ Your Notes + +

+
+ +
+

You don't have any bookmarks yet...

+

+ Simply start adding notes in the video player while you watch + courses, and they will show up here! +

+
+
+
+ + + + diff --git a/forgot-password.html b/forgot-password.html new file mode 100644 index 0000000..4af2e41 --- /dev/null +++ b/forgot-password.html @@ -0,0 +1,33 @@ + + + + + + + + Log In to Frontend Masters + + + + + + +
+ + +
+ + + + + + + + diff --git a/icon1.html b/icon1.html index 8b0ac56..3f1caf2 100644 --- a/icon1.html +++ b/icon1.html @@ -1,40 +1,62 @@ - - - - + + + + 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/index.html b/index.html index 64f8a40..7d32ae9 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - + + + + Frontend Master Website - - - + + + - - - -
- -
- - - - - - - +
- - - -
- -
- - - - -
-
-

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/instructors_images/instructor_001.webp b/instructors_images/instructor_001.webp new file mode 100644 index 0000000..05afce1 Binary files /dev/null and b/instructors_images/instructor_001.webp differ diff --git a/instructors_images/instructor_002.webp b/instructors_images/instructor_002.webp new file mode 100644 index 0000000..922d7db Binary files /dev/null and b/instructors_images/instructor_002.webp differ diff --git a/instructors_images/instructor_003.webp b/instructors_images/instructor_003.webp new file mode 100644 index 0000000..7b1e12d Binary files /dev/null and b/instructors_images/instructor_003.webp differ diff --git a/instructors_images/instructor_004.webp b/instructors_images/instructor_004.webp new file mode 100644 index 0000000..76395d9 Binary files /dev/null and b/instructors_images/instructor_004.webp differ diff --git a/instructors_images/instructor_005.webp b/instructors_images/instructor_005.webp new file mode 100644 index 0000000..bb420e3 Binary files /dev/null and b/instructors_images/instructor_005.webp differ diff --git a/instructors_images/instructor_006.webp b/instructors_images/instructor_006.webp new file mode 100644 index 0000000..62102ba Binary files /dev/null and b/instructors_images/instructor_006.webp differ diff --git a/instructors_images/instructor_007.webp b/instructors_images/instructor_007.webp new file mode 100644 index 0000000..7dd2d99 Binary files /dev/null and b/instructors_images/instructor_007.webp differ diff --git a/instructors_images/instructor_008.webp b/instructors_images/instructor_008.webp new file mode 100644 index 0000000..6cf06ae Binary files /dev/null and b/instructors_images/instructor_008.webp differ diff --git a/instructors_images/instructor_009.webp b/instructors_images/instructor_009.webp new file mode 100644 index 0000000..357050a Binary files /dev/null and b/instructors_images/instructor_009.webp differ diff --git a/instructors_images/instructor_010.webp b/instructors_images/instructor_010.webp new file mode 100644 index 0000000..f88503d Binary files /dev/null and b/instructors_images/instructor_010.webp differ diff --git a/instructors_images/instructor_011.webp b/instructors_images/instructor_011.webp new file mode 100644 index 0000000..5d8b973 Binary files /dev/null and b/instructors_images/instructor_011.webp differ diff --git a/instructors_images/instructor_012.webp b/instructors_images/instructor_012.webp new file mode 100644 index 0000000..e8507eb Binary files /dev/null and b/instructors_images/instructor_012.webp differ diff --git a/instructors_images/instructor_013.webp b/instructors_images/instructor_013.webp new file mode 100644 index 0000000..29fe726 Binary files /dev/null and b/instructors_images/instructor_013.webp differ diff --git a/instructors_images/instructor_014.webp b/instructors_images/instructor_014.webp new file mode 100644 index 0000000..4e53115 Binary files /dev/null and b/instructors_images/instructor_014.webp differ diff --git a/instructors_images/instructor_015.webp b/instructors_images/instructor_015.webp new file mode 100644 index 0000000..7c93b73 Binary files /dev/null and b/instructors_images/instructor_015.webp differ diff --git a/instructors_images/instructor_016.webp b/instructors_images/instructor_016.webp new file mode 100644 index 0000000..60bfdb8 Binary files /dev/null and b/instructors_images/instructor_016.webp differ diff --git a/instructors_images/instructor_017.webp b/instructors_images/instructor_017.webp new file mode 100644 index 0000000..d9180f9 Binary files /dev/null and b/instructors_images/instructor_017.webp differ diff --git a/instructors_images/instructor_018.webp b/instructors_images/instructor_018.webp new file mode 100644 index 0000000..56d7751 Binary files /dev/null and b/instructors_images/instructor_018.webp differ diff --git a/instructors_images/instructor_019.webp b/instructors_images/instructor_019.webp new file mode 100644 index 0000000..ac857ca Binary files /dev/null and b/instructors_images/instructor_019.webp differ diff --git a/instructors_images/instructor_020.webp b/instructors_images/instructor_020.webp new file mode 100644 index 0000000..0e6bc35 Binary files /dev/null and b/instructors_images/instructor_020.webp differ diff --git a/instructors_images/instructor_021.webp b/instructors_images/instructor_021.webp new file mode 100644 index 0000000..2051c6a Binary files /dev/null and b/instructors_images/instructor_021.webp differ diff --git a/instructors_images/instructor_022.webp b/instructors_images/instructor_022.webp new file mode 100644 index 0000000..9640c2a Binary files /dev/null and b/instructors_images/instructor_022.webp differ diff --git a/instructors_images/instructor_023.webp b/instructors_images/instructor_023.webp new file mode 100644 index 0000000..50cbc1a Binary files /dev/null and b/instructors_images/instructor_023.webp differ diff --git a/instructors_images/instructor_024.webp b/instructors_images/instructor_024.webp new file mode 100644 index 0000000..63610cb Binary files /dev/null and b/instructors_images/instructor_024.webp differ diff --git a/instructors_images/instructor_025.webp b/instructors_images/instructor_025.webp new file mode 100644 index 0000000..42826e3 Binary files /dev/null and b/instructors_images/instructor_025.webp differ diff --git a/instructors_images/instructor_026.webp b/instructors_images/instructor_026.webp new file mode 100644 index 0000000..a22860f Binary files /dev/null and b/instructors_images/instructor_026.webp differ diff --git a/instructors_images/instructor_027.webp b/instructors_images/instructor_027.webp new file mode 100644 index 0000000..604b942 Binary files /dev/null and b/instructors_images/instructor_027.webp differ diff --git a/instructors_images/instructor_028.webp b/instructors_images/instructor_028.webp new file mode 100644 index 0000000..b4c6736 Binary files /dev/null and b/instructors_images/instructor_028.webp differ diff --git a/instructors_images/instructor_029.webp b/instructors_images/instructor_029.webp new file mode 100644 index 0000000..63cbeb5 Binary files /dev/null and b/instructors_images/instructor_029.webp differ diff --git a/instructors_images/instructor_030.webp b/instructors_images/instructor_030.webp new file mode 100644 index 0000000..c3f16db Binary files /dev/null and b/instructors_images/instructor_030.webp differ diff --git a/instructors_images/instructor_031.webp b/instructors_images/instructor_031.webp new file mode 100644 index 0000000..28aa3ec Binary files /dev/null and b/instructors_images/instructor_031.webp differ diff --git a/instructors_images/instructor_032.webp b/instructors_images/instructor_032.webp new file mode 100644 index 0000000..4b45b96 Binary files /dev/null and b/instructors_images/instructor_032.webp differ diff --git a/instructors_images/instructor_033.webp b/instructors_images/instructor_033.webp new file mode 100644 index 0000000..4f52bf1 Binary files /dev/null and b/instructors_images/instructor_033.webp differ diff --git a/instructors_images/instructor_034.webp b/instructors_images/instructor_034.webp new file mode 100644 index 0000000..d1ca4d8 Binary files /dev/null and b/instructors_images/instructor_034.webp differ diff --git a/instructors_images/instructor_035.webp b/instructors_images/instructor_035.webp new file mode 100644 index 0000000..0a8b000 Binary files /dev/null and b/instructors_images/instructor_035.webp differ diff --git a/instructors_images/instructor_036.webp b/instructors_images/instructor_036.webp new file mode 100644 index 0000000..98a8b64 Binary files /dev/null and b/instructors_images/instructor_036.webp differ diff --git a/instructors_images/instructor_037.webp b/instructors_images/instructor_037.webp new file mode 100644 index 0000000..803f126 Binary files /dev/null and b/instructors_images/instructor_037.webp differ diff --git a/instructors_images/instructor_038.webp b/instructors_images/instructor_038.webp new file mode 100644 index 0000000..713b81b Binary files /dev/null and b/instructors_images/instructor_038.webp differ diff --git a/instructors_images/instructor_039.webp b/instructors_images/instructor_039.webp new file mode 100644 index 0000000..15ec33d Binary files /dev/null and b/instructors_images/instructor_039.webp differ diff --git a/instructors_images/instructor_040.webp b/instructors_images/instructor_040.webp new file mode 100644 index 0000000..8bf6899 Binary files /dev/null and b/instructors_images/instructor_040.webp differ diff --git a/instructors_images/instructor_041.webp b/instructors_images/instructor_041.webp new file mode 100644 index 0000000..c23b8c1 Binary files /dev/null and b/instructors_images/instructor_041.webp differ diff --git a/instructors_images/instructor_042.webp b/instructors_images/instructor_042.webp new file mode 100644 index 0000000..2124e6b Binary files /dev/null and b/instructors_images/instructor_042.webp differ diff --git a/instructors_images/instructor_043.webp b/instructors_images/instructor_043.webp new file mode 100644 index 0000000..428e953 Binary files /dev/null and b/instructors_images/instructor_043.webp differ diff --git a/instructors_images/instructor_044.webp b/instructors_images/instructor_044.webp new file mode 100644 index 0000000..c198775 Binary files /dev/null and b/instructors_images/instructor_044.webp differ diff --git a/instructors_images/instructor_045.webp b/instructors_images/instructor_045.webp new file mode 100644 index 0000000..d7ce69d Binary files /dev/null and b/instructors_images/instructor_045.webp differ diff --git a/instructors_images/instructor_046.webp b/instructors_images/instructor_046.webp new file mode 100644 index 0000000..3b4bccb Binary files /dev/null and b/instructors_images/instructor_046.webp differ diff --git a/instructors_images/instructor_047.webp b/instructors_images/instructor_047.webp new file mode 100644 index 0000000..c7cc757 Binary files /dev/null and b/instructors_images/instructor_047.webp differ diff --git a/joinnow.html b/joinnow.html index 75e3524..7d25a3e 100644 --- a/joinnow.html +++ b/joinnow.html @@ -1,251 +1,24 @@ - - - - - - - + + + + + + + - 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

-
-
-
-
-
-

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

-

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.

-
- 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

-
-
- - - - + Frontend Masters Pricing + + +
+
+ + - - - + + diff --git a/learn.html b/learn.html index 88dcee0..614ddf3 100644 --- a/learn.html +++ b/learn.html @@ -12,6 +12,9 @@ Paths to Learning JavaScript, React, and More Skills You Need. + + + @@ -46,4 +49,4 @@ - \ No newline at end of file + diff --git a/menuButton1.png b/menuButton1.png new file mode 100644 index 0000000..16a8d6d Binary files /dev/null and b/menuButton1.png differ diff --git a/menuButton2.png b/menuButton2.png new file mode 100644 index 0000000..27fdf1d Binary files /dev/null and b/menuButton2.png differ diff --git a/scripts/account-page.js b/scripts/account-page.js new file mode 100644 index 0000000..9ea3874 --- /dev/null +++ b/scripts/account-page.js @@ -0,0 +1,129 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; +import account from "../components/account-page.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"); +}); +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 account_page = document.querySelector(".account-container"); +account_page.innerHTML = account(); + +let nav_list = document.querySelectorAll("#navigation>li"); + +const changeSettings = (i) => { + let setting_boxes = document.querySelectorAll(".settings"); + nav_list.forEach((el) => { + el.classList.remove("active"); + }); + setting_boxes.forEach((el) => { + el.classList.remove("active"); + }); + nav_list[i].classList.add("active"); + setting_boxes[i].classList.add("active"); +}; + +nav_list.forEach((el, index) => { + el.addEventListener("click", () => { + changeSettings(index); + }); +}); + +let sub_box = document.querySelectorAll(".sub-box"); + +const changePlan = (el) => { + sub_box.forEach((item) => { + item.classList.remove("active"); + }); + el.classList.add("active"); +}; + +sub_box.forEach((item, index) => { + item.addEventListener("click", () => { + changePlan(item); + }); +}); + +const updateDetail = () => { + let logged_user = JSON.parse(localStorage.getItem("logged_user")); + let email = document.getElementById("email"); + let fn = document.getElementById("first_name"); + let ln = document.getElementById("last_name"); + email.value = logged_user.email; + fn.value = logged_user.fn; + ln.value = logged_user.ln; +}; + +updateDetail(); + +let update_user_form = document.getElementById("update_user"); +let update_password = document.getElementById("update_password"); +const update_user = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let logged_user = JSON.parse(localStorage.getItem("logged_user")) || []; + let email = document.querySelector("#email").value; + let fn = document.querySelector("#first_name").value; + let ln = document.querySelector("#last_name").value; + logged_user.email = email; + logged_user.fn = fn; + logged_user.ln = ln; + localStorage.setItem("logged_user", JSON.stringify(logged_user)); + for (let i = 0; i < login_data.length; i++) { + let el = login_data[i]; + if (el.email == email) { + el.email = email; + el.fn = fn; + el.ln = ln; + localStorage.setItem("login_data", JSON.stringify(login_data)); + window.location.reload(); + } + } +}; + +const updatePassword = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let logged_user = JSON.parse(localStorage.getItem("logged_user")) || []; + let new_password = document.querySelector("#new_password").value; + let new_password_again = document.querySelector("#new_password_again").value; + let alert_box = document.querySelector(".alert-msg"); + if (new_password != new_password_again) { + alert_box.innerText = "Password Doen't match. Try again"; + alert_box.classList.add("active-alert"); + return; + } else { + logged_user.password = new_password; + localStorage.setItem("logged_user", JSON.stringify(logged_user)); + for (let i = 0; i < login_data.length; i++) { + let el = login_data[i]; + if (el.email == logged_user.email) { + el.password = new_password; + localStorage.setItem("login_data", JSON.stringify(login_data)); + window.location.reload(); + } + } + } +}; + +update_user_form.addEventListener("submit", update_user); +update_password.addEventListener("submit", updatePassword); diff --git a/scripts/courses.js b/scripts/courses.js new file mode 100644 index 0000000..18d7b48 --- /dev/null +++ b/scripts/courses.js @@ -0,0 +1,163 @@ +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 append = (data, parent)=>{ + + parent.innerHTML = null; + + data.forEach((el) => { + // console.log('el:', el); + + + let mainClass = document.createElement("div"); + mainClass.className = "mainClass"; + + + let outerDiv = document.createElement("div"); + outerDiv.id = "outer"; + + let innerDiv = document.createElement("div"); + innerDiv.id = "inner"; + + let btnClass = document.createElement("div") + btnClass.className = "btnClass"; + + let descriptionClass = document.createElement("div"); + descriptionClass.className = "descriptionClass"; + + let img2 = document.createElement('img'); + img2.src = el.course_img_url; + img2.id = "courses_img"; + + + let btn1 = document.createElement('button'); + 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(link1, link2); + + + let instructorClass = document.createElement("div"); + instructorClass.className = "instructorClass"; + + + let anchorClass = document.createElement("div"); + anchorClass.className="anchorClass" + + let instructor_img = document.createElement('img'); + instructor_img.src = el.instructor_img_url; + instructor_img.className = "instructor_img"; + + let instructorDetails = document.createElement("div"); + + let instructorName = document.createElement("div"); + instructorName.innerText = el.instructorName; + instructorName.className = "instructorName"; + + + let instructorOrg = document.createElement("div"); + instructorOrg.innerText = el.org; + instructorOrg.className="instructorOrg"; + + instructorDetails.append(instructorName,instructorOrg) + + anchorClass.append(instructor_img,instructorDetails) + + + instructorClass.append(anchorClass); + + let descrClass = document.createElement("div"); + descrClass.className = "descrClass"; + + let description = document.createElement("p"); + description.innerText = el.course_description; + description.className="description" + + descrClass.append(description); + + let timeClass = document.createElement("div"); + timeClass.className = "timeClass"; + + + let time = document.createElement("div"); + time.innerText = el.time; + time.className = "time"; + + let caption = document.createElement("strong"); + caption.innerText = "CC"; + caption.className = "caption" + + time.append( caption) + + timeClass.append(time); + + + descriptionClass.append(title,instructorClass,descrClass,timeClass); + + + outerDiv.append(img2); + innerDiv.append(descriptionClass,btnClass); + + + mainClass.append(outerDiv,innerDiv); + + + 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; + + + + + 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/data.js b/scripts/data.js index 734f7ec..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 = [ @@ -827,4 +728,4 @@ 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 +localStorage.setItem("t_small_data", JSON.stringify(small_data)); diff --git a/scripts/forgot-password.js b/scripts/forgot-password.js new file mode 100644 index 0000000..609f265 --- /dev/null +++ b/scripts/forgot-password.js @@ -0,0 +1,50 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; +import forgot from "../components/forgot-password.js"; + +document.querySelector(".header").innerHTML = navbar(); + +document.querySelector("#footer").innerHTML = footer(); + +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 forgot_password_container = document.querySelector( + ".forgot-password-container" +); +forgot_password_container.innerHTML = forgot(); + +let forgot_password_form = document.querySelector("#forgot-pass"); +const resetPassword = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.querySelector("#email").value; + let new_pass = document.querySelector("#new-pass").value; + let success = false; + for (let i = 0; i < login_data.length; i++) { + let el = login_data[i]; + if (el.email === email) { + el.password = new_pass; + success = true; + break; + } + } + let alert_box = document.querySelector(".alert-msg"); + if (success) { + localStorage.setItem("login_data", JSON.stringify(login_data)); + window.location.href = "Login.html"; + } 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/home.js b/scripts/home.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts/index.js b/scripts/index.js index 5e8884c..2af3628 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,27 @@ +import navbar 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 +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); +} // Slider Container let slider_con = document.querySelector(".slider-container"); @@ -18,6 +40,7 @@ if (screen_size >= 1030) { appendTwitterData(small_data); } +// Slider JS let slides = [...document.querySelectorAll(".slide")]; let i = 0; @@ -62,10 +85,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); -}); \ No newline at end of file +// On window resizing Event +// let resizeTimeout; +// window.addEventListener("resize", function (event) { +// clearTimeout(resizeTimeout); +// resizeTimeout = setTimeout(function () { +// window.location.reload(); +// }, 1500); +// }); diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 184d4b0..e467c07 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,75 +1,86 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; +import joinnow from "../components/joinnow.js"; +document.querySelector(".header").innerHTML = navbar(); +document.querySelector("#footer").innerHTML = footer(); - -let box=document.getElementById("first") -box.classList.add("active") -let plan_boxes = document.querySelectorAll("#box>div"); - -plan_boxes.forEach((item) => { - item.addEventListener("click", () => { - colorChange(item); - }); +// Click Event on Hamburger Icon +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); }); -function colorChange(item) { - plan_boxes.forEach((el) => { - el.classList.remove("active"); - }); - item.classList.add("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 join_now_container = document.querySelector(".join-now-container"); +join_now_container.innerHTML = joinnow(); +let sub_box = document.querySelectorAll(".sub-box"); +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 data = [ + "Register for a Monthly Account", + "Register for a Yearly Account", + "Register for a Monthly Team Account", + "Register for a Yearly Team Account", +]; +sub_box.forEach((item, index) => { + item.addEventListener("click", () => { + let msg = data[index]; + changePlan(item, msg); + }); +}); -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=""; - 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/" +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; - 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 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/learn-page.js b/scripts/learn-page.js index 4fa7d32..51a8c9d 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,5 +1,5 @@ import { pathContainer, appedData, addEventToBox } from "../components/path.js"; -import navbar from "../components/navbar.js"; +import navbar from "../components/navbar.js"; import footer from "../components/footer.js"; // Header & Footer @@ -7,13 +7,13 @@ let header = document.querySelector(".header"); let footer_container = document.querySelector("#footer"); header.innerHTML = navbar(); footer_container.innerHTML = footer(); -document.querySelector("#footer").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"); - }); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); // Click Event on Hamburger Icon // hamburgerClick(); @@ -43,4 +43,4 @@ appedData(learn_data, path_bottom); appedData(elective_data, elective_bottom); // Add Event on every p_box -addEventToBox(); \ No newline at end of file +addEventToBox(); diff --git a/scripts/login-page.js b/scripts/login-page.js new file mode 100644 index 0000000..a5d75d7 --- /dev/null +++ b/scripts/login-page.js @@ -0,0 +1,60 @@ +import login from "../components/login.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"); +}); +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 login_container = document.querySelector(".login-container"); +login_container.innerHTML = login(); + +let login_form = document.querySelector("#login-form"); + +const loginUser = () => { + event.preventDefault(); + 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 < login_data.length; i++) { + let el = login_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)); + window.location.href = "dashboard.html"; + } else { + alert_box.innerText = "That wasn't correct. Try again?"; + alert_box.classList.add("active-alert"); + } +}; + +login_form.addEventListener("submit", loginUser); diff --git a/scripts/slides.js b/scripts/slides.js index 21f1db9..80c2424 100644 --- a/scripts/slides.js +++ b/scripts/slides.js @@ -1,70 +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); + 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); }); - }; - - export { appendTwitterData }; \ No newline at end of file + parent.append(slide); + }); +}; + +export { appendTwitterData }; diff --git a/styles/account-page.css b/styles/account-page.css new file mode 100644 index 0000000..15c2c6f --- /dev/null +++ b/styles/account-page.css @@ -0,0 +1,231 @@ +* { + 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; +} + +.account-container { + width: 100%; + background-color: #222222; + color: #fff; +} + +.account-wrap { + max-width: 1200px; + margin: auto; + padding: 0 30px; +} + +.account-wrap h1 { + padding-top: 40px; + padding-bottom: 20px; +} + +.my-account { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + padding-bottom: 30px; +} + +.account-nav { + background-color: #333333; + width: 200px; +} +.account-nav ul { + list-style: none; +} +.account-nav ul li { + color: #dd625e; + padding: 10px 20px; + cursor: pointer; +} +.account-nav ul li.active { + background-color: #111111; +} +.account-nav ul li:hover { + color: #e58480; +} + +.account-body { + padding: 30px; + background-color: #111111; + flex: 1; +} +.settings { + display: none; +} +.settings.active { + display: block; +} +.settings h2 { + margin: 20px 0; +} +.settteings form { + margin-bottom: 50px; +} +.vertical-margin { + display: flex; + flex-direction: column; + margin-bottom: 20px; +} +.vertical-margin label { + margin-bottom: 5px; +} + +.vertical-margin input, +.vertical-margin select { + 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 select { + width: 56%; +} +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; +} + +.horizontal { + display: flex; +} +.horizontal > div { + width: 50%; +} +.horizontal > div:first-child { + margin-right: 41px; +} +.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; + margin-top: 30px; +} +.submit-container input[type="submit"]:hover { + background: #d43530; +} + +.subscriptions { + display: flex; + flex-wrap: wrap; + gap: 40px; + margin-bottom: 50px; +} + +.sub-box { + max-width: 150px; + display: flex; + flex-direction: column; + border-top: 8px solid #3e3e3e; + flex-wrap: wrap; + padding: 20px; + padding-bottom: 40px; + background-color: #111111; + cursor: pointer; + font-weight: bold; +} +.sub-box:hover { + background-color: #1a1a1a; +} + +.sub-head { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + position: relative; +} + +.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%); +} + +.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%); +} + +.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: 54%; + background-color: #fff; + position: relative; + margin-bottom: 30px; +} + +.card:hover { + border-color: #e66225; + outline: 0; +} + +.card #card_number { + position: absolute; + top: 10px; + left: 19px; + border: none; + outline: none; +} +.card #expiry { + position: absolute; + top: 10px; + right: 57px; + width: 10%; + border: none; + outline: none; +} +.card #cvc { + position: absolute; + right: 0px; + width: 10%; + top: 10px; + border: none; + outline: none; +} +.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; +} diff --git a/styles/courses.css b/styles/courses.css new file mode 100644 index 0000000..6764527 --- /dev/null +++ b/styles/courses.css @@ -0,0 +1,278 @@ + *{ + font-family: sans-serif; + margin: 0; + } + body{ + background-color: #222222; + + } + + .head{ + 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: 85%; + margin: auto; + height: auto; + /* border: 5px solid red; */ + /* padding: 30px; */ + /* display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(10, 1fr); + grid-gap:80px; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + /* align-items: flex-start; */ + justify-content: space-between; + + + /* margin-top: 0px; */ + } + .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; */ + width: auto; + height: 85%; + /* margin: 10px; */ + /* min-height: auto; */ + /* border: 5px solid yellow; */ + opacity: 1; + + /* background-color: green; */ + } + + #inner { + /* width: 400px; */ + width: auto; + /* min-height: 360px; */ + /* border: 1px solid red; */ + height:85%; + position: absolute; + 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: 20%; + width:100%; + /* border:solid 1px white; */ + padding: 35px; + /* margin-left: 0px; */ + margin-right: 50px; + } + .descriptionClass{ + 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{ + min-height: 80px; + width: 100%; + /* border:solid 1px red; */ + + } + .descrClass{ + min-height: 100px; + width: 100%; + /* border:solid 1px green; */ + } + .timeClass{ + min-height: 40px; + width: 100%; + display: inline-block; + + /* border:solid 1px yellow */ + } + .time{ + color:#6f7e78; + margin-left:20px; + margin-top: 3px; + + } + .caption{ + color:#222; + margin-left: 5px; + background-color:rgb(138, 138, 138); + padding:0 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + + } + + +.instructor_img{ + min-height: 78px; + width: 78px; + border-radius: 100%; + margin-left: 20px; + +} +.instructorName ,.instructorOrg{ + color: white; + margin-left: 10px; +} + +.anchorClass{ + display: flex; + flex-direction: row; + margin-right: 20px; + +} +.instructorName{ + margin-top:15px; + +} + + + #btn1{ + background-color:#C02D28; + color: white; + padding: 10px 20px; + /* min-height: 45px; */ + margin-left: 0px; + border: none; + border-radius:40px; + line-height:1.25; +} +#btn2{ + background-color:#c94f17; + color: white; + padding: 10px 20px; + /* height: 45px; */ + margin-left: 5px; + border: none; + border-radius:40px; + line-height:1.25; +} + + + + @media all and (max-width:768px) and (min-width:381px){ + + #main { + grid-template-columns: repeat(1 ,1fr); + } + + #inner { + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; + position: absolute; + top:-.01px; + left: 80px; + + background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); + } + + + } + @media all and (min-width: 50px) and (max-width: 380px) { + #main { + grid-template-columns: repeat(1 ,1fr); + } + #inner { + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; + position: absolute; + top:-.01px; + left: 80px; + + background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); + } + } + + #courses_img{ + height: 100%; + width: 100%; +} \ No newline at end of file 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/home-page.css b/styles/home-page.css index 0b03edf..0fa80c6 100644 --- a/styles/home-page.css +++ b/styles/home-page.css @@ -1,82 +1,182 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: Open Sans, sans-serif; + 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 { + max-width: 1187px; + /* 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: space-between; + width: 100%; +} +.sli .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; +} +.slides { + display: flex; +} + +.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; +} + +/* Screen */ +/* Mid Desktop screens */ +@media only screen and (min-width: 1030px) and (max-width: 1330px) { + .slider { + max-width: 887px; } - .slider-container { - width: 100%; - margin: auto; - display: flex; - align-items: center; - flex-direction: column; - background-color: #074179; - padding: 30px; + .slide { + grid-template-columns: repeat(3, 265px); } +} + +/* Tablet Screen */ +@media only screen and (min-width: 770px) and (max-width: 1029px) { .slider { - max-width: 1187px; - /* height: 500px; */ - border-radius: 10px; - overflow: hidden; + 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: 27px; + font-size: 20px; color: #fff; margin-bottom: 20px; - margin-top: 20px; - } - - .s-bottom { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - } - .sli .slides { - /* width: 500%; */ - /* height: 500px; */ - display: flex; + text-align: center; } - /* .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; + .slider-container { + padding: 0; } - .slides { - display: flex; + .slider { + max-width: 280px; } - .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; - } - + grid-template-columns: repeat(1, 230px); + } + .slider-box { background-color: #fff; border-radius: 7px; padding: 16px; } - + .slider-box-top { display: flex; align-items: flex-start; @@ -94,7 +194,7 @@ width: 100%; object-fit: contain; } - + .user .profile-name { font-size: 16px; font-weight: 600; @@ -106,18 +206,18 @@ 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; @@ -125,14 +225,14 @@ margin-bottom: 10px; letter-spacing: 0.5px; } - + .slider-box-bottom { border-top: 1px solid #ccc; font-size: 14px; padding-top: 10px; color: #8a8a8a; } - + /* Screen */ /* Mid Desktop screens */ @media only screen and (min-width: 1030px) and (max-width: 1330px) { @@ -143,9 +243,9 @@ grid-template-columns: repeat(3, 265px); } } - + /* Tablet Screen */ - @media only screen and (min-width: 770px) and (max-width:1029px) { + @media only screen and (min-width: 770px) and (max-width: 1029px) { .slider { max-width: 576px; } @@ -153,7 +253,7 @@ grid-template-columns: repeat(2, 260px); } } - + /* Small Screen */ @media only screen and (min-width: 0px) and (max-width: 769px) { .s-top { @@ -171,4 +271,5 @@ .slide { grid-template-columns: repeat(1, 230px); } - } \ No newline at end of file + } +} diff --git a/styles/learn-page.css b/styles/learn-page.css index d6c23a5..9d3491f 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -1,304 +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; + 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 .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; +} +.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); } - .p-box button.node { - background-color: #00873a; +} + +.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); } - .p-box button.react { - background-color: #008697; + 100% { + transform: rotate(0deg); } - .p-box button.vue { - background-color: #00bb83; +} +.circle .reverse .progress { + animation: rightRreverse 1s linear both; +} +@keyframes rightRreverse { + 0% { + transform: rotate(180deg); } - .p-box button.angular { - background-color: #ff002f; - } \ No newline at end of file + 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; +} 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; + } +} diff --git a/styles/main.css b/styles/main.css index dadc341..efa47ea 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,39 +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%; - - height: 100vh; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - /* position: absolute; */ - - + width: 100%; + + 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: 85px; - top:0; - left: 0; - pointer-events: none; -} -#banner #contents{ + width: 100%; + position: absolute; + height: 100%; + object-fit: cover; + margin-top: 85px; + top: 0; + left: 0; + pointer-events: none; +} +#banner #contents { position: relative; z-index: 1; max-width: 1000px; @@ -41,204 +38,205 @@ body{ text-align: center; } #banner #contents h1 { - font-size: 55px; + font-size: 55px; } #banner #contents h2 { - font-size: 34px; - margin-top: 5px; - margin-bottom: 15px; -} -#banner button, #join button { - background: #c94f17; - border: none; - border-radius: 40px; + font-size: 34px; + margin-top: 5px; + 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; - opacity: .5; - + height: 90px; + 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; */ - /* border-radius: 20px; */ - /* padding: 10px; */ - box-sizing: border-box; - opacity: 1; - transform: scale(1.2); + /* border: 1px solid #eff; */ + /* border-radius: 20px; */ + /* padding: 10px; */ + box-sizing: border-box; + opacity: 1; + 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 div a { + text-decoration: none; + cursor: pointer; } #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; + cursor: pointer; } -#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; - - } - #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; - } -} -#clip1{ - background-color: #581010;; - height: 150px; - width: 100%; - /* clip-path: polygon(100% 0, 0 0, 98% 56%); + #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; + } +} +#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: -20px; - margin-bottom: -120px; - + /* clip-path: polygon(50% 0%, 100% 0, 100% 100%, 99% 20%, 0 1%); */ + clip-path: polygon(100% 0, 0 28%, 100% 26%); + margin-top: -20px; + margin-bottom: -120px; } diff --git a/styles/nav.css b/styles/nav.css index cc9e8ea..35bfc5f 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,138 +1,187 @@ +* { + 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); - color: #e6e6e6; - position: relative; - z-index: 99; - position: relative; - } - body { - font-family: Open Sans,sans-serif; - background-color: #222; - } - *{ - margin: 0; - padding: 0; - - } + width: 100%; + background: linear-gradient(90deg, #c02d28, #e66225); + color: #e6e6e6; + position: relative; + z-index: 99; + position: relative; +} +.wrap { + background: rgba(0, 0, 0, 0.7); +} +.header-wrap { + max-width: 1180px; + padding: 14px 49px; + margin: auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; +} + +.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; + align-items: center; +} +.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; +} +.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; +} +.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%; +} +.menu { + display: none; +} +.mobile { + display: none; +} + +@media all and (max-width: 768px) and (min-width: 381px) { .header-wrap { - background: rgba(0, 0, 0, 0.7); - padding: 14px 112px; - display: flex; - justify-content: space-between; + padding: 14px; + max-width: 592px; + } + .header-wrap .right ul { flex-wrap: wrap; - align-items: center; } - - .header-wrap .left { - width: 40%; + .header-wrap .right ul li a { + margin: 0 6px; + } + + .header-wrap .right ul li { + list-style: none; + margin: 4px; + } + .header-wrap .right ul li.logout:last-child a#logout { + color: #aaaaaa; + line-height: 0; + padding: 0; + } + .header-wrap .right ul li.logout:last-child:hover a#logout { + color: #fff; + background-color: transparent; + } +} + +@media all and (min-width: 50px) and (max-width: 380px) { + .header-wrap { + padding: 11px 12px; } .header-wrap .left .logo { - width: 250px; + width: 197px; } - .header-wrap .left .logo img { - width: 100%; - height: 100%; - object-fit: contain; + .header-wrap .right { + display: none; } - - .header-wrap .right ul { - display: flex; - align-items: center; + .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; } - .header-wrap .right ul li:last-child { + .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; - margin-left: 14px; + text-align: center; } - .header-wrap .right ul li:last-child a { + .mobile ul li:last-child a { line-height: 40px; padding: 0px 4px; font-size: 17px; color: #fff; } - .header-wrap .right ul li:last-child:hover { - background: #d43530; + .mobile ul li.logout:last-child { + background-color: transparent; + text-align: left; } - .header-wrap .right ul li { - list-style: none; - } - .header-wrap .right ul li a { - margin: 0 10px; - text-decoration: none; + .mobile ul li.logout:last-child a#logout { color: #aaaaaa; - transition: color 0.2s ease; + line-height: 0; + padding: 0; } - .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%; + .mobile ul li.logout:last-child:hover a#logout { + color: #fff; + background-color: transparent; } .menu { - display: none; + display: flex; } - .mobile { - display: none; + .menu .icon { + font-size: 32px; } - - @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; - } - } \ No newline at end of file +}