Line 151: | Line 151: | ||
width: calc(100vw); | width: calc(100vw); | ||
height: calc(100vh); | height: calc(100vh); | ||
+ | } | ||
+ | @import url('https://fonts.googleapis.com/css?family=Cabin:700|Cabin+Condensed|Raleway|Roboto+Condensed|Open+Sans+Condensed:300|Work+Sans|Tajawal|Fjalla+One|Noto+Sans|EB+Garamond|Oswald'); | ||
+ | body { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | color: rgb(40,40,40); | ||
+ | width: calc(100vw); | ||
+ | } | ||
+ | h1 { | ||
+ | font-size: 30px; | ||
+ | /* font-family: 'Cabin', sans-serif; */ | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 26px; | ||
+ | font-family: 'Roboto Condensed', sans-serif; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 22px; | ||
+ | font-family: 'Roboto Condensed', sans-serif; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 20px; | ||
+ | font-family: 'Cabin', sans-serif; | ||
+ | letter-spacing: 2px; | ||
+ | } | ||
+ | h5 { | ||
+ | font-size: 18px; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | } | ||
+ | p { | ||
+ | font-size: 20px; | ||
+ | font-family: 'EB Garamond', sans-serif; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | } | ||
+ | li { | ||
+ | list-style-type: none; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | a { | ||
+ | text-decoration: none; | ||
+ | color: inherit; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .big-section { | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | /* Accessory styles. */ | ||
+ | /* #triangle { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-bottom: 1000px solid rgb(30,30,40); | ||
+ | border-right: calc(100vw) solid transparent; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | z-index: 1; | ||
+ | } */ | ||
+ | /* Nav styles. */ | ||
+ | #top-nav { | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | #top-nav ul { | ||
+ | width: 1100px; | ||
+ | padding: 0px; | ||
+ | display: flex; | ||
+ | justify-content: space-around; | ||
+ | align-items: center; | ||
+ | flex-direction: row; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .dropdown { | ||
+ | position: relative; | ||
+ | } | ||
+ | .dropdown-content { | ||
+ | height: auto; | ||
+ | width: auto; | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: white; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | .dropdown-content div { | ||
+ | padding-bottom: 10px; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | .dropdown-content div:hover { | ||
+ | color: rgb(200,200,200); | ||
+ | } | ||
+ | /* Footer styles. */ | ||
+ | #footer { | ||
+ | width: calc(100vw); | ||
+ | height: 250px; | ||
+ | background-color: rgb(30,30,40); | ||
+ | color: rgb(210,210,210); | ||
+ | display: flex; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | .footer-block ul{ | ||
+ | padding: 0px; | ||
+ | } | ||
+ | /* Content Styles */ | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | #section1 { | ||
+ | width: 70%; | ||
+ | min-height: 900px; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 04:23, 21 June 2018
Description
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cum, earum reprehenderit, tempora vitae eum inventore molestiae, incidunt ut eius a. Consectetur, minima, quia. Vitae modi a, fuga dignissimos. Velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptatum ipsum dolor quam explicabo sed, autem maiores quibusdam quod alias repellat dolores debitis fugit. Beatae facere eveniet laborum est deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem eum laboriosam fugiat aperiam qui deserunt aliquam, voluptas aspernatur eius. Minima sapiente ipsa id perspiciatis eius esse vel, saepe qui.