Advertisement
jbozhich

Index Page Project

Apr 7th, 2015
233
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.72 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Project I for ART 116</title>
  6. <style type="text/css">
  7. body {
  8.     <style type="text/css">
  9.     line-height: 2;
  10.     font-size: 100%;
  11.     font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  12.     background-color: #2A4E95;
  13.     margin: 0;
  14.     padding-top: 30px;
  15.     padding-right: 30px;
  16.     padding-left: 30px;
  17.     padding-bottom: 30px;
  18.     color: #13044F;
  19. }
  20. ul, ol, dl {
  21.     padding: 0;
  22.     margin: 0;
  23. }
  24. h1, h2, h3, h4, h5, h6, p {
  25.     margin-top: 30px;  
  26.     padding-right: 50px;
  27.     padding-left: 50px;
  28. }
  29. a img {
  30.     border: none;
  31. }
  32.  
  33. a:link {
  34.     color: #DC4343;
  35.     text-decoration: underline;
  36.    
  37. }
  38. a:visited {
  39.     color: #8097C3;
  40.     text-decoration: underline;
  41. }
  42. a:hover, a:active, a:focus {
  43.     text-decoration: none;
  44. }
  45.  
  46. .container {
  47.     width: 960px;
  48.     background-color: #FFFFFF;
  49.     margin: 0 auto;
  50. }
  51.  
  52.  
  53.  
  54.  
  55. .content ul, .content ol {
  56.     padding: 0 15px 15px 40px;
  57. }
  58.  
  59. nav a, nav a:visited {
  60.     padding: 5px 5px 5px 15px;
  61.     display: block;
  62.     width: 160px;  
  63.     text-decoration: none;
  64.     background-color: #F6D72C;
  65. }
  66. nav a:hover, nav a:active, nav a:focus {
  67.     background-color: #EEC714;
  68.     color: #FFF;
  69. }
  70.  
  71. footer {
  72.     padding: 10px 0;
  73.     background-color: #05005E;
  74.     position: relative;
  75.     clear: both;
  76.     color: #05005E;
  77. }
  78.  
  79.  
  80. header, section, footer, aside, article, figure {
  81.     padding: 10px 0;
  82.     background-color: #FFFFFF;
  83.     position: relative;
  84.     clear: both;
  85.     display: block;
  86.     margin-left: 70px;
  87.     margin-right: 55px;
  88.     margin-top: 20px;
  89.     margin-bottom: 20px;
  90.     white-space: nowrap;
  91. }
  92. -->
  93. </style>
  94. </head>
  95.    
  96.     <h1>ART 116: Web Design I</h1>
  97.    
  98.     <div id="container">
  99.  <section>
  100.       <a href="http://www.nvcc.edu/index.html">NOVA</a>
  101.       <a href="file:///Macintosh HD/Users/student/Documents/Bozhich_ART116/exercises/tag exercise.html">Tag Exercise</a>
  102.       <a href="file:///Macintosh HD/Users/student/Documents/Bozhich_ART116/exercises/links-exercise(2).html">Link Exercise</a>
  103.       <a href="#">Final Project</a>
  104.     </section>
  105.     <section>
  106.      <h2>Under the Instruction of Prof.Derya Kramer</h2>
  107.      <h5>Located on the Alexandria Campus, Tyler building, Room 140</h5>
  108.      <h4>Designed by Juliana Bozhich</h4>
  109.      <img src="file:///Macintosh HD/Users/student/Documents/Bozhich_ART116/images/Mondrian.jpg" width="1238" height="336" alt=""/>
  110.      
  111.     </section>
  112.     <section>
  113.       <h2>Course Description</h2>
  114.       <p>Introduces the basic elements of web page design via Dreamweaver: typography, imagery, and color, and examines how they are combined to create effective layouts. Derya Kramer instructs in the organization of materials and concepts, color theory, site planning and various methods of construction. ART116 meets from 12:30-3:20pm on Mondays&Wednesdays.</p>
  115.     <h3>Course Objectives</h3>
  116.     <ul>
  117.         <li>Introduction and basic use of Dreamweaver</li>
  118.         <li>Application of basic principles of color theory, typography, web design</li>
  119.         <li>Instruction in organizational skills for materials and concepts in web design</li>
  120.         <li>Creation of graphics that will function online</li>
  121.         <li>Creation and implemention of a functioning website</li>
  122.     </ul>
  123.    
  124.    </section>
  125.        <section>
  126.      <h2>Explanation of Design Choices</h2>
  127.      <p>Aware of my limitations as a novice designer, I decided to simplify to the precipice of artistic primitivism. One cannot surpass The "Lozenge Works" of Piet Mondrian in abstraction, hence these became my inspiration. Above is Mondrian's "Composition II in Red, Blue, and Yellow" painted in 1930, currently displayed in the Philadelphia Museum of Art. The background color I chose is exactly the same as the blue in Mondrian's flat plane, the text darker and lighter, following the suggestion on <a href=http://paletton.com/#uid=13Z0u0kvQsB8MJ0mgvuEPlbT5cl>Paletton</a></p>
  128.     <p>Regarding typography, I chose the font that looked most like the characters of an old typewriter. There is a personal association present here that I will endeavor to explain. While at <a href=http://www.sjc.edu/>St.John's College</a> the most covetted publication of Euclid's "Elements" was a facsimile of Oliver Byrne's colored visual interpretations of each of the Euclidean Proofs.For example,</p>
  129.     <img scr="http://farm8.staticflickr.com/7222/7368886242_ae40497184_b.jpg">Propositions 43&44</img>
  130. <p>You can see a very silimar asthetic to that of Piet Mondrian in 1847, I chose the font most similar to that which you see in Proposition XLIV. All other colors refer to these two inspirations: Piet Mondrian and Oliver Byrne.</p>
  131.      
  132.    </section>
  133.    
  134.  
  135.  <footer>
  136.    <address>
  137.     <p><a href="mailto:jb22525@nvcc.edu">Contact me</a></p>
  138.    </address>
  139.  </footer>
  140.  
  141.  </div id="container">
  142.  
  143. </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement