Instructions page

Developer
Angelina
Size
2,260 Kb
Views
14,168
  1. Instructions page Previews
  2. Instructions page HTML Codes
  3. Instructions page CSS Codes

How do I make an instructions page?

What is a instructions page? How do you make a instructions page? This script and codes were developed by Angelina on 24 November 2022, Thursday.

Instructions page Previews
IQ Test

Instructions page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instructions page </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>	</head>	<body> <div id="wrappertwo"> <div class="col-1-3 " id="pic1"> <div class="moduletwo">1</div> <div class="textbox1"> </div> </div> <div class="col-1-3" id="pic2"> <div class="moduletwo">2 </div> <div class="textbox1"> </div> </div> <div class="col-1-3" id="pic3"> <div class="moduletwo">3 </div> <div class="textbox1"> </div> </div><!--end of wrapper TWO--> <div id="wrappertwo"> <div class="col-1-3" id="pic4"> <div class="moduletwo">4</div> <div class="textbox1"> </div> </div> <div class="col-1-3" id="pic5"> <div class="moduletwo">5 </div> <div class="textbox1"> </div> </div> <div class="col-1-3" id="pic6"> <div class="moduletwo">6 </div> <div class="textbox1"> </div> </div><!--end of wrapper TWO--> </div> <!--end of wrapper-->
</body>
</html>
</body>
</html>

Instructions page - 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%; }
@media all and (min-width: 1000px) { .col-2-2 { width: 50%; }
#wrappertwo{ height:500px; width: 100%; margin:auto;
}
[class*='col-1-3'] { float:left;
}
}
.col-1-3 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/1pic.png);
background-repeat: no-repeat;
background-size: cover; height:390px; width: 100%;
border: solid white 2px;
overflow:hidden;
}
.textbox1{ margin-top:62px; width:100%; height:270px; background-color:rgba(16,108,140,0.7)
}
#pic1 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/1pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic2 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/2pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic3 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/3pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic4 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/4pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic5 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/5pic.png);
background-repeat: no-repeat;
background-size: cover;
}
#pic6 {
background-image:url(http://angelina-portfolio.com/wordpress_7/wp-content/uploads/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 white 2px; border-radius:25px;
color:white; width:45px;
}
@media all and (min-width: 500px) { .col-1-3 { width: 33.3%; } #wrapper2{
margin-left:50%;
margin-top:0%; height:50px; border: 1px solid black; width: 80px; padding-left: 20px; color: white; text-align: -20px;
}
Instructions page - Script Codes
Instructions page - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 2,260 Kb
Views 14,168
Do you need developer help for Instructions 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!

Angelina (Angelina_Lapteva) Script Codes
Name
A Pen by Angelina
Tooltip
Menu Transitions
Scalable objects
Transition Menu and Video Background
Responsive Login Page
Piechart
Progress bar multiple
Animated
Icons and Grid
Create amazing Facebook ads 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!