Stuckture1

Developer
Vivi Lai
Size
2,483 Kb
Views
40,480
  1. Stuckture1 Previews
  2. Stuckture1 HTML Codes
  3. Stuckture1 CSS Codes

How do I make an stuckture1?

What is a stuckture1? How do you make a stuckture1? This script and codes were developed by Vivi Lai on 04 August 2022, Thursday.

Stuckture1 Previews
IQ Test

Stuckture1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>stuckture1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="header"> <li class="logo"> <a href="https://www.pinterest.com/virginie52129/"><img src="https://s-media-cache-ak0.pinimg.com/736x/a6/a0/d5/a6a0d5377333da39b3896c80c793a34f.jpg" height="60"></a> </li> <ul class="wrap"> <li> <a href="#">menu2</a> <ul> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> </ul> </li> <li><a href="#">menu1</a> <ul> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> <li><a href="#">01</a></li> </ul> </li> <li><a href="#">about</a></li> </ul> </div> <div class="content"> <div class="control"> <ul class="control_point1"> <li><img src="https://s-media-cache-ak0.pinimg.com/736x/d3/30/a1/d330a1c8250cc6ba94a2a01a093c6ae5.jpg" height="50px"> </ul> <ul class="control_point2"> <li><img src="https://s-media-cache-ak0.pinimg.com/236x/cd/ee/51/cdee5137d91e4f93c084d96ae34f6d22.jpg" height="50px"> </ul> </div> <div class="change_images"></div> </div> <div class="footer"> </div>
</body>
</body>
</html>

Stuckture1 - Script Codes CSS Codes

/*歸零*/
body,
ul,
li,
ol,
td { margin: 0; padding: 0
}
ul,
li { list-style: none;
}
/* all */
body { background-color: rgba(0, 0, 0, 0.1);
}
/* header */
.header { position: fixed; width: 100%; height: 80px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center;
}
.logo > a { float: left; padding: 0 30px; margin: 10px;
}
.wrap > li { position: relative; right: 20px; float: right; width: 120px; background-color: #fff;
}
.wrap > li:hover > ul { /* top: 80px; */ height: 400px; z-index: 0;
}
.wrap > li > ul { position: absolute; float: left; width: 100%; height: 0; overflow: hidden; transition: height 0.8s; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.wrap > li > ul > li { background-color: white;
}
li > a { display: block; height: 20px; color: rgba(0, 0, 0, 0.8); font-family: "Helvetica", Georgia, Serif; padding: 30px; text-decoration: none;
}
/* change th link color on hover */
li > a:hover { height: 20px; padding: 30px; background-color: #555; color: white;
}
/* content */
.control_point1{ position: absolute; top: 200px; left: 20px;
}
.control_point1{ margin:10px 0; border: 5px solid white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.control_point2{ position: absolute; top: 280px; left: 20px;
}
.control_point2{ margin:10px 0; border: 5px solid white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.control_point1:hover { position: absolute; top: 80px; left: 0px; width: 100%; height: 100%; background: url('https://s-media-cache-ak0.pinimg.com/736x/d3/30/a1/d330a1c8250cc6ba94a2a01a093c6ae5.jpg') no-repeat 0 0; background-size: 100%; border: 50px solid rgba(0, 0, 0, 0.8); z-index: 1;
}
.control_point2:hover { position: absolute; top: 80px; left: 0px; width: 100%; height: 100%; background: url('https://s-media-cache-ak0.pinimg.com/236x/cd/ee/51/cdee5137d91e4f93c084d96ae34f6d22.jpg') no-repeat 0 0; background-size: 100%; border: 50px solid rgba(0, 0, 0, 0.8);
}
.content { width: 100%; height: 960px; background: url('https://d13yacurqjgara.cloudfront.net/users/103971/screenshots/727430/attachments/69148/iPad_iPhone_Clyp_Calendar.jpg') no-repeat 0 0; z-index: -1; background-size: 100%;
}
Stuckture1 - Script Codes
Stuckture1 - Script Codes
Home Page Home
Developer Vivi Lai
Username Vivi_Lai
Uploaded August 04, 2022
Rating 3
Size 2,483 Kb
Views 40,480
Do you need developer help for Stuckture1?

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!

Vivi Lai (Vivi_Lai) Script Codes
Name
V_V try
Tabs_test_1
0615-1
A Pen by Vivi Lai
Tabs_test_2
Vi_p_003
Activity Planning
Stuckture1-2
Initialization
Menu
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!