/*IMPORTANT: Comments have been added indicating at which point in Lesson 5 the code would have been added*/ body { background-color: #EAE4E4; font-family: 'ambleregular', sans-serif; margin: 2vw; /*Added during the section on horizontal lists*/ position: relative; /*Adding during section on positioning*/ } #site_nav { background-color: grey; border-radius: 2vw; padding: 0.5% 3%; /*TIY p. 54*/ } #tabs li { background-color: white; border-radius: 4vw; position: relative; /*TIY p. 54*/ padding: 0.1% 3%; /*TIY p. 54*/ margin-top: 6%; /*TIY p. 54*/ } #tabs img{ border-radius: 2.5vw; width: 25%; /*TIY p. 54*/ top: -1.5vw; /*TIY p. 60*/ left: -0.5vw; /*TIY p. 60*/ position: absolute; /*TIY p. 60*/ } ul{ list-style-type: none; } #tabs ul{ list-style-type: none; padding: 0; /* TIY p. 54*/ margin-top: 5vw; /*TIY p. 54*/ margin-bottom: 5vw; /*TIY p. 54*/ } /*TIY p. 54*/ #tabs p{ margin-top: 0%; } a{ color:black; text-decoration: none; } nav a{ text-align: center; } /*TIY p. 54*/ #tabs a { text-align: right; } /*TIY p. 54*/ #tabs h3{ margin-bottom: 2.5%; } nav ul { display: inline-flex; /*Added during the section on horizontal lists*/ margin: 0; /*TIY p. 51*/ padding: 0; /*TIY p. 51*/ width: 100%; /*Adding during the section on horizontal lists*/ } h1 { font-family: 'Montserrat', sans-serif; font-weight:bold; text-align: center; font-size: 3.5vw; margin-left: 1vw; /*TIY p. 54*/ margin-right: 1vw; /*TIY p. 54*/ } h3 { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 3.7vw; } #menu_intro h1{ color:rgb(60, 115, 60); } #ot { background-color: rgb(199, 31, 1); color:white; text-shadow: 1px 1px 2px black; font-weight: lighter; font-family: 'Montserrat', sans-serif; position: absolute; /*Added during section on absolute positioning*/ bottom: 47%; /*Started initially as 45%, but changed to 47% during Try it For Yourself on p. 61*/ right: -2vw; /*This is so that it will sit flush against the right of the viewport. There is a 2vw right margin on the element, so this compensates for that*/ } #ot p{ padding: 0.3rem; margin-top: 0; margin-bottom: 0; } #myButton { background-color:rgb(213, 104, 26); color:white; font-weight:bold; text-shadow: 1px 1px 2px black; border-radius:2vw; font-family: 'Montserrat', sans-serif; padding:2%; font-size: 3.5vw; width: 32%; /*Section on centring*/ position: relative; /*Section on centring*/ margin-left: -16%; /*Section on centring*/ left: 50%; /*Section on centring*/ } #myButton:hover { background-color:rgb(235, 155, 35); } nav { font-family: 'Montserrat', sans-serif; margin-top: -3vw; /*Adding during the section on horizontal lists*/ } nav li{ background-color: rgb(213, 104, 26); text-align: center; border-radius: 1vw; font-size: 3vw; width: 16.6%;/*TIY p. 51*/ margin-left: 0.6%; /*TIY p. 51*/ margin-right: 0.6%; /*TIY p. 51*/ padding: 3% 1.1% 1.1%; /*TIY p. 51 Reminder: in this shorthand property, value 1 = top, value 2 = left and right, value 3 = bottom*/ z-index: -1; /*Section on stack order*/ } @font-face { font-family: 'ambleregular'; src: url('fonts/Amble-Regular-webfont.eot') format('embedded-opentype'), url('fonts/Amble-Regular-webfont.woff') format('woff'), url('fonts/Amble-Regular-webfont.ttf') format('truetype'), url('fonts/Amble-Regular-webfont.svg') format('svg'); } p{ font-size: 3.8vw; } /*Added during section on scaling images*/ img.ri{ width: 100%; } /*Added during section on relative positioning*/ #image { position: relative; top: 0.7rem; max-width: 90%; } #intro{ position: relative; top: 10px; } /*Try it yourself, p. 61*/ #more{ margin-top: 10%; } footer{ text-align: right; } small{ font-size: 2.5vw; }