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?
web1/showcase.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2299 lines (1466 sloc)
27.5 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
| /*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */ | |
| /* | |
| * What follows is the result of much research on cross-browser styling. | |
| * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, | |
| * Kroc Camen, and the H5BP dev community and team. | |
| */ | |
| /* ========================================================================== | |
| Base styles: opinionated defaults | |
| ========================================================================== */ | |
| html { | |
| color: #222; | |
| font-size: 1em; | |
| line-height: 1.4; | |
| } | |
| /* | |
| * Remove text-shadow in selection highlight: | |
| * https://twitter.com/miketaylr/status/12228805301 | |
| * | |
| * Vendor-prefixed and regular ::selection selectors cannot be combined: | |
| * https://stackoverflow.com/a/16982510/7133471 | |
| * | |
| * Customize the background color to match your design. | |
| */ | |
| ::-moz-selection { | |
| background: #b3d4fc; | |
| text-shadow: none; | |
| } | |
| ::selection { | |
| background: #b3d4fc; | |
| text-shadow: none; | |
| } | |
| /* | |
| * A better looking default horizontal rule | |
| */ | |
| hr { | |
| display: block; | |
| height: 1px; | |
| border: 0; | |
| border-top: 1px solid #ccc; | |
| margin: 1em 0; | |
| padding: 0; | |
| } | |
| /* | |
| * Remove the gap between audio, canvas, iframes, | |
| * images, videos and the bottom of their containers: | |
| * https://github.com/h5bp/html5-boilerplate/issues/440 | |
| */ | |
| audio, | |
| canvas, | |
| iframe, | |
| img, | |
| svg, | |
| video { | |
| vertical-align: middle; | |
| } | |
| /* | |
| * Remove default fieldset styles. | |
| */ | |
| fieldset { | |
| border: 0; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* | |
| * Allow only vertical resizing of textareas. | |
| */ | |
| textarea { | |
| resize: vertical; | |
| } | |
| /* ========================================================================== | |
| Browser Upgrade Prompt | |
| ========================================================================== */ | |
| .browserupgrade { | |
| margin: 0.2em 0; | |
| background: #ccc; | |
| color: #000; | |
| padding: 0.2em 0; | |
| } | |
| /* ========================================================================== | |
| Author's custom styles | |
| ========================================================================== */ | |
| *{ | |
| font-family: 'Montserrat'; | |
| } | |
| header a{ | |
| text-decoration: none; | |
| color:black; | |
| } | |
| header ul li a:visited { | |
| text-decoration: none; | |
| } | |
| header ul li a:unvisited { | |
| text-decoration: none; | |
| color:black; | |
| } | |
| header a:hover { | |
| color:#00A383; | |
| } | |
| header h1 { | |
| font-weight: 100; | |
| color:#263745 ; | |
| text-transform: uppercase; | |
| display: flex; | |
| justify-content: center; | |
| border: solid; | |
| border-color:#263745; | |
| font-size: 60px; | |
| } | |
| header h1 span { | |
| color: #00A383; | |
| font-weight: 500; | |
| } | |
| header ul { | |
| list-style: none; | |
| text-transform: uppercase; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .whatisflexbox { | |
| background-color: #263745; | |
| padding: 50px; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| color:white; | |
| } | |
| .whatisflexbox h1 { | |
| color: white; | |
| font-weight: 400; | |
| font-size: 30px; | |
| border: solid; | |
| border-color:white; | |
| padding: 10px; | |
| } | |
| .whatisflexbox p { | |
| font-size: 12px; | |
| font-weight: 100; | |
| } | |
| .whole { | |
| background-color: #00A383; | |
| display: flex; | |
| justify-content: center; | |
| padding:50px; | |
| } | |
| .flexcontainer { | |
| background-color:#00A383; | |
| border:solid; | |
| border-color: white; | |
| margin-top: 40px; | |
| margin-bottom: 30px; | |
| margin-right:30px; | |
| margin-left: 30px; | |
| } | |
| .flexcontainer h1 { | |
| color:white; | |
| font-weight: 400; | |
| display: flex; | |
| font-size: 30px; | |
| } | |
| .items { | |
| display:flex; | |
| justify-content: center; | |
| flex-direction: row; | |
| margin: 70px; | |
| } | |
| .items div{ | |
| border: solid; | |
| border-color: white; | |
| margin: 10px; | |
| padding:30px; | |
| height: 80px; | |
| color:white; | |
| font-weight: 100; | |
| text-transform: uppercase; | |
| background-color: #263745; | |
| } | |
| .properties h1 { | |
| font-weight: 400; | |
| font-size: 30px; | |
| } | |
| .key { | |
| text-align: center; | |
| font-weight: 100; | |
| } | |
| .one { | |
| margin: 10px; | |
| border:solid; | |
| border-color:#00A383; | |
| border-width:thin; | |
| } | |
| .one h2 { | |
| background-color: #00A383; | |
| color:white; | |
| font-weight: 200; | |
| padding-left: 20px; | |
| padding-top: 10px; | |
| margin-top: -5px; | |
| height: 40px; | |
| text-transform: uppercase; | |
| } | |
| .one ul { | |
| list-style-type: none; | |
| text-align: center; | |
| } | |
| .one ul li { | |
| font-weight: 100; | |
| color:#263745; | |
| } | |
| .one:nth-child(1) ul li:nth-child(1){ | |
| color:#00A383; | |
| } | |
| .one:nth-child(1) ul li:nth-child(2){ | |
| color:#00A383; | |
| } | |
| .one:nth-child(1) ul li:nth-child(4){ | |
| color:#00A383; | |
| } | |
| .one:nth-child(2) ul li:nth-child(1){ | |
| color:#00A383; | |
| } | |
| .one:nth-child(2) ul li:nth-child(2){ | |
| color:#00A383; | |
| } | |
| .one:nth-child(2) ul li:nth-child(3){ | |
| color:#00A383; | |
| } | |
| .key { | |
| margin: 30px; | |
| } | |
| .key p:nth-child(1) { | |
| color:#00A383; | |
| } | |
| .key p:nth-child(2) { | |
| color:#263745; | |
| } | |
| .display { | |
| background-color:#263745; | |
| color:white; | |
| padding: 50px; | |
| } | |
| .displaybox h2 { | |
| color:white; | |
| text-transform: uppercase; | |
| font-weight: 200; | |
| text-align: center; | |
| padding-top: 10px; | |
| margin-top: -1px; | |
| height: 40px; | |
| outline:solid; | |
| outline-color: white; | |
| } | |
| .displaybox { | |
| outline:solid; | |
| outline-color: white; | |
| width: 100%; | |
| } | |
| .display ul { | |
| list-style-type: none; | |
| text-align: center; | |
| padding: 30px; | |
| margin-top: -10px; | |
| height: 70px; | |
| font-weight: 100; | |
| } | |
| .displayp { | |
| margin: 40px; | |
| width: 60%; | |
| font-weight:100 ;} | |
| .displayp span { | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| font-size: 30px; | |
| } | |
| li { | |
| margin-right: 20px; | |
| } | |
| h1 { | |
| color: #00A383; | |
| text-transform: uppercase; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| h2 { | |
| color: #263745; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .alignment div { | |
| margin-top: 10px; | |
| border-style: solid ; | |
| border-color: #00A383; | |
| display: flex; | |
| height:150px; | |
| } | |
| .alignment .flex-end { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .alignment .center{ | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .alignment .space-between{ | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .alignment .space-between li{ | |
| background-color: #263745; | |
| width:15px; | |
| color:white; | |
| padding-top: 25px; | |
| padding-left: 5px; | |
| margin: 15px; | |
| font-family: 'Montserrat', sans-serif; | |
| list-style-type: none; | |
| } | |
| .alignment .space-around{ | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .alignment .space-around li{ | |
| background-color: #263745; | |
| width:15px; | |
| color:white; | |
| padding-top: 25px; | |
| padding-left: 5px; | |
| margin: 15px; | |
| font-family: 'Montserrat', sans-serif; | |
| list-style-type: none; | |
| } | |
| .alignment h2 { | |
| position: -webkit-sticky; | |
| position: sticky; | |
| top: 0px; | |
| background-color: white; | |
| width:100%; | |
| padding:4px; | |
| } | |
| .alignment ul { | |
| display: flex; | |
| flex-direction: row; | |
| list-style-type: none; | |
| } | |
| .alignment ul li { | |
| background-color: #263745; | |
| width:15px; | |
| color:white; | |
| padding-top: 25px; | |
| padding-left: 5px; | |
| font-family: 'Montserrat', sans-serif; | |
| list-style-type: none; | |
| } | |
| .alignment li{ | |
| background-color: #263745; | |
| width:15px; | |
| color:white; | |
| padding-top: 25px; | |
| padding-left: 5px; | |
| margin: 15px; | |
| font-family: 'Montserrat', sans-serif; | |
| list-style-type: none; | |
| } | |
| /*======align-items=========================*/ | |
| .alignment .align-flex-start { | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .alignment .align-flex-end { | |
| display: flex; | |
| align-items: flex-end; | |
| } | |
| .alignment .align-center { | |
| display:flex; | |
| align-items: center; | |
| } | |
| .alignment .align-baseline { | |
| display: flex; | |
| align-items:baseline; | |
| } | |
| .alignment .align-stretch { | |
| display:flex; | |
| align-items:stretch; | |
| } | |
| /*======align-self=========================*/ | |
| .alignment .alignself-flex-start ul li:nth-child(3) { | |
| display: flex; | |
| align-self: flex-start; | |
| background-color:#00A383; | |
| } | |
| .alignment .alignself-flex-end ul li:nth-child(3) { | |
| display: flex; | |
| align-self: flex-end; | |
| background-color:#00A383; | |
| } | |
| .alignment .alignself-center ul li:nth-child(3){ | |
| display:flex; | |
| align-self: center; | |
| background-color:#00A383; | |
| } | |
| .alignment .alignself-baseline li:nth-child(3){ | |
| display: flex; | |
| align-self:baseline; | |
| background-color:#00A383; | |
| } | |
| .alignment .alignself-stretch li:nth-child(3){ | |
| display:flex; | |
| align-self:stretch; | |
| background-color:#00A383; | |
| } | |
| /*========================align-content=-=========*/ | |
| .alignment .aligncontent-flex-start { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-flex-start ul { | |
| display: flex; | |
| align-content: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-start ul li { | |
| width: 70px; | |
| height:10px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .aligncontent-flex-end { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-flex-end ul { | |
| display: flex; | |
| align-content: flex-end;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-end ul li { | |
| width: 70px; | |
| height:10px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .aligncontent-center { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-center ul { | |
| display: flex; | |
| align-content: center;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-center ul li { | |
| width: 70px; | |
| height:10px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .aligncontent-spacebetween { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-spacebetween ul { | |
| display: flex; | |
| align-content: space-between;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacebetween ul li { | |
| width: 70px; | |
| height:10px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .aligncontent-spacearound { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-spacearound ul { | |
| display: flex; | |
| align-content: space-around;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacearound ul li { | |
| width: 70px; | |
| height:10px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .aligncontent-stretch { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-stretch ul { | |
| display: flex; | |
| align-content: stretch; | |
| flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-stretch ul li { | |
| width: 70px; | |
| margin:1px; | |
| padding:20px; | |
| } | |
| .alignment .align-stretch { | |
| display:flex; | |
| align-items:stretch; | |
| } | |
| .alignment p { | |
| text-align: center; | |
| } | |
| .nowrap ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:nowrap; | |
| } | |
| .nowrap ul li{ | |
| text-align: center; | |
| width:20%; | |
| height:20%; | |
| } | |
| .wrap ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap; | |
| } | |
| .wrap ul li{ | |
| text-align: center; | |
| width:40%; | |
| height:20%; | |
| margin-top:-10px; | |
| margin-bottom:-10px; | |
| } | |
| .wrap-reverse ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap-reverse; | |
| } | |
| .wrap-reverse ul li{ | |
| text-align: center; | |
| width:40%; | |
| height:20%; | |
| margin-top:-10px; | |
| margin-bottom:-10px; | |
| } | |
| .row ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .row ul li{ | |
| text-align: center; | |
| width:5%} | |
| .fifty ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .fifty ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .fifty ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: 50%; | |
| background-color: #00A383; | |
| } | |
| .content ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .content ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .content ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: content; | |
| background-color: #00A383; | |
| } | |
| footer { | |
| background-color: #263745; | |
| color:white; | |
| display: flex; | |
| justify-content: center; | |
| padding: 30px; | |
| margin-top: 20px; | |
| } | |
| footer a{ | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| } | |
| footer a:hover{ | |
| color: #00A383; | |
| } | |
| footer a:visited { | |
| color:white; | |
| } | |
| /*---------------mobile--------------------*/ | |
| @media only screen and (max-width:449px){ | |
| .content ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .content ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .content ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: content; | |
| background-color: #00A383; | |
| } | |
| .thirty ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .thirty ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .thirty ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: 30%; | |
| background-color: #00A383; | |
| } | |
| .fifty ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .fifty ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .fifty ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: 50%; | |
| background-color: #00A383; | |
| } | |
| .wrap ul { | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap; | |
| } | |
| .wrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| } | |
| .wrap-reverse ul { | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap-reverse; | |
| } | |
| .wrap-reverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| } | |
| .row-nowrap ul { | |
| display: flex; | |
| flex-flow: row nowrap; | |
| height: 80%; | |
| } | |
| .row-nowrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:60px; | |
| } | |
| .alignment .column-reverse { | |
| height: 250px; | |
| } | |
| .column-reverse ul { | |
| display: flex; | |
| flex-flow: column-reverse; | |
| justify-content: center; | |
| width:100%; | |
| height:100%; | |
| margin: 10px; | |
| } | |
| .column-reverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 85%; | |
| height: 3px; | |
| padding:20px; | |
| } | |
| .alignment .columnwrap { | |
| height: 250px; | |
| } | |
| .columnwrap ul { | |
| display: flex; | |
| flex-flow: column wrap; | |
| justify-content: center; | |
| width:100%; | |
| height:100%; | |
| margin: 10px; | |
| } | |
| .columnwrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 30%; | |
| height: 20%; | |
| padding:20px; | |
| } | |
| .alignment .rowreversewrapreverse { | |
| height: 250px; | |
| } | |
| .rowreversewrapreverse ul { | |
| display: flex; | |
| flex-flow: row-reverse wrap-reverse; | |
| justify-content: center; | |
| margin-top: -15px; | |
| width:100%; | |
| height:100%; | |
| } | |
| .rowreversewrapreverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 30%; | |
| height: 20%; | |
| padding:20px; | |
| } | |
| .negative1 ul { | |
| height: 80%; | |
| display: flex; | |
| } | |
| .negative1 ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:60px; | |
| } | |
| .negative1 ul li:nth-child(3) { | |
| display: flex; | |
| order:-1; | |
| background-color: #00A383; | |
| } | |
| .zero ul { | |
| height: 80%; | |
| display: flex; | |
| } | |
| .zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:60px; | |
| } | |
| .zero ul li:nth-child(3) { | |
| display: flex; | |
| order:0; | |
| background-color: #00A383; | |
| } | |
| .one1 ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .one1 ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .one1 ul li:nth-child(3) { | |
| display: flex; | |
| order:1; | |
| background-color: #00A383; | |
| } | |
| .flex-grow-zero ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-grow-zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-grow-zero ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:0; | |
| background-color: #00A383; | |
| } | |
| .flex-grow-one ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-grow-one ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-grow-one ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:1; | |
| background-color: #00A383; | |
| } | |
| .flex-shrink-one ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-shrink-one ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-shrink-one ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:0; | |
| background-color: #00A383; | |
| } | |
| .flex-shrink-zero ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-shrink-zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-shrink-zero ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:1; | |
| background-color: #00A383; | |
| } | |
| } | |
| /*--------------------tablet------------------------*/ | |
| @media only screen and (min-width:450px) { | |
| .flex-shrink-one ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-shrink-one ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-shrink-one ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:0; | |
| background-color: #00A383; | |
| } | |
| .flex-shrink-zero ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-shrink-zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-shrink-zero ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:1; | |
| background-color: #00A383; | |
| } | |
| .flex-grow-one ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-grow-one ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-grow-one ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:1; | |
| background-color: #00A383; | |
| } | |
| .flex-grow-zero ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .flex-grow-zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .flex-grow-zero ul li:nth-child(3) { | |
| display: flex; | |
| flex-grow:0; | |
| background-color: #00A383; | |
| } | |
| .thirty ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .thirty ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:19%; | |
| } | |
| .thirty ul li:nth-child(3) { | |
| display: flex; | |
| flex-basis: 30%; | |
| background-color: #00A383; | |
| } | |
| .one1 ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .one1 ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:30%; | |
| } | |
| .one1 ul li:nth-child(3) { | |
| display: flex; | |
| order:1; | |
| background-color: #00A383; | |
| } | |
| .negative1 ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .negative1 ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:30%; | |
| } | |
| .negative1 ul li:nth-child(3) { | |
| display: flex; | |
| order:-1; | |
| background-color: #00A383; | |
| } | |
| .zero ul { | |
| height: 80%; | |
| display: flex; | |
| width:94%; | |
| } | |
| .zero ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:30%; | |
| } | |
| .zero ul li:nth-child(3) { | |
| display: flex; | |
| order:0; | |
| background-color: #00A383; | |
| } | |
| .alignment .rowreversewrapreverse { | |
| height: 250px; | |
| } | |
| .rowreversewrapreverse ul { | |
| display: flex; | |
| flex-flow: row-reverse wrap-reverse; | |
| justify-content: center; | |
| margin-top: -15px; | |
| width:100%; | |
| height:100%; | |
| } | |
| .rowreversewrapreverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 30%; | |
| height: 20%; | |
| padding:20px; | |
| } | |
| .alignment .columnwrap { | |
| height: 250px; | |
| } | |
| .columnwrap ul { | |
| display: flex; | |
| flex-flow: column wrap; | |
| justify-content: center; | |
| width:100%; | |
| height:100%; | |
| margin: 10px; | |
| } | |
| .columnwrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 30%; | |
| height: 20%; | |
| padding:20px; | |
| } | |
| .alignment .row-nowrap { | |
| height: 250px; | |
| } | |
| .row-nowrap ul { | |
| display: flex; | |
| flex-flow: row nowrap; | |
| height: 80%; | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .row-nowrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width:20%; | |
| } | |
| .alignment .column-reverse { | |
| height: 250px; | |
| } | |
| .column-reverse ul { | |
| display: flex; | |
| flex-flow: column-reverse; | |
| justify-content: center; | |
| width:100%; | |
| height:100%; | |
| margin: 10px; | |
| } | |
| .column-reverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| width: 85%; | |
| height: 3px; | |
| padding:20px; | |
| } | |
| .wrap ul { | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap; | |
| } | |
| .wrap ul li{ | |
| text-align: center; | |
| margin:1px; | |
| } | |
| .wrap-reverse ul { | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-wrap:wrap-reverse; | |
| } | |
| .wrap-reverse ul li{ | |
| text-align: center; | |
| margin:1px; | |
| } | |
| .alignment .aligncontent-flex-start { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-flex-start ul { | |
| display: flex; | |
| align-content: flex-start;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-start ul li { | |
| width:20%; | |
| height:30px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-flex-end { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-flex-end ul { | |
| display: flex; | |
| align-content: flex-end;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-end ul li { | |
| width:20%; | |
| height:30px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-center { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-center ul { | |
| display: flex; | |
| align-content: center;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-center ul li { | |
| width:20%; | |
| height:30px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-spacebetween { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-spacebetween ul { | |
| display: flex; | |
| align-content: space-between;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacebetween ul li { | |
| width:20%; | |
| height:30px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-spacearound { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-spacearound ul { | |
| display: flex; | |
| align-content: space-around;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacearound ul li { | |
| width:20%; | |
| height:30px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-stretch { | |
| height: 300px; | |
| } | |
| .alignment .aligncontent-stretch ul { | |
| display: flex; | |
| align-content: stretch; | |
| flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-stretch ul li { | |
| width:20%; | |
| margin:3px; | |
| } | |
| .alignment .align-stretch { | |
| display:flex; | |
| align-items:stretch; | |
| } | |
| .alignment .aligncontent-flex-start { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-flex-start ul { | |
| display: flex; | |
| align-content: flex-start;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-start ul li { | |
| width: 400px; | |
| height:20px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-flex-end { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-flex-end ul { | |
| display: flex; | |
| align-content: flex-end;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-flex-end ul li { | |
| width: 400px; | |
| height:20px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-center { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-center ul { | |
| display: flex; | |
| align-content: center;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-center ul li { | |
| width: 400px; | |
| height:20px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-spacebetween { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-spacebetween ul { | |
| display: flex; | |
| align-content: space-between;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacebetween ul li { | |
| width: 400px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-spacearound { | |
| height: 200px; | |
| } | |
| .alignment .aligncontent-spacearound ul { | |
| display: flex; | |
| align-content: space-around;flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-spacearound ul li { | |
| width: 400px; | |
| margin:5px; | |
| } | |
| .alignment .aligncontent-stretch ul { | |
| display: flex; | |
| align-content: stretch; | |
| flex-wrap: wrap; | |
| } | |
| .alignment .aligncontent-stretch ul li { | |
| width: 400px; | |
| height:20%; | |
| margin:5px; | |
| } | |
| .alignment .align-stretch { | |
| display:flex; | |
| align-items:stretch; | |
| } | |
| .alignment p { | |
| text-align: center; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: row; | |
| justify-content:space-around; | |
| position:fixed; | |
| background-color: white; | |
| overflow: hidden; | |
| position: fixed; /* Set the navbar to fixed position */ | |
| top: 0; /* Position the navbar at the top of the page */ | |
| width: 100%; /* Full width */ | |
| } | |
| body{ | |
| padding-top: 100px; } | |
| header h1 {display: flex; | |
| padding:20px; | |
| font-size: 30px; | |
| } | |
| header ul {display: flex; | |
| justify-content: space-around; | |
| flex-direction: row; | |
| padding-top: 40px; | |
| } | |
| .whatisflexbox { | |
| text-align: center; | |
| width: 60%; | |
| } | |
| .what { background-color:#263745 ; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .alignment h2 { | |
| top:120px; | |
| } | |
| .one { | |
| width:30%; | |
| margin: 10px; | |
| border:solid; | |
| border-color:#00A383; | |
| border-width:thin; | |
| } | |
| .one h1 { | |
| background-color: #00A383; | |
| color:white; | |
| font-weight: 200; | |
| padding-left: 20px; | |
| padding-top: 10px; | |
| margin-top: -5px; | |
| height: 40px; | |
| } | |
| article { | |
| display:flex; | |
| justify-content: center; | |
| margin:30px; | |
| padding: 10px; | |
| } | |
| .key { | |
| text-align: center; | |
| font-weight: 100; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .display { | |
| background-color:#263745; | |
| color:white; | |
| padding: 50px; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| } | |
| .displaybox { | |
| outline:solid; | |
| outline-color: white; | |
| width: 40%; | |
| } | |
| .row ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .row ul li{ | |
| text-align: center; | |
| width:5%} | |
| } | |
| .rowreverse ul { | |
| width: 100%; | |
| height: 120px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| flex-direction: row-reverse; | |
| } | |
| .rowreverse ul li{ | |
| text-align: center; | |
| width:5%; | |
| } | |
| .column ul { | |
| width:100%; | |
| display: flex; | |
| flex-direction: column; | |
| margin:1px; | |
| } | |
| .column ul li{ | |
| text-align: center; | |
| width:90%; | |
| margin:1px; | |
| height:10px; | |
| padding:12px; | |
| } | |
| .columnreverse ul { | |
| width:100%; | |
| display: flex; | |
| flex-direction: column-reverse; | |
| margin:1px; | |
| } | |
| .columnreverse ul li{ | |
| text-align: center; | |
| width:90%; | |
| margin:1px; | |
| height:10px; | |
| padding:12px; | |
| } | |
| /* ========================================================================== | |
| Helper classes | |
| ========================================================================== */ | |
| /* | |
| * Hide visually and from screen readers | |
| */ | |
| .hidden { | |
| display: none !important; | |
| } | |
| /* | |
| * Hide only visually, but have it available for screen readers: | |
| * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility | |
| * | |
| * 1. For long content, line feeds are not interpreted as spaces and small width | |
| * causes content to wrap 1 word per line: | |
| * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe | |
| */ | |
| .visuallyhidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| -webkit-clip-path: inset(50%); | |
| clip-path: inset(50%); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| white-space: nowrap; /* 1 */ | |
| } | |
| /* | |
| * Extends the .visuallyhidden class to allow the element | |
| * to be focusable when navigated to via the keyboard: | |
| * https://www.drupal.org/node/897638 | |
| */ | |
| .visuallyhidden.focusable:active, | |
| .visuallyhidden.focusable:focus { | |
| clip: auto; | |
| -webkit-clip-path: none; | |
| clip-path: none; | |
| height: auto; | |
| margin: 0; | |
| overflow: visible; | |
| position: static; | |
| width: auto; | |
| white-space: inherit; | |
| } | |
| /* | |
| * Hide visually and from screen readers, but maintain layout | |
| */ | |
| .invisible { | |
| visibility: hidden; | |
| } | |
| /* | |
| * Clearfix: contain floats | |
| * | |
| * For modern browsers | |
| * 1. The space content is one way to avoid an Opera bug when the | |
| * `contenteditable` attribute is included anywhere else in the document. | |
| * Otherwise it causes space to appear at the top and bottom of elements | |
| * that receive the `clearfix` class. | |
| * 2. The use of `table` rather than `block` is only necessary if using | |
| * `:before` to contain the top-margins of child elements. | |
| */ | |
| .clearfix:before, | |
| .clearfix:after { | |
| content: " "; /* 1 */ | |
| display: table; /* 2 */ | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| /* ========================================================================== | |
| EXAMPLE Media Queries for Responsive Design. | |
| These examples override the primary ('mobile first') styles. | |
| Modify as content requires. | |
| ========================================================================== */ | |
| @media only screen and (min-width: 35em) { | |
| /* Style adjustments for viewports that meet the condition */ | |
| } | |
| @media print, | |
| (-webkit-min-device-pixel-ratio: 1.25), | |
| (min-resolution: 1.25dppx), | |
| (min-resolution: 120dpi) { | |
| /* Style adjustments for high resolution devices */ | |
| } | |
| /* ========================================================================== | |
| Print styles. | |
| Inlined to avoid the additional HTTP request: | |
| http://www.phpied.com/delay-loading-your-print-css/ | |
| ========================================================================== */ | |
| @media print { | |
| *, | |
| *:before, | |
| *:after { | |
| background: transparent !important; | |
| color: #000 !important; /* Black prints faster: | |
| http://www.sanbeiji.com/archives/953 */ | |
| box-shadow: none !important; | |
| text-shadow: none !important; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| a[href]:after { | |
| content: " (" attr(href) ")"; | |
| } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; | |
| } | |
| /* | |
| * Don't show links that are fragment identifiers, | |
| * or use the `javascript:` pseudo protocol | |
| */ | |
| a[href^="#"]:after, | |
| a[href^="javascript:"]:after { | |
| content: ""; | |
| } | |
| pre { | |
| white-space: pre-wrap !important; | |
| } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| /* | |
| * Printing Tables: | |
| * http://css-discuss.incutio.com/wiki/Printing_Tables | |
| */ | |
| thead { | |
| display: table-header-group; | |
| } | |
| tr, | |
| img { | |
| page-break-inside: avoid; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |