Created
March 20, 2020 20:59
-
-
Save revitalk/69aceb1ebbee343e878ac1552869d51a 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"> | |
| <!-- The HEAD portion contains information about the document --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web Page Title</title> | |
| <link href="https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <!-- The BODY portion contains all the content that is inside the browser window --> | |
| <!-- The BODY represents the browser's window --> | |
| <body> | |
| <!-- This DIV represents the page inside the browser's window --> | |
| <div class="container"> | |
| <header class="page-header"> | |
| <h1><img src="images/logo.png" alt="CUNY Design"></h1> | |
| <h2>Design programs across CUNY</h2> | |
| </header> | |
| <nav class="main-menu"> | |
| <div class="menu-button"><img src="images/menu.svg" width="48" alt=""></div> | |
| <div class="menubar"> | |
| <ul> | |
| <li class="dropdown"><a href="#">Degrees</a> | |
| <ul> | |
| <li><a href="#">2-year</a></li> | |
| <li><a href="#">4-year</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a href="#">Topics</a> | |
| <ul> | |
| <li><a href="#">Digital Design</a></li> | |
| <li><a href="#">Animation</a></li> | |
| <li><a href="#">Industrial Design</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Apply</a></li> | |
| </ul> | |
| <form class="search" action="#" method="post"> | |
| <input type="text" placeholder="Search" class="search-input"> | |
| <input type="submit" class="search-submit"> | |
| </form> | |
| </div> | |
| </nav> | |
| <!-- Inside the MAIN elements is the primary content of this page --> | |
| <main class="page-main"> | |
| <img src="images/mea.jpg" alt="mea student" class="fluid-image"> | |
| <h3>Borough of Manhattan Community College</h3> | |
| <h2>Multimedia Programming and Design</h2> | |
| <h4>Degree: A.S. </h4> | |
| <p>The Multimedia Programming and Design Program prepares students for careers in a variety of multimedia industries, companies and institutions that develop, produce or market multimedia products, programs or services. The program instructs students in the design and programming of computer-based interactive products that incorporate text, graphics, sound, animation and video. It also develops different types of talent, both creative and technical, with the imperative that each understands the work of the other so that they can collaborate effectively. | |
| </p> | |
| <p> | |
| Upon successful completion of the curriculum, students are awarded an <span class="orange-color">Associate in Science degree (A.S.)</span> and may transfer to senior institutions such as York, NYU or New York City College of Technology. </p> | |
| <h4>Transfer Options</h4> | |
| <p> BMCC has articulation agreements with CUNY NYC College of Technology to allow you to seamlessly continue your education there without any loss of credits. </p> | |
| <p>Learn More</p> | |
| </main> | |
| <!-- Page's footer --> | |
| <footer class="page-footer">CITY UNIVERSIT OF NEW YORK © Copyright 2020</footer> | |
| </div> <!-- closes the Container div --> | |
| </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
| *{ | |
| margin:0; | |
| padding:0; | |
| border:none; | |
| } | |
| body{ | |
| font-family: 'Alegreya Sans'; | |
| } | |
| .container{ | |
| padding:1em; | |
| max-width:1140px; | |
| } | |
| .fluid-image{ | |
| width:100%; | |
| } | |
| h4, p{ | |
| margin-bottom:1em; | |
| } | |
| a{ | |
| color:#00838f; | |
| } | |
| a:hover{ | |
| color:#880e4f; | |
| } | |
| header{ | |
| width:60%; | |
| float:left; | |
| } | |
| nav{ | |
| width: 30%; | |
| float:right; | |
| } | |
| h1 img{ | |
| width:100%; | |
| } | |
| header h2{ | |
| font-size:1em; | |
| } | |
| /* Main navigation styles */ | |
| .main-menu li{ | |
| padding:6px; | |
| border-bottom: solid 1px #000; | |
| } | |
| .main-menu ul{ | |
| list-style-type: none; | |
| } | |
| .menu-button{ | |
| text-align:right; | |
| } | |
| .menubar{ | |
| width:150px; | |
| background-color: #fff; | |
| border: solid 1px #000; | |
| position: absolute; | |
| right:16px; | |
| } | |
| .search-input{ | |
| width:55%; | |
| padding:3px; | |
| border: solid 1px #ccc; | |
| } | |
| .search{ | |
| padding:6px; | |
| } | |
| .search-submit{ | |
| width:35%; | |
| padding:3px; | |
| border: solid 1px #ccc; | |
| } | |
| .dropdown li{ | |
| border:none; | |
| } | |
| @media(min-width:768px){ | |
| header{ | |
| width:25%; | |
| } | |
| nav{ | |
| width:65%; | |
| margin-top:1em; | |
| text-align: right; | |
| } | |
| .menu-button{ | |
| display:none; | |
| } | |
| .menubar{ | |
| position:static; | |
| width:auto; | |
| border:none; | |
| display:flex; | |
| flex-direction: row; | |
| justify-content: flex-end; | |
| } | |
| .main-menu li{ | |
| display:inline-block; | |
| border:none; | |
| margin-left: 2em; | |
| } | |
| .search{ | |
| margin-left:1em; | |
| padding-top:0; | |
| } | |
| .dropdown li{ | |
| display:block; | |
| margin-left:0; | |
| } | |
| .dropdown ul{ | |
| text-align: center; | |
| border: solid 1px #ccc; | |
| padding:6px; | |
| background-color: #fff; | |
| width:120px; | |
| position:absolute; | |
| display:none; | |
| } | |
| .dropdown:hover ul{ | |
| display:block; | |
| } | |
| } /* closing media query */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment