diff --git a/app/app.js b/app/app.js new file mode 100644 index 0000000..a283bc9 --- /dev/null +++ b/app/app.js @@ -0,0 +1,23 @@ +(function() { + const courses = document.getElementsByClassName('courses')[0]; + + courses.addEventListener('mouseover', () => { + const dropdown = document.getElementsByClassName('moreCourses')[0]; + dropdown.style.display = 'block'; + }); + + document.getElementsByClassName('courses')[0].addEventListener('mouseover', () => { + const dropdown = document.getElementsByClassName('moreCourses')[0]; + dropdown.style.display = 'block'; + }); + + document.getElementsByClassName('moreCourses')[0].addEventListener('mouseover', () => { + const dropdown = document.getElementsByClassName('moreCourses')[0]; + dropdown.style.display = 'block'; + }); + + document.getElementsByClassName('moreCourses')[0].addEventListener('mouseout', () => { + const dropdown = document.getElementsByClassName('moreCourses')[0]; + dropdown.style.display = 'none'; + }); +})(); \ No newline at end of file diff --git a/app/img/background.jpg b/app/img/background.jpg new file mode 100644 index 0000000..cd1b968 Binary files /dev/null and b/app/img/background.jpg differ diff --git a/app/img/favicon.ico b/app/img/favicon.ico new file mode 100644 index 0000000..6876106 Binary files /dev/null and b/app/img/favicon.ico differ diff --git a/app/img/lambdawhite.png b/app/img/lambdawhite.png new file mode 100644 index 0000000..98f9a2e Binary files /dev/null and b/app/img/lambdawhite.png differ diff --git a/app/index.html b/app/index.html new file mode 100644 index 0000000..f4c2adc --- /dev/null +++ b/app/index.html @@ -0,0 +1,79 @@ + + + + + Lambda School + + + + + +
+
+ + +
+
+ VIEW ALL COURSES +

+ +
+ +
+
+

The Computer Science +
+ Education +
+ of the Future +

+
+

Immersive preparation for the world's most in-demand careers, +
+ for as little as $0 until you're hired +

+
+ VIEW COURSES + APPLY NOW +
+
+

A New Model for Higher Education

+

Lambda School invests in a small number of ambitious individuals + by training them for the world's most in-demand careers.

+ In exchange, Lambda School graduates pay back a small percentage + of their salary after they are hired.

+ +
+
Selection
+

Our unique application and interview process is designed + to identify those with great aptitude for a technical + career, regardless
of their background.

+
+
+
Training
+

Once students are selected, a small class undergoes live, + intensive online training designed to meet the rigorous + demands of our hiring partners.

+
+ + + + \ No newline at end of file diff --git a/app/styles.css b/app/styles.css new file mode 100644 index 0000000..19a97d1 --- /dev/null +++ b/app/styles.css @@ -0,0 +1,201 @@ +html, body { + margin: 0; + height: 100%; + width: 100%; + font-family: 'Montserrat', sans-serif; +} + +.navbar { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.logopng { + height: 25.47px; + width: 100px; +} + +.ls-logo { + float: left; + margin-left: 20px; + margin-right:50px; + margin-top: 20px; +} + +ul { + list-style-type: none; + color: white; + font-size: 12.5px; + margin: 0; + padding: 0; + overflow: hidden; +} + +li.navbarlinks { + float: left; + margin-top: 10px; + margin-bottom: 12px; +} + +div.background-image-container { + background: + linear-gradient( + rgba(66,143,187, 0.7), + rgba(66,143,187, 0.7) + ), + url('img/background.jpg'); + background-size: cover; + height: 860px; +} + + +.moreCourses { + display: none; + position: absolute; + z-index: 2; + background-color: #232323; + width: 390px; + margin-left: 23%; + padding-top: 15px; + padding-left: 15px; +} + +.moreCoursesLinksMain { + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + font-size: 12px; +} + +.moreCoursesLinksMain:hover { + color: rgba(255, 255, 255, 1); + margin-left: 10px; +} + +.moreCoursesLinks { + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + text-align: left; + padding: 10px; +} + +.moreCoursesLinks:hover { + color: rgba(255, 255, 255, 1); + margin-left: 10px; +} + +.coursesListName { + font-size: 10px; + margin: 5px; +} + +.courses:hover .moreCourses { + display: block; +} + +.header1 { + margin-top: 250px; + position: relative; +} + +h1 { + color: #fff; + font-size: 65px; + text-align: center; +} + +.subheader { + color: white; + text-align: center; + font-size: 25px; +} + +.btn1 { + border: 1px solid #fff; + color: white; + font-size: 10px; + width: 190px; + text-align: center; + text-decoration: none; + padding: 19px 60px; + margin-right: 20px; +} + +.btn2 { + background-color: white;; + color: rgb(66,143,187); + font-size: 10px; + width: 190px; + text-align: center; + text-decoration: none; + padding: 20px 65px; +} + +.buttons { + margin-top: 40px; + margin-left: 32%; +} + +.newModel { + text-align: center; + margin-top: 100px; + font-size: 35px; +} + +.newModelP { + text-align: left; + font-size: 25px; + margin-left: 300px; + margin-right: 250px; + color: #767676; + margin-bottom: 100px; + font-family: 'Lora', serif; +} + +.h5container { + width: 300px; + float: left; + margin-left: 27%; + margin-right: 20px; + margin-bottom: 100px; +} + +.h5container2 { + width: 350px; + float: left; + margin-bottom: 100px; +} + +h5 { + font-size: 16px; +} + +.selectionP { + font-size: 25px; + color: #767676; + text-align: left; + font-family: 'Lora', serif; +} + +.trainingP { + font-size: 25px; + color: #767676; + text-align: left; + margin-right: 100px; + font-family: 'Lora', serif; +} + +li { + color: rgba(255, 255, 255, 0.6); + margin: 0; +} + +li a { + display: block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +li a:hover { + color: rgba(255, 255, 255, 0.6); +} \ No newline at end of file