Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .border {
- border: 1px solid black;
- }
- ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- a {
- text-decoration: none;
- }
- #header {
- display: flex;
- width: 1100px;
- margin: 0 auto;
- justify-content: space-between;
- }
- #logo {
- width: 355px;
- height: 144px;
- }
- #logo a {
- width: 100%;
- height: 100%;
- background-image: url("../images/logo.jpg");
- background-repeat: no-repeat;
- display: inline-block;
- }
- #header ul {
- /* width: 500px; */
- display: flex;
- align-items: center;
- justify-content: center;
- }
- #header ul li {
- margin-right: 10px;
- width: 120px;
- height: 31px;
- }
- #header ul li a {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- text-transform: uppercase;
- text-align: center;
- font-family: Arial, Helvetica, sans-serif;
- color: darkblue;
- background-image: url("../images/menu.gif");
- background-position: 8px -1px;
- }
- #header ul li.selected a {
- background-position: 8px -76px;
- color: white;
- }
- #header ul li a:hover {
- background-position: 8px -38px;
- color: darkblue;
- }
- /* ------------------ */
- /* BODY */
- #body .header {
- background: url("../images/bg-body.gif");
- height: 500px;
- }
- #body .header > div {
- width: 1100px;
- background: url("../images/smiling-man.jpg") no-repeat right -18px;
- height: 100%;
- margin: 0 auto;
- }
- #body .header > div ul {
- padding-top: 31px;
- display: flex;
- }
- #body .header > div ul li {
- display: inline-block;
- width: 190px;
- height: 190px;
- }
- #body .header > div ul li:first-child {
- background-image: url("../images/discuss.jpg");
- }
- #body .header > div ul li:nth-child(2) {
- background-image: url("../images/flags.jpg");
- }
- #body .header > div ul li:nth-child(3) {
- background-image: url("../images/graph.jpg");
- }
- #body .header > div > div {
- display: flex;
- flex-direction: column-reverse;
- }
- #body .header > div > div > h3 {
- width: 500px;
- color: gray;
- }
- #body .header > div > div > h3 a {
- color: gray;
- text-decoration: underline;
- }
- #body .header > div > div > p {
- width: 500px;
- color: darkblue;
- }
- #body .header > div > div > p a {
- color: darkblue;
- }
- /* body body */
- #body .body {
- width: 1100px;
- margin: 0 auto;
- /* display: flex; */
- display: grid;
- grid-template-columns: 200px 1fr 200px;
- /* grid-template-rows: 400px 100px; */
- }
- #body .body .section:first-child {
- height: 200px;
- background: url("../images/gears.jpg") no-repeat center center,
- url("../images/bg-section.gif");
- }
- #body .body .section:first-child a {
- padding-top: 160px;
- text-align: center;
- display: inline-block;
- }
- #body .body .section:last-child {
- height: 200px;
- display: flex;
- justify-content: center;
- align-items: center;
- background: url("../images/bg-section.gif");
- }
- #body .body .section:last-child a {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- #body .body .article {
- background: url("../images/graph2.jpg") no-repeat,
- url("../images/bg-section.gif");
- padding-left: 190px;
- }
- /* body footer */
- #body .footer {
- width: 1100px;
- margin: 0 auto;
- display: grid;
- grid-template-columns: 200px 1fr 200px;
- }
- #body .footer h3,
- #body .footer h3 a {
- font-weight: bold;
- color: darkblue;
- font-size: 20px;
- line-height: 40px;
- font-family: Arial, Helvetica, sans-serif;
- text-transform: uppercase;
- }
- #body .footer p,
- #body .footer p a {
- font-family: Arial, Helvetica, sans-serif;
- color: rgb(68, 68, 68);
- }
- #body .footer span {
- font-size: 12px;
- color: gray;
- }
- #body .footer .featured {
- padding: 20px;
- }
- #body .footer ul li:not(:last-child) {
- padding-bottom: 15px;
- /* border-bottom: 1px dashed gray; */
- background-image: url("../images/border-dashed.gif");
- background-position: bottom;
- background-repeat: repeat-x;
- }
- #body .footer .section:last-child ul {
- list-style-type: unset;
- margin: unset;
- padding: unset;
- list-style-image: url("../images/bullets.gif");
- }
- /* Footer */
- #footer {
- /* background: url('../images/bg-footer.gif') */
- background-color: #eee;
- }
- #footer > div:first-child {
- padding: 10px 0;
- width: 1100px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
- #footer h3 {
- text-transform: uppercase;
- color: gray;
- }
- #footer > div:first-child > div {
- text-align: center;
- }
- .facebook {
- color: transparent;
- font-size: 1px;
- background: url("../images/icons.gif");
- width: 26px;
- height: 26px;
- margin-right: 10px;
- display: inline-block;
- }
- .twitter {
- color: transparent;
- font-size: 1px;
- width: 40px;
- height: 26px;
- display: inline-block;
- background: url("../images/icons.gif") 0 90px;
- }
- #footer > div:last-child {
- padding: 20px 0;
- display: flex;
- align-items: center;
- justify-content: center;
- color: lightslategray;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement