Skip to content

Nav and contact form #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Guilleo03 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Nav and contact form #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 88 additions & 51 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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 */
}
}
59 changes: 34 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">

<head> <!-- The <head> element is a container for all the head elements.
<head>
<!-- The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more. -->
<meta charset="UTF-8">
<title>Demo Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>Demo Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<nav>
<ul id='navbar'>
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="containter">
<span>Logo</span>
<ul id='navbar'>
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>

<div id="welcome-section" class="intro">
<div id="welcome-section" class="intro">
<h1>Hey, I'm Emisha</h1>
<p>A web developer</p>
</div>

<div id="projects" class="work">
<h2 class="work-header">These are some of my projects..</h2>


<a href="" class="project project-tile">
<img class="project-pic" src="images/projectbg1.png" alt="project">
<div class="project-title">Demo Project 1</div>
Expand All @@ -54,22 +58,27 @@ <h2 class="work-header">These are some of my projects..</h2>
</a>
<a href="" class="show-all" target="_blank">Show all</a>
</div>

<div id="contact" class="contact">
<div class="header">
<h1>Let's work together...</h1>
<p>How do you take your coffee?</p>
<h2>Let's work together...</h2>
</div>
<form action="">
<input type="text" id="txtName" placeholder="Name">
<input type="email" id="txtEmail" placeholder="E-mail">
<textarea id="txtMsg" placeholder="Your message..."></textarea>
<input type="submit" id="btnSubmit" value="Submit">
</form>
<a href="" target="_blank" class="contact-details">Facebook</a>
<a id='profile-link' href="" target="_blank" class="contact-details">GitHub</a>
<a href="" target="_blank" class="contact-details">Twitter</a>
<a href="mailto:" class="contact-details">Send a mail</a>
<a href="tel:" class="contact-details">Call me</a>
</div>
<footer>This is just a demo portfolio..
<p>&copy; Created by <a href="https://getemisha.tech/" target="_blank">Emisha</a></p>
</footer>

<footer>This is just a demo portfolio..
<p>&copy; Created by <a href="https://getemisha.tech/" target="_blank">Emisha</a></p>
</footer>

</body>
</html>

</html>