diff --git a/Screenshot (675).png b/Screenshot (675).png new file mode 100644 index 0000000..8c714ae Binary files /dev/null and b/Screenshot (675).png differ diff --git a/newmore.html b/newmore.html new file mode 100644 index 0000000..a560c76 --- /dev/null +++ b/newmore.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + Document + + + + + +
+ +

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

+

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

+ + + + +
+ +
+ +
+

What is the Bootcamp, and how does it work?

+

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

+
+
+
+
+ +
+

Why Frontend Masters?

+

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

+ +
+
+
+
+
Bootcamp Curriculum
+
+ +

1 hours, 47 minutes

+

4 hours, 11 minutes

+

2 hours, 4 minutes

+

0 hours, 54 minutes

+

0 hours, 48 minutes

+

5 hours, 23 minutes

+

1 hours, 13 minutes

+

3 hours, 2 minutes

+

2 hours, 14 minutes

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

Ready to join the
Bootcamp?

+

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

+
+ +
+
+ +

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

+ +
+
+

First Name

+ +
+
+

Last Name

+ +
+
+

Password

+ +

Password Again

+ + + + + +
+
+ + +
+

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

+
+
+
+
FAQ
+
+
Q:This is completely free? What's the catch?
+
A: This is completely free - and we believe by educating more people about web development, we get a better web - with more voices empowered to share their ideas, apps and perspectives. So the catch is we hope you build something awesome. Oh, and if you'd like to become a customer in the future to take more advanced courses and take your career to the next level, that would be cool too. 😀
+
Q:How long will will this Bootcamp be available?
+
Q:What will this Bootcamp teach me?
+
Q:Where can I go after completing the Bootcamp?
+ +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/styles/more.css b/styles/more.css new file mode 100644 index 0000000..35c13b5 --- /dev/null +++ b/styles/more.css @@ -0,0 +1,737 @@ + + + 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; + padding-bottom: 10px; + + } + 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: 300px; + margin-top: 500px; + /* margin-bottom: 50px; */ + /* 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: 140px 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/workspace.code-workspace b/workspace.code-workspace new file mode 100644 index 0000000..e780470 --- /dev/null +++ b/workspace.code-workspace @@ -0,0 +1,9 @@ +{ + "folders": [ + { + "name": "Frontend-Master", + "path": "." + } + ], + "settings": {} +} \ No newline at end of file