Maket

Developer
Evgeniya.urvacheva
Size
6,275 Kb
Views
10,120
  1. Maket Previews
  2. Maket HTML Codes
  3. Maket CSS Codes

How do I make an maket?

What is a maket? How do you make a maket? This script and codes were developed by Evgeniya.urvacheva on 27 December 2022, Tuesday.

Maket Previews
IQ Test

Maket - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>maket</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="UTF-8"> <title>CodePen - base</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <header>
<img class="icon1" src="http://i038.radikal.ru/1503/f3/2d517861e18c.png">
<img class="icon2" src="http://s018.radikal.ru/i516/1503/cf/baff4baa65dd.png"> <form action=""> <input type="text" class="abc-text"> <div class="search-icon"> <div class="circle"></div> <div class="line"></div> </div> <div class="triangle"></div> <div class="lines1"></div> <div class="lines2"></div> <div class="lines3"></div> </form> </header> <div class="middle"> <aside class="left-panel"> <img class="logo" src="http://s019.radikal.ru/i616/1503/7b/ffb39a346d8f.png"> <h6>CONTENTS</h6> <div class="newline"></div> <ol> <li><b>Abstract</b> </li> <div class="newline"></div> <li><b>History</b> </li> <div class="newline"></div> <ol> <li>European contact</li> <li>Major century</li> <li>The revolution</li> <div class="newline"></div> </ol> <li><b>Governance</b> </li> <div class="newline"></div> <li><b>Geography</b> </li> <div class="newline"></div> <ol> <li>Subdvisions</li> <li>Mount pelee</li> <li>Geopolitics</li> <div class="newline"></div> </ol> <li><b>Economics</b> </li> <div class="newline"></div> <li><b>Demographics</b> </li> <div class="newline"></div> <li><b>Culture</b> </li> <div class="newline"></div> <li><b>References</b> </li> <div class="newline"></div> </ol> </aside> <main> <h2>Martinique</h2> <em>"Martinique" redirects here. For others uses, see Martinique</em> <p>Martinique is an island in the Lesser Antilles in the eastern Caribbean Sea, with a land area of 1,128 square kilometres (436 sq mi) and a population of 386,486 inhabitants (as of Jan. 2013). Like Guadeloupe, it is an overseas region of France, consisting of a single overseas department. One of the Windward Islands, it is directly north of Saint Lucia, northwest of Barbados, and south of Dominica.</p> <div class="newline1"></div> <h3>History</h3> <h4>European contact</h4> <p>The island was occupied first by Arawaks, then by Caribs. The Carib people had migrated from the mainland to the islands about 1201 CE, according to carbon dating of artifacts. They largely displaced, exterminated and assimilated the Taino who were resident on the island in the 1494s.</p> <p><img class="images-top" src="http://s018.radikal.ru/i516/1503/77/8b529d051b60.jpg"> </p> </main> <aside class="right-panel"> <h5>MARTINIQUE</h5> <img class="images-right" src="http://s018.radikal.ru/i527/1503/f5/aa7435b7b174.png"> <div class="country"> <strong>Country</strong> </div> <div class="france">France </div> <div class="newline2"></div> <img class="images-map" src="http://s020.radikal.ru/i710/1503/d3/457603cdc5ee.png"> <div class="newline2"></div> <div class="area"> <span class="area"><b>AREA</b></span> <span class="numer1">1128</span><span class="metr1">km<sup><small>2</small></sup></span> </div> <div class="dencity"> <span class="dencity"><b>DENCITY</b></span> <span class="numer2">340</span> <span class="metr2">nab/km<sup><small>2</small></sup></span> </div> <div class="newline2"></div> <img class="images-music" src="http://s50.radikal.ru/i130/1503/78/e1aaae3268e2.png"> </aside> </div> </div>
</body>
</html>
</body>
</html>

Maket - Script Codes CSS Codes

@media screen and (min-width: 400px) { html { background: #71a2c8; } .wrapper { width: 1092px; min-height: 200px; background: none; position: absolute; top: 110px; left: 220px; font-size: 0; } @-webkit-keyframes header-animation { 0% { left: -100%; } 100% { left: 0; } } header { width: 1092px; height: 40px; margin-right: 0 auto; margin-left: 0 auto; animation: header-animation 1s; -webkit-animation: header-animation 1s; background: -moz-linear-gradient(left, #81addb 79%, #789ebf 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(79%, #81addb), color-stop(100%, #789ebf)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #81addb 79%, #789ebf 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #81addb 79%, #789ebf 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #81addb 79%, #789ebf 100%); /* IE10+ */ background: linear-gradient(to right, #81addb 79%, #789ebf 100%); /* W3C */ position: relative; } .abc-text { font-size: 16px; display: inline-block; background: transparent; border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid white; color: white; position: absolute; padding-top: 10px; margin-left: 80px; } .abc-text:focus { outline: 0; } form { position: absolute; width: 500px; height: 40px; margin-right: 0 auto; margin-left: 0 auto; } .search-icon { position: relative; margin: 0 auto; width: 20px; height: 20px; } .circle { position: absolute; width: 10px; height: 10px; border: 2px solid white; border-radius: 30px; top: 11px; left: 36px; } .line { position: absolute; width: 6px; height: 2px; background: white; transform: rotate(40deg); top: 23px; left: 47px; } .triangle { position: absolute; width: 1px; height: 8px; border: 9px solid transparent; border-bottom: 10px solid white; margin-top: -7px; margin-left: 753px; } .lines1 { position: absolute; width: 35px; height: 1.5px; background: white; top: 12px; left: 12px; margin-top: 4px; margin-left: 0px; } .lines2 { position: absolute; width: 35px; height: 1.5px; background: white; top: 14px; left: 12px; margin-top: 8px; margin-left: 0px; } .lines3 { position: absolute; width: 35px; height: 1.5px; background: white; top: 16px; left: 12px; margin-top: 12px; margin-left: 0px; } .icon1 { position: absolute; width: 90px; height: 16px; margin-top: 9px; margin-left: 678px; } .icon2 { position: absolute; width: 29px; height: 16px; margin-top: 9px; margin-left: 1034px; } .left-panel { background: -moz-linear-gradient(left, #f6f9fa 0%, #f6f9fa 91%, #e6e9ea 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f6f9fa), color-stop(91%, #f6f9fa), color-stop(100%, #e6e9ea)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #f6f9fa 0%, #f6f9fa 91%, #e6e9ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #f6f9fa 0%, #f6f9fa 91%, #e6e9ea 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #f6f9fa 0%, #f6f9fa 91%, #e6e9ea 100%); /* IE10+ */ background: linear-gradient(to right, #f6f9fa 0%, #f6f9fa 91%, #e6e9ea 100%); /* W3C */ width: 179px; height: 888px; display: inline-block; margin-left: 0; margin-bottom: 0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; text-decoration: none; list-style-type: none; position: left; top: 180px; padding-top: 0; border: 1px solid #ebeaea; vertical-align: top; } .logo { width: 179px; height: 166px; position: relative; right: 1px; top: -1px; display: inline-block; border: 1px solid #ebeaea; vertical-align: top; } li { display: inline-block; font-size: 12px; font-family: "Segoe UI", Tahoma, Arial, sans-serif; text-decoration: none; text-align: left; list-style-type: none; list-style-image: none; margin-left: 10px; padding-left: 10px; display: block; color: #2f2f2f; text-align: middle; } ol { font-size: 15px; font-family: "Segoe UI", Tahoma, Arial, sans-serif; text-decoration: none; text-align: left; list-style-type: none; margin-left: 10px; padding-left: 10px; display: block; color: #2f2f2f; vertical-align: middle; } h6 { font-family: Segoe UI, Tahoma, Arial, sans-serif; font-size: 10px; color: silver; text-align: center; } main { background: white; width: 599px; height: 840px; display: inline-block; vertical-align: top; text-decoration: none; text-align: center; font-family: "Segoe UI", Tahoma, Arial, sans-serif; padding-left: 30px; padding-right: 20px; padding-top: 50px; } .images-top { display: inline-block; float: center; clear: both; padding-top: 5px; } h2 { font-family: "Adobe Devanagari", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 35px; text-align: left; display: block; padding-left: 20px; padding-right: 15px; padding-left: 30px; padding-top: -17px; } h3 { font-family: "Adobe Devanagari", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 25px; display: inline-block; padding-left: 30px; padding-right: 520px; text-align: left; padding-top: 20px; } h4 { font-family: "Adobe Devanagari", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 20px; text-align: justify; display: block; padding-left: 30px; } p { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 13px; text-align: justify; padding-left: 30px; padding-right: 30px; padding-top: 30px; } em { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 13px; text-decoration: none; background: #d2d3d4; padding: 5px; margin: 5px; border-radius: 10px; display: inline; border: 1px solid #d2d3d4; margin-right: 202px; } .right-panel { background: -moz-linear-gradient(left, #e6e9ea 0%, #f6f9fa 8%, #f6f9fa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e6e9ea), color-stop(8%, #f6f9fa), color-stop(100%, #f6f9fa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #e6e9ea 0%, #f6f9fa 8%, #f6f9fa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #e6e9ea 0%, #f6f9fa 8%, #f6f9fa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #e6e9ea 0%, #f6f9fa 8%, #f6f9fa 100%); /* IE10+ */ background: linear-gradient(to right, #e6e9ea 0%, #f6f9fa 8%, #f6f9fa 100%); /* W3C */ width: 260px; height: 888px; display: inline-block; vertical-align: top; margin-right: 0; margin-bottom: 0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; border: 1px solid #ebeaea; padding-right: 0; padding-left: 0; padding-top: 0; margin-left: -1px; } .images-right { width: 261px; height: 270px; display: inline-block; padding-top: 0; position: right; border-top: 1px solid #ebeaea; border-bottom: 1px solid #ebeaea; } h5 { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 10px; color: silver; width: auto; height: auto; text-align: center; } .country { display: inline-block; text-align: left; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 11px; padding-top: 5px; padding-bottom: 5px; margin-left: 41px; } .france { display: inline-block; text-align: right; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 11px; margin-left: 58px; padding-top: 5px; padding-bottom: 5px; } .images-map { width: 220px; height: 169px; display: inline-block; padding-top: 10px; padding-left: 15px; } .area { display: inline-block; width: 70px; height: auto; text-align: left; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 10px; color: #79C9F1; padding-left: 18px; padding-top: 5px; padding-bottom: 5px; } .numer1 { display: inline-block; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; padding-left: 18px; color: black; vertical-align: 0; text-align: left; } .metr1 { display: inline-block; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; color: grey; padding-left: 3px; } .dencity { display: inline-block; width: 115px; height: auto; text-align: left; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 10px; color: #79C9F1; padding-left: 23px; vertical-align: top; padding-top: 5px; padding-bottom: 5px; } .numer2 { display: inline-block; text-align: center; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; padding-left: 23px; vertical-align: 0; color: black; } .metr2 { display: inline-block; text-align: right; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; padding-left: 0; padding-top: 0; color: grey; } .images-music { width: 220px; height: 64px; display: inline-block; padding-top: 20px; padding-left: 15px; } .newline { height: 1px; width: 100%; background: #e3d6e6; margin-bottom: 22px; } .newline1 { height: 1px; width: 100%; background: #e3d6e6; margin-top: 40px; } .newline2 { height: 1px; width: 100%; background: #e3d6e6; margin-top: 4px; margin-bottom: 4px; }
}
Maket - Script Codes
Maket - Script Codes
Home Page Home
Developer Evgeniya.urvacheva
Username evgeniya
Uploaded December 27, 2022
Rating 3
Size 6,275 Kb
Views 10,120
Do you need developer help for Maket?

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!

Evgeniya.urvacheva (evgeniya) Script Codes
Name
A Pen by evgeniya.urvacheva
Poni
Serch
Base
Html_flex
Triangle
A Pen by evgeniya.urvacheva
Gradient Example
Land_eda_1
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!