Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
- */
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /** This is my CSS **/
- /* The defaulf setting is for mobile viewport. min-width: 500px */
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- background-color: #E4D0FF;
- margin: auto;
- width: 100%;
- }
- /* This part of the code adds the new Font to the new page */
- nav#nav,
- section#home,
- section#about,
- section#contact,
- footer {
- font-family: 'Proxima Nova', Georgia, sans-serif;
- font-size: 1rem;
- color: #000000;
- }
- /** The styles bellow belong to the Nav menu **/
- nav#nav {
- background-color: #BBB3E8;
- margin: auto;
- width: 100%;
- padding: 0px;
- /* The other style file has a border in this part of the layout. I added this line of code to erase it from my css */
- border: none;
- /* Flexbox will allow the menu to change from "row" to "column" when the browser reaches the first breakpoint */
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: space-around;
- }
- a.nav-link {
- display: flex;
- justify-content: center;
- padding: 10px;
- margin: 0;
- }
- a.nav-link:link,
- a.nav-link:visited {
- background-color: #C4CBFF;
- }
- a.nav-link:hover,
- a.nav-link:active {
- background-color: #D8B3E8;
- }
- /** The styles bellow belong to the Content **/
- #main {
- margin: auto;
- width: 100%;
- }
- section#home {
- width: 100%;
- height: auto;
- background-color: #FEC4FF;
- padding: 10% 5%;
- }
- section#about {
- width: 100%;
- height: auto;
- background-color: #C4CBFF;
- }
- section.about .about-image {
- width: 20%;
- height: auto;
- margin: .5rem;
- }
- section#contact {
- width: 100%;
- height: auto;
- background-color: #D8B3E8;
- }
- /** The styles bellow belong to the Text **/
- section h1,
- section h2 {
- margin-bottom: 20px;
- }
- section p {
- font-size: .9rem;
- line-height: 1.2rem;
- margin: auto 20px;
- }
- /** The styles bellow belong to the Form **/
- form.contact-form {
- width: auto;
- background-color: #D8B3E8;
- }
- .contact-form{
- width: 100%;
- /* Flexbox will resize the form when the browser reaches the breakpoint */
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- justify-content: flex-end;
- }
- .contact-form label {
- width: 100%;
- }
- .contact-form-section{
- flex: 1 0 61%;
- margin: .2rem;
- }
- .contact-form-section:nth-child(1),
- .contact-form-section:nth-child(2){
- flex-basis: 60%;
- /* This line of code resizes the input for Name and E-mail on the form */
- flex-wrap: nowrap;
- }
- button {
- flex-basis: 60%;
- width: 50px;
- height: 60px;
- }
- button:link,
- button:visited {
- background-color: rgb(107, 107, 107);
- }
- button:hover,
- button:active {
- text-decoration: underline;
- font-weight: bold;
- }
- /** The styles bellow belong to the Footer **/
- footer {
- background-color: #BBB3E8;
- text-align: center;
- font-size: .8rem;
- padding: .75em;
- }
- /* I used the nth-child in this case to add the styles only on the first line of text, the firs p tag*/
- footer p:nth-child(1) {
- font-weight: 600;
- font-style: italic;
- }
- /** Breakpoints for different viewports **/
- /* First Breakpoint */
- @media screen and (min-width: 768px) {
- /** Styles for the Nav menu **/
- nav#nav{
- /* This will change the menu from "row" to "column" when it reaches the breakpoint */
- display: flex;
- flex-wrap: nowrap;
- justify-content: space-around;
- flex-direction: row;
- position: fixed;
- z-index: 100;
- }
- a.nav-link {
- display: flex;
- justify-content: space-around;
- align-items: center;
- width: 100%;
- }
- /** Styles for the Text in the second section ("About Me") **/
- /* section#about {
- display: flex;
- flex-direction: row;
- }
- section.p:nth-child(1),
- section.p:nth-child(2) {
- flex-basis: 50%;
- } */
- /* section#about{
- padding-left: 100px;
- padding-right: 250px;
- }
- */
- section#about{
- padding-left: 30px;
- padding-right: 30px;
- }
- section#about .section-title{
- display: inline-block;
- }
- section#about .about-image {
- transform: translateY(-30%);
- }
- /** Styles for the Contact Form **/
- .contact-form-section:nth-child(1),
- .contact-form-section:nth-child(2){
- flex-basis: 40%;
- /* This line of code resizes the input for Name and E-mail on the form */
- flex-wrap: nowrap;
- }
- button{
- flex-basis: 40%;
- flex-wrap: nowrap;
- order: 1;
- width: 40px;
- height: 50px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement