A Pen by Anthony Koch
How do I make an a pen by anthony koch?
What is a a pen by anthony koch? How do you make a a pen by anthony koch? This script and codes were developed by Anthony Koch on 06 November 2022, Sunday.
A Pen by Anthony Koch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Anthony Koch</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700|Lora|PT+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- https://dribbble.com/shots/2263808-Menu-From-The-Sea
-->
<div class="wrapper"> <div class="background background--dark"> <div class="background background--green"> <div class="content"> <div class="Card"> <h1 class="Card__title">From the sea</h1> <div class="Card__something">Red Salmo<span>n</span></div> <p class="Card__caption"> Sockey salmon Oncorhynchus nerka from the Pacific Ocean on his slate with fresh vegetables. </p> </div> <div class="image"></div> </div> </div> </div>
</div>
</body>
</html>
A Pen by Anthony Koch - Script Codes CSS Codes
html { /* box-sizing: border-box */
}
* { /* box-sizing: inherit */
}
body { background-color: #DCE1E7; color: #788A94; margin: 0 0;
}
.wrapper { max-width: 1100px; min-width: 1100px; margin: 0 auto;
}
.background { box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1), 10px 30px 40px 1px rgba(0, 0, 0, 0.15), 30px 50px 80px 1px rgba(0, 0, 0, 0.15); overflow: visible;
}
.background--dark { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #2D3A4B; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 100px;
}
.background--green { background-color: rgba(174, 200, 85, 0.95); width: 100%; -webkit-transform: translate(-50px, 0px); transform: translate(-50px, 0px); padding: 0 140px 100px 40px;
}
.image { background-image: url("https://images.unsplash.com/reserve/tHTHup3YTN6XsLwf43vY_IMG_8003.jpg?fit=crop&fm=jpg&h=800&ixlib=rb-0.3.5&q=80&w=1600"); background-position: 26% bottom; background-size: 200%; background-repeat: no-repeat; box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1), 10px 30px 40px 1px rgba(0, 0, 0, 0.15), 30px 50px 80px 1px rgba(0, 0, 0, 0.15); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: visible; -webkit-transform: scale(1.2); transform: scale(1.2); max-width: 500px;
}
.Card { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1), 10px 30px 40px 1px rgba(0, 0, 0, 0.15), 30px 50px 80px 1px rgba(0, 0, 0, 0.15); overflow: visible; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 70px; max-width: 500px;
}
.Card__title { color: #D7A694; font-family: Lora; font-size: 26px; letter-spacing: 1px; text-transform: uppercase;
}
.Card__something { border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; font-size: 52px; font-family: Oswald; font-weight: bold; letter-spacing: 14px; text-align: center; text-transform: uppercase; position: relative; margin: 25px 0;
}
.Card__something > span { letter-spacing: 0px;
}
.Card__something:before, .Card__something:after { content: ""; background-color: #ddd; position: absolute; height: 2px; width: 80%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.Card__something:before { top: -12px;
}
.Card__something:after { bottom: -12px;
}
.Card__caption { font-family: Lora; font-size: 18px; line-height: 1.8; max-width: 280px; text-align: center;
}
.content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); width: 120%;
}
Developer | Anthony Koch |
Username | anthonykoch |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 3,739 Kb |
Views | 18,216 |
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!
Name | Size |
Wordpress Admin Redesign | 11,947 Kb |
The difference between text centering and container centering | 2,782 Kb |
Discord login page | 4,180 Kb |
Testing nth-child | 4,608 Kb |
Testing css specificity | 1,912 Kb |
Single occurence | 2,503 Kb |
Testing absolute in padding | 1,703 Kb |
Testing upcoming height values | 3,073 Kb |
Calculator | 21,683 Kb |
Settings Page | 16,757 Kb |
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!
Name | Username | Size |
Buttons with style | Chbymnky | 2,082 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!