Flat-style drawer Contact Me

Developer
Takane Ichinose
Size
2,441 Kb
Views
14,168
  1. Flat-style drawer Contact Me Previews
  2. Flat-style drawer Contact Me HTML Codes
  3. Flat-style drawer Contact Me CSS Codes

How do I make an flat-style drawer contact me?

Font used: https://www.google.com/fonts#UsePlace:use/Collection:Roboto. What is a flat-style drawer contact me? How do you make a flat-style drawer contact me? This script and codes were developed by Takane Ichinose on 10 November 2022, Thursday.

Flat-style drawer Contact Me Previews
IQ Test

Flat-style drawer Contact Me - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat-style drawer Contact Me</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="b"> <h1>Just click on the "Contact Me" below</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact" class="c"> <a href="#contact" class="cl">Contact Me</a> <div class="ct"> <div class="t"> <label>Name</label> <input type="text" /> </div> <div class="t"> <label>Email (Required)</label> <input type="text" /> </div> <div class="t"> <label>Message</label> <textarea rows="3"></textarea> </div> <div class="t a-r"> <a href="#" class="bt">Cancel</a> <button class="bt p">Submit</button> </div> </div>
</div>
</body>
</html>

Flat-style drawer Contact Me - Script Codes CSS Codes

* { font-family: "Roboto", sans-serif; padding: 0; margin: 0;
}
body { font-size: 15px;
}
.b { padding: 70px;
}
.b > h1 { margin-bottom: 10px;
}
.c { background: #262626; width: 350px; height: 300px; position: fixed; bottom: -300px; right: 20px; transition: bottom 0.5s ease-in-out;
}
.c:target { bottom: 0;
}
.cl { text-decoration: none; color: white; background: #262626; height: 30px; line-height: 30px; padding: 0 10px; display: block; position: absolute; top: -30px; right: 20px;
}
.ct { padding: 30px 30px 0;
}
.t { margin-bottom: 10px;
}
.t > label { font-size: 12px; color: white;
}
.t > input[type="text"],
.t > textarea { font-size: 15px; color: white; background: #424242; width: 100%; padding: 5px; border: none; outline: none; box-sizing: border-box; transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.t > input[type="text"]:focus,
.t > textarea:focus { color: black; background: white;
}
.t > textarea { resize: none;
}
.bt { font-size: 15px; color: black; background: #e8e8e8; display: inline-block; border: none; outline: none; padding: 8px 12px; text-decoration: none;
}
.bt:active { background: #f4f4f4;
}
.bt.p { color: white; background: #2974ff;
}
.bt.p:active { background: #3689ff;
}
.a-r { text-align: right;
}
@media (max-width: 767px) { .c { width: auto; left: 40px; right: 40px; }
}
Flat-style drawer Contact Me - Script Codes
Flat-style drawer Contact Me - Script Codes
Home Page Home
Developer Takane Ichinose
Username takaneichinose
Uploaded November 10, 2022
Rating 4
Size 2,441 Kb
Views 14,168
Do you need developer help for Flat-style drawer Contact Me?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Takane Ichinose (takaneichinose) Script Codes
Name
Cow drawing
Navbar login
CSS Candle
Bootstrap dialog box
Responsive Full-page Parallax Slider
CRUD Table with JSON
Parallax scrolling
Hangman game
Pure CSS Off-Canvas with Bootstrap
Pure CSS Full-page navigation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!