Funny Pet Facebook Concept

Developer
Collin Chappell
Size
5,087 Kb
Views
2,024
  1. Funny Pet Facebook Concept Previews
  2. Funny Pet Facebook Concept HTML Codes
  3. Funny Pet Facebook Concept CSS Codes

How do I make an funny pet facebook concept?

This is a fun little project I did, it is Facebook, for pets! This is just a concept, not a real thing.. What is a funny pet facebook concept? How do you make a funny pet facebook concept? This script and codes were developed by Collin Chappell on 03 February 2023, Friday.

Funny Pet Facebook Concept Previews
IQ Test

Funny Pet Facebook Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Funny Pet Facebook Concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="right wrap">	<div class="header">	<div class="profile">	<img src="http://lh6.ggpht.com/y955XcOnfgg2WJjv16Z5Km8IH5Jdp0YVEzeDKaG2RXFOvS-gRce7mRgzq9uQApBuzZBqMNF4RG9X10MRFJtwiQ=s285-c">	<p>Kaboodles</p>	</div>	</div>	<div class="friends">	<div class="friend">	<img src="http://www.cattell.net/devon/BlackCats/face%20buster_2079.jpg">	</div>	<div class="friend">	<img src="http://images.mooseyscountrygarden.com/cats-and-dogs/big-face-stumpy-cat.jpg">	</div>	<div class="friend">	<img src="http://www.cattell.net/devon/BlackCats/face_8126.jpg">	</div>	<div class="friend">	<img src="https://i.telegraph.co.uk/multimedia/archive/02314/jiff-pomeranian_2314965k.jpg">	</div>	<div class="friend">	<img src="https://taylorsdigigracelim.files.wordpress.com/2014/07/flp_20101028_4541_a.jpg">	</div>	<div class="friend">	<img src="https://s-media-cache-ak0.pinimg.com/originals/f5/c2/22/f5c22256deb2420370e4976f6b6e6f2e.jpg">	</div>	<div class="friend">	<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no/photo.jpg">	</div>	<div class="friend">	<img src="http://www.orangedonkey.net/wp-content/uploads/2010/12/fashion-cats-models2.jpg">	</div>	<div class="friend">	<img src="http://www.adamsinsurance.com/sites/adamsins.com/files/cat-models-04865.jpg">	</div>	<div class="friend">	<img src="http://www.cattell.net/devon/BlackCats/face%20buster_2079.jpg">	</div>	</div>	<div class="about">	<div class="aMenu">	<ul>	<li>Overview</li>	<li>Work and Education</li>	<li>Places You Have Lived</li>	<li>Basic Info</li>	<li>Family and Relationships</li>	<li>Details About You</li>	</ul>	</div>	<div class="basic">	<ul>	<li>Name: Kaboodles</li>	<li>Born: April 7, 2009</li>	<li>Lives: Nashville, TN</li>	<li>Occupations: Sleeping and Cat Modeling</li>	<li>School: Doesn't Need It, Im Smarter Then You All</li>	</ul>	</div>	</div>	<div class="photos">	<div class="photo">	<img src="http://wallfon.com/walls/animals/cat-in-the-grass-under-a-tree-wallpaper-animals-cats.jpg">	</div>	<div class="photo">	<img src="http://wallfon.com/walls/animals/cat-in-the-grass-under-a-tree-wallpaper-animals-cats.jpg">	</div>	<div class="photo">	<img src="http://wallfon.com/walls/animals/cat-in-the-grass-under-a-tree-wallpaper-animals-cats.jpg">	</div>	<div class="photo">	<img src="http://wallfon.com/walls/animals/cat-in-the-grass-under-a-tree-wallpaper-animals-cats.jpg">	</div>	</div>
</div>
<div class="left wrap">	<div class="post">	<div class="title">	<p>I Hate Humans!</p>	</div>	<div class="pBody">	<p>I hate the humans that live in my house! I was sleeping on the couch, when BAM, they're petting me! I was burning with rage, so I swiped their arms, leaving a nice bloody scratch. >:)</p>	</div>	</div>	<div class="post">	<div class="title">	<p>PetBook Is Amazing!</p>	</div>	<div class="pBody">	<p>So I have been using this site, PetBook, and its great! I can share my thoughts with the world of pets. Every pet should</p>	</div>	</div>	<div class="post">	<div class="title">	<p>Ownership Of A New Home!</p>	</div>	<div class="pBody">	<p>So I was sitting in the street, being adorable as always, when this family comes and picks me up, and takes me to a house. They brought me in, and then I gained ownership of it, along with the family who are now my slaves. I have to keep the slave's attitudes in check every now and then with a nice claw swipe. Other than that, it's decent, although I prefer mansions, this shack will do for now.</p>	</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://raw.githubusercontent.com/nbartlomiej/foggy/foggy-1.1.1/jquery.foggy.min.js'></script>
</body>
</html>

Funny Pet Facebook Concept - Script Codes CSS Codes

body { margin: 0; overflow: hidden;
}
::-webkit-scrollbar { width: 9px; height: 10px;
}
::-webkit-scrollbar-track { background: #eee;
}
::-webkit-scrollbar-thumb { background: #aaa;
}
.right { position: absolute; top: 0; left: 0; width: 50%; height: 100vh; background: #eee; overflow-y: scroll; overflow-x: hidden; transition: width 1.6s;
}
.header { position: relative; height: 256px; width: 100%; background: #ddd;
}
.profile { background: url(http://wallfon.com/walls/animals/cat-in-the-grass-under-a-tree-wallpaper-animals-cats.jpg); background-size: 125% 200%; background-position: center center; background-repeat: no-repeat; height: 256px; width: 100%;
}
.profile img { position: relative; top: 17.5%; display: block; width: 128px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4); margin: 0 auto;
}
.profile p { position: relative; padding: 6px 6px; border-radius: 5px; width: 148px; background: rgba(0, 0, 0, 0.6); top: 25.75%; font-size: 24px; font-family: sans-serif; font-weight: 100; color: #fff; text-align: center; margin: 0 auto;
}
.buttons { position: absolute; bottom: 0px;
}
.buttons .pBtn { width: 155.75px; text-align: center; background: rgba(0, 0, 0, 0.1); height: 48px; margin: 0px -1px; display: inline-block; transition: all 0.2s;
}
.buttons .pBtn:hover { background: rgba(0, 0, 0, 0.05); cursor: pointer;
}
.buttons .pBtn p { position: relative; font-family: sans-serif; font-size: 18px; top: -4px;
}
.about { position: relative; width: 100%; background: rgba(0, 0, 0, 0.1); padding: 1px 0px; border-bottom: 1px solid #bbb; height: 188px;
}
.about .aMenu { position: absolute; top: 0; width: 35%; height: 188px; background: #fff; padding: 1px 0px; display: inline-block; overflow: hidden;
}
.about .aMenu ul { margin-left: -36px;
}
.about .aMenu ul li { font-family: sans-serif; font-weight: 100; padding: 4px 4px; list-style: none; color: rgba(0, 0, 0, 0.6); transition: all 0.3s; border-left: 3px solid transparent; cursor: pointer;
}
.about .aMenu ul li:nth-child(1) { color: black; border-left-color: #ED4337;
}
.about .aMenu ul li:hover { color: black; border-left-color: #ED4337;
}
.basic { position: absolute; top: 0; left: 35%; width: 65%; height: 188px; background: #fff; display: inline-block; overflow: hidden;
}
.basic ul li { list-style: none; font-family: sans-serif; font-weight: 100; padding: 6.8px 4px; list-style: none; color: rgba(0, 0, 0, 0.6); transition: all 0.3s; cursor: pointer;
}
.friends { height: 84px; background: #ccc; width: 100%; padding: 8px 8px; box-sizing: border-box; white-space: nowrap; overflow-x: scroll; overflow-y: hidden;
}
.friends .friend { padding: 0px 8px; display: inline;
}
.friend img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #fff; background: rgba(0, 0, 0, 0.2);
}
.photos { width: 100%; background: #ccc; box-sizing: border-box; padding: 6px;
}
.photo { width: 23.85%; height: 102px; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.4); margin: 2px 2px; display: inline-block;
}
.photo img { width: 100%; height: 102px; transition: all 0.3s;
}
.photo img:hover { -webkit-transform: scale(1.1);
}
.left { position: absolute; top: 0; right: 0; width: 50%; height: 100vh; background: #fff; overflow-y: scroll; padding-top: 0px; box-sizing: border-box; transition: all 1.6s;
}
.post { position: relative; width: 90%; margin: 24px auto; background: #eee; border-radius: 5px; box-sizing: border-box; border: 1px solid #ccc; padding-top: 32px; font-family: sans-serif; font-weight: 100;
}
.post .title { position: absolute; top: 0; border-bottom: 1px solid #ccc; height: 32px; width: 100%; text-align: center;
}
.post .title p { position: relative; top: -15px; font-size: 20px;
}
.post .pBody { width: 95%; margin: 0 auto;
}
Funny Pet Facebook Concept - Script Codes
Funny Pet Facebook Concept - Script Codes
Home Page Home
Developer Collin Chappell
Username Keubix
Uploaded February 03, 2023
Rating 3
Size 5,087 Kb
Views 2,024
Do you need developer help for Funny Pet Facebook Concept?

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!

Collin Chappell (Keubix) Script Codes
Name
Profile Page
Parallax navigation
Frosted Glass Navigation Bar
Info Revealing Hover Effects
Flip Out Navigation Concept
Frosted Glass Panels
Mac OS X Mockup
A Pen by Collin Chappell
DART Website Design
Enjin Navigation Bar Creator
Create amazing sales emails 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!