Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
media-query-practice/main.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
executable file
440 lines (437 sloc)
6.42 KB
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
| <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"> | |
| body{ | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .clearfix{ | |
| clear: both; | |
| } | |
| .first-page{ | |
| height: 700px; | |
| background-image: url(src/images/background.png); | |
| background-size: cover; | |
| width: 100%; | |
| } | |
| .clearfix{ | |
| clear: both; | |
| } | |
| h1{ | |
| font-family: Exo-Thin; | |
| text-align: center; | |
| margin: auto; | |
| font-size: 60px; | |
| font-weight: 100; | |
| width: 50%; | |
| color: #282828; | |
| } | |
| h2{ | |
| font-family: Exo-Medium; | |
| font-size: 40px; | |
| letter-spacing: 2px; | |
| font-weight: 100; | |
| } | |
| h3{ | |
| color: #ff6d6d; | |
| font-family: Exo-Medium; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| font-weight: 100; | |
| line-height: 8px; | |
| } | |
| h4{ | |
| font-family: Exo-Medium; | |
| font-size: 21px; | |
| font-weight: 100; | |
| } | |
| h5{ | |
| font-family: Exo-Medium; | |
| font-size: 16px; | |
| letter-spacing: 2px; | |
| font-weight: 100; | |
| color: #282828; | |
| opacity: .66; | |
| } | |
| #button{ | |
| display: block; | |
| height: 40px; | |
| width: 175px; | |
| margin: auto; | |
| background-color: #ff6d6d; | |
| border-radius: 3px; | |
| } | |
| #button p{ | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-family: Exo-Regular; | |
| color: white; | |
| letter-spacing: 4px; | |
| font-size: 16px; | |
| padding-top: 10px; | |
| } | |
| .first-page p:nth-child(3){ | |
| text-align: center; | |
| margin: auto; | |
| font-family: Exo-Regular; | |
| font-size: 14px; | |
| color: #282828; | |
| opacity: 0.6; | |
| padding-top: 15px; | |
| } | |
| #first-page-content{ | |
| padding-top: 200px; | |
| } | |
| .second-page{ | |
| height: 600px; | |
| } | |
| .second-page-text{ | |
| width: 40%; | |
| padding: 10%; | |
| float: left; | |
| } | |
| .second-page img{ | |
| float: right; | |
| width: 40%; | |
| } | |
| span{ | |
| color: #ff6d6d; | |
| font-family: Exo-Medium; | |
| font-size: 40px; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| font-weight: 100; | |
| } | |
| .third-page{ | |
| height: 600px; | |
| display: block; | |
| margin: auto; | |
| padding-top: 60px; | |
| } | |
| .title{ | |
| text-align: center; | |
| } | |
| .info{ | |
| width: 25%; | |
| padding: 2%; | |
| float: left; | |
| text-align: center; | |
| } | |
| .third-page div:nth-child(2){ | |
| padding-left: 8%; | |
| } | |
| .info img{ | |
| width: 20%; | |
| } | |
| .fourth-page{ | |
| height: 400px; | |
| display: block; | |
| margin: auto; | |
| } | |
| .fourth-page img{ | |
| float: left; | |
| width: 33%; | |
| padding: 1% 5%; | |
| } | |
| .fourth-page-text{ | |
| width: 50%; | |
| float: left; | |
| } | |
| .fifth-page{ | |
| height: 600px; | |
| display: block; | |
| margin: auto; | |
| background-image: url(src/images/founder-background.png); | |
| background-size: cover; | |
| } | |
| .fake-pic{ | |
| width: 40px; | |
| height: 40px; | |
| background-color: #4e4e5e; | |
| display: block; | |
| margin: auto; | |
| } | |
| .founders{ | |
| width: 25%; | |
| float: left; | |
| text-align: center; | |
| padding:4%; | |
| } | |
| .name{ | |
| font-family: Exo-Medium; | |
| color: white; | |
| font-size: 22px; | |
| } | |
| .job-title{ | |
| font-family: Exo-Medium; | |
| color: #ff6d6d; | |
| font-size: 16px; | |
| } | |
| .quote{ | |
| font-family: Exo-Italic; | |
| color: white; | |
| opacity: .66; | |
| } | |
| .fifth-page img{ | |
| display: block; | |
| margin: auto; | |
| width: 90%; | |
| } | |
| .sixth-page{ | |
| height: 600px; | |
| background-image: url(src/images/browser-screen.png); | |
| background-position: center; | |
| text-align: center; | |
| padding-top: 40px; | |
| } | |
| .sixth-page p{ | |
| font-family: Exo-Regular; | |
| color: #282828; | |
| opacity: .66; | |
| width: 50%; | |
| display: block; | |
| margin: auto; | |
| } | |
| .seventh-page{ | |
| height: 400px; | |
| background-color: #323969; | |
| display: block; | |
| margin: auto; | |
| text-align: center; | |
| padding: 70px; | |
| } | |
| .seventh-page h2{ | |
| color: white; | |
| } | |
| .seventh-page img{ | |
| float: left; | |
| padding: 15px 0 0 70%; | |
| } | |
| .seventh-page p:nth-child(4){ | |
| font-family: Exo-Regular; | |
| font-size: 16px; | |
| color: white; | |
| float: left; | |
| padding-left: 0; | |
| } | |
| .seventh-page input{ | |
| height: 30px; | |
| margin: 10px; | |
| padding: 4px 4px 4px 15px; | |
| width: 15%; | |
| border-radius: 5px; | |
| border: 1px solid rgba(255, 255, 255, .5); | |
| background-color: rgba(70, 76, 119, .5); | |
| color: white; | |
| font-family: Exo-Regular; | |
| font-size: 16px; | |
| } | |
| .seventh-page input:nth-child(4){ | |
| height: 30px; | |
| margin: 10px; | |
| padding: 4px; | |
| width: 15%; | |
| border-radius: 5px; | |
| background-color: #ff6d6d; | |
| opacity: 1; | |
| border: 2px solid #ff6d6d; | |
| box-shadow: 1px 2px 3px rgba(0, 0, 0, .5); | |
| text-align: center; | |
| } | |
| .seventh-page p:nth-child(6){ | |
| font-family: Exo-Regular; | |
| font-size: 16px; | |
| color: white; | |
| opacity: .6; | |
| padding-top: 20px; | |
| } | |
| .eighth-page{ | |
| height: 300px; | |
| display: block; | |
| margin: auto; | |
| padding-left: 15%; | |
| } | |
| .column:first-child{ | |
| padding-top: 30px; | |
| padding-right: 3%; | |
| } | |
| .column{ | |
| width: 20%; | |
| float: left; | |
| padding: 1%; | |
| } | |
| .footer-headings{ | |
| font-family: Exo-Medium; | |
| font-size: 22px; | |
| } | |
| .footer-body{ | |
| font-family: Exo-Regular; | |
| font-size: 14px; | |
| opacity: .66; | |
| } | |
| .column input{ | |
| height: 30px; | |
| margin: 10px; | |
| padding: 4px; | |
| width: 60%; | |
| padding: 0 0 0 10%; | |
| margin: 0; | |
| border-radius: 5px 0 0 5px; | |
| background-color: #8d8d8d; | |
| opacity: .4; | |
| border: 1px solid #4e4e5e; | |
| float: left; | |
| } | |
| .column img{ | |
| float: left; | |
| height: 32px; | |
| margin: 0; | |
| border-radius: 0 5px 5px 0; | |
| } | |
| .social{ | |
| float: left; | |
| width: 80%; | |
| padding-top: 20px; | |
| } | |
| .social img{ | |
| padding: 1%; | |
| } | |
| @media screen and (min-width: 0px) and (max-width: 679px){ | |
| h1{ | |
| font-size: 30px; | |
| } | |
| .first-page{ | |
| height: 500px; | |
| } | |
| #first-page-content{ | |
| padding-top: 100px; | |
| } | |
| h3{ | |
| font-size: 10px; | |
| } | |
| h2{ | |
| font-size: 20px; | |
| } | |
| h3{ | |
| font-size: 12px; | |
| line-height: 12px; | |
| } | |
| .second-page{ | |
| height: 200px; | |
| } | |
| .second-page-text{ | |
| width: 45%; | |
| padding: 5%; | |
| } | |
| span{ | |
| font-size: 20px; | |
| } | |
| h5{ | |
| font-size: 12px; | |
| } | |
| .indent{ | |
| width: 80vw; | |
| padding-top: 70px; | |
| } | |
| .third-page{ | |
| height: 800px; | |
| display: block; | |
| margin: auto; | |
| padding-top: 60px; | |
| } | |
| .info{ | |
| width: 100%; | |
| padding: 0; | |
| float: none; | |
| text-align: center; | |
| } | |
| .third-page div:nth-child(2){ | |
| padding: 0; | |
| } | |
| .fourth-page{ | |
| height: 560px; | |
| display: block; | |
| margin: auto; | |
| } | |
| .fourth-page-text{ | |
| width: 100%; | |
| } | |
| .fourth-page .indent{ | |
| padding: 0; | |
| } | |
| .fourth-page img{ | |
| float: left; | |
| width: 100%; | |
| padding: 0; | |
| } | |
| .founders{ | |
| width: 80%; | |
| padding:7%; | |
| } | |
| .fifth-page{ | |
| height: 1000px; | |
| } | |
| .sixth-page{ | |
| height: 350px; | |
| background-color: #f6f5f3; | |
| background-image: url(src/images/browser-screen.png); | |
| text-align: center; | |
| background-size: 150%; | |
| background-position: bottom; | |
| background-repeat: no-repeat; | |
| padding-top: 20px; | |
| } | |
| .sixth-page h3{ | |
| padding: 0; | |
| } | |
| .sixth-page p{ | |
| font-family: Exo-Regular; | |
| font-size: 12px; | |
| width: 80%; | |
| padding-bottom: 40px; | |
| } | |
| .seventh-page{ | |
| height: 400px; | |
| background-color: #323969; | |
| display: block; | |
| margin: auto; | |
| text-align: center; | |
| padding: 70px; | |
| } | |
| .seventh-page p:nth-child(4){ | |
| font-size: 10px; | |
| } | |
| .seventh-page img{ | |
| padding: 0 0 0 40%; | |
| } | |
| .seventh-page form{ | |
| display: block; | |
| margin: auto; | |
| } | |
| .seventh-page input{ | |
| margin-top: 10px; | |
| padding-top: 5px; | |
| width: 100%; | |
| } | |
| .seventh-page input:nth-child(4){ | |
| height: 30px; | |
| width: 100%; | |
| } | |
| .seventh-page p:nth-child(6){ | |
| font-size: 10px; | |
| } | |
| .eighth-page{ | |
| height: 300px; | |
| display: block; | |
| margin: auto; | |
| padding-left: 1%; | |
| } | |
| .column{ | |
| width: 100%; | |
| } | |
| .footer-headings{ | |
| font-size: 12px; | |
| } | |
| .footer-body{ | |
| font-size: 10px; | |
| } | |
| } |