diff --git a/FAQ.html b/FAQ.html new file mode 100644 index 0000000..810d92e --- /dev/null +++ b/FAQ.html @@ -0,0 +1,209 @@ + + + + + + + Document + + + + + +
+
FAQ
+
+
+

Welcome to Frequently Asked
Questions

+

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

+ +
+
+

Site Area

+ Cources
+ Learning Paths
+ Join
+ My Account
+ Students
+ Teams + +
+ + +
+ + + + diff --git a/Login.html b/Login.html new file mode 100644 index 0000000..fc8ac20 --- /dev/null +++ b/Login.html @@ -0,0 +1,33 @@ + + + + + + + + Log In to Frontend Masters + + + + + + +
+ + +
+ + + + + + + + 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 new file mode 100644 index 0000000..eebaa6b --- /dev/null +++ b/Styles/joinnow.css @@ -0,0 +1,337 @@ +* { + 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; +} + +.join-now-container { + width: 100%; + background-color: #222222; + color: #fff; +} + +.join-head { + max-width: 1200px; + margin: auto; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 20px; +} +.join-head h1 { + font-size: 46px; + margin: 0 20px 10px; +} + +.join-head h2 { + font-size: 31px; + margin: 0 20px 10px; +} + +.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; +} +.lang-logo-wrap > .lang-logo { + height: 80px; + width: 80px; + margin: 20px; +} +.lang-logo-wrap > .lang-logo > img { + width: 100%; + height: 100%; + object-fit: contain; +} +.goto { + padding-top: 10px; + text-align: center; + margin: 20px 0; +} +.goto a { + color: #dd625e; +} + +.subscriptions { + max-width: 1200px; + margin: auto; + padding: 40px; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 40px; +} + +.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; + 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%); +} + +.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; +} + +.registration-container form { + width: 91%; + display: flex; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #fff; +} +.registration-container h2 { + margin-bottom: 20px; +} +.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: 104%; +} +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; +} + +.horizontal { + display: flex; +} +.horizontal > div { + width: 50%; +} +.horizontal > div:first-child { + margin-right: 41px; +} + +.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%; + background-color: #fff; + position: relative; +} + +.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; +} + +.term-of-service { + background: #222; + color: #aaa; + font-size: 14px; + margin-bottom: 20px; + padding: 10px; + margin-top: 20px; + width: 100%; +} +.term-of-service a { + color: #dd625e; +} + +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 190px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} +.submit-container input[type="submit"]:hover { + background: #d43530; +} + +.twitter-container { + display: flex; + gap: 20px; + max-width: 1200px; + margin: auto; + padding: 30px; + align-items: center; + flex-wrap: wrap; +} + +.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; +} + +.twitter-box-top { + color: #222; + display: flex; + align-items: center; + margin-bottom: 12px; +} + +.profile-img { + width: 10%; + margin-right: 10px; +} +.profile-img img { + width: 100%; + object-fit: cover; + border-radius: 50%; +} + +.profile-name { + font-weight: bold; +} +.user-name { + color: #8a8a8a; + font-size: 14px; +} + +.twit-icon { + margin-left: auto; + font-size: 27px; + color: #1da1f2; +} + +.twitter-box-mid { + font-size: 17px; + margin: 10px 0; + margin-bottom: 10px; +} + +.twitter-box-bottom { + border-top: 1px solid #ccc; + font-size: 14px; + color: #8a8a8a; + padding-top: 10px; +} + +.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/Styles/more.css b/Styles/more.css new file mode 100644 index 0000000..f359a12 --- /dev/null +++ b/Styles/more.css @@ -0,0 +1,735 @@ + + + body{ + background-color:#222; + } + + #main { + height: 450px; + width: 100%; + /* display: flex; */ + /* flex-wrap: wrap; */ + justify-content: center; + align-items: center; + background-color: teal; + /* margin-top: -300px; */ + background-position: 10%; + background-position: cover; + justify-content: space-between; + box-sizing: border-box; + /* position: relative; */ + position: absolute; + /* background-position: center; */ + background-image: url("https://static.frontendmasters.com/assets/fm/js/static/header_BG.f12eb70699.jpg"); + } + #main > div { + display: flex; + /* flex-wrap: wrap; */ + width: 70%; + margin: auto ; + padding-top: 50px; + } + #main > div > div:first-child { + width: 35%; + } + #main > div > div:last-child { + width: 60%; + margin-top: 30px; + text-align: left; + } + #main img { + height: 250px; + width: 250px; + } + #main p{ + line-height: 25px; + color: #e6e6e6; + margin-top: 14px; + font-family: Arial, Helvetica, sans-serif; + } + #main i{ + font-size:45px; + margin-left: 20px; + color:gray; + padding: 8px; + box-sizing: border-box; + background-color: #e6e6e6; + border-radius: 50%; + /* margin-top: 20px; */ + margin-top: 35px; + + } + button{ + height:60px; + width:220px; + border-radius: 30px; + font-family: Arial, Helvetica, sans-serif; + font-size: 18px; + background-color: #c02d28; + color: white; + border: none; + margin-top: 35px; + } + #main2{ + height:300px; + width:80%; + display: flex; + margin: auto; + justify-content: space-evenly; + border-bottom: 1px solid #e6e6e6;; + padding-bottom: 80px; + margin-top: 500px; + /* align-items: center; */ + + /* border:2px solid blue; */ + } + #main2 > div,#swap > div{ + width: 50%; + } + #main2 > div:first-child{ + + + margin-top: 50px; + margin-right: 20px; + } + #main h1 { + color: #e6e6e6; + /* padding-left: 550px; */ + /* font-size: 16px; */ + font-family: Open, Helvetica, sans-serif; + line-height: 40px; + } + #content{ + /* height:300px; */ + /* width:490px; */ + /* border:1px solid yellow; */ + /* margin-left: 165px; */ + /* margin-top: 70px; */ + line-height: 35px; + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + color:#e6e6e6; + } + + #content2{ + line-height: 25px; + color: #e6e6e6; + } + + #swap{ + height:300px; + width:80%; + /* border: 2px solid green; */ + /* margin-left: 100px; */ + margin: 40px auto; + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #e6e6e6;; + padding-bottom: 80px; + } + + + + #swap> div { + margin-top: 50px; + margin-left: 20px; + color: #e6e6e6; + /* line-height: 25px; */ + /* font-size: 19px; */ + } + #swap h1 { + font-size: 30px; + margin-bottom: 7px; + } + #bootcamp{ + height:60px; + width:25%; + /* border:1px solid red; */ + margin-left: 520px; + font-size: 30px; + color: #e6e6e6; + font-family: Arial, Helvetica, sans-serif; + margin-top: 30px; + } + + + #que{ + height: 800px; + width:60%; + /* border: 2px solid cyan; */ + /* margin-left: 20%; */ + line-height: 60px; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + } + #abc{ + display: flex; + /* grid-template-columns: 400px 200px; */ + line-height: 30px; + margin: auto; + /* padding-left: 10px; */ + width: 40%; + margin-top: 0px; + justify-content: space-between; + border-bottom: 1px solid grey; + /* border-right: 1px solid blue; */ + } + #anchor>a{ + display: block; + color: #dd625e; + font-size: 21px; + font-family: Arial, Helvetica, sans-serif; + } + #anchor{ + padding-top: 10px; + line-height: 60px; + } + #hour{ + font-size: 16px; + color:#e6e6e6; + line-height: 60px; + padding-top: 8px; + /* border:1px solid green */ + } + #total{ + margin-top: 15px; + /* margin-left: 400px; */ + color:white; + width: 40%; + margin: 15px auto ; + font-size: 20px; + display: flex; + justify-content: space-between; + font-family: Arial, Helvetica, sans-serif; + } + #to{ + /* margin-top: -25px; */ + /* padding-left:-8px; */ + color: #e6e6e6; + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + } + #menu3 { + width: 70%; + margin: 100px auto; + display: flex; + border-bottom: 1px solid #d3d3d3; + justify-content: space-between; + padding-bottom: 90px; + } + #content3{ + /* height:350px; */ + /* width:480px; */ + /* border:1px solid yellow; */ + /* margin-left: 145px; */ + margin-top: 70px; + + line-height: 45px; + font-size: 18px; + font-family: Arial, Helvetica, sans-serif; + color:#e6e6e6; + width: 35%; + } + #contents h1 { + margin-bottom: 25px; + } + #tag{ + line-height: 25px; + } + + + + #form { + width: 60%; + /* border:2px solid lime; */ + /* margin: 30px auto; */ + + + } + #form > form { + background: #3e3e3e; + + /* border:2px solid pink; */ + /* width: 35%; */ + height:600px; + /* margin: 10px auto; */ + padding: 60px; + padding-top: 35px; + /* margin-left: 670px; */ + /* margin-top: -450px; */ + + } + /* #form > form > h2 { + background:#3e3e3e; + color: #e6e6e6; + text-align: left; + /* margin-bottom: 12px; */ + /* font-size: 30px; */ + /* } */ + + #form > form > #input { + background-color: #e6e6e6; + border-radius: 7px; + border: none; + } + #form input { + background-color: #e6e6e6; + border-radius: 7px; + width: 97%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 30px; + outline: none; + border: none; + margin-top: 5px; + } + #form label { + color: #e6e6e6; + } + #form .form-div { + display: flex; + background-color: #3e3e3e; + width: 100%; + margin: auto; + justify-content: space-between; + box-sizing: border-box; + } + #form .form-div > div { + background-color: #3e3e3e; + width: 45%; + } + #form #last_name { + margin-left: -8px; + } +/* + #form .form-div > div > input { + background-color: #e6e6e6; + border-radius: 7px; + width: 92%; + padding: 7px 12px; + font-size: 17px; + margin: 0px; + margin-bottom: 12px; + outline: none; + border: none; + } */ + + #form > form > p { + background: #3e3e3e; + color: #e6e6e6; + margin-bottom: 12px; + font-size: 19px; + } + #form > form > p > span { + background: #3e3e3e; + color: #e6e6e6; + margin: 25px 0 0 208px; + font-size: 19px; + } + #form > form > .g-recaptcha { + margin: 20px 0; + width: 46%; + height: 80px; + } + #form > form > #terms { + /* border:2px solid white; */ + /* background-color: #2b2727; */ + color: rgba(255, 255, 255, 0.705); + width: 100%; + margin: 0; + margin-top: -30px; + padding: 10px 6px; + } + #form > form > #terms > p { + /* background-color: #2b2727; */ + font-size: 15px; + } + #form a { + color:teal; + /* background-color: #2b2727; */ + /* margin-top: -20px; */ + } + #form > form > #button { + height: 70px; + width: 200px; + border-radius: 40px; + background-color: #c02d28; + border: none; + font-size: 22px; + color: white; + } + + + + #la{ + line-height: 25px; + } + + + + + #faQ{ + height:40px; + width:10%; + margin: auto; + /* border: 1px solid cyan; */ + /* margin-top: 40px; */ + /* margin-left: 600px; */ + /* padding-top: 20px; */ + color: white; + /* padding-left: 10px; */ + font-size: 40px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + } + + #que{ + height:350px; + width:65%; + text-align: center; + /* border: 1px solid cyan; */ + /* margin-top: 20px; */ + /* margin-left: 270px; */ + padding-top: 20px; + color: white; + padding-left: 10px; + font-size: 40px; + margin: auto; + box-sizing: border-box; + margin-bottom: 70px; + /* font-family: Arial, Helvetica, sans-serif; */ + } + #ch1{ + height:40px; + width:90%; + /* border: 1px solid cyan; */ + color: white; + background-color:#891814; + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 15px; + align-content: center; + margin-left: 40px; + padding-left: 20px; + } + #ch2{ + width: 91%; + font-size: 15px; + margin-left: 40px; + margin-right: 30px; + /* line-height: 28px; */ + /* border: 1px solid red; */ + background-color: white; + color: #3e3e3e; + font-family: Arial, Helvetica, sans-serif; + padding-left: 20px; + padding-top: 15px; + /* margin-top: 20px; */ + line-height: 23px; + padding-bottom: 15px; + box-sizing: border-box; + + } + .ch3{ + height:55px; + width:91%; + border-bottom: 1px solid black; + font-size: 15px; + background-color: #d3d3d3; + color: rgb(12, 12, 12); + font-size: 15px; + font-weight: 700; + margin-left: 40px; + padding-left: 9px; + /* padding-top: -10px; */ + box-sizing: border-box; + text-align: left; + padding-top: -5px; + /* margin-top: -10px; */ + /* background-color: #222; */ + } + #frame{ + height:320px; + width:560px; + /* border:1px solid green; */ + margin-left: 520px; + margin-top: -280px; + + } + /* #main { + position: absolute; + } */ + +#clip1 { + clip-path: polygon(0 70%, 0% 100%, 100% 100%); + height: 250px; + width: 100%; + background-color: #000000d0; + + margin-top: -110px; + +} +#clip2 { + height: 250px; + width: 100%; + background-color: #000000d0; + + margin-top: -260px; + clip-path: polygon(0 100%, 100% 70%, 100% 100%, 0 100%); + +} +@media all and (min-width:381px) and (max-width:768px){ +#main2 { + width: 90%; + /* margin: auto; */ + margin-top: 780px; + flex-direction: column; + padding-bottom: 170px; +} +#main2> div { + width: 100%; + text-align: center; + /* margin: auto; */ +} +#main2 iframe { + margin-top: 30px; + width: 90%; + margin-bottom: 30px; +} + +#main { + height: 640px; + +} +#main > div { + width: 99%; + flex-direction: column; + margin: auto; + text-align: center; + margin-left: 200px; +} +#main > div > div:last-child { + width: 550px; + margin-left: -170px; + padding-right: 20px; + /* border:1px solid blue */ +} +#clip1,#clip2 { + display: none; +} +#swap { + flex-direction: column-reverse; + margin-top: 100px; +} +#swap > div { + width: 100%; + margin-top: 30px; +} +#swap img { + margin-top: 30px; +} +#bootcamp { + width: 90%; + margin: auto; + text-align: center ; +} +#abc { + width: 95%; +} +#anchor a { + font-size: 15px; +} +#total { + width: 95%; +} +#menu3 { + flex-direction: column; + width: 90%; + margin: -10px auto; +} +#menu3 > div { + width: 100%; + text-align: center; +} +#menu3 h1 { + font-size: 30px; + margin-bottom: 15px; +} +#menu3 #form { + margin-top: 20px; + text-align: center; + /* margin-bottom: 50px; */ +} +#faQ{ +padding-top: 70px; +} +#que { + width: 80%; + margin-bottom: 150px; + text-align: left; +} +#ch1 { + padding-left: 5px; +} +} +@media all and (min-width:50px) and (max-width:381px){ + #main2 { + width: 90%; + /* margin: auto; */ + margin-top:980px; + flex-direction: column; + padding-bottom: 170px; + } + #main2 h2 { + margin-bottom: 25px; + } + #main2> div { + width: 100%; + text-align: center; + /* margin: auto; */ + } + #main2 iframe { + margin-top: 30px; + width: 90%; + margin-bottom: 30px; + } + + #main { + height: 760px; + + } + #main > div { + width: 99%; + flex-direction: column; + margin: auto; + text-align: center; + margin-left: 200px; + } + #main img { + margin-left: -170px; + } + #main > div > div:last-child { + width: 250px; + margin-left: -170px; + padding-right: 20px; + text-align: center; + /* border:1px solid blue */ + } + #main i { + display: none; + } + #main button { + width: 250px; + } + #clip1,#clip2 { + display: none; + } + #swap { + flex-direction: column-reverse; + margin-top: 150px; + } + #swap > div { + width: 100%; + margin-top: 30px; + } + #swap img { + margin-top: 30px; + } + #bootcamp { + width: 90%; + margin: auto; + text-align: center ; + } + #abc { + width: 97%; + } + #anchor a { + font-size: 10px; + } + #hour { + line-height: 20px; + margin-top: 25px; + font-size: 10px; + } + #hour p { + margin-bottom: 40px; + } + #total { + width: 95%; + font-size: 10px; + } + #to { + font-size: 10px; + } + #menu3 { + flex-direction: column; + width: 90%; + margin: -10px auto; + } + #menu3 > div { + width: 100%; + text-align: center; + padding: 20px 10px; + } + #menu3 h1 { + font-size: 30px; + margin-bottom: 15px; + } + #menu3 #form { + margin-top: 20px; + text-align: center; + /* margin-bottom: 50px; */ + } + #faQ{ + padding-top: 70px; + margin-left: 90px; + } + #que { + width: 95%; + margin-bottom: 250px; + text-align: left; + margin-left: -20px; + } + #ch1 { + padding-left: 5px; + } + #form form { + padding: 20px; + text-align: left; + } + .ch3{ + line-height: 15px; + padding-top: 5px; + } + #form label { + font-size: 12px; + } + #form .form-div{ + flex-direction: column; + } + #form .form-div > div { + width: 100%; + } + #form #last_name { + margin-left: 0px; + } + #form input { + width: 90%; + } + #form { + height: 690px; + /* padding-bottom: 40px; */ + padding-bottom: 0px; + } + .g-recaptcha{ + /* font-size: 80px; */ + display: none; + } + #form #la { + font-size: 11px; + } + } + + + \ No newline at end of file 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/bootcamp.html b/bootcamp.html new file mode 100644 index 0000000..2ed0531 --- /dev/null +++ b/bootcamp.html @@ -0,0 +1,77 @@ + + + + + + + Document + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +

Core Coursework

+

(take these in order)

+
+
+
+
+
+

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

+ + +
+
+ + + + + + + diff --git a/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/display.js b/components/display.js new file mode 100644 index 0000000..22a172b --- /dev/null +++ b/components/display.js @@ -0,0 +1,83 @@ + +function display(data,main){ + data.map(function(el){ + let plus1 = document.createElement("div") + plus1.setAttribute("class","plus1") + plus1.innerText="+" + let line = document.createElement("div"); + line.setAttribute("id","line") + let div = document.createElement("div"); + div.setAttribute("id","div") + let div1 = document.createElement("div"); + div1.setAttribute("id","div1") + let img = document.createElement("img") + img.src=el.img + img.setAttribute("id","img") + let img1 = document.createElement("img") + img1.src=el.photo + img1.setAttribute("id","img1") + let h3 = document.createElement("h3") + h3.innerText=el.name + let h4 = document.createElement("h4"); + h4.innerText=el.title + let p = document.createElement("p"); + p.innerText=el.com + let div2 = document.createElement("div") + let div3 = document.createElement("div") + div3.append(h4,p) + div2.append(img1,div3) + div3.setAttribute("id","div3") + div2.setAttribute("id","div2") + div2.style.display="flex" + p.setAttribute("id","p") + let p1 = document.createElement("p"); + p1.innerText=el.des + p1.setAttribute("id","p1") + let p2 = document.createElement("p"); + p2.innerText=el.time + p2.setAttribute("id","p2") + let div4 = document.createElement("div") + let div5= document.createElement("div") + div5.append(p2,div4) + div4.innerText="CC" + div5.setAttribute("id","div5") + div4.setAttribute("id","div4") + let btn = document.createElement("button") + btn.innerText="Watch Free Preview" + let btn1 = document.createElement("button") + btn1.innerText="Get Full Access" + btn.setAttribute("id","btn") + btn1.setAttribute("id","btn1") + let div6 = document.createElement("div") + let box = document.createElement("div") + let h6 = document.createElement("h6") + h6.innerText="Editor's Notes" + let box_p = document.createElement("p") + + box_p.innerText=el.de + box.setAttribute("id","box") + box.append(h6,box_p) + div6.append(btn,btn1) + div6.style.display="flex" + div6.setAttribute("id","div6") + div1.append(h3,div2,p1,div5,div6) + div.append(img,div1) + img.addEventListener("click",function(){ + window.location.href="display.html" + let displayArr=[]; + displayArr.push(el) + }) + + btn1.addEventListener("click",function(){ + window.location.href="joinnow.html" + }) + // document.getElementById("line").append(plus1) + main.append(line,plus1,box,div) + plus1.addEventListener("click",function(){ + box.style.display="block" + }) + }) + +} + +export {display}; \ No newline at end of file diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..0bdb851 --- /dev/null +++ b/components/footer.js @@ -0,0 +1,41 @@ +function footer() { + return `
+ +
+ +
+
+
+
+ +
+
+ +
+
+
+
+ + + + + +
+
Email: support@frontendmasters.com
+
+
+

Frontend Masters is proudly made in Minneapolis, MN

+

© 2021 Frontend Masters · Terms of Service · Privacy Policy

+
+`; +} +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 `
+
+
+
+ + +
+
+ + +
+
+ + Remember Me +
+
+ + Forgot your password? +
+
+
`; +}; + +export default login; diff --git a/components/navbar.js b/components/navbar.js new file mode 100644 index 0000000..d967d2f --- /dev/null +++ b/components/navbar.js @@ -0,0 +1,117 @@ +function navbar() { + 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 new file mode 100644 index 0000000..d19bfaf --- /dev/null +++ b/components/path.js @@ -0,0 +1,108 @@ +const pathContainer = (svg, title, msg) => { + return `
+ ${svg} +

${title}

+

+ ${msg} +

+
+
+
+ `; +}; + +const getElem = (tag_name, class_name) => { + let tag = document.createElement(tag_name); + tag.className = class_name; + return tag; +}; + +const appedData = (data, parent) => { + parent.innerHTML = null; + data.map((el) => { + let p_box = getElem("div", "p-box"); + + // Progress Bar + let circular = getElem("div", "circular"); + + let inner = getElem("div", "inner"); + + let outer = getElem("div", "outer"); + + let numb = getElem("div", `numb ${el.class}`); + let numb_img_box = getElem("div", "img"); + if (el.img == "") { + numb_img_box.innerHTML = el.icon; + } else { + let img = getElem("img", ""); + img.src = el.img; + numb_img_box.append(img); + } + let p = getElem("p", ""); + p.innerHTML = "0%"; + numb.append(numb_img_box, p); + + let circle = getElem("div", "circle"); + let dot = getElem("div", "dot"); + let span = getElem("div", el.class); + dot.append(span); + + let bar_left = getElem("div", "bar left"); + let left_progress = getElem("div", `progress ${el.class}`); + bar_left.append(left_progress); + + let bar_right = getElem("div", "bar right"); + let right_progress = getElem("div", `progress ${el.class}`); + bar_right.append(right_progress); + + let desc = getElem("div", "desc"); + + let title = getElem("h3", "title"); + title.innerText = el.title; + + let description = getElem("p", ""); + description.innerText = el.desc; + + let btn = getElem("button", el.class); + btn.innerText = "Start"; + + circle.append(dot, bar_left, bar_right); + circular.append(inner, outer, numb, circle); + desc.append(title, description); + + p_box.append(circular, desc, btn); + parent.append(p_box); + }); +}; +const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); +}; + +const addEventToBox = () => { + const p_box = document.querySelectorAll(".p-box"); + p_box.forEach((el) => { + updateProgress(el); + }); +}; +export { pathContainer, appedData, addEventToBox }; diff --git a/components/slider.js b/components/slider.js new file mode 100644 index 0000000..492f821 --- /dev/null +++ b/components/slider.js @@ -0,0 +1,18 @@ +const slider = () => { + return `
+

What They're Saying About Us (@FrontendMasters)

+
+
+
+ +
+
+
+
+
+ +
+
`; +}; + +export { slider }; diff --git a/courses.html b/courses.html index 7e67bef..a59cb89 100644 --- a/courses.html +++ b/courses.html @@ -6,9 +6,29 @@ 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:

+
+
+
+ +
+
+

Built a Full Stack App From Stratch.

+

Scott Moss

+
+
+ +
+ +
+
+ +
+
+

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/grades.html b/grades.html new file mode 100644 index 0000000..91a9460 --- /dev/null +++ b/grades.html @@ -0,0 +1,129 @@ + + + + + + + Document + + + + + +
+
+
Frontend Masters Books
+
+ + + + + + + +
+ +
+ + + + + diff --git a/icon1.html b/icon1.html new file mode 100644 index 0000000..3f1caf2 --- /dev/null +++ b/icon1.html @@ -0,0 +1,100 @@ + + + + + + + Document + + + + + + + + +
+
+
+ + +
+
+ + + + + + + + + +

Core Coursework

+

(take these in order)

+
+ +
+
+ + + + + + + diff --git a/icon2.html b/icon2.html new file mode 100644 index 0000000..54564dd --- /dev/null +++ b/icon2.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/icon3.html b/icon3.html new file mode 100644 index 0000000..44bc84f --- /dev/null +++ b/icon3.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/icon4.html b/icon4.html new file mode 100644 index 0000000..0450b86 --- /dev/null +++ b/icon4.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

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

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/icon6.html b/icon6.html new file mode 100644 index 0000000..303b9aa --- /dev/null +++ b/icon6.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/icon7.html b/icon7.html new file mode 100644 index 0000000..5c99080 --- /dev/null +++ b/icon7.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

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

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/icon9.html b/icon9.html new file mode 100644 index 0000000..08e7f5e --- /dev/null +++ b/icon9.html @@ -0,0 +1,75 @@ + + + + + + + Document + + + + + + + + + +
+
+ +
+ + +
+
+ +

Core Coursework

+

(take these in order)

+
+ +
+ +
+
+ + + + + + + diff --git a/index.html b/index.html index ee86e94..7d32ae9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,104 @@ - Document + Frontend Master Website + + + + + + - + + +
+ + + + + +
+
+ JS + React + TS + Node + Vue3 + Angular13 + CSS + Core + Webpack +
+ + + + + + +
+ + + +
+
+

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

+
+ +
+
+
+ +
+ +

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

+ More Info > +
+ + + + + + + + + + diff --git a/joinnow.html b/joinnow.html new file mode 100644 index 0000000..7d25a3e --- /dev/null +++ b/joinnow.html @@ -0,0 +1,24 @@ + + + + + + + + + + + Frontend Masters Pricing + + +
+
+ + + + + + diff --git a/learn.html b/learn.html new file mode 100644 index 0000000..614ddf3 --- /dev/null +++ b/learn.html @@ -0,0 +1,52 @@ + + + + + + + + + Paths to Learning JavaScript, React, and More Skills You Need. + + + + + + + + + + + + +
+ + +
+ + +
+ + + + + + + + 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/more.html b/more.html new file mode 100644 index 0000000..493e6ed --- /dev/null +++ b/more.html @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + Document + + + + + +
+ +
+
+ +

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

+

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

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

What is the Bootcamp, and how does it work?

+

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

+
+
+ +
+
+ + +
+

Why Frontend Masters?

+

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

+ +
+ +
+
Bootcamp Curriculum
+
+
+ Introduction to HTML + Introduction to CSS + HTML Forms + + Website Embeds & GitHub Pages + Calculator Project: HTML & CSS + Introduction to JavaScript + Calculator Project: JavaScript + Using JavaScript in Websites + Build a Game Project: Feed-A-Star-Mole + +
+

1 hours, 47 minutes

+

4 hours, 11 minutes

+

2 hours, 4 minutes

+

0 hours, 54 minutes

+

0 hours, 48 minutes

+

5 hours, 23 minutes

+

1 hours, 13 minutes

+

3 hours, 2 minutes

+

2 hours, 14 minutes

+ +
+ +
+
+ +
Total Hours to Learn HTML, CSS & JS
+ +
21 hours, 6 minutes
+
+ + +
FAQ
+
+
Q:This is completely free? What's the catch?
+
A: This is completely free - and we believe by educating more people about web development, we get a better web - with more voices empowered to share their ideas, apps and perspectives. So the catch is we hope you build something awesome. Oh, and if you'd like to become a customer in the future to take more advanced courses and take your career to the next level, that would be cool too. 😀
+
Q:How long will will this Bootcamp be available?
+
Q:What will this Bootcamp teach me?
+
Q:Where can I go after completing the Bootcamp?
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/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/bootcamp.js b/scripts/bootcamp.js new file mode 100644 index 0000000..eb26313 --- /dev/null +++ b/scripts/bootcamp.js @@ -0,0 +1,194 @@ +var bootcampArr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-01-introduction-html/thumb.webp", + name:"Introduction to HTML", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Learn the basics of HTML, like commonly-used elements and how to create a web page, how to add elements like links, headings, and images, and then practice your new skills by writing the markup for a book chapter.", + time:"1 hours, 47 minutes", + de:"Learn patterns for managing state throughout your React application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-02-introduction-css/thumb.webp", + name:"Introduction to CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"1 hours, 30 minutes", + des:"Learn the basics of CSS, like how to import styles into an HTML file, how to target specific elements on a page using selectors, useful tools, how to add spacing to a page, and a few ways to create basic layouts. Then, practice your new skills by coding the layout for a blog page.", + de:"Learn patterns for managing state throughout your React application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-03-html-forms/thumb.webp", + name:"HTML Forms", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"2 hours, 47 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create forms using HTML and CSS. You’ll be able to differentiate between the different types of input fields that exist in HTML and when to use each one. Then, you’ll learn how to handle form submission, form submission issues, and form styling." + + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-04-embeds-github-pages/thumb.webp", + name:"Website Embeds & GitHub Pages", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"3 hours, 27 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to leverage embedded web fonts and Google Maps into your web pages and how to host a website for free on GitHub Pages. Then, practice your new skills by creating a portfolio website." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-05-calculator-html-css/thumb.webp", + name:"Calculator Project: HTML & CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + time:"3 hours, 10 minutes", + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create the structure and appearance for the HTML and CSS of the calculator on iOS devices in the first part of the calculator exercise." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-06-introduction-javascript/thumb.webp", + name:"Introduction to JavaScript", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"4 hours, 20 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Learn the basics of JavaScript, like its primitives, how to control the flow of a program, what scope is and why it matters, and data structures that can be used in programming. Then, practice your new skills in two exercises: by coding quiz questions that demonstrate important JavaScript concepts and by making a set of tests written in JavaScript pass. Finally, learn about the DOM, an essential part of building web pages." + }, + { + name:"Calculator Project: JavaScript", + img:"https://static.frontendmasters.com/assets/courses/2019-09-07-calculator-javascript/thumb.webp", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"1 hours, 10 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Learn how to create the underlying functionality for the JavaScript of the calculator on iOS devices in the final part of the calculator exercise. You’ll practice breaking a problem down into simple, achievable steps, and end up with a working calculator that performs basic math operations." + }, + { + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"3 hours, 30 minutes", + + de:"Learn patterns for managing state throughout your React application.", + img:"https://static.frontendmasters.com/assets/courses/2019-09-08-javascript-in-websites/thumb.webp", + name:"Using JavaScript in Websites", + des:"Learn how to incorporate JavaScript into your websites by first seeing how to use third-party libraries and then creating two projects: an image carousel that uses JavaScript code, and then an application that retrieves data about dog breeds from an API." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-09-web-game-project/thumb.webp", + name:"Build a Game Project: Feed-A-Star-Mole", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:" Brian Holt", + com:"Stripe", + time:"3 hours, 50 minutes", + + de:"Learn patterns for managing state throughout your React application.", + des:"Build a working feed-a-star-mole game from the ground up that utilizes the skills you learned in previous bootcamp courses to structure, lay out, style, and add functionality to a group of hungry moles that appear and disappear as the user tries to feed them. The exercise is broken up into an introduction to what the final product will look like, the HTML and CSS solution for the game, and then the JavaScript solution." + } +] +let main=document.getElementById("main") + +import navbar from "../components/navbar.js" + // console.log(navbar) + document.querySelector(".header").innerHTML=navbar() + import footer from "../components/footer.js" + +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + function display(data,main){ + data.map(function(el){ + let plus1 = document.createElement("div") + plus1.setAttribute("class","plus1") + plus1.innerText="+" + let line = document.createElement("div"); + line.setAttribute("id","line") + let div = document.createElement("div"); + div.setAttribute("id","div") + let div1 = document.createElement("div"); + div1.setAttribute("id","div1") + let img = document.createElement("img") + img.src=el.img + img.setAttribute("id","img") + let img1 = document.createElement("img") + img1.src=el.photo + img1.setAttribute("id","img1") + let h3 = document.createElement("h3") + h3.innerText=el.name + let h4 = document.createElement("h4"); + h4.innerText=el.title + let p = document.createElement("p"); + p.innerText=el.com + let div2 = document.createElement("div") + let div3 = document.createElement("div") + div3.append(h4,p) + div2.append(img1,div3) + div3.setAttribute("id","div3") + div2.setAttribute("id","div2") + div2.style.display="flex" + p.setAttribute("id","p") + let p1 = document.createElement("p"); + p1.innerText=el.des + p1.setAttribute("id","p1") + let p2 = document.createElement("p"); + p2.innerText=el.time + p2.setAttribute("id","p2") + let div4 = document.createElement("div") + let div5= document.createElement("div") + div5.append(p2,div4) + div4.innerText="CC" + div5.setAttribute("id","div5") + div4.setAttribute("id","div4") + let btn = document.createElement("button") + btn.innerText="Watch Course" + btn.setAttribute("id","btn") + let box = document.createElement("div") + let h6 = document.createElement("h6") + h6.innerText="Editor's Notes" + let box_p = document.createElement("p") + + box_p.innerText=el.de + box.setAttribute("id","box") + box.append(h6,box_p) + + + + div1.append(h3,div2,p1,div5,btn) + div.append(img,div1) + img.addEventListener("click",function(){ + window.location.href="display.html" + let displayArr=[]; + displayArr.push(el) + }) + + btn.addEventListener("click",function(){ + window.location.href="joinnow.html" + }) + // document.getElementById("line").append(plus1) + main.append(line,plus1,box,div) + plus1.addEventListener("click",function(){ + box.style.display="block" + }) + }) + +} +display(bootcampArr,main) \ No newline at end of file diff --git a/scripts/courses.js b/scripts/courses.js index 79b375e..18d7b48 100644 --- a/scripts/courses.js +++ b/scripts/courses.js @@ -1,14 +1,29 @@ +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; + parent.innerHTML = null; data.forEach((el) => { // console.log('el:', el); + let mainClass = document.createElement("div"); - mainClass.className = "c"; + mainClass.className = "mainClass"; let outerDiv = document.createElement("div"); @@ -32,17 +47,27 @@ const append = (data, parent)=>{ btn1.innerText = "Watch Free Preview"; btn1.id = "btn1"; + let link1 = document.createElement("a"); + link1.href = "https://frontendmasters.com/courses/angular-13/"; + + link1.append(btn1); + let btn2 = document.createElement('button'); btn2.innerText = "Get Full Access"; btn2.id = "btn2"; + + let link2 = document.createElement('a'); + link2.href = "https://frontendmasters.com/join/ "; + + link2.append(btn2); let title = document.createElement("h2"); title.innerText = el.title; title.className ="title"; - btnClass.append(btn1, btn2); + btnClass.append(link1, link2); let instructorClass = document.createElement("div"); @@ -111,18 +136,28 @@ const append = (data, parent)=>{ parent.append(mainClass); + + }) +} + function search(data,inputValue) { + var searchText = inputValue.value.toLowerCase(); + console.log(searchText); + var filterData = data.filter(function (item) { + var elem = item.title.toLowerCase(); + return elem.includes(searchText); + }); + console.log('filterData:', filterData) + + append(filterData, main); + } +export { append, search }; +// export default append; - - - - }) -} -export default append; diff --git a/scripts/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 new file mode 100644 index 0000000..9711f11 --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,731 @@ +let twittweData = [ + [ + { + name: "Negar Jamalifard", + user_name: "@@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "4:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "12:56pm · Nov 30, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "10:44pm · Oct 11, 2020", + }, + { + name: "AJ Thompson", + user_name: "@ajthompson", + profile_pic: + "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: "3:57pm · Oct 11,2020", + }, + { + name: "Dave Halewood", + user_name: "@halewood", + profile_pic: + "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:33pm · Oct 5, 2020", + }, + ], + [ + { + name: "Andrew Poe", + user_name: "@andrewtpoe", + profile_pic: + "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: "PurpleDoll lvl0", + user_name: "@purpledoll001", + profile_pic: + "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: "Sarah Drasner", + user_name: "@sarah_edo", + profile_pic: + "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: "Gustavo Sanchez", + user_name: "@gusanchedev", + profile_pic: + "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: "Tracey “3Shots” Berg-Fulton", + user_name: "@BergFulton", + profile_pic: + "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: "J.", + user_name: "@jsilvax", + profile_pic: + "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: "Megan Sullivan", + user_name: "@meganesulli", + profile_pic: + "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: "Anthony R. 🇫🇷🚀💻", + user_name: "@AnthonyHexium", + profile_pic: + "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: "Jeremy Stuart Barnes", + user_name: "@JeremyStuBarnes", + profile_pic: + "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: "Marco Monsanto", + user_name: "@marcomonsanto2", + profile_pic: + "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: "Sandeep Ranjan", + user_name: "@sandeepranjan_", + profile_pic: + "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: "Kevin", + user_name: "@optimistic_updt", + profile_pic: + "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: "Joss Stancek", + user_name: "@JossWriteCode", + profile_pic: + "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: "Jay Papisan", + user_name: "@papistan1", + profile_pic: + "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: "billyhunt", + user_name: "@billyhunt", + profile_pic: + "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: "Melvin", + user_name: "@Melvin_manni", + profile_pic: + "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: "Caleb Lovell", + user_name: "@NCaleb_Lovell", + profile_pic: + "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: "Jimmy", + user_name: "@jimmyaldape", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@FrontendMasters courses are already paying off. Can’t stop. Won’t stop.", + time: "9:56pm · Jun 9, 2020", + }, + ], + [ + { + name: "Stefan Fejes", + user_name: "@fejas713", + profile_pic: + "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: "Sam Ratemo", + user_name: "@sammyeast", + profile_pic: + "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: "Olivia Oddo", + user_name: "@OliviaOddo", + profile_pic: + "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: "Nhu Phan 👩🏻‍💻🧘🏻‍♀️", + user_name: "@Nhuphan0404", + profile_pic: + "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: "Ricky Garcia", + user_name: "@RickyGarcia", + profile_pic: + "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: "Kelly Watson", + user_name: "@KellyWatson", + profile_pic: + "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 = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let small_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let learn_data = [ + { + title: "Beginner", + desc: "Your Path to Becoming a Career-Ready Web Developer!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Professional", + desc: "Go From Professional Web Developer to Lead Engineer", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Expert", + desc: "Mind-Expanding Web Development Techniques to Emerging APIs in the Web Browser", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Computer Science", + desc: "Learning Computer Science with JavaScript", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Fullstack", + desc: "Expand Your Abilities and Master the Server", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Design to Code", + desc: "Make Your Designs Come to Life Through Code!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, +]; + +let map_svg = ` + + + + + + + + + + + + + + + + +`; + +let topic_icon = ``; + +let elective_data = [ + { + title: "JavaScript", + desc: "Write Professional, Modern JavaScript", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", + icon: ``, + class: "js", + }, + { + title: "CSS", + desc: "Learn CSS, from Laying Out Websites to Performant Animations", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/dj/370768/png/370768.png", + icon: ``, + class: "css", + }, + { + title: "Node.js", + desc: "Build Web APIs and Applications with Node.js", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/kk/353117/png/node-node-js-logo.png", + icon: ``, + class: "node", + }, + { + title: "React.js", + desc: "Be Productive with React.js, Today's Most Popular Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/tx/353401/png/react-logo.png", + icon: ``, + class: "react", + }, + { + title: "Vue.js", + desc: "Learn Vue.js, An Easy to Pick Up and Powerful Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ep/353380/png/vuejs-logo.png", + icon: ``, + class: "vue", + }, + { + title: "Angular", + desc: "Learn Angular, a TypeScript-based web application framework led by Google", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/mm/370537/png/370537.png", + icon: ``, + class: "angular", + }, +]; + +localStorage.setItem("elective_data", JSON.stringify(elective_data)); +localStorage.setItem("topic_icon", topic_icon); +localStorage.setItem("map_svg", map_svg); +localStorage.setItem("learn_data", JSON.stringify(learn_data)); +localStorage.setItem("twitter_data", JSON.stringify(twittweData)); +localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); +localStorage.setItem("t_small_data", JSON.stringify(small_data)); 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/icon1.js b/scripts/icon1.js new file mode 100644 index 0000000..2f84596 --- /dev/null +++ b/scripts/icon1.js @@ -0,0 +1,133 @@ +var icon1arr = [ + { + img : "https://static.frontendmasters.com/assets/courses/2018-02-27-js-fundamentals-functional-v2/thumb.webp", + name:"JavaScript: From Fundamentals to Functional JS, v2", + photo:"https://static.frontendmasters.com/assets/teachers/gandolfo/thumb.webp", + title:"Bianca Gandilfo", + com:"Thumbtack", + des:"Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript.", + time:"8 hours, 11 minutes ", + head1:"Editor's Notes", + de:"A practical introduction to JavaScript and an overview of the language, Bianca covers what you need to know to be competent at writing JavaScript." + + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-01-07-javascript-hard-parts-v2/thumb.webp", + name:"JavaScript: The Hard Parts, v2", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Take your JavaScript to the next level. Gain an understanding of callbacks, higher order functions, closure, asynchronous and object-oriented JavaScript!", + time:"6 hours, 41 minutes", + head1:"Editor's Notes", + de:"Will’s course emphasizes not only understanding JavaScript, but also communicating your understanding of the language’s most important concepts. Communicating is a necessary skill for becoming a high-performing engineer." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-04-03-deep-javascript-v3/thumb.webp", + name:"Deep JavaScript Foundations, v3", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Dive into JavaScript's core language features: types & coercion, scope & closure, and JavaScript's object oriented system.", + time:"10 hours, 32 minutes ", + de:"Kyle’s course builds by reinforcing many of the foundational concepts covered in Will’s course, but goes even deeper. He also covers types and the type coercion that goes on under the hood of JavaScript.", + head1:"Editor's Notes" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-04-05-js-recent-parts/thumb.webp", + name:"JavaScript: The Recent Parts", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Get up to speed with new JavaScript features like tagged template literals, destructuring, iterators, generators, regex improvements and async await.", + time:"4 hours, 9 minutes ", + head1:"Editor's Notes", + de:"Modern JavaScript builds on top of the foundations and adds more to the language. Kyle’s JavaScript the Recent Parts course will give you a deeper understanding those newer features added to the JavaScrip" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-10-javascript-new-hard-parts/thumb.webp", + name:"JavaScript: The New Hard Parts", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await!", + time:"4 hours, 46 minutes ", + head1:"Editor's Notes", + de:"Understanding asynchronous and functional programming deeply will increase your programming abilities drastically. The first course is part 2 of Will’s “Hard Parts” series. With this one, he’s focusing on the new asynchronous features in JavaScript." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-06-18-functional-javascript-v3/thumb.webp", + name:"Functional-Light JavaScript, v3", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Improve your JavaScript by applying functional programming concepts like function purity, point-free, partial-application, currying, composition, immutability, recursion, list operations like map, reduce & filter...plus even more advanced concepts like monads and transduction!", + time:"10 hours, 1 minutes", + head1:"Editor's Notes", + de:"Functional programming is a set of tools such as map/reduce/filter, pure functions, and immutability. These tools are sure to make you a more effective developer through composing pure functions together to write more predictable and bug-free code." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-03-17-hardcore-js-v2/thumb.webp", + name:"Hardcore Functional Programming in JavaScript, v2", + photo:"https://static.frontendmasters.com/assets/teachers/lonsdorf/thumb@2x.webp", + title:"Brian Lonsdorf", + com:"Salesforce", + des:"Learn functional programming concepts such as pure functions, currying, composition, functors, and monads, and see functional concepts in action in a real-world web app!", + time:"3 hours, 44 minutes", + head1:"Editor's Notes", + de:"There’s a push with new languages that compile to JavaScript which are born of a functional nature like Elm and PureScript. In this course, we see how far we can take pure JavaScript towards more traditional functional programming." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-08-28-javascript-accessibility/thumb.webp", + name:"Accessibility in JavaScript Applications", + photo:"https://static.frontendmasters.com/assets/teachers/sutton/thumb@2x.webp", + title:"Marcy Sutton", + com:"Gatsby", + des:"Produce innovative and inclusive JavaScript-powered web apps! Learn to remove barriers and allow people with disabilities to use your modern JavaScript web applications.", + time:"4 hours, 6 minutes ", + head1:"Editor's Notes", + de:"When you add lots of dynamic functionality with JavaScript, it’s important to keep your web apps accessible through announcing changes and focusable elements to screen readers and accommodate those with disabilities." + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon1arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc: "From JavaScript foundations, all the way to Hardcore Functional JavaScript, find out how far you can go with your JavaScript abilities!", +icon: "", +img: " https://www.bing.com/th?id=OIP.fxMFAWgcs9ASnyZoIMeLJAHaHa&w=174&h=170&c=8&rs=1&qlt=90&o=6&dpr=1.41&pid=3.1&rm=2", +title: "Write Professional, Modern JavaScript" + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon2.js b/scripts/icon2.js new file mode 100644 index 0000000..4b44295 --- /dev/null +++ b/scripts/icon2.js @@ -0,0 +1,88 @@ +var icon2arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-04-complete-react-v6/thumb.webp", + name:"Complete Intro to React, v6", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:"Brian Holt", + com: "Stripe", + des:"Much more than an intro, you’ll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, like Parcel, ESLint, Prettier, and React Router!", + time:"5 hours, 41 minute", + head1:"Editor's Notes", + de:"Learn to build an entire real-world, modern application from scratch in today’s tools!" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-04-intermediate-react-v3/thumb.webp", + name:"Intermediate React, v3", + photo:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + title:"Brian Holt", + com: "Stripe", + des:"Build scalable React applications while learning React hooks in-depth, CSS-in-JS with TailwindCSS, increase performance with code splitting and server-side rendering, add TypeScript, state management with Redux, test your app with Jest …and more!", + time:"6 hours, 7 minutes ", + head1:"Editor's Notes", + de:"Learn the tools in the surrounding React ecosystem." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-02-14-pure-react-state/thumb.webp", + name:"State Management in Pure React, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Learn patterns for managing state throughout your React application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", + name:"React and TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Ship React apps with more code confidence using TypeScript! Migrate your app to TypeScript, type simple and advanced React components, and learn all types shipped with React for writing React with TypeScript.", + time:"5 hours, 3 minutes", + head1:"Editor's Notes", + de:"Learn patterns for managing state throughout your React application." + + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon2arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc:"React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.", +icon: "", +img:"https://th.bing.com/th/id/R.21cef5f5ff8f0a831ed1692e91e7154a?rik=aLpwwKogBecykg&riu=http%3a%2f%2fyycjs.com%2freal-world-react%2fimg%2freact-logo.png&ehk=Da48R0vYoMh7ImQa8E9fc04Z5BaQHyOkz3qjQ6IddFo%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1", +title: "Be Productive with React.js, Today's Most Popular Framework" + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon3.js b/scripts/icon3.js new file mode 100644 index 0000000..055be2d --- /dev/null +++ b/scripts/icon3.js @@ -0,0 +1,86 @@ +var icon3arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp", + name:"TypeScript Fundamentals, v3", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-04-intermediate-typescript/thumb.webp", + name:"Intermediate TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative teams.", + time:"2 hours, 48 minutes", + de:"Grow from being a contributor to a TypeScript codebase to being on the path to becoming “the TypeScript expert” for your team", + head1:"Editor's Notes" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-11-11-production-typescript/thumb.webp", + name:"Production-Grade TypeScript", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com:"LinkedIn", + des:"Use the TypeScript language at scale to increase the developer experience and productivity of your teams! You’ll learn to manage even the most ambitious TypeScript projects with confidence and ease.", + time:"5 hours, 10 minute", + head1:"Editor's Notes", + de:"Grow from being a contributor to a TypeScript codebase to being on the path to becoming “the TypeScript expert” for your team." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-05-25-react-typescript/thumb.webp", + name:" React and TypeScript", + // name:"State Management in Pure React, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + title:"Steve Kinney", + com: "Temporal", + des:"Use React APIs to manage state in class-based components, and in React hooks. Create custom hooks, use reducers, add routing, and then learn ways to do more complicated state management techniques such as using the Context API.", + time:"4 hours, 27 minutes", + head1:"Editor's Notes", + de:"Learn to manage even the most ambitious TypeScript projects with confidence and ease." + } +] +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon3arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +title:"Add Types to Your Web and Node.js Apps with TypeScript", +icon: "", +img:"https://th.bing.com/th/id/OIP.ts3lYA8TB3a6qWmDknphoQHaHa?pid=ImgDet&w=300&h=300&rs=1", +desc:"Write robust JavaScript with a superior developer experience for your teams with Typescript." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon4.js b/scripts/icon4.js new file mode 100644 index 0000000..91d91c2 --- /dev/null +++ b/scripts/icon4.js @@ -0,0 +1,104 @@ +var icon4arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2021-07-20-node-js-v2/thumb.webp", + name:"Introduction to Node.js, v2", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", + time:"4 hours, 51 minutes", + head1:"Editor's Notes", + de:"Go under the hood of Node.js and gain a mental model of how writing JavaScript on the server with Node.js works." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-05-24-servers-node-js/thumb.webp", + name:"The Hard Parts of Servers & Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp", + title:"Will Sentance", + com:"Codesmith", + des:"Uncover the most challenging, yet most powerful features in Node.js, to help you write and debug professional server code.", + time:"5 hours, 16 minutes", + head1:"Editor's Notes", + de:"Get the deep fundamental concepts of Node.js with Kyle Simpson, author of the ‘You Don’t Know JS’ Bo" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-11-25-server-graphql-nodejs/thumb.webp", + + name:"Digging Into Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/simpson/thumb@2x.webp", + title:"Kyle Simpson", + com:"You Don't Know JS", + des:"Learn the fundamental concepts of programming in Node.js: CLI programming, file system access, asynchrony, streams, HTTP servers & routing, database persistence, and child processes.", + time:"4 hours, 0 minute", + head1:"Editor's Notes", + de:"Building APIs is the foundation of any back-end application." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-18-api-design-nodejs-v3/thumb.webp", + name:"API Design in Node.js, v3", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Use Express to build a REST API in Node.js – handle REST API verb methods to create, read, update and delete resources from a MongoDB database.", + time:"3 hours, 34 minutes", + head1:"Editor's Notes", + de:"GraphQL is the new standard for building flexible APIs." + + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-11-25-server-graphql-nodejs/thumb.webp", + name:"Server-Side GraphQL in Node.js", + photo:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + title:"Scott Moss", + Com:"Netflix", + des:"Transfer your JavaScript skills to the server-side and level up to a full-stack engineer! By learning the foundations of Node.js, you’ll be able to do a lot more with JavaScript, like creating command-line interfaces and APIs, and interacting with the file system.", + time:"4 hours, 51 minutes", + head1:"Editor's Notes", + de:"Jem teaches you the essentials for setting up and launching servers in a two-part series." + + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon4arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + class: "js", +color: "#c94f17", +desc:"Node.js has emerged as one of the main server-side language choices that powers the web!", +icon: "", +img:"https://cdn.pixabay.com/photo/2015/04/23/17/41/node-js-736399_960_720.png", +title: "Build Web APIs and Applications with Node.js" + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon5.js b/scripts/icon5.js new file mode 100644 index 0000000..3f78484 --- /dev/null +++ b/scripts/icon5.js @@ -0,0 +1,69 @@ +var icon5arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2020-10-20-vue-3/thumb.webp", + name:"Introduction to Vue 3", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", + time:"4 hours, 57 minutes", + de:"Get a dynamic and fun introduction to Vue from Sarah Drasner!" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2020-10-27-vue-nuxt-apps/thumb.webp", + name:"Building Applications with Vue & Nuxt", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.", + time:"3 hours, 37 minutes", + de:"Learn how to build a variety of applications in the real world." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-02-18-production-vue/thumb.webp", + name:"Production-Grade Vue.js", + photo:"https://static.frontendmasters.com/assets/teachers/hong/thumb@2x.webp", + title:"Ben Hong", + com:"Netlify", + des:"Learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, best practices for architecting increasingly complex applications, and more.", + time:"4 hours, 37 minutes", + de:"Learn best practices in order to build Vue.js apps that can scale and grow!" + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon5arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png", + title:"Learn Vue.js, An Easy to Pick Up and Powerful Framework ", + desc:"Vue is easy to pick up and integrate with other libraries or existing projects, but can scale up to power sophisticated web applications." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon6.js b/scripts/icon6.js new file mode 100644 index 0000000..8db9f9e --- /dev/null +++ b/scripts/icon6.js @@ -0,0 +1,71 @@ +var icon6arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2022-02-01-angular-13/thumb.webp", + name:"Angular 13 Fundamentals", + photo:"https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb@2x.webp", + title:"Lukas Ruebbelke", + com:"Venmo", + des:"Learn Angular through building an app with real-world features! We start off using the Angular CLI to get set up quickly. Then we'll move on to Angular core concepts like components, templates, routing, forms, server-side communicati,on, and more.", + time:"6 hours, 52 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-08-03-typescript-v3/thumb.webp", + name:"TypeScript Fundamentals, v3", + photo:"https://static.frontendmasters.com/assets/teachers/north/thumb@2x.webp", + title:"Mike North", + com: "LinkedIn", + des:"TypeScript adds a powerful type system on top of your JavaScript to catch bugs before they happen and provide a superior developer experience for collaborative team", + time:"4 hours, 27 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-01-19-production-angular/thumb.webp", + name:"Production-Grade Angular", + photo:"https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb@2x.webp", + title:"Lukas Ruebbelke", + com:"Venmo", + des:"Learn how to structure your projects leveraging Angular CLI and Nx. Create shared modules and apply unit tests and end-to-end testing. Analyze performance and ship your app to production using Docker.", + time:"6 hours, 57 minutes", + de:"Angular incorporates many of the industry’s best ideas and tooling into one powerful framework!" + + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon6arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://raw.githubusercontent.com/CAST-Extend/resources/master/com.castsoftware.angularjs.png", + title:"Learn Angular, a TypeScript-based web application framework led by Google", + desc:"Angular is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations." + + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon7.js b/scripts/icon7.js new file mode 100644 index 0000000..31d3421 --- /dev/null +++ b/scripts/icon7.js @@ -0,0 +1,79 @@ +var icon7arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2021-12-14-getting-started-css/thumb.webp", + name:"Getting Started with CSS", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more. You'll even build a professional portfolio website by the end of the course!", + time:"3 hours, 19 minutes", + de:"Use CSS to layout and visually style web pages so you’re websites aren’t just functional, but they look nice as well!" + }, + { + img:"https://static.frontendmasters.com/assets/courses/2021-10-26-css-grid-flexbox-v2/thumb.webp", + name:"CSS Grid & Flexbox for Responsive Layouts, v2", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Learn the essential CSS layout techniques for building responsive, beautiful websites. You'll use CSS Grid and Flexbox along with responsive images to build out real-world web layouts!", + time:"5 hours, 49 minutes", + de:"The most essential tools to bring your designs to life are modern CSS layout tools such as Flexbox and CSS Grid." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", + name:"SVG Essentials & Animation, v2", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", + time:"4 hours, 12 minutes", + de:"Use CSS to layout and visually style web pages so you’re websites aren’t just functional, but they look nice as well!" + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-09-12-advanced-css-layouts/thumb.webp", + name:"Advanced CSS Layouts", + photo:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + title:"Jen Kramer", + com:"Freelance Instructor", + des:"Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. Combined with CSS Calc & Custom Properties, they revolutionize the way we lay out web pages with CSS!", + time:"3 hours, 46 minutes", + de:"The most essential tools to bring your designs to life are modern CSS layout tools such as Flexbox and CSS Grid." + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon7arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://th.bing.com/th/id/R.6b2018f5c6532f6c29806ef06ffb158d?rik=A1DOk4SIw4rtiw&riu=http%3a%2f%2f1000marcas.net%2fwp-content%2fuploads%2f2021%2f02%2fCSS-Logo.png&ehk=ON8ObCxBDE%2f%2fZS37%2fZkw9lFVSiR1xOwAcDkS%2bdFm6vc%3d&risl=&pid=ImgRaw&r=0", + title:"Learn CSS, from Laying Out Websites to Performant Animations", + desc:"CSS is rich in capabilities and is more than simply laying out pages! Replace costly JavaScript with CSS." + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon8.js b/scripts/icon8.js new file mode 100644 index 0000000..d3152aa --- /dev/null +++ b/scripts/icon8.js @@ -0,0 +1,68 @@ +var icon8arr = [ + { + img:"https://static.frontendmasters.com/assets/courses/2020-09-25-d3/thumb.webp", + name:"Introduction to D3.js", + photo:"https://static.frontendmasters.com/assets/teachers/wu/thumb@2x.webp", + title:"Shirley Wu", + com:"Data Sketches", + des:"Build cu charts with D3.js using data binding with the enter-update-exit pattern. You'll learn scales and to animate between different D3 layouts for building truly interactive charts.", + time:"5 hours, 59 minutes", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-09-11-d3-js-custom-charts/thumb.webp", + name:"Building Custom Data Visualizations", + photo:"https://static.frontendmasters.com/assets/teachers/wu/thumb@2x.webp", + title:"Shirley Wu", + com:"Data Sketches", + des:"Learn the visualization principles and process for building custom advanced data visualizations with D3.js and SVG with S,hirley Wu.", + time:"4 hours, 24 minutes ", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp", + name:"SVG Essentials & Animation, v2", + photo:"https://static.frontendmasters.com/assets/teachers/drasner/thumb@2x.webp", + title:"Sarah Drasner", + com: "Netlify", + des:"Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!", + time:"4 hours, 12 minutes CC", + de:"This custom data visualization course walks you through the entire process, from start to design to developing a visualization from scratch." + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon8arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://assets.website-files.com/57e53b27f0345c214ef43b64/5a245c9eb1a83e0001a5a066_D3-logo.png", + title:"Turn Data into Visualizations with D3.js", + desc:'everage your web development skills to make your web pages interact and visualize data with D3.js!' + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/icon9.js b/scripts/icon9.js new file mode 100644 index 0000000..8ba04fd --- /dev/null +++ b/scripts/icon9.js @@ -0,0 +1,69 @@ +var icon9arr =[ + { + img:"https://static.frontendmasters.com/assets/courses/2018-06-29-webpack-fundamentals/thumb.webp", + name:"Webpack 4 Fundamentals", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"Learn the core concepts of Webpack 4. Start from scratch by adding Webpack with npm and build up a pipeline with popular loaders from the Webpack ecosystem!", + time:"4 hours, 10 minute", + de:"This course walks you through everything you need to know to create custom build processes." + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-01-performance-webpack/thumb.webp", + name:"Web Performance with Webpack", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"Make websites load instantly using Webpack for lazy loading JavaScript with code splitting, removing unused code with tree shaking and prefetching assets", + time:" hours, 43 minutes ", + de:"This course walks you through everything you need to know to create custom build processes." + + }, + { + img:"https://static.frontendmasters.com/assets/courses/2018-07-02-webpack-plugins/thumb.webp", + name:"Webpack Plugins System", + photo:"https://static.frontendmasters.com/assets/teachers/larkin/thumb@2x.webp", + title:"Sean Larkin", + com:"Microsoft", + des:"earn the Webpack 4 plugin system, tour the Webpack source code and learn to build custom plugins and custom Webpack loaders.", + time:"1 hours, 34 minutes", + de:"This course walks you through everything you need to know to create custom build processes." + } +] + +// background: #181818; +let main=document.getElementById("main") +import {display} from "../components/display.js" +// console.log(navbar) +display(icon9arr,main) + +import { appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML=footer() + +const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); + +var progress1 =[ + { + img:"https://th.bing.com/th/id/OIP.xQCjgB2DVqhtqGoGw9E6TQHaHa?w=177&h=180&c=7&r=0&o=5&dpr=1.41&pid=1.7", + title:"Learn Webpack, the most popular and flexible build tool for JavaScript", + desc:"Webpack enables you to integrate your favorite tools and take control of how you deliver your JavaScript, CSS, and more!​" + } +] +let elective_bottom = document.querySelector(".elective-container "); + +appedData(progress1, elective_bottom); + +addEventToBox(); diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..2af3628 --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,95 @@ +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"); +slider_con.innerHTML = slider(); + +// get Data based on different Screen Size +let twitter_data = JSON.parse(localStorage.getItem("twitter_data")); +let mid_data = JSON.parse(localStorage.getItem("t_mid_data")); +let small_data = JSON.parse(localStorage.getItem("t_small_data")); +let screen_size = window.screen.width; +if (screen_size >= 1030) { + appendTwitterData(twitter_data); +} else if (screen_size >= 770 && screen_size <= 1029) { + appendTwitterData(mid_data); +} else if (screen_size <= 779) { + appendTwitterData(small_data); +} + +// Slider JS +let slides = [...document.querySelectorAll(".slide")]; +let i = 0; + +let mleft = 0; +const prevItem = () => { + if (i - 1 < 0) { + // i = slides.length; + for (let k = 0; k < slides.length - 1; k++) { + nextItem(); + } + return; + } + mleft = 0; + slides[i - 1].style.marginLeft = mleft + "px"; + i--; +}; + +const nextItem = () => { + if (i == slides.length - 1) { + for (let k = 0; k < slides.length - 1; k++) { + prevItem(); + } + return; + } + let size = window.screen.width; + if (size >= 1030 && size <= 1330) { + mleft = -873; + } else if (screen_size >= 770 && screen_size <= 1029) { + mleft = -581; + } else if (screen_size <= 779) { + mleft = -267; + } else { + mleft = -1176; + } + i++; + slides[i - 1].style.marginLeft = mleft + "px"; +}; + +let prev = document.getElementById("prev"); +let next = document.getElementById("next"); + +prev.addEventListener("click", prevItem); +next.addEventListener("click", nextItem); + +// 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 new file mode 100644 index 0000000..e467c07 --- /dev/null +++ b/scripts/joinnow.js @@ -0,0 +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(); + +// 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 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); + }); +}); + +let form = document.querySelector("#register"); + +const storeData = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.getElementById("email").value; + let fn = document.getElementById("first_name").value; + let ln = document.getElementById("last_name").value; + let password = document.getElementById("password").value; + let payment_type = document.getElementById("payment_option").value; + let card_number = document.getElementById("card_number").value; + let expiry = document.getElementById("expiry").value; + let cvc = document.getElementById("cvc").value; + + let detail = { + email, + fn, + ln, + password, + payment_type, + card_number, + expiry, + cvc, + }; + login_data.push(detail); + localStorage.setItem("login_data", JSON.stringify(login_data)); + document.getElementById("email").value = ""; + document.getElementById("first_name").value = ""; + document.getElementById("last_name").value = ""; + document.getElementById("password").value = ""; + document.getElementById("password_again").value = ""; + document.getElementById("card_number").value = ""; + document.getElementById("expiry").value = ""; + document.getElementById("cvc").value = ""; + window.location.href = "Login.html"; +}; +form.addEventListener("submit", storeData); diff --git a/scripts/learn-page.js b/scripts/learn-page.js new file mode 100644 index 0000000..51a8c9d --- /dev/null +++ b/scripts/learn-page.js @@ -0,0 +1,46 @@ +import { pathContainer, appedData, addEventToBox } from "../components/path.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML = footer(); + +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); +// Click Event on Hamburger Icon +// hamburgerClick(); + +// Path-Container Top Component +let map_svg = localStorage.getItem("map_svg"); +let topic_icon = localStorage.getItem("topic_icon"); +let path_conatiner = document.querySelector(".path-container"); +let elective_conatiner = document.querySelector(".elective-container"); +path_conatiner.innerHTML = pathContainer( + map_svg, + "Learning Paths", + "Guided paths to expand your abilities as a well-rounded engineer!" +); +elective_conatiner.innerHTML = pathContainer( + topic_icon, + "Topic Paths:", + "Focus on a specific area in web development." +); + +// Path-Container bottom Component +let learn_data = JSON.parse(localStorage.getItem("learn_data")); +let path_bottom = document.querySelector(".path-container > .p-bottom"); +let elective_bottom = document.querySelector(".elective-container > .p-bottom"); +let elective_data = JSON.parse(localStorage.getItem("elective_data")); + +appedData(learn_data, path_bottom); +appedData(elective_data, elective_bottom); + +// Add Event on every p_box +addEventToBox(); 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/more.js b/scripts/more.js new file mode 100644 index 0000000..981bc62 --- /dev/null +++ b/scripts/more.js @@ -0,0 +1,37 @@ +let arr=JSON.parse(localStorage.getItem("login_data")) || [] + +// document.querySelector("#terms").addEventListener("click",submitfun) + function submitfun(event){ + let Email= document.querySelector("#email").value + let firstname= document.querySelector("#first_name").value + let lastname= document.querySelector("#last_name").value + let password= document.querySelector("#password").value + let passagain= document.querySelector("#password_again").value + event.preventDefault(event) + // console.log("hello",Email) + + + if(password==passagain && password.length>=8 && Email !== "" && firstname !== "" && lastname!==""){ + // console.log(password,passagain) + obj={ + Email:Email, + firstname:firstname, + lastname:lastname, + password:password, + passagain:passagain + + } + arr.push(obj) + localStorage.setItem("login_data",JSON.stringify(arr)) + window.location.href="./bootcamp.html" + + } + else{ + alert("Fill Correct Details") + + + } + + // console.log(arr) + + } diff --git a/scripts/slides.js b/scripts/slides.js new file mode 100644 index 0000000..80c2424 --- /dev/null +++ b/scripts/slides.js @@ -0,0 +1,70 @@ +const appendTwitterData = (data) => { + let parent = document.querySelector(".slides"); + parent.innerHTML = null; + data.map((el) => { + let slide = document.createElement("div"); + slide.className = "slide"; + + let arr = el; + arr.map((item) => { + // Slider Box + let slider_box = document.createElement("div"); + slider_box.className = "slider-box"; + + //Top + let slider_box_top = document.createElement("div"); + slider_box_top.className = "slider-box-top"; + + let profile_img = document.createElement("div"); + profile_img.className = "profile-img"; + + let img = document.createElement("img"); + img.src = item.profile_pic; + profile_img.append(img); + + let user_div = document.createElement("div"); + user_div.className = "user"; + + let profile_name = document.createElement("p"); + profile_name.className = "profile-name"; + profile_name.innerText = item.name; + + let user_name = document.createElement("p"); + user_name.className = "user-name"; + user_name.innerText = item.user_name; + + user_div.append(profile_name, user_name); + + let icon_div = document.createElement("div"); + icon_div.className = "twit-icon"; + + icon_div.innerHTML = ``; + + //Mid + let slider_box_mid = document.createElement("div"); + slider_box_mid.className = "slider-box-mid"; + + let msg = document.createElement("p"); + msg.className = "msg"; + msg.innerText = item.msg; + + //Bottom + let slider_box_bottom = document.createElement("div"); + slider_box_bottom.className = "slider-box-bottom"; + + let time = document.createElement("p"); + time.className = "time"; + time.innerText = item.time; + + slider_box_top.append(profile_img, user_div, icon_div); + slider_box_mid.append(msg); + slider_box_bottom.append(time); + slider_box.append(slider_box_top, slider_box_mid, slider_box_bottom); + + slide.append(slider_box); + }); + parent.append(slide); + }); +}; + +export { appendTwitterData }; diff --git a/scripts/teacher-data.js b/scripts/teacher-data.js new file mode 100644 index 0000000..6ba41c1 --- /dev/null +++ b/scripts/teacher-data.js @@ -0,0 +1,99 @@ +let arr = [ + { + img:"https://static.frontendmasters.com/assets/teachers/moss/thumb@2x.webp", + name:"Scott Moss", + company:"Netflix" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp", + name:"Steve Kinney", + company:"Temporal" + }, + { + img: "https://static.frontendmasters.com/assets/teachers/theprimeagen/thumb@2x.webp", + name:"ThePrimeagen", + company:"Netflix" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/ruebbelke/thumb@2x.webp", + name:"Lukas Ruebbelke", + company:"Venmo" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/firtman/thumb@2x.webp", + name:"Maximiliano Firtman", + company:"Independent Consultant" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/khourshid/thumb@2x.webp", + name:"David Khourshid", + company:"Microsoft" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/kramer/thumb@2x.webp", + name:"Jen Kramer", + company:"Freelance Instructor" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/deslauriers/thumb@2x.webp", + name:"Matt DesLauriers", + company:"Freelancer" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/boag/thumb@2x.webp", + name:"Paul Boag", + company:"BoagWorld" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/verou/thumb@2x.webp", + name:"Lea Verou", + company:"MIT" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/kraman/thumb@2x.webp", + name:"Kadi Kraman", + company:"Formidable" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/holt/thumb@2x.webp", + name:"Brian Holt", + company:"Stripe" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/lengstorf/thumb@2x.webp", + name:"Jason Lengstorf", + company:"Netlify" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/zakharenko/thumb@2x.webp", + name:"Nina Zakharenko", + company:"Microsoft" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/hardaway/thumb@2x.webp", + name:" Jerome Hardaway", + company:"Vets Who Code" + }, + { + img:"https://static.frontendmasters.com/assets/teachers/sasidharan/thumb@2x.webp", + name:"Divya S", + company:"Netlify" + } + +] + +localStorage.setItem("teacher-data",JSON.stringify(arr)); +let data = JSON.parse(localStorage.getItem("teacher-data")); + +data.map(function(el){ + let img = document.createElement("img"); + let name = document.createElement("h3"); + let com = document.createElement("h5"); + img.src=el.img; + name.innerText=el.name; + com.innerText=el.company; + let div = document.createElement("div") + div.setAttribute("id","box") + div.append(name,com,img); + document.getElementById("container").append(div) +}) \ No newline at end of file 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/bootcamp.css b/styles/bootcamp.css new file mode 100644 index 0000000..636a661 --- /dev/null +++ b/styles/bootcamp.css @@ -0,0 +1,435 @@ +#bootcamp{ + height: 400px; + width: 100%; + background-color: teal; + display: flex; + align-items: center; + /* justify-content:center; */ + justify-content: space-evenly; + flex-wrap: wrap; + text-align: center; + background-image:url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); +} +.circle-progress { +-webkit-text-size-adjust: 100%; +tab-size: 4; +color: #e6e6e6; +font-family: Open Sans,sans-serif; +font-size: 0px; +line-height: 1.5; +box-sizing: border-box; +position: relative; +width: 300px; +margin-left: 25px; +margin-top: -25px; +/* background-image: #222; */ + +} +.icon-backpack { + position: absolute; + opacity: .6; + /* margin-left: -100px; */ + margin-left: -210px; + margin-top: 30px; +} +.header-progress-completed { +-webkit-text-size-adjust: 100%; +tab-size: 4; +color: #e6e6e6; +font-family: Open Sans,sans-serif; +font-size: 16px; +line-height: 1.5; +box-sizing: border-box; +background: #222; +border-radius: 50%; +height: 250px; +/* left: 9%; */ +width: 250px; +position: absolute; +opacity: 0.5; +/* position: absolute; */ +/* top: 9%; */ +transition-delay: 1s; +transition-duration: 1s; +transition-property: opacity; +margin-left: 50px; +/* width: 82%; */ +z-index: 2; +/* margin-left: -120px; */ +/* margin-top: -80px; */ +} +#head { + width: 40%; + /* margin-left: 100px; */ + text-align:left; + color: #e6e6e6; +} +#head h1 { + color: #fff; + margin-bottom: 15px; +} +#head p { + line-height: 25px; +} +#grid{ +width: 90%; +margin: auto; +padding-bottom: 15px; +border-bottom: 1px solid #e6e6e6;; +color: #e6e6e6; +text-align: center; +line-height: 45px; +margin-top: 50px; + +} #grid svg { +/* font-size: 100px; +*/ +height: 100px; +width: 100px; + +/* background-color: orange; */ +} +#grid h1 { +font-size: 46px; +} +#grid p { +font-size: 21px; +font-weight: 400; +} + + +#main { + /* display: flex; */ + margin-left: 20px; + width: 90%; + margin: auto; + margin-bottom: 50px; + /* justify-content: space-between; */ +} +#line { + height: 540px; + /* max-height: 500px; */ + width: 10px; + background: #3e3e3e; + margin-left: 20px; + margin-top: 25px; + position: absolute; + box-sizing: border-box; + margin-right: 20px; + /* line-height: 400px; */ +} +#plus2 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 65px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + /* text-align: center; */ + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + border-radius: 50%; + margin-bottom: 40px; +} +#box { + background: #3e3e3e; + /* display: flex; */ + /* background-color: black; */ + height: 100px; + /* max-height: 250px; */ + width: 95%; + margin: 25px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + /* color: #278cc7; */ + color: #e6e6e6; + padding: 20px 50px; + border-radius: 20px; + display: none; + margin-top: -50px; + /* max-height: 180px; + */ + /* height: ; */ + +} +#box h6 { + font-size: 20px; + margin-bottom: 7px; + color: #fff; +} +#box p { + line-height: 20px; +} +#main .plus1 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 0px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + /* margin-bottom: 370px; */ + +} + + +#main .plus1:hover { + background-color: grey; + + /* color: #222; */ +} + + #div { + display: flex; + background-color: black; + height: 430px; + width: 95%; + margin: 10px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + } + #main h3 { + color: #dd625e; + font-size: 30px; + } + #main h3:hover { + transition: color .2s; + + } + #img { + opacity: .5; + height: 430px; + } + #img1 { + border-radius: 50%; + height: 70px; + width: 70px; + } + #div1 { + padding: 25px 20px; + } + h4 { + color: #e6e6e6; + + } + #p { + color: #8a8a8a; + + } + #div2 { + margin-top: 15px; + text-align: left; + margin-bottom: 15px; + } + #div3 { + margin-top:12.5px ; + margin-left: 20px; + line-height: 25px; + font-size: 20px; + } + #p1 { + color: #e6e6e6; + line-height: 25px; + margin-bottom: 15px; + + } + #p2 { + color: #8a8a8a; + margin-bottom: 35px; + + + } +#main h3:hover { + color: #8a8a8a; + + } + #div5 { + display: flex; + } + #div4 { + /* background: wheat; */ + color: #222; + margin-left: 15px; + padding: 0 4px; + background-color: #8a8a8a; + height: 20px; + box-sizing: border-box; + border-radius: 10px; + padding: 1.5px 2.5px; + width: 30px; + + + } + #btn { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 200px; +font-weight: bold; +/* background: #c94f17; */ + + } + + + + + #btn:hover { + background-color: #8a8a8a; + } + #btn1:hover { + background-color: #8a8a8a; + } + #div:hover #img { + opacity: 1; + } +#bottom { + background: #3e3e3e; + height: 200px; + width: 100%; + + +} +#bottom > div { + color: #e6e6e6; + /* padding: 50px; */ + width: 50%; + margin: auto; + text-align: center; + justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + +} +#bottom > div > p { + margin-bottom: 15px; + font-size: 18px; +} +#bottom button { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 18px; +line-height: 1.25; +padding: 8px 10px; +text-align: center; +/* margin-right: 20px; */ +margin-left: 25px; +height: 45px; +width: 280px; +font-weight: bold; + +} +#bottom button:hover { + background: chocolate; +} + @media all and (max-width:768px) and (min-width:381px){ +#img { + position: absolute; + height: 500px; +} + #div1 { + position: relative; + margin-left: 100px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 500px; + +} +#main h3 { + font-size: 25px; +} +#box { + height: 140px; +} +#plus2 { + margin-top: -55px; + margin-left: 27px; +} +#line{ + height: 600px; +} +#p2 { + margin-bottom: 15px; +} +} +@media all and (min-width: 50px) and (max-width: 380px) { + + #img { + position: absolute; + height: 650px; + width: 100%; +} + + + #div1 { + position: relative; + margin-left: 20px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 650px; + + +} +#box { + height: 200px; + padding: 20px 25px; +} + +#plus2 { + margin-top: -55px; + margin-left: 15px; +} +#line{ + height: 800px; +} +#main h3 { + font-size: 25px; +} +#p2 { + margin-bottom: 15px; +} +#div6 { + flex-direction: column; + /* text-align: center; */ +} +#btn1 { + margin-top: 15px; + width: 200px; +} +.elective-container{ + width: 100%; + padding: 10px 0px; + padding-top: 90px; +} +#grid { + height: 550px; +} +} diff --git a/styles/courses.css b/styles/courses.css index 86415bc..6764527 100644 --- a/styles/courses.css +++ b/styles/courses.css @@ -1,33 +1,111 @@ *{ 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: 80%; + width: 85%; margin: auto; height: auto; /* border: 5px solid red; */ /* padding: 30px; */ - display: grid; + /* display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, 1fr); - grid-gap:80px; + grid-gap:80px; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + /* align-items: flex-start; */ + justify-content: space-between; + + + /* margin-top: 0px; */ } - .c { - width: 451px; - height: 377px; + .mainClass { + width: 49%; + height: 400px;; + /* min-height: 200px; */ position: relative; + margin-bottom: 25px; + /* display: flex; */ + /* display: flex; */ + /* flex-direction: row; */ + /* flex-wrap: wrap; */ + /* align-items: flex-start; */ + /* justify-content: flex-start; */ /* border: 5px solid red; */ /* background-color: aqua; */ } #outer { - width: 377.5px; - height: 360px; + /* width: 377.5px; */ + width: auto; + height: 85%; + /* margin: 10px; */ + /* min-height: auto; */ /* border: 5px solid yellow; */ opacity: 1; @@ -35,52 +113,58 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* min-height: 360px; */ + /* border: 1px solid red; */ + height:85%; position: absolute; - top:-.01px; + top: 0px;; left: 80px; - - + z-index: 5; background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); } .btnClass{ - height: 20px; - width: 87%; + height: 20%; + width:100%; /* border:solid 1px white; */ - padding: 15px; - margin-left: 0px; + padding: 35px; + /* margin-left: 0px; */ + margin-right: 50px; } .descriptionClass{ - height: 280px; + height: 70%; width: 100%; /* border:solid 1px white; */ } .description{ color: white; margin-left:20px; + margin-right:20px; font-size:14px; } .title{ color: #DD625E; margin-left: 20px; + margin-right: 20px; + margin-top:20px; } .instructorClass{ - height: 80px; + min-height: 80px; width: 100%; /* border:solid 1px red; */ } .descrClass{ - height: 100px; + min-height: 100px; width: 100%; /* border:solid 1px green; */ } .timeClass{ - height: 40px; + min-height: 40px; width: 100%; display: inline-block; @@ -105,7 +189,7 @@ .instructor_img{ - height: 78px; + min-height: 78px; width: 78px; border-radius: 100%; margin-left: 20px; @@ -118,7 +202,8 @@ .anchorClass{ display: flex; - flex-direction: row; + flex-direction: row; + margin-right: 20px; } .instructorName{ @@ -131,7 +216,7 @@ background-color:#C02D28; color: white; padding: 10px 20px; - /* height: 45px; */ + /* min-height: 45px; */ margin-left: 0px; border: none; border-radius:40px; @@ -157,8 +242,10 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; @@ -173,8 +260,10 @@ grid-template-columns: repeat(1 ,1fr); } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000..02e4487 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,121 @@ +#footer { + height: 300px; + width: 100%; + background-color: black; + padding: 35px; + box-sizing: border-box; +} +#footer #footer1 { + display: flex; + margin-left: 30px; +} +#footer #footer1 ul { + list-style-type: none; + float: left; + display: flex; + margin-top: 18px; + margin-left: 50px; +} +#footer #footer1 ul li { + width: auto; + margin-left: 25px; +} +#footer a { + text-decoration: none; + color: rgb(177, 165, 165); +} +#footer a:hover { + color: #eff; +} +#footer .logo { + 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; +} +#footer #footer2 img { + height: 72px; + width: 170px; +} +#footer #footer2 #apple { + 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 div:last-child a { + text-decoration: underline; + color: #c94f17; +} +#footer #footer3 i { + 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 (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; + } +} diff --git a/styles/home-page.css b/styles/home-page.css new file mode 100644 index 0000000..0fa80c6 --- /dev/null +++ b/styles/home-page.css @@ -0,0 +1,275 @@ +* { + 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; + } + .slide { + grid-template-columns: repeat(3, 265px); + } +} + +/* Tablet Screen */ +@media only screen and (min-width: 770px) and (max-width: 1029px) { + .slider { + max-width: 576px; + } + .slide { + grid-template-columns: repeat(2, 260px); + } +} + +/* Small Screen */ +@media only screen and (min-width: 0px) and (max-width: 779px) { + .s-top { + font-size: 20px; + color: #fff; + margin-bottom: 20px; + text-align: center; + } + .slider-container { + padding: 0; + } + .slider { + max-width: 280px; + } + .slide { + grid-template-columns: repeat(1, 230px); + } + + .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; + } + .slide { + grid-template-columns: repeat(3, 265px); + } + } + + /* Tablet Screen */ + @media only screen and (min-width: 770px) and (max-width: 1029px) { + .slider { + max-width: 576px; + } + .slide { + grid-template-columns: repeat(2, 260px); + } + } + + /* Small Screen */ + @media only screen and (min-width: 0px) and (max-width: 769px) { + .s-top { + font-size: 20px; + color: #fff; + margin-bottom: 20px; + text-align: center; + } + .slider-container { + padding: 0; + } + .slider { + max-width: 280px; + } + .slide { + grid-template-columns: repeat(1, 230px); + } + } +} diff --git a/styles/icon.css b/styles/icon.css new file mode 100644 index 0000000..40c6269 --- /dev/null +++ b/styles/icon.css @@ -0,0 +1,587 @@ +#grid { + width: 100%; + height: 450px; + align-items: center; + /* position: absolute; */ + display: flex; + justify-content: center; + box-sizing: border-box; + padding: 20px 0px; + background-image: url("https://img.freepik.com/free-photo/abstract-luxury-black-gradient-with-border-vignette-background-studio-backdrop-well-use-as-backdrop-background-studio-background-gradient-frame_1258-71732.jpg?w=900&t=st=1648721928~exp=1648722528~hmac=62a730aef1eb9e8d92fde0e28efabc134d6d26dc2823681e94c6f2450218a1b1"); +} + #grid + div{ + width: 90%; + margin: auto; + padding-bottom: 15px; + border-bottom: 1px solid #e6e6e6;; + color: #e6e6e6; + text-align: center; + line-height: 45px; + margin-top: 50px; + + } #grid + div svg { + /* font-size: 100px; + */ + height: 100px; + width: 100px; + + /* background-color: orange; */ + } + #grid + div h1 { + font-size: 46px; + } + #grid + div p { + font-size: 21px; + font-weight: 400; + } + +#main { + /* display: flex; */ + margin-left: 20px; + width: 90%; + margin: auto; + margin-bottom: 50px; + /* justify-content: space-between; */ +} +#line { + height: 540px; + /* max-height: 500px; */ + width: 10px; + background: #3e3e3e; + margin-left: 20px; + margin-top: 25px; + position: absolute; + box-sizing: border-box; + margin-right: 20px; + /* line-height: 400px; */ +} +#plus2 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 65px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + /* text-align: center; */ + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + border-radius: 50%; + margin-bottom: 40px; +} +#box { + background: #3e3e3e; + /* display: flex; */ + /* background-color: black; */ + height: 100px; + /* max-height: 250px; */ + width: 95%; + margin: 25px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + /* color: #278cc7; */ + color: #e6e6e6; + padding: 20px 50px; + border-radius: 20px; + display: none; + margin-top: -50px; + /* max-height: 180px; + */ + /* height: ; */ + +} +#box h6 { + font-size: 20px; + margin-bottom: 7px; + color: #fff; +} +#box p { + line-height: 20px; +} +#main .plus1 { + position: relative; + background: #3e3e3e; + height: 50px; + width: 50px; + margin-left: 0px; + font-size: 35px; + /* padding: 5px; */ + color:#fff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; + /* margin-bottom: 370px; */ + +} + + +#main .plus1:hover { + background-color: grey; + + /* color: #222; */ +} + + #div { + display: flex; + background-color: black; + height: 400px; + width: 95%; + margin: 10px auto ; + /* padding: 20px 0px; */ + box-sizing: border-box; + margin-left: 60px; + } + #main h3 { + color: #dd625e; + font-size: 30px; + } + #main h3:hover { + transition: color .2s; + + } + #img { + opacity: .5; + height: 400px; + } + #img1 { + border-radius: 50%; + height: 70px; + width: 70px; + } + #div1 { + padding: 25px 20px; + } + h4 { + color: #e6e6e6; + + } + #p { + color: #8a8a8a; + + } + #div2 { + margin-top: 15px; + text-align: left; + margin-bottom: 15px; + } + #div3 { + margin-top:12.5px ; + margin-left: 20px; + line-height: 25px; + font-size: 20px; + } + #p1 { + color: #e6e6e6; + line-height: 25px; + margin-bottom: 15px; + + } + #p2 { + color: #8a8a8a; + margin-bottom: 35px; + + + } +#main h3:hover { + color: #8a8a8a; + + } + #div5 { + display: flex; + } + #div4 { + /* background: wheat; */ + color: #222; + margin-left: 5px; + padding: 0 4px; + + + } + #btn { + background: #c94f17; +border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 200px; +font-weight: bold; +/* background: #c94f17; */ + + } + #btn1 { + background-color: #c02d28; + border: none; +border-radius: 40px; +color: #fff; +display: block; +font-size: 15px; +line-height: 1.25; +padding: 10px 10px; +text-align: center; +margin-right: 20px; +height: 40px; +width: 170px; +font-weight: bold; + } + + + + #btn:hover { + background-color: #8a8a8a; + } + #btn1:hover { + background-color: #8a8a8a; + } + #div:hover #img { + opacity: 1; + } + + @media all and (max-width:768px) and (min-width:381px){ +#img { + position: absolute; +} + #div1 { + position: relative; + margin-left: 100px; + background-color: #000000d0; +} +#div { + background-color: transparent; + +} +#main h3 { + font-size: 25px; +} +#box { + height: 140px; +} +#plus2 { + margin-top: -55px; + margin-left: 27px; +} +#line{ + height: 600px; +} +#p2 { + margin-bottom: 15px; +} +} +@media all and (min-width: 50px) and (max-width: 380px) { + + #img { + position: absolute; + height: 550px; + width: 100%; +} + + + #div1 { + position: relative; + margin-left: 20px; + background-color: #000000d0; +} +#div { + background-color: transparent; + height: 550px; + + +} +#box { + height: 200px; + padding: 20px 25px; +} + +#plus2 { + margin-top: -55px; + margin-left: 15px; +} +#line{ + height: 800px; +} +#main h3 { + font-size: 25px; +} +#p2 { + margin-bottom: 15px; +} +#div6 { + flex-direction: column; + /* text-align: center; */ +} +#btn1 { + margin-top: 15px; + width: 200px; +} +.elective-container{ + width: 100%; + padding: 10px 0px; + padding-top: 90px; +} +#grid { + height: 550px; +} +} + + + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; + } + + .elective-container { + width: 70%; + padding-top: 40px; + /* background-color: #222222; */ + position: relative; + text-align: center; + } + .elective-container { + padding-bottom: 10px; + } + .elective-container button { + display: none; + } + + + + + + + .circular { + height: 200px; + width: 200px; + position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + } + .circular .inner, + .circular .outer, + .circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .inner { + height: 164px; + width: 164px; + background-color: #222222; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + } + .circular .circle { + z-index: 1; + box-shadow: none; + } + .circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: red; + display: flex; + align-items: center; + justify-content: center; + } + .circular .numb.orange { + color: #c63528; + } + .circular .numb p { + font-size: 70px; + color: #fff; + } + .circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; + } + .circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; + } + + .circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 220px, 220px, 100px); + } + .circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 200px, 0px); + } + .circle .bar .progress { + background: #4158d0; + } + .circle .bar .progress { + background: #c63528; + } + .circle .bar .progress.js { + background: #b3911c; + } + .circle .bar .progress.css { + background: #278cc7; + } + .circle .bar .progress.node { + background: #00873a; + } + .circle .bar .progress.react { + background: #008697; + } + .circle .bar .progress.vue { + background: #00bb83; + } + + .circle .bar .progress.angular { + background: #ff002f; + } + .circle .left .progress { + z-index: 1; + animation: left 1s linear both; + } + @keyframes left { + 100% { + transform: rotate(180deg); + } + } + .circle .right { + z-index: 3; + transform: rotate(180deg); + } + .circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ + } + @keyframes right { + 100% { + transform: rotate(180deg); + } + } + + .circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; + display: none; + } + .circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; + } + .circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; + } + + @keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + .circle .reverse .progress { + animation: rightRreverse 1s linear both; + } + @keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } + } + @keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + @keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } + } + + .desc { + padding: 0 10px; + color: #fff; + /* height: 157px; */ + line-height: 22px; + } + .desc .title { + font-size: 27px; + margin-bottom: 15px; + } + .title { + font-size: 35px; + line-height: 28px; + } + .desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; + } + + + \ No newline at end of file diff --git a/styles/learn-page.css b/styles/learn-page.css new file mode 100644 index 0000000..9d3491f --- /dev/null +++ b/styles/learn-page.css @@ -0,0 +1,304 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; +} +.path-container, +.elective-container { + width: 100%; + padding-top: 40px; + background-color: #222222; +} +.elective-container { + padding-bottom: 40px; +} + +.p-top, +.p-bottom { + max-width: 950px; + margin: auto; +} + +.p-top { + text-align: center; + color: #fff; +} +.p-top svg { + width: 130px; +} +.p-top h1 { + margin-bottom: 15px; +} +.p-top h2 { + font-size: 16px; + font-weight: 400; +} + +.p-bottom { + display: flex; + gap: 20px; + flex-wrap: wrap; + margin-top: 20px; + border-top: 1px solid #ffffff69; + padding-top: 20px; + justify-content: center; +} +.p-bottom .p-box { + max-width: 303px; + background-color: #383838; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, + rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + padding: 20px; + text-align: center; +} + +.circular { + height: 200px; + width: 200px; + position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; +} +.circular .inner, +.circular .outer, +.circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .inner { + height: 164px; + width: 164px; + background-color: #222222; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .circle { + z-index: 1; + box-shadow: none; +} +.circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: #4158d0; + display: flex; + align-items: center; + justify-content: center; +} +.circular .numb.orange { + color: #c63528; +} +.circular .numb p { + font-size: 70px; + color: #fff; +} +.circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; +} +.circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; +} + +.circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 220px, 220px, 100px); +} +.circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 200px, 0px); +} +.circle .bar .progress { + background: #4158d0; +} +.circle .bar .progress { + background: #c63528; +} +.circle .bar .progress.js { + background: #b3911c; +} +.circle .bar .progress.css { + background: #278cc7; +} +.circle .bar .progress.node { + background: #00873a; +} +.circle .bar .progress.react { + background: #008697; +} +.circle .bar .progress.vue { + background: #00bb83; +} + +.circle .bar .progress.angular { + background: #ff002f; +} +.circle .left .progress { + z-index: 1; + animation: left 1s linear both; +} +@keyframes left { + 100% { + transform: rotate(180deg); + } +} +.circle .right { + z-index: 3; + transform: rotate(180deg); +} +.circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ +} +@keyframes right { + 100% { + transform: rotate(180deg); + } +} + +.circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; + display: none; +} +.circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; +} +.circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; +} + +@keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +.circle .reverse .progress { + animation: rightRreverse 1s linear both; +} +@keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +@keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} +@keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} + +.desc { + padding: 0 10px; + color: #fff; + height: 157px; + line-height: 25px; +} +.desc .title { + font-size: 27px; + margin-bottom: 20px; +} + +.desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; +} + +.p-box button { + margin: 0 auto; + min-width: 175px; + font-size: 14px; + padding: 10px 20px; + border-radius: 20px; + border: none; + color: #fff; + cursor: pointer; +} +.p-box button.orange { + background-color: #c63528; +} +.p-box button.js { + background-color: #b3911c; +} +.p-box button.css { + background-color: #278cc7; +} +.p-box button.node { + background-color: #00873a; +} +.p-box button.react { + background-color: #008697; +} +.p-box button.vue { + background-color: #00bb83; +} +.p-box button.angular { + background-color: #ff002f; +} 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 new file mode 100644 index 0000000..efa47ea --- /dev/null +++ b/styles/main.css @@ -0,0 +1,242 @@ +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; */ +} +#banner video { + 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; + margin: 0 auto; + text-align: center; +} +#banner #contents h1 { + 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; + + color: #fff; + display: block; + font-size: 20px; + line-height: 1.25; + padding: 10px 20px; + text-align: center; + margin-right: 20px; + height: 60px; + width: 250px; + font-weight: bold; +} +#banner a { + text-decoration: none; +} +#banner #contents div { + display: flex; + margin-left: 25px; +} +#icons { + display: flex; + margin: auto; + width: 70%; + margin-top: 30px; + margin-bottom: 30px; + justify-content: space-between; + flex-wrap: wrap; +} +#icons img { + height: 90px; + width: 90px; + 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); + /* box-sizing: border-box; */ +} +#slidebar { + background: #3a7bd5; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + width: 100%; + height: 600px; + margin-top: 10px; +} +#join { + height: 700px; + width: 100%; + box-sizing: border-box; + background-image: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), + url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); + background-size: cover; + position: absolute; + overflow: hidden; + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; + text-align: center; +} +#join div div a { + text-decoration: none; + cursor: pointer; +} +#join div { + position: relative; + z-index: 1; + text-align: center; + margin: auto; + width: 40%; +} +#join h1 { + font-size: 35px; + line-height: 50px; +} +#join button:hover { + background-color: chocolate; + 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 img { + height: auto; + width: 240px; + margin-top: 30px; +} +#bootcamp a { + color: #dd625e; + /* margin-top: 15px; */ +} +#bootcamp a:hover { + color: chocolate; +} +#bootcamp p { + 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 { + 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; + } + #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; +} diff --git a/styles/nav.css b/styles/nav.css new file mode 100644 index 0000000..35bfc5f --- /dev/null +++ b/styles/nav.css @@ -0,0 +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; +} +.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 { + padding: 14px; + max-width: 592px; + } + .header-wrap .right ul { + flex-wrap: wrap; + } + .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: 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; + } + .mobile ul li.logout:last-child { + background-color: transparent; + text-align: left; + } + .mobile ul li.logout:last-child a#logout { + color: #aaaaaa; + line-height: 0; + padding: 0; + } + .mobile ul li.logout:last-child:hover a#logout { + color: #fff; + background-color: transparent; + } + .menu { + display: flex; + } + .menu .icon { + font-size: 32px; + } +} diff --git a/teacher.html b/teacher.html new file mode 100644 index 0000000..4db1c87 --- /dev/null +++ b/teacher.html @@ -0,0 +1,121 @@ + + + + + + + Document + + + + + +
+

Frontend Masters Teachers

+
+ +
+
+ + + + + +