From 636243cd4e0def61838d19edbca88823a057debb Mon Sep 17 00:00:00 2001 From: Guillermo Date: Tue, 8 Oct 2019 15:47:14 -0300 Subject: [PATCH] Fix some nav problems and add a simple contact form --- css/style.css | 139 ++++++++++++++++++++++++++++++++------------------ index.html | 59 ++++++++++++--------- 2 files changed, 122 insertions(+), 76 deletions(-) diff --git a/css/style.css b/css/style.css index fa5d272..a90a794 100644 --- a/css/style.css +++ b/css/style.css @@ -5,64 +5,72 @@ html, body { - font-family: 'Open Sans', sans-serif;/*The font-family property sets the font style to open sans*/ - text-align: center; /* the text-align property aligns the text to the center*/ + font-family: "Open Sans", sans-serif; /*The font-family property sets the font style to open sans*/ + text-align: center; /* the text-align property aligns the text to the center*/ } * { - margin: 0; /*The margin CSS property sets the margin area on all four sides of an element. */ - padding: 0; /* Padding is the space between the border and the content so that if you have text in an element, the padding helps + margin: 0; /*The margin CSS property sets the margin area on all four sides of an element. */ + padding: 0; /* Padding is the space between the border and the content so that if you have text in an element, the padding helps to make sure the text does not touches the border. Just like an actual box full of contents (such as a package you might want to ship out), you can add foam, or padding, around the contents so that it doesn't touch the sides of the (border) box. */ - /* If the value is 0 then why we're specifing? + /* If the value is 0 then why we're specifing? Ans: The main reason this is used is because sometimes the browser will apply it's default margin/padding to elements, and in a case where you do not want there to be any margin or padding space around an element you will want to define that there is no margin or padding. */ } .intro { - top: 0; /*Set the top edge of the positioned element*/ - /* If the value is 0 then why we're specifing? + top: 0; /*Set the top edge of the positioned element*/ + /* If the value is 0 then why we're specifing? Ans: The main reason this is used is because sometimes the browser will apply it's default margin/padding to elements, and in a case where you do not want there to be any margin or padding space around an element you will want to define that there is no margin or padding. */ - background: #e0ebe8;/*The background property sets all the background properties at once, here only color is specified + background: #e0ebe8; /*The background property sets all the background properties at once, here only color is specified so the background color is set to the hex*/ - min-height: 55vh;/*min height sets the minimum height to 5vh*/ - /*vh means 55% of the viewport height*/ - padding-top: 45vh;/*Adds a padding of 45% of viewport height to the top*/ + min-height: 55vh; /*min height sets the minimum height to 5vh*/ + /*vh means 55% of the viewport height*/ + padding-top: 45vh; /*Adds a padding of 45% of viewport height to the top*/ } .intro p { color: green; } -nav ul { - text-align: right; - position: fixed;/*position property sets positioned relative to the viewport, - which means it always stays in the same place even if the page is scrolled.*/ - width: 100%; /*width property sets the width to 100% of the containing block*/ +nav { + height: 9vh; + width: 100%; + position: fixed; + line-height: 9vh; background-color: #4dabf5; } +nav .containter { + padding: 0 50px; +} + +nav span { + float: left; +} + +nav ul { + float: right; +} + nav ul li { - display: inline-block;/*display property specifies the display behavior (the type of rendering box) of an element.*/ - /*inline-block allows to set a width and height on the element and the top and bottom margins/paddings are respected*/ - margin: 55px; - margin-bottom: 15px; - margin-top: 25px; - + display: inline-block; /*display property specifies the display behavior (the type of rendering box) of an element.*/ + margin: 0 15px; } nav ul li a { color: #ffffff; - text-decoration: none;/*text decoration specifies the decoration added to text*/ - /*it can be described as type of line(underline, overline, line-through), color and style(solid, wavy, dotted, dashed, double)*/ + text-decoration: none; /*text decoration specifies the decoration added to text*/ + /*it can be described as type of line(underline, overline, line-through), color and style(solid, wavy, dotted, dashed, double)*/ } -nav ul li a:hover {/*hover selector is used to select elements when you mouse over them */ +nav ul li a:hover { + /*hover selector is used to select elements when you mouse over them */ color: black; -}* - -.work { +} +* .work { padding-top: 60px; margin-top: -60px; } @@ -97,29 +105,56 @@ nav ul li a:hover {/*hover selector is used to select elements when you mouse ov .show-all { text-decoration: none; - display: block; /*block attribute displays the element as a block element */ - /*It starts on a new line, and takes up the whole width */ - width: 200px; /*width sets the width of the elemnt */ - height: 30px; /*height sets the height of the element */ + display: block; /*block attribute displays the element as a block element */ + /*It starts on a new line, and takes up the whole width */ + width: 200px; /*width sets the width of the elemnt */ + height: 30px; /*height sets the height of the element */ margin: 20px auto 90px; /*margin sets the margin for the top, right, bottom and left of the element respectively*/ - /*here auto tells the browser to automatically determine the left and right margins itself, + /*here auto tells the browser to automatically determine the left and right margins itself, which it does by setting them equally */ background: #e0ebe8; color: #008080; - font-weight: bold; /*font weight sets how thick or thin characters in text should be displayed */ - font-size: 1em; /*font size sets the size of the font */ - border: 2px solid #90C695;/*border property allows you to specify the style, width, and color of an element's border */ - border-radius: 4px; /* it defines the radius of the element's corners and is used to add rounded corners to the borders*/ - cursor: pointer; /*specifies the mouse cursor to be displayed when pointing over an element*/ - /*pointer indicates the cursor is a pointer and indicates a link*/ + font-weight: bold; /*font weight sets how thick or thin characters in text should be displayed */ + font-size: 1em; /*font size sets the size of the font */ + border: 2px solid #90c695; /*border property allows you to specify the style, width, and color of an element's border */ + border-radius: 4px; /* it defines the radius of the element's corners and is used to add rounded corners to the borders*/ + cursor: pointer; /*specifies the mouse cursor to be displayed when pointing over an element*/ + /*pointer indicates the cursor is a pointer and indicates a link*/ padding-top: 10px; } .show-all:hover { - background: #E4F1FE; + background: #e4f1fe; color: green; } +form { + width: 50%; + margin: 0 auto; + padding: 50px 0; +} +form input, +form textarea { + width: calc(100% - 20px); /*20px is 10px + 10px of padding*/ + border: none; + margin: 10px 0; + height: 30px; + padding: 5px 10px; +} +textarea{ + height: 100px !important; +} + +#btnSubmit{ + width: 50%; + background-color: #4dabf5; + color: white; +} + +#btnSubmit:hover{ + color: black; +} + @media only screen and (max-width: 500px) { nav ul { text-align: center; @@ -136,38 +171,39 @@ nav ul li a:hover {/*hover selector is used to select elements when you mouse ov .contact { /* height:800px; */ /* min-height:800px; */ - background: #C8F7C5; + background: #c8f7c5; padding-bottom: 160px; } .header { - padding: 160px 0 110px; /*the 3 values indicates padding to the top, right and bottom of the element*/ + padding: 160px 0 10px; /*the 3 values indicates padding to the top, right and bottom of the element*/ } .contact-details { display: inline-block; font-weight: bold; margin: 0 35px 45px 35px; - list-style-type: none; /*"list-style-type"specifies the type of list-item marker in a list(circle, square, disc, etc) + list-style-type: none; /*"list-style-type"specifies the type of list-item marker in a list(circle, square, disc, etc) none indicates no marker is shown*/ - border: 2px solid #90C695; + border: 2px solid #90c695; border-radius: 100%; width: 100px; height: 100px; - line-height: 100px; /* line-height property sets the amount of space used for lines, such as in text */ + line-height: 100px; /* line-height property sets the amount of space used for lines, such as in text */ background: #e0ebe8; color: #008080; text-decoration: none; } -.contact-details:hover { /* The :hover selector is used to select elements when you mouse over them. */ - background: #E4F1FE; +.contact-details:hover { + /* The :hover selector is used to select elements when you mouse over them. */ + background: #e4f1fe; color: green; } footer { padding: 20px; - background: #22313F; + background: #22313f; color: white; line-height: 40px; } @@ -178,16 +214,17 @@ footer a { /*The @media rule is used in media queries to apply different styles for different media types/devices such as width and height of the viewport or device, resolution, etc*/ -@media only screen and (max-width: 367px) {/*type of media, "screen" indicates it is used for computer screens, tablets, smart-phones etc.*/ +@media only screen and (max-width: 367px) { + /*type of media, "screen" indicates it is used for computer screens, tablets, smart-phones etc.*/ /* #contact{ min-height:1100px; } */ .contact-details { - border: 2px solid #90C695; + border: 2px solid #90c695; border-radius: 0; width: 90px; height: 20px; padding: 10px; - line-height: normal;/*It defines a normal line height. It is the default value of this property */ + line-height: normal; /*It defines a normal line height. It is the default value of this property */ } } diff --git a/index.html b/index.html index 4dd776c..117a31c 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,37 @@ - + - - - Demo Portfolio - - + + Demo Portfolio + + -
+

Hey, I'm Emisha

A web developer

- + - +
-

Let's work together...

-

How do you take your coffee?

+

Let's work together...

+
+ + + + +
Facebook GitHub Twitter - Send a mail Call me
- -
This is just a demo portfolio.. -

© Created by Emisha

-
- + + + - + + \ No newline at end of file