Playful Port

Developer
Adz
Size
4,197 Kb
Views
16,192
  1. Playful Port Previews
  2. Playful Port HTML Codes
  3. Playful Port CSS Codes
  4. Playful Port JS Codes

How do I make an playful port?

What is a playful port? How do you make a playful port? This script and codes were developed by Adz on 04 November 2022, Friday.

Playful Port Previews
IQ Test

Playful Port - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playful Port</title> <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="example"> <nav id="NavBar" class="navbar navbar-inverse" role="navigation"> <div class="container-fixed"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#NAVBAR"><!--condenses navi links into box for small screens--> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">¡SLACo!</a> </a> </div> <!--closes navbar header--> <div class="collapse navbar-collapse" id="NAVBAR"> <ul class="nav navbar-nav "> <li><a href="#">About</a></li> <li><a href="#">Port</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- navbar collapse--> </div> <!--container-fluid--> </nav> <div class="container"> <div class="intro container-fluid text-center"> <div class="col-xs-12 col-sm-6"> <h2> MY NAME IS BLAH BLAHH</h2><br> <p>and I Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="col-xs-12 col-sm-5" style="padding: 5% 2%"> <img class="img-responsive img-circle girl center-block" src="http://www.i2symbol.com/templates/2/5/8/3/2583523e1a644ae374f452b94c476a12/canvas.jpg" width="250px" height="300"> <caption><strong>Fabulosus ;)</strong></caption> </div> </div> <!-- row intro --> <div class=" portText container-fluid text-center"> <h2 class="text-center">Portfolio</h2> <p><span style="background-color:#292929; color:white; width:50%; text-align:center; border-radius:10%;">&nbsp; Lorem ipsum dolor sit lol&nbsp;</span></p> <div class="col-xs-12 col-sm-6"> <img class="img-responsive img-rounded" src="http://www.howtogeek.com/wp-content/uploads/2010/03/image5.png"> <img class="img-responsive img-rounded" src="http://img.wonderhowto.com/img/43/20/63539901827181/0/enable-tab-webpage-previews-every-web-browser.w654.jpg"> </div> <div class="col-xs-12 col-sm-6"> <img class="img-responsive img-rounded" src="http://www.icyblaze.com/blog/wp-content/uploads/2012/04/Screen-Shot-2012-04-23-at-4.52.38-PM.png"> <img class="img-responsive img-rounded" src="http://i.huffpost.com/gen/263767/OLD-TWITTER-HOMEPAGE.jpg"> </div> </div> <!--portclass--> <div class="contactText container-fluid text-center"> <h2 class="text-center">Contact Me</h2> <p>Babe babayyyy!</p> <br> <div class="col-xs-12 col-sm-12"> <fieldset class="container-fluid"> <input type="text" name="Name" Placeholder="Nomen"> <br><input type="text" name="Email" placeholder="Email"> <br><input type="text" name="Phone" placeholder="Phone"> <br><textarea rows="7" name="description" style="resize: none" placeholder="Enter description here..">
</textarea> </fieldset> <br><br><button class=btn btn-primary> <span class="glyphicon glyphicon-envelope"></span>Submit </button> </div> </div><!--contactText--> <div class="AboutAround container-fluid text-center center-block"> <div class="col-xs-12 col-sm-6"> <h2>About This Page</h2> <br> <h5> Made with <span class="glyphicon glyphicon-headphones"></span> and <span class="glyphicon glyphicon-heart"></span> <p>by <a href="https://freecodecamp.com">Adz</a> </div> <div class="col-xs-12 col-sm-6"> <h3> Around the WWW girl </h3> <br> <p><a href="#" class="btn btn-circle-lg"> <span class="glyphicon glyphicon-cloud"></span></a> <a href="#" class="btn btn-circle-lg"> <span class="glyphicon glyphicon-music"></span></a> <a href="#" class="btn btn-circle-lg"> <span class="glyphicon glyphicon-tree-deciduous"></span></a> <a href="#" class="btn btn-circle-lg"> <span class="glyphicon glyphicon-bell"></span></a> </div> </div> </div> <!-- closes container --> <div class="panel-footer text-center"> <p> ¡SLACo! &copy; 2097 | No Rights Reserved</p> </div> </div><!-- closes example--> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playful Port - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Bungee+Inline|Open+Sans|Pacifico';
.navbar, .panel-footer { background-color:#292929; border: none; color: #999999;}
body { background-color:white; font-family:'Indie Flower', cursive; font-size:20px; letter-spacing:3px;
}
.intro { margin:-60px 0px -0px 0px; padding:50px; box-shadow: 10px 10px 10px grey; background-image: url('https://www.wallpapergalore.com.au/content/images/thumbs/0000528_light-grey-reflective-silver-embossed-luxury-velvet-wallpaper-10m-roll.jpeg'); background-repeat:repeat;}
.portText { margin:0px; padding:50px; box-shadow: 10px 10px 10px grey; background-color:#Ee9999; color:#292929; background-image: url('http://previews.123rf.com/images/hakkiarslan/hakkiarslan1402/hakkiarslan140200033/26030362-Abstract-colorful-background-Splash-watercolor-background-illustration-Stock-Vector.jpg'); background-repeat: repeat; background-position:-300px top;
}
.contactText { padding:5%; margin:0px; box-shadow: 10px 10px 10px grey; background-color:#26A38C; color:white;
}
.img-rounded, .img-circle{ margin-top:20px; border: 1px dotted #292929; }
img:hover { box-shadow: 5px 1px 10px #292929;
}
h2 { margin:3%; font-size:1.6em;
}
h2, h3 { text-transform:uppercase; font-family: "Pacifico";
}
h2:hover,h3:hover { color:#292929; text-shadow:5px 5px 5px grey;
}
input, textarea{ border:none; background-color:#26A38C; border-bottom: 1px solid #292929; font-size: 20px; width:100%; color:white;
}
input:focus, textarea:focus { background-color: white; color:#292929;
}
.AboutAround { width:100%; margin:0px; padding:70px 70px 110px; box-shadow: 10px 10px 10px grey; background-color:#A39399; color:white;
}
.btn {border: none; background-color:white; color: #292929;}
.btn:hover {background-color:#292929; color:white;}
.btn-circle-lg {border-radius: 100%; padding:4%; text-align:center;}
.btn-circle-lg:hover {background-color:#292929;}

Playful Port - Script Codes JS Codes

/*
- Change about background to Turquoise
- push img circle down more
- use media to have there’s a sticky glyphicon button that takes to top of page with small screen only?
- How to get .navbrand img to be more responsive?
- get header to return when page reaches the bottom.
*/
Playful Port - Script Codes
Playful Port - Script Codes
Home Page Home
Developer Adz
Username aadesida
Uploaded November 04, 2022
Rating 3
Size 4,197 Kb
Views 16,192
Do you need developer help for Playful Port?

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!

Adz (aadesida) Script Codes
Name
AngularJS Shop Layout
Calculator
LSStone Restoration
YouTube Video Page Mock
LSStone Home
Weather
Etch
LSStone Testimonials
Insta
OA
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!