Scalable objects

Developer
Angelina
Size
3,924 Kb
Views
14,168
  1. Scalable objects Previews
  2. Scalable objects HTML Codes
  3. Scalable objects CSS Codes
  4. Scalable objects JS Codes

How do I make an scalable objects?

Here is responsive and scalable background and vector objects. What is a scalable objects? How do you make a scalable objects? This script and codes were developed by Angelina on 24 November 2022, Thursday.

Scalable objects Previews
IQ Test

Scalable objects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scalable objects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	</head>	<body> <div class="bgblue"><!--RED GUY--> <div class="objectwrapper"> <!--GREEN GUY--> <div class="pencil"> <img src="http://angelinalapteva.com/keepimg/pencil.png" class="pencil1" > </div>	<div class="usb"> <img src="http://angelinalapteva.com/keepimg/usb.png" class="usb1" > </div> <div class="coffee"> <img src="http://angelinalapteva.com/keepimg/coffee.png" class="coffee1" > </div> <div class="laptop"> <img src="http://angelinalapteva.com/keepimg/laptop.png" class="laptop1" > </div> <div class="forpad">	<div class="idea"> <img src="http://angelinalapteva.com/keepimg/idea.png" class="idea1" > </div></div>	<div class="charts"> <img src="http://angelinalapteva.com/keepimg/charts.png" class="charts1" > </div> </div> <!-- end of object wrapper-->	</div> <!--end WRAPPER-->	<div class="buttonwrapper"> <div class="col-2-2"> <div class="module">REGISTER</div>	</div>	<div class="col-2-2"> <div class="module">LOGIN </div>
</div> <!--END Button Wrapper--> <div id="texthold"> <a href="#wrappertwo">INSTRUCTIONS</a></div>
<div id="wrapper2">	<div class="arrow"> <li> <i class="fa fa-arrow-down fa-2x" class="settings"></i><a href="#wrappertwo"> </a> </li></div> </div> <!--end WRAPPER2-->
</div> <!-- end of first page bgblue--> <div id="wrappertwo"> <div class="col-1-3 " id="pic1"> <div class="moduletwo">1</div> <div class="textbox1">This web site is created for the people who are intrested to get feedback on their products before they actually create it. &nbsp 1. Register on the web site and then login.</div> </div> <div class="col-1-3" id="pic2"> <div class="moduletwo"> 2</div> <div class="textbox1"> When you are logged in you can create a post, where you will explain your idea more detailed. After your post is complete it will wait for the approval of administrator.</div> </div> <div class="col-1-3" id="pic3"> <div class="moduletwo">3 </div> <div class="textbox1"> Send the email to the address : [email protected] with amount of comments you want to have. </div> </div><!--end of wrapper TWO--> <div id="wrappertwo"> <div class="col-1-3" id="pic4"> <div class="moduletwo">4</div> <div class="textbox1">Then you will get reply from administrator during one day with names of posts on which you need to give a feedback. </div> </div> <div class="col-1-3" id="pic5"> <div class="moduletwo">5 </div> <div class="textbox1"> Sincee you are done with giving a feedback to any others ideas, your post will be posted and you will get the feedback.</div> </div> <div class="col-1-3" id="pic6"> <div class="moduletwo">6 </div> <div class="textbox1"> Have a good luck!</div> </div><!--end of wrapper TWO--> </div> <!--end of wrapper-->
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Scalable objects - Script Codes CSS Codes

*{ /* better to do spacing in griid with padding but not with margin*/ margin:0; box-sizing:border-box; /* expand out of words */
}
body{	width:100%; height:100%; }
.bgblue {
height:100%;
background-color: #2B9BCC;
}
.objectwrapper{ height:700px; width:100%; overflow:hidden;
}
img { width:100%; height:100%;
}
.pencil {
float:right; width:7%;
}
.usb {
float:right; width:4%;
}
.laptop { width:25%; top:-20%; left:-5%;
float:left;
}
.charts { width:25%;
}
.coffee {
float:right; width:17%;
}
.forpad{ padding-top:10%;
}
.idea {
margin-left:20%;
padding-left:20%;
width:45%;
}
.buttonwrapper { margin-left:20%; position:absolute; width:60%; top:50%;
}
.col-2-2{
float:left; height:50px; width: 100%; } .module { height: 80%; margin-left: 25%; margin-right: 25%; text-align: center; padding-top: 5px; border-radius: 5px; border: solid 2px; border-color: rgba(224, 224, 224, 1); color: white; -webkit-transition: background-color 0.5s, border-color 0.5s; transition: background-color 0.5s, border-color 0.5s;
}
.module:hover {
background-color: #1D5F75; border-color: rgba(224, 224, 224, 0);
}
@media all and (min-width: 800px) { .col-2-2 { width: 50%; }
#wrappertwo{ height:500px; width: 100%; margin:auto;
}
#wrappertwo div{ border: 1px solid gray;
}
[class*='col-1-3'] { float:left;
}
.col-1-1 { width: 100%; height:200px; background-size: cover;
}
.moduletwo{ border: 1px solid black;
}
@media all and (min-width: 1000px) { .col-1-3 { width: 33.3%; } #wrapper2{
margin-left:50%;
margin-top:0%; height:50px; width: 80px; padding-left: 20px; color: white; text-align: -20px;
}
#texthold{
margin-top:10%;
margin-left:48.5%; border: 2px solid white; width: 120px; color: white;
}
.arrow {	width: 40px;	height: 40px;	border: solid white 2px;	border-radius: 50%;
} li{
display:inline; padding-left:10%; padding-top:10%; } .cont{ position:relative; float:left; transition: 0.5s; margin-left:0px; } #wrappertwo{ height:500px; width: 100%; margin:auto;
}
.col-1-3 {
background-repeat: no-repeat;
background-size: cover; height:390px; width: 100%;
border: solid white 2px;
overflow:hidden;
}
.textbox1{ color:#2b9bcc; margin-top:62px; font-family: 'Open Sans', sans-serif; width:100%; height:270px; background-color:rgba(0,0,10,0.7); padding:12%; text-align:justify; transition: color 0.3s,
}
.textbox1:hover{ color:white; font-size:18px;
}
#pic1 {
background-image:url(http://angelinalapteva.com/keepimg/1pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic2 {
background-image:url(http://angelinalapteva.com/keepimg/2pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic3 {
background-image:url(http://angelinalapteva.com/keepimg/3pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic4 {
background-image:url(http://angelinalapteva.com/keepimg/4pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic5 {
background-image:url(http://angelinalapteva.com/keepimg/5pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic6 {
background-image:url(http://angelinalapteva.com/keepimg/6pic.png);
background-repeat: no-repeat;
background-size: cover;
}
.col-1-3:hover
{
}
.col-1-1 { width: 100%; height:200px; background-size: cover;
}
.moduletwo{ margin-top:10px; margin-left:40%; padding: 2%; font-size:20px; font-family: 'Roboto', sans-serif; text-align:center; border: solid #2b9bcc 2px; border-radius:25px;
color:white; width:45px; color:#2b9bcc; transition:color 0.3s;
}
@media all and (min-width: 500px) { .col-1-3 { width: 33.3%; } #wrapper2{
margin-left:50%;
margin-top:0%; height:50px; width: 80px; padding-left: 20px; color: white; text-align: -20px;
}

Scalable objects - Script Codes JS Codes

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
Scalable objects - Script Codes
Scalable objects - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 3,924 Kb
Views 14,168
Do you need developer help for Scalable objects?

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!

Angelina (Angelina_Lapteva) Script Codes
Name
Progress bar multiple
SVG Animation diagramm
A Pen by Angelina
3d looking button
Instructions page
Icons and Grid
Tooltip
Responsive Login Page
Week_3_session
Week 2 Session
Create amazing art & images 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!