Skip to content
Snippets Groups Projects
Commit 19f3b616 authored by AB0410's avatar AB0410
Browse files

contact page final scaling and modification done

parent 5bca21e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
demo/contact.css
+ 19
− 1
View file @ 19f3b616
@import url(colors.scss);/*# sourceMappingURL=contact.css.map */
\ No newline at end of file
.parent {
animation: fadeInAnimation ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.parent {
display: flex;
align-items: center;
height: 80vh;
}/*# sourceMappingURL=contact.css.map */
\ No newline at end of file
demo/contact.css.map
+ 1
− 1
View file @ 19f3b616
{"version":3,"sources":["contact.scss"],"names":[],"mappings":"AAAQ,wBAAA","file":"contact.css"}
\ No newline at end of file
{"version":3,"sources":["contact.scss","contact.css"],"names":[],"mappings":"AAAA;EACI,oCAAA;EACA,4BAAA;EACA,6BAAA;ACCJ;;ADEA;EACI;IACI,UAAA;ECCN;EDCE;IACI,UAAA;ECCN;AACF;ADEA;EACI,aAAA;EACA,mBAAA;EACA,YAAA;ACAJ","file":"contact.css"}
\ No newline at end of file
demo/contact.html
+ 23
− 31
View file @ 19f3b616
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./src/star.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="contact.css">
<title>Contact</title>
</head>
<body>
......@@ -37,37 +37,29 @@
</nav>
<!------------------------------------------------------ CONTACT PAGE -->
<section class="contact" id="contact">
<h1>CONTACT ME</h1>
<form action="https://formspree.io/test" method="post">
<div class="input-wrapper">
<div class="parent container-fluid">
<div class="container mt-4">
<h1>CONTACT ME</h1>
<form class="row g-3">
<div class="col-md-6">
<label for="inputName4" class="form-label">Your name</label>
<input type="name" class="form-control" id="inputName4">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Your email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<label for="inputMsg" class="form-label">Your message</label>
<input type="text" class="form-control" id="inputMsg" placeholder="Hello, I need you to make me a website for my e-commerce business.">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
<div class="input-group">
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="input-group">
<label for="email">Email address</label>
<input type="text" id="email" name="email" placeholder="Enter your email">
</div>
</div>
<div class="input-wrapper-1">
<div class="input-group-1">
<label for="message">Your message</label>
<input type="text" id="message" name="message" placeholder="Hello, I need you to make me a website for my e-commerce business.">
</div>
</div>
<div class="input-wrapper-submit">
<button type="submit">Submit</button>
<a class="ig" href="https://www.instagram.com/" target="_blank"><img src="./src/instagram-svgrepo-com.svg" alt="My Instagram"></a>
<a class="fb" href="https://www.facebook.com/" target="_blank"><img src="./src/facebook-svgrepo-com.svg" alt="My Facebook"></a>
<a class="gh" href="https://github.com/" target="_blank"><img src="./src/github-svgrepo-com.svg" alt="My Github repo"></a>
</div>
</form>
</section>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
......
demo/contact.scss
+ 20
− 1
View file @ 19f3b616
@import url(colors.scss);
\ No newline at end of file
.parent {
animation: fadeInAnimation ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.parent{
display: flex;
align-items: center;
height: 80vh;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment