Bumble Coming Soon Page

Developer
Rachel McGrane
Size
2,176 Kb
Views
36,432
  1. Bumble Coming Soon Page Previews
  2. Bumble Coming Soon Page HTML Codes
  3. Bumble Coming Soon Page CSS Codes

How do I make an bumble coming soon page?

What is a bumble coming soon page? How do you make a bumble coming soon page? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Bumble Coming Soon Page Previews
IQ Test

Bumble Coming Soon Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bumble Coming Soon Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><span class="secondary">Hello,</span>Bumble</h1> <p>A tiny web design and development agency that&rsquo;s coming soon.</p>	<h2>Who are we?</h2> <section class="about"> <div class="profile ryan"> RM <div class="inside"> <a href="#"><span class="entypo-twitter"></span></a> <a href="#"><span class="entypo-mail"></span></a> </div> </div>
<div class="profile jake"> JB <div class="inside"> <a href="#"><span class="entypo-twitter"></span></a> <a href="#"><span class="entypo-mail"></span></a> </div> </div>
</section>
</body>
</html>

Bumble Coming Soon Page - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { box-sizing: border-box;
}
body { font-family: 'Source Sans Pro', sans-serif; line-height: 1.6; margin: 0; background: #ffd54b; text-align: center; margin: 50px 0; color: #fff;
}
h1 { font-family: 'Fredoka One', sans-serif; font-weight: normal; font-size: 7rem; margin: 0; line-height: 1; color: #fff; position: relative; display: inline-block;
}
.secondary { font-size: .3em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,.6); position: absolute; left: 2.3em;
}
p { font-size: 1.5rem; font-weight: 300; margin: 0;
}
.about { overflow: hidden; width: calc(180px + 2rem); margin: 0 auto;
}
.profile, .inside { width: 90px; height: 90px; background: #91b5a4; border-radius: 50%; line-height: 90px; font-size: 2rem; font-weight: 300; cursor: pointer;
}
.profile { float: left; margin: 0 1rem; position: relative;
}
h2 { font-weight: 700; font-size: 2.5rem; margin: 3rem 0 .5rem;
}
.inside { display: none; position: absolute; top: 0; left: 0; font-size: 1.3rem; transition: all .2s;
}
.profile:hover .inside { display: block;
}
.inside a { padding: 0 .3rem; color: rgba(255,255,255,.6); text-decoration: none; display: inline-block;
}
.inside a:hover { color: #fff;
}
.ryan { margin: 0 1rem 0 0;
}
.jake { margin: 0 0 0 1rem;
}
Bumble Coming Soon Page - Script Codes
Bumble Coming Soon Page - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 2,176 Kb
Views 36,432
Do you need developer help for Bumble Coming Soon Page?

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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Site Header
Data Input Form
Wireframe Concept
Greensock Light Switch
Pride Flags
Audio Player WIP
SVG Audio Wave Loader
Kerbal Space Program Buy Button
Ship Name Lookup
Angular-Meteor Showcase
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!