Love for Paris

Developer
BROWNERD
Size
3,200 Kb
Views
28,336
  1. Love for Paris Previews
  2. Love for Paris HTML Codes
  3. Love for Paris CSS Codes

How do I make an love for paris?

Inspired by this Shot on Dribbble Be safe, friends.. What is a love for paris? How do you make a love for paris? This script and codes were developed by BROWNERD on 29 August 2022, Monday.

Love for Paris Previews
IQ Test

Love for Paris - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Love for Paris</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="upper"> <div class="heart"></div> <div class="point"></div> <div class="top"></div> </div> <div class="lower"> <div class="arc"></div> <div class="arc"></div> <div class="semi-circle"></div> <div class="stage-1"></div> <div class="stage-2"></div> </div>
</div>
</body>
</html>

Love for Paris - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; width: 100vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.container { height: 500px; width: 445px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-bottom: 10px solid #333;
}
.upper { background-color: #fff; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 445px;
}
.heart { position: relative; width: 80px; height: 65px; left: 50%; -webkit-animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite;
}
.heart::before,
.heart::after { position: absolute; content: ""; left: 40px; top: 0; width: 40px; height: 60px; background: #f00; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%;
}
.heart::after { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}
.top { background-color: #fff; border: 10px solid #333; height: 20px; width: 50px; left: 50%; bottom: 0; position: absolute; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.point { border: 10px solid #333; border-top: none; border-right: none; border-bottom: none; height: 100px; width: 5px; left: 50%; bottom: 0; position: absolute; -webkit-transform: translate(-30%, 0); transform: translate(-30%, 0);
}
.lower { position: relative; overflow: hidden; -webkit-box-flex: 3; -ms-flex: 3; flex: 3; width: 445px;
}
.arc { border: 10px solid #333; border-radius: 50%; height: 1000px; width: 440px; position: absolute;
}
.arc:nth-child(1) { left: -250px; bottom: -100px;
}
.arc:nth-child(2) { right: -250px; bottom: -100px;
}
.semi-circle { border: 10px solid #333; border-radius: 50%; height: 100px; width: 100px; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 60px); transform: translate(-50%, 60px);
}
[class*=stage] { border: 10px solid #333; border-top: none; border-left: none; border-right: none; height: 20px; position: absolute;
}
.stage-1 { width: 140px; left: 50%; top: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.stage-2 { width: 190px; left: 50%; top: 70%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
@-webkit-keyframes pulse { 0% { -webkit-transform: translate(-49%, -70%) scale(1); transform: translate(-49%, -70%) scale(1); } 50% { -webkit-transform: translate(-49%, -70%) scale(1.2); transform: translate(-49%, -70%) scale(1.2); } 100% { -webkit-transform: translate(-49%, -70%) scale(1); transform: translate(-49%, -70%) scale(1); }
}
@keyframes pulse { 0% { -webkit-transform: translate(-49%, -70%) scale(1); transform: translate(-49%, -70%) scale(1); } 50% { -webkit-transform: translate(-49%, -70%) scale(1.2); transform: translate(-49%, -70%) scale(1.2); } 100% { -webkit-transform: translate(-49%, -70%) scale(1); transform: translate(-49%, -70%) scale(1); }
}
Love for Paris - Script Codes
Love for Paris - Script Codes
Home Page Home
Developer BROWNERD
Username brownerd
Uploaded August 29, 2022
Rating 3.5
Size 3,200 Kb
Views 28,336
Do you need developer help for Love for Paris?

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!

BROWNERD (brownerd) Script Codes
Name
C.Rowe Button
Always be...
CSS SLACK plaid
FCC Tribute page
Circle
Apple Cords
Hellacolor, Flexbox, animation and music
Meditation bean
Cool Beans Button 60fps
DevWars Player
Create amazing SEO content 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!