footer added
This commit is contained in:
shyamtala003
parent
5a167d8c47
commit
8e5e85d299
3 changed files with 242 additions and 7 deletions
BIN
images/shyam_tala.jpg
Normal file
BIN
images/shyam_tala.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
60
index.html
60
index.html
|
|
@ -16,7 +16,7 @@
|
|||
<!-- circular range slider -->
|
||||
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css">
|
||||
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
|
||||
|
||||
|
||||
<!-- general style sheet -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
|
|
@ -27,15 +27,20 @@
|
|||
|
||||
<div class="color_maker color_maker_close">
|
||||
<div class="gradient_card" id="gradient_card_edit">
|
||||
<button id="close"><ion-icon name="close"></ion-icon></button>
|
||||
<input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34" onchange="generateGradient()">
|
||||
<button id="close">
|
||||
<ion-icon name="close"></ion-icon>
|
||||
</button>
|
||||
<input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34"
|
||||
onchange="generateGradient()">
|
||||
<div class="gradient_info">
|
||||
<div class="colors" id="color_inputs">
|
||||
<button id="add_input_btn" onclick="addColorInputer()"><ion-icon name="add-outline"></ion-icon></button>
|
||||
<button id="add_input_btn" onclick="addColorInputer()">
|
||||
<ion-icon name="add-outline"></ion-icon>
|
||||
</button>
|
||||
<input class="color colorinput" type="color" value="#6d28d9" id="c1" oninput="generateGradient()">
|
||||
<input class="color colorinput" type="color" value="#db2777" id="c2" oninput="generateGradient()">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="title_with_copy_btn">
|
||||
<button class="copy_to_clipboard" id="color_maker_copy_btn"
|
||||
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);">
|
||||
|
|
@ -81,13 +86,56 @@
|
|||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="text">Join my newsletter to hear about new projects, content and articles that I publish.</p>
|
||||
<div class="subscription_form">
|
||||
<input type="email" placeholder="Enter your email" name="email" id="email_input">
|
||||
<button class="subscribe">
|
||||
<ion-icon name="mail-outline"></ion-icon> Subscribe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="contributor_desc">
|
||||
<img src="./images/shyam_tala.jpg" class="profile" alt="">
|
||||
<div class="desc">
|
||||
<p class="title">Hey there, 👋</p>
|
||||
<p class="detailed d1">I’m Shyam - a full-stack developer, blogger and the creator of this web app.</p>
|
||||
<p class="detailed d2">I love all things related to front-end development and love connecting with
|
||||
individuals.</p>
|
||||
<a href="https://shyamtala.netlify.app/">Learn more about me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social_links">
|
||||
<a href="#">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
<a href="#">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
</a>
|
||||
<a href="#">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
</a>
|
||||
<a href="#">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="copyright">© <script>
|
||||
let year = new Date().getFullYear();
|
||||
document.write(year);
|
||||
</script> Monogradient. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- ion icon cdn script -->
|
||||
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||
|
||||
<!-- JQuery cdn -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<!-- copy to clipboard -->
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
|
|
|
|||
189
style.css
189
style.css
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
/* code for toast msg */
|
||||
|
|
@ -382,4 +382,191 @@ main.hero_section {
|
|||
.gradient_info p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
padding: 4rem 8%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
justify-content: center;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
footer p.text
|
||||
{
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.subscription_form
|
||||
{
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer input[type="email"]
|
||||
{
|
||||
padding: 10px;
|
||||
border: 2px solid #D1D5DB;
|
||||
font-size: .8rem;
|
||||
width:100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
footer input[type="email"]::placeholder
|
||||
{
|
||||
padding: 10px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
footer input[type="email"]:focus
|
||||
{
|
||||
border: 1px solid #7c3aed;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.subscribe
|
||||
{
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background:linear-gradient(to right, #6d28d9, #db2777);
|
||||
color: #ffffff;
|
||||
font-size: .8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
button.subscribe:hover
|
||||
{
|
||||
background:linear-gradient(90deg,#fd746c, #ff9068);
|
||||
transform: translateY(-10%);
|
||||
box-shadow: 0px 3px 10px #c2c6cc;
|
||||
}
|
||||
|
||||
button.subscribe ion-icon
|
||||
{
|
||||
font-size: 1.2rem;
|
||||
--ionicon-stroke-width: 36px;
|
||||
}
|
||||
|
||||
.contributor_desc
|
||||
{
|
||||
margin-top: 2rem;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.contributor_desc img.profile
|
||||
{
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.desc .title
|
||||
{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.desc .detailed
|
||||
{
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.desc a
|
||||
{
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: #be185d;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.social_links
|
||||
{
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
gap: 1.8rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.social_links a
|
||||
{
|
||||
font-size: 1.3rem;
|
||||
color:#9ca3af;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.social_links a:hover
|
||||
{
|
||||
color:#737982;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
p.copyright
|
||||
{
|
||||
margin-top: .5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width:510px){
|
||||
footer
|
||||
{
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
|
||||
footer p.text
|
||||
{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.subscription_form
|
||||
{
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.subscription_form .subscribe
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contributor_desc
|
||||
{
|
||||
/* flex-direction: column; */
|
||||
gap: .6rem;
|
||||
}
|
||||
|
||||
.desc .detailed.d2
|
||||
{
|
||||
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue