Skip to content

Commit

Permalink
Merge pull request #328 from Durgaprasad-Developer/feature-branch
Browse files Browse the repository at this point in the history
Styled Contact Us in index.html
  • Loading branch information
PriyaGhosal authored Oct 8, 2024
2 parents 30315a8 + ed0ccfd commit 6f82a68
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 1 deletion.
1 change: 1 addition & 0 deletions Changed_contact_us_in_index_html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
- primary meta tags
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="style.css">
<title>SkillWise</title>
<meta name="title" content="SkillWise">
<meta name="description" content="This is a education html template made by Priya Ghosal">
Expand Down
85 changes: 85 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
#contact {
padding: 50px 0;
background-color: #008080;
position: relative;
}

#contact .container {
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
}

/* Section Title */
#contact h2 {
font-size: 3.5rem;
text-align: center;
margin-bottom: 80px;
color: #d6eaff;
font-weight: bold;
text-transform: uppercase;
}

/* Contact Form */
#contact-form {
display: flex;
flex-direction: column;
gap: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 30px;
width:160%;
}

/* Input Fields */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
width: 100%;
padding: 15px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s, box-shadow 0.3s;
}

/* Input Focus Effects */
#contact-form input:focus,
#contact-form textarea:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
outline: none;
}

/* Textarea */
#contact-form textarea {
height: 150px;
resize: none;
}

/* Submit Button */
#contact-form button {
background-color: #3498db;
color: #fff;
width:250px;
padding: 15px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

/* Button Hover Effects */
#contact-form button:hover {
background-color: #2980b9;
transform: translateY(-2px);
}

/* Button Focus Effect */
#contact-form button:focus {
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

0 comments on commit 6f82a68

Please sign in to comment.