Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Glasgow 6 |Haroun alarabi | HTML-CSS-Coursework-Week4 #300

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

Glasgow 6 |Haroun alarabi | HTML-CSS-Coursework-Week4 #300

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
4 changes: 4 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"livePreview.defaultPreviewPath": "/index.html",
"liveServer.settings.port": 5501
}
124 changes: 124 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/forms.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7./css/font-awesome.min.css" />
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<title>Responsive grid project</title>
</head>
<body>
<header class="header">
<nav class="navBar">
<div class="head-logo">
<div class="head-square"></div>
<div class="logo-title">
<h1> Maya Nelson </h1> <span id="slash-head">/</span>
<p id="title">project Management</p>
</div>
</div>
<div class="header-menu">
<button class="hamburger">
<div class="bar"></div>
</button>
<div class="header-links hide-for-mobile">
<a class="active" href="index.html">ABOUT ME</a>
<a href="resume.html">RESUME</a>
<a href="projects.html">PROJECTS</a>
<a href="contact.html">CONTACT</a>
</div>
</div>
</nav>
<nav class="mobile-nav">
<a class="active" href="index.html">ABOUT ME</a>
<a href="resume.html">RESUME</a>
<a href="projects.html">PROJECTS</a>
<a href="contact.html">CONTACT</a>

</nav>
</header>

<!-- Add your markup here -->

<main class="form-container">
<div>
<h1 class="head-form"><i class="fa fa-square " id="square"></i>Let's talk</h1>

</div>
<div>
<form action="submit" method="post" class="form">
<div>
<div class="fname-lname">
<label for="fname">First Name *
<input type="text" class="form-input" id="fname" name="fname" required></label>

<label for="lname">Last Name *
<input type="text" class="form-input" id="lname" name="lname" required></label >

</div>


<label for="email">Email *
<input type="email" class="form-input" id="email" name="email" required>
</label>
<label for="subject">subject *
<input type="text" class="form-input" id="subject" name="subject">
</label>


<textarea class="form-input" > Message</textarea>
<div class="BTN"><button type="submit" class="sub-btn">Send</button></div>



</div>




</form>


</div>



</main>
<footer class="footer-container">
<div class="contact-details">
<div class="phone">
<p class="caption">Call</p>
<p>012-336-545</p>
</div>
<div class="email">
<p class="caption">Write</p>
<a href="email">info@mysite.com</a>
</div>
<div class="social">
<p class="caption">Follow</p>
<div class="social-menu">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-github"></a>
</div>
</div>
</div>
<p class="rights">&copy;2023 by Haroun</p>
</footer>

<p>
This website design was created by Wix.com, and is used here for
strictly educational purposes.
</p>
</div>
</body>

</html>
64 changes: 64 additions & 0 deletions css/colors&fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/* Define font and color variables */

.menu-button {
display: inline-block;
cursor: pointer;
position: relative;
user-select: none;
}

.menu-line {
display: block;
width: 36px;
height: 4px;
border-radius: 4px;
background-color: #2a2222;
position: absolute;
left: 0;
transition: all 0.3s ease;
}

.menu-line:nth-child(1) {
top: 12px;
}

.menu-line:nth-child(2) {
top: 24px;
}

.menu-line:nth-child(3) {
top: 36px;
}

.menu {
position: absolute;
top: 60px;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}

.menu-open .menu {
height: auto;
visibility: visible;
opacity: 1;
}

.menu-open .menu-line:nth-child(1) {
transform: rotate(45deg);
top: 24px;
}

.menu-open .menu-line:nth-child(2) {
opacity: 0;
}

.menu-open .menu-line:nth-child(3) {
transform: rotate(-45deg);
top: 24px;
}

174 changes: 174 additions & 0 deletions css/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
.form-container {
background-color: var(--dark-beige);
position: static;
height: auto;
min-height: 200px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr;
width: 320px;
margin: auto;
padding-top: 150px ;



font-family: Poppins;
gap: 20px;


}

.form {
display: block;

justify-content: center;
background-color: white;
padding: 20px;
margin: 0px 0px;
padding-bottom: 90px;
}
.form-container > div:nth-child(1) {
grid-column: 1/-1;
display: flex;
justify-content: center;
padding: 10px;
}
h1 {
margin: 10px;
}
#square {
padding: 10px;
}

.form-container > div:nth-child(2) {
grid-column: 1/-1;
}
.form-input {
border: none;
border-bottom: 3px solid black;
width: 90%;
padding: 10px;
margin: 0px 5px;
height: auto;
}
label {
margin: 0px 10px;
border: none;
}
.form-input:hover {
border: none;

border-bottom: 3px solid blue;
}
.form-input:active,
:visited {
border: none;
}
.form-input:active {
border: none;
}
.sub-btn {
width: 96px;
height: 26px;
text-transform: uppercase;
border: none;
border-radius: 13px;
background-color: #0050ff;
color: beige;
margin-left: 70px;
margin-top: 20px;
}


@media screen and (min-width: 580px){
.form-container{
width: 100%;


}
.form-container > div{
display: grid;
grid-template-columns: 1fr ;
justify-content: center;
align-items: center;
padding: 0px 0px;
margin: 50px auto;
width:50%;

gap: 20px;


box-shadow: var(--shd,0 1px 4px rgba(0,0,0,.6));
}
.form-container > div:nth-child(1){
background-color: none ;
height: 0px;
box-shadow:none;
margin: 10px auto;



}
.form-container >div:nth-child(2){
display: flex;
flex-direction: column;
justify-content: center;
width: 679px ;

}

label {

margin: 0px 10px;
border: none;
}
.form-input {
border: none;
border-bottom: 3px solid black;
width: 100%; /* set the width to 100% to fill the container */
height: 40px; /* adjust the height to your preference */
padding: 5px 1px ;
margin: 5px 4px ; /* adjust the margin to your preference */
}

.fname-lname{
display: flex;
gap: 50px ;
padding: 1px px ;
width: 100%;
margin: 1px px;
padding-top:20px;


}
.form{
width: 100%;

}












.sub-btn {
width: 96px;
height: 26px;
text-transform: uppercase;
border: none;
border-radius: 13px;
background-color: #0050ff;
color: beige;
margin-left: 70px;
margin-top: 20px;

float:right;
}

}
Loading