Created
January 24, 2020 18:36
-
-
Save cblastor/3f1c75dcefb523b6672dc65d1dc44813 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="reset.css"> | |
| <link href="styles.css" type="text/css" rel="stylesheet"> | |
| <title>Carlos Academy</title> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo-title"> | |
| <img src="capstone_colmar_assets\images\ic-logo.svg" height="50px"> | |
| <h4 class="colmar">CARLOS</h4> | |
| <h4 class="academy">ACADEMY</h4> | |
| </div> | |
| <nav> | |
| <h2><a href=#>On campus</h2></a> | |
| <h2><a href=#>Online</a></h2> | |
| <h2><a href=#>For companies<a></h2> | |
| <h2><a href=#>Sign in</a></h2> | |
| </nav> | |
| </header> | |
| <header> | |
| <div class="mobile"> | |
| <img src="capstone_colmar_assets\images\ic-logo.svg" height="50px"> | |
| <img src="capstone_colmar_assets\images\ic-on-campus.svg" height="50px"> | |
| <img src="capstone_colmar_assets\images\ic-online.svg" height="50px"> | |
| <img src="capstone_colmar_assets\images\ic-login.svg" height="50px"> | |
| </div> | |
| </header> | |
| <section class="banner"> | |
| <img src="capstone_colmar_assets\images\banner.jpg" > | |
| <div class="content"> | |
| <h1>Learn something new everyday</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adisciping elit.</p> | |
| <a href=#><h2 class="button">Start here</h2></a> | |
| </div> | |
| </section> | |
| <section class="information"> | |
| <div class="left-pannel desktop"> | |
| <img src="capstone_colmar_assets\images\information-main.jpg"> | |
| <h1>It doesn't hurt to keep practicing</h1> | |
| <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, conubia blandit lectus nisi maecenas felis, tincidunt ullamcorper metus nunc posuere auctor. Libero nam laoreet sodales tortor massa molestie interdum vestibulum, quam inceptos in class fusce tellus maecenas conubia nulla, curabitur ante magna suscipit nibh cras hendrerit. | |
| </p> | |
| <p id="quote">Emanuel, Sr. Strategist at Hiring.com</p> | |
| </div> | |
| <div class="pannel"> | |
| <div class="info"><a href="#"></a> | |
| <img class="desktop" src="capstone_colmar_assets\images\information-orientation.jpg"> | |
| <img class="mobile" src="capstone_colmar_assets\images\information-orientation-mobile.jpg"> | |
| <div class="info-pannel"> | |
| <h3>Orientation date</h3> | |
| <p>Tue 10/11 & Wed 10/12: 8am-3pm</p> | |
| <a href=#>Read more</a> | |
| </div> | |
| </div> | |
| <div class="info"> | |
| <img class="desktop" src="capstone_colmar_assets\images\information-campus.jpg"> | |
| <img class="mobile" src="capstone_colmar_assets\images\information-campus-mobile.jpg"> | |
| <div class="info-pannel"> | |
| <h3>Our campus</h3> | |
| <p>Find wich campus is close by you</p> | |
| <a href=#>Read more</a> | |
| </div> | |
| </div> | |
| <div class="info"> | |
| <img class="desktop" src="capstone_colmar_assets\images\information-guest-lecture.jpg"> | |
| <img class="mobile" src="capstone_colmar_assets\images\information-guest-lecture-mobile.jpg"> | |
| <div class="info-pannel"> | |
| <h3>Our guest lecture</h3> | |
| <p>Join a keynote with Oliver Sack about music in medical treatment</p> | |
| <a href=#>Read more</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="learning"> | |
| <h1>Start learning</h1> | |
| <div class="courses "> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-software.jpg"> | |
| <h3>Software Engineering</h3> | |
| <p>COURSES</p> | |
| <P id="course">Web Development, Mobile Development, iOT, APIs</P> | |
| </div></a> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-computer-art.jpg"> | |
| <h3>Computer Art</h3> | |
| <p>COURSES</p> | |
| <P id="course">Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</P> | |
| </div></a> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-design.jpg"> | |
| <h3>Desing</h3> | |
| <p>COURSES</p> | |
| <P id="course">User Experience Design, User Research, Visual Design</P> | |
| </div></a> | |
| </div> | |
| <div class="courses "> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-data.jpg"> | |
| <h3>Data</h3> | |
| <p>COURSES</p> | |
| <P id="course">Data Science, Big Data, SQL, Data Visualizatio</P> | |
| </div></a> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-business.jpg"> | |
| <h3>Business</h3> | |
| <p>COURSES</p> | |
| <P id="course">Product Development, Business Development, Startup</P> | |
| </div></a> | |
| <div class="course desktop"><a href="#"> | |
| <img src="capstone_colmar_assets\images\course-marketing.jpg"> | |
| <h3>Marketing</h3> | |
| <p>COURSES</p> | |
| <P id="course">Analitics, Content Marketing, Mobile Marketing</P> | |
| </div></a> | |
| </div> | |
| </section> | |
| <section class="exhibit"> | |
| <h1>Thesis Exhibit</h1> | |
| <div class="container"> | |
| <div class="left-pannel"> | |
| <video src="capstone_colmar_assets\videos\thesis.mp4" controls></video> | |
| <h3 class="desktop">Reimagine Urban</h3> | |
| <p class="desktop">Lorem ipsum dolor sit amet consectetur adipiscing elit, conubia blandit lectus nisi maecenas felis, tincidunt ullamcorper metus nunc posuere auctor. Libero nam laoreet sodales tortor massa molestie interdum vestibulum, quam inceptos in class fusce tellus maecenas conubia nulla, curabitur ante magna suscipit nibh cras hendrerit. | |
| </p> | |
| </div> | |
| <div class="pannel desktop"> | |
| <div class="info"><a href="#"><img class="desktop" src="capstone_colmar_assets\images\thesis-fisma.jpg"> | |
| <div class="info-pannel"> | |
| <h3>Fisma: Design and Prototype</h3> | |
| <p>Designer showcase of new prototype product </p> | |
| </div></a> | |
| </div> | |
| <div class="info"><a href="#"><img class="desktop" src="capstone_colmar_assets\images\thesis-now-and-then.jpg"> | |
| <div class="info-pannel"> | |
| <h3>Now and then</h3> | |
| <p>Research study about New York</p> | |
| </div></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div>©2020 Carlos Academy. All rights reserved</div> | |
| <div> | |
| <span> | |
| <a href="#">Terms</a> | |
| </span> | |
| <span> | |
| <a href="#">Privacy</a> | |
| </span> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html{ | |
| background-color: rgb(234, 241, 239); | |
| } | |
| body{ | |
| color: #444444; | |
| font-family: Arial, Helvetica, sans-serif; | |
| margin: 0; | |
| } | |
| header{ | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .logo-title{ | |
| display: inline-flex; | |
| margin: 0 24px; | |
| align-items: center; | |
| } | |
| .colmar{ | |
| font-size: 32px; | |
| color: #222222; | |
| margin: 16px 0; | |
| } | |
| .academy{ | |
| font-size: 32px; | |
| color: #666666; | |
| font-weight: 300; | |
| margin: 16px 0; | |
| } | |
| nav{ | |
| display: inline-flex; | |
| margin: 0 24px; | |
| font-weight: 200; | |
| } | |
| nav h2{ | |
| margin: auto 8px; | |
| font-weight: 200; | |
| font-size: 1.5rem; | |
| } | |
| header .mobile{ | |
| display: none; | |
| } | |
| @media only screen and (max-width: 660px) { | |
| header .logo-title{ | |
| display: none; | |
| } | |
| header img{ | |
| margin: 6px 24px; | |
| } | |
| header nav{ | |
| display: none; | |
| } | |
| header .mobile{ | |
| display: inline-flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| } | |
| } | |
| .banner{ | |
| background-color: lightgray; | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .banner img{ | |
| max-width: 60%; | |
| margin: 32px 24px; | |
| } | |
| .banner .content{ | |
| display: inline-flex; | |
| flex-direction: column; | |
| width: 25%; | |
| margin: 24px 0; | |
| } | |
| h1{ | |
| font-size: 3rem; | |
| margin: 0 0 24px 0; | |
| font-weight: 700; | |
| } | |
| p{ | |
| font-size: 1.5rem; | |
| margin: 0 0 24px 0; | |
| font-weight: 400; | |
| } | |
| .button { | |
| color: white; | |
| background: #444444; | |
| padding: 8px; | |
| margin-bottom: 40px; | |
| text-align: center; | |
| font-weight: 400; | |
| margin-bottom: 32px; | |
| font-size: 1.5rem; | |
| } | |
| .button:hover{ | |
| background-color: gray; | |
| } | |
| @media only screen and (max-width: 660px) { | |
| .banner{ | |
| flex-direction: column; | |
| } | |
| .banner img{ | |
| max-width: 100%; | |
| margin: 0 0 32px 0; | |
| } | |
| .banner .content{ | |
| width: 90%; | |
| } | |
| } | |
| /* information */ | |
| .left-pannel{ | |
| width: 60%; | |
| display: inline-block; | |
| margin: 0 24px 0 24px; | |
| text-align: justify; | |
| } | |
| .left-pannel img{ | |
| margin: 32px 0 32px 0; | |
| width: 100%; | |
| display: block; | |
| } | |
| .desktop #quote{ | |
| font-size: 1rem; | |
| font-weight: 700; | |
| margin: 32px 24px; | |
| } | |
| .information{ | |
| display: flex; | |
| } | |
| .pannel{ | |
| width: 37%; | |
| margin: 16px 0; | |
| display: inline-flex; | |
| flex-direction: column; | |
| border: solid 1px #cac6c6; | |
| border-bottom: none; | |
| } | |
| h3{ | |
| font-size: 2rem; | |
| font-weight: 500; | |
| } | |
| .pannel p{ | |
| margin: 8px 0; | |
| } | |
| .info { | |
| display: flex; | |
| border-bottom: solid 1px #cac6c6; | |
| width: 100%; | |
| align-items: center; | |
| } | |
| .info img{ | |
| width: 35%; | |
| margin: 16px; | |
| display: inline; | |
| } | |
| .info-pannel{ | |
| width: 55%; | |
| display: inline-block; | |
| } | |
| .info-pannel a{ | |
| color: rgb(0, 93, 243); | |
| font-weight: 700; | |
| } | |
| .info-pannel p{ | |
| margin: 8px 0; | |
| } | |
| .info .mobile{ | |
| display: none; | |
| } | |
| @media only screen and (max-width: 660px) { | |
| .desktop{ | |
| display: none; | |
| } | |
| .info .desktop{ | |
| display: none; | |
| } | |
| .pannel{ | |
| width: 100%; | |
| margin: 0; | |
| border: none; | |
| } | |
| .info .mobile{ | |
| display: block; | |
| } | |
| .info{ | |
| flex-direction: column; | |
| max-width: 95%; | |
| align-items: flex-start; | |
| border: none; | |
| margin: 0; | |
| } | |
| .info img{ | |
| width: 100%; | |
| } | |
| .info-pannel{ | |
| margin-left: 32px; | |
| width: 100%; | |
| } | |
| } | |
| .learning{ | |
| background-color: lightgrey; | |
| text-align: center; | |
| padding: 32px 0 32px 0; | |
| } | |
| .learning h1{ | |
| margin-bottom: 16px; | |
| } | |
| .courses{ | |
| display: flex; | |
| margin: 0 56px; | |
| } | |
| .course { | |
| display: inline; | |
| margin: 16px ; | |
| background-color: white; | |
| text-align: left; | |
| width: 33.33%; | |
| } | |
| .course img { | |
| max-width: 100%; | |
| } | |
| .course h3{ | |
| margin: 16px 16px 0 16px; | |
| } | |
| .course p{ | |
| margin: 8px 16px; | |
| color: grey; | |
| } | |
| #course{ | |
| margin-bottom: 24px; | |
| } | |
| @media only screen and (max-width: 660px) { | |
| .courses img, .courses p{ | |
| display: none; | |
| } | |
| .courses h3{ | |
| background-color: lightgrey; | |
| padding: 16px 16px 24px 16px; | |
| margin: 0 16px; | |
| } | |
| .courses{ | |
| display: inline; | |
| margin: 0; | |
| } | |
| .learning{ | |
| background-color: rgb(234, 241, 239); | |
| text-align: center; | |
| padding: 32px 0 32px 0; | |
| max-width: 100%; | |
| margin: 0; | |
| } | |
| .course{ | |
| margin: 4px; | |
| } | |
| } | |
| video{ | |
| max-width: 100%; | |
| margin: 8px 0 24px 0; | |
| } | |
| .container{ | |
| display: flex; | |
| } | |
| .exhibit{ | |
| text-align: center; | |
| padding: 32px 0 16px 0; | |
| border-bottom: 1px solid #cac6c6; | |
| background-color: rgb(234, 241, 239); | |
| } | |
| .container{ | |
| text-align: justify; | |
| } | |
| .exhibit .container .pannel{ | |
| width: 37%; | |
| margin: 0; | |
| display: inline-flex; | |
| flex-direction: column; | |
| border: none; | |
| text-align: left; | |
| } | |
| .exhibit p{ | |
| margin: 8px 0 16px 0; | |
| } | |
| .exhibit .info a{ | |
| border: 1px solid #cac6c6; | |
| display: flex; | |
| align-items: center; | |
| } | |
| @media only screen and (max-width: 660px) { | |
| .exhibit .container .pannel{ | |
| display: none; | |
| } | |
| .container > div:nth-child(1){ | |
| width: 100%; | |
| margin: 0 0 0 0; | |
| } | |
| .exhibit h1{ | |
| margin: 0 0 16px 0; | |
| } | |
| *{ | |
| max-width: 100%; | |
| } | |
| } | |
| footer{ | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 16px 24px; | |
| font-size: small; | |
| } | |
| footer span{ | |
| margin: 0 8px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment