Brens thing

Developer
Colm Hewson
Size
4,542 Kb
Views
14,168
  1. Brens thing Previews
  2. Brens thing HTML Codes
  3. Brens thing CSS Codes
  4. Brens thing JS Codes

How do I make an brens thing?

What is a brens thing? How do you make a brens thing? This script and codes were developed by Colm Hewson on 28 November 2022, Monday.

Brens thing Previews
IQ Test

Brens thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>brens thing</title> <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="main"> <div class="fullpage"> <h1>Brendan Hewson</h1> <h3>Illustration / Design / Cartoon</h3> <div class="btn-wrapper"> <a class="btn btnport"> View Portfolio </a> <a class="btn"> About </a> </div> </div> <div id="gal" class="gallery"> <div class="gutter"> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/fish.jpg);"> "I'm not a fan of Fish." </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/oc.jpg);"> Alba Eon </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/uni.jpg);"> Unicorn Jailbreak </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/brain_crop.jpg);"> Brian Spacebrain </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/portrait_crop.jpg);"> Cartoon Self-Portrait </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/character_crop.png);"> Strongman </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/jolien.png);"> Jolien </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/dog.jpg);"> The Family Dog </div> <div class="gallery-item" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/card_crop.jpg);"> Comic Themed Card </div> </div> </div> <footer class="footer"> © Brendan Hewson </footer>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://github.com/miguel-perez/smoothState.js/blob/master/jquery.smoothState.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Brens thing - Script Codes CSS Codes

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; }
}
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; }
}
body { margin: 0; border: 0; padding: 0; font-family: 'Helvetica', 'verdana', sans-serif; width: 100%; height: 100%; overflow-x: hidden;
}
div { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
.container { width: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; align-content: center;
}
footer { flex: 1 1 5rem; width: 100%; color: white; min-height: 5rem; background-color: black; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center;
}
.fullpage { flex: 1 1 100vh; max-height: 100vh; width: 100%; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/uni_fullpagecrop.jpg); background-size: cover; background-position: top center; background-color: #5A8291; background-blend-mode: overlay; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center; font-family: 'Baloo', cursive; text-transform: uppercase; padding: 1rem;
}
.fullpage h1 { font-size: 5rem; line-height: 1; margin: 0; color: white; text-align: center; transition: all ease 0.3s;
}
@media screen and (max-width: 360px) { .fullpage h1 { font-size: 4rem; }
}
.fullpage h3 { font-size: 2rem; line-height: 1; padding: 0rem 1rem; margin: 0; color: white; text-align: center;
}
@media screen and (max-width: 360px) { .fullpage h3 { font-size: 2rem; }
}
.btn-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; padding: 1rem;
}
.btn-wrapper .btn { flex: 1 1; min-width: 7rem; font-size: 1rem; line-height: 1; background: white; color: #457fca; text-transform: uppercase; font-weight: 700; height: 2rem; text-align: center; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; align-content: center; margin: 1rem; padding: 1rem 2rem; border-radius: 2rem; cursor: pointer; transition: all ease 0.3s; -webkit-user-select: none; user-select: none;
}
.btn-wrapper .btn:hover { background: #457fca; color: white;
}
.btn-wrapper .btn:active { transition: all ease 0.25s; box-shadow: inset 0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}
.gallery { flex: 1 1; width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; padding: 2rem 0rem;
}
.gutter { flex: 0 0 100%; max-width: 60rem; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;
}
.gallery-item { flex: 1 1 16rem; height: 16rem; width: 16rem; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 1rem; padding: 1rem; transition: all ease 0.25s; cursor: pointer; background-blend-mode: overlay; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; font-size: 2rem; color: rgba(255, 255, 255, 0); font-family: 'Baloo', cursive; animation-duration: 0.25s; transition-timing-function: ease-in; animation-fill-mode: both;
}
.gallery-item:hover { background-color: rgba(0, 0, 0, 0.5); color: white;
}

Brens thing - Script Codes JS Codes

$(".btnport").click(function() { $('html,body').animate({ scrollTop: $(".gallery").offset().top}, 'ease');
});
$(function() { $('#main').smoothState();
});
Brens thing - Script Codes
Brens thing - Script Codes
Home Page Home
Developer Colm Hewson
Username legofsalmon
Uploaded November 28, 2022
Rating 3
Size 4,542 Kb
Views 14,168
Do you need developer help for Brens thing?

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!

Colm Hewson (legofsalmon) Script Codes
Name
Get a Route - Draft
SVG Icons Template - Event
A Pen by Colm Hewson
Get a Route - Draft v02
Get a Route - Draft v04 - Flexbox Test
Breadcrumbs for motor journey top bar thing.
Listy - Version 1
SVG Icons Template
Des1gnon Logo - Testing the Wave Pattern
SVG Animate Test
Create amazing web 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!