Arch2

Developer
Dušan Jovanović
Size
5,335 Kb
Views
6,072
  1. Arch2 Previews
  2. Arch2 HTML Codes
  3. Arch2 CSS Codes
  4. Arch2 JS Codes

How do I make an arch2?

What is a arch2? How do you make a arch2? This script and codes were developed by Dušan Jovanović on 10 December 2022, Saturday.

Arch2 Previews
IQ Test

Arch2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Arch2</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<nav>
<ul>	<a href="#order"><li>Order</li></a>	<a href="#stream"><li>Stream</li></a>	<a href="#tour"><li>Tour</li></a>	<a href="#merch"><li>Merch</li></a>	<a href="#mail"><li>Mail</li></a>	<a href="#follow"><li>Follow</li></a>
</ul>
<div class="handle">MENU</div>
</nav>
<div class="yt"> <iframe src="https://www.youtube.com/embed/GktXlCEJ-HU" frameborder="0" allowfullscreen></iframe>
</div>
<script>	$(".handle").click(function(){	$("nav ul").toggleClass("showmenu");	});
</script>
<!-- LINKS -->
<div class="order"> <a name="order"></a> <p> Order the new album: </p>
</div>
<div class="linksorder"> <a href="http://kingsroadmerch.com/architects/region/"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]" /></a> <a href="https://www.impericon.com/en/architects.html?utm_source=facebook.com&utm_medium=referral&utm_campaign=merch_architects_album"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]" /></a> <a href="http://www.emp-online.com/lis_Architects_bandbrand/"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/button_emp.png" /></a> <a href="https://24hundred.net/collections/architects"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/03/[email protected]" /></a> <a href="https://www.amazon.com/dp/B01C8QY2AW?_encoding=UTF8&tag=foundee-20"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/03/[email protected]" /></a> <a href="https://itunes.apple.com/gb/album/all-our-gods-have-abandoned-us/id1088142267?app=itunes"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/03/[email protected]" /></a>
</div>
<a name="stream"></a>
<div class="stream"> <p> Stream music: </p>
</div>
<div class="linksstream"> <a href="https://play.spotify.com/user/architectsukband/playlist/7HAO9R9v203gkaPAgknOMp?play=true&utm_source=open.spotify.com&utm_medium=open"> <img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]" /></a> <a href="https://itunes.apple.com/nl/album/all-our-gods-have-abandoned-us/id1088142267?l=en&app=music"><img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]" /></a> <a href="http://www.deezer.com/album/13110382?utm_source=deezer&utm_content=album-13110382&utm_term=365587425_1464338848&utm_medium=web"> <img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]"/></a> <a href="https://www.youtube.com/watch?v=LpMxRApFkkI&feature=youtu.be&list=PLcZMZxR9uxC_AIPlXYu5lPs_Ly90F7MHg"> <img class="linkimg" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]"/></a>
</div>
<!-- Zato postoji praznina izmedju DIVova? -->
<!-- TOUR -->
<div class="tour"><a name="tour"></a> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/tour_dates-1.png" /> <table> <tbody class="tourwrapperhead"> <tr class="tablehead">	<td> Date </td>	<td> City </td>	<td> Venue </td>	<td> Country </td>	<td> Tickets</td> </tr> </tbody>	<tbody class="tourwrapper odd"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city"Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Graz</td> <td class="venue">Some Festival</td> <td class="country">Austria</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Festival</td> <td class="country">Netherlands</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper even"> <tr> <td class="date">07/01/17</td> <td class="city">Biddinghuizen</td> <td class="venue">Some Other Festival</td> <td class="country">Netherlands </td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody>	<tbody class="tourwrapper"> <tr> <td class="date">07/01/17</td> <td class="city">Tolmin</td> <td class="venue">Some Festival </td> <td class="country">Slovenia</td> <td class="tickets"><a href="" target="_blank"> Buy Ticktes </a></td> </tr>	</tbody> </table> </div> <!-- MERCH -->
<div class="merchALL"><a name="merch"></a> <div> <img class="merch_title" src="http://www.architectsofficial.com/wp-content/uploads/2016/02/merchandise-1.png" /> </div> <div class="merchlinks"> <div class="merchshops"> <p> Visit the Architects <br> webstore at </p> <a id="kingsroad" href="http://kingsroadmerch.com/architects/region/"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]"/></a> <a id="impericon" href="https://www.impericon.com/en/architects.html?utm_source=facebook.com&utm_medium=referral&utm_campaign=merch_architects_album"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/[email protected]"/></a> </div>	<div class="merchbundle"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/03/[email protected]" />	</div> </div>
</div>	<!-- MAIL --> <div class="mailing"><a name="mail"></a> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/mailinglist-1.png"/>
<div class="formwrapper">
<form> <div class="wrapper left">	<lable>First Name:</lable><br>	<input type="text"> </div> <div class="wrapper right"> <lable>Last Name:</lable><br> <input type="text"> </div> <div class="blank"> </div> <div class="wrapper mail"> <lable>Email address*:</lable><br> <input type="email" autocapitalize="off" autocorrect="off" data-msg-required="Please enter your email" required="" aria-required="true"> </div> <div class="wrapper left">	<label> Country: </label>	<select>	<option>Srbija</option>	<option>Crna Gora</option>	<option>Makedonija</option>	<option>Bosna i Hercegovina</option>	<option>Hrvatska</option>	<option>Slovenija</option>	</select> </div> <div class="wrapper right">	<label> Date of Birth: </label>	<input type="date" placeholder="DD-MM-YYYY"> </div> <div class="blank"> </div> <div class="signup"> <input type="submit" class="button" value="SIGN UP"> </div> </form> </div> <div class="powered"> <a href="https://recognitionlondon.com"><img src="http://www.architectsofficial.com/wp-content/uploads/2016/03/recognition.png"/></a> </div> </div> <!-- FOLLOW --> <div class="follow"><a name="follow"></a> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/follow-1.png"/> <div class="followlinks"> <a href="https://www.facebook.com/architectsuk" target="_blank"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/icon_facebook.png"/></a> <a href="https://www.instagram.com/architects"><img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/icon_instagram.png"/></a> <a href="https://twitter.com/Architectsuk"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/icon_twitter.png"/></a> <a href="https://www.youtube.com/user/wearearchitects"> <img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/icon_youtube.png"/></a> </div> <div class="epitaph"> <a href="http://epitaph.com"><img src="http://www.architectsofficial.com/wp-content/uploads/2016/02/epitaph-1.png"/></a> </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Arch2 - Script Codes CSS Codes

body { width: 100%; margin: 0px auto; text-align: center; font-family: Lora; font-size: 18px;
}
nav ul{	padding: 10px 0 10px 0;	margin:0 auto;	background-color: #131212;	list-style: none;	/* position: fixed; */	width:100%;	overflow: hidden;	-webkit-transition: max-height: 1s;	-ms-transition: max-height: 1s;	-moz-transition: max-height: 1s;	-o-transition: max-height: 1s;	transition: max-height: 1s;
}
nav ul li {	display: inline-block;	/* padding: 0 25px 0 25px; */	width: 15%;	border-bottom-style: solid; border-width: 2px;	border-bottom-color: #131212;
}
ul a {	color: #EEEBFF;	text-decoration: none;	font-family:Playfair Display SC;	font-weight: 900;	font-size: 30px;	text-transform: uppercase;
}
ul a:hover {	color: #EEEBFF;	cursor: auto;
}
li:hover {	transition: 0.5s;	/* background-color: #EEEBFF; */	border-bottom-style: solid; border-width: 2px;	border-bottom-color: #EEEBFF;
}
.handle {	color: #EEEBFF;	font-family:Playfair Display SC;	font-weight: 900;	font-size: 30px;	width: 100%;	background: #131212;	text-align: center;	box-sizing: border-box;	padding: 15px 10px;	cursor: pointer;	display: none; /* hides the menu option in wide screens*/
}
@media screen and (max-width:768px) { nav ul {	max-height: 0em; /* hides list in smaller screens */ } .showmenu { max-height: 30em; /* shows list in smaller screens */ }	nav ul li {	width: 100%;	box-sizing: border-box;	padding: 15px;	text-align: center;	}	.handle {	display: block; /* shows menu option in smaller screens */	}	}
.yt {	position: relative;	padding-bottom: 40%;	/* padding-top: 30px; height: 0;	overflow: hidden;*/
}
iframe {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;
}
.order { margin-top: -10px; padding: 30px; color: #EEEBFF; background-color: #131212;
}
.linksorder { padding-top: 0px; padding-bottom: 0px; background-color: #131212;
}
.linksorder img { height: 50px; width: auto; padding-right: 20px;
}
.linksorder img:hover {	opacity: 0.7;
}
.stream {	padding: 10px;	color: #EEEBFF;	background-color: #131212;
}
.linksstream { padding-bottom: 50px; color: #EEEBFF; background-color: #131212;
}
.linksstream img{	height: 50px; width: auto; padding-right: 20px;
}
.linksstream img:hover {	transition: 1s;	opacity: 0.7;
}
.tour img{	max-width:90%;	height: auto;	padding: 50px 0px; margin-bottom:25px;
}
.tour { width: 100%; margin: 0 auto; disply: block; background-color: #f0f0f0;
}
table { margin: 0 auto; width: 80%; text-align: center; border: none; border-collapse: collapse;
}
td, th { vertical-align: bottom; text-align: left; padding: 10px; font-size: 18px; color: #444; font-family: lora;
}
td a {	color: inherit;
}
.tablehead td {	font-weight: bold;	font-size: 20px;
}
@media only screen and (max-width: 768px) {
table{	width: 100%;	margin: 0;
}
table, tbody, th, td, tr { display: block;	}
.tablehead td {	position: absolute;	top: -9999px;	left: -9999px;	}	.even{	background-color: #c4c4c4;	}	td {	/* Behave like a "row" */	position: relative;	padding-left: 100px;	white-space: normal;	text-align: left;	vertical-align: top;	}	td:before {	/* Now like a table header */	position: absolute;	/* Top/left values mimic padding */	top: 5px;	left: 0px;	white-space: nowrap;	font-weight: bold;	display: flex;	}	td:nth-of-type(1):before { content: "Date"; }	td:nth-of-type(2):before { content: "City"; }	td:nth-of-type(3):before { content: "Venue"; }	td:nth-of-type(4):before { content: "Country"; }	td:nth-of-type(5):before { content: "Tickets"; }
}
.merchALL { background-color: #131212; display: inline-block; color: #EEEBFF; width: 100%;
}
.merch_title {	max-width:90%;	margin-bottom: 50px; padding-top: 75px;
}
.merchlinks {	margin: 0 auto;	max-width: 700px;
}
.merchshops {	width: 35%; float: left; text-align: center; padding-top: 100px;
}
.merchshops img { display: block;	margin: 0 auto; height: 70px;
}
.merchbundle img {	display: block;	max-width: 450px;	float: right;
}
.mailing { background-color: #f0f0f0;
}
.mailing img {	max-width:90%;	height: auto;	padding: 50px 0px;
}
@media screen and (max-width: 768px) {	.merchshops {	width: 100%;	height: auto;	text-align: center;	margin: 0 auto;	float: none;	padding: 0;	}	.merchshops img {	display:block;	margin: 0 auto;	max-height: 70px;	height:auto;	max-width: 80%;	}	.merchbundle img{	width: 100%;	height: auto;	margin: 0 auto;	float: none;	}	.merchlinks {	width: 100%;	}
}
form {	text-align: left;	margin:0 auto;	/* width: 100% */	border: 0;	max-width:700px;
}
.wrapper input,
.wrapper select { width: 100%; height: 45px; line-height: 45px; border: 0px; background: #dfdfdf; padding: 0px 10px 0px 10px; outline: none;
}
.mail input {	width: 100%;
}
.wrapper {	width: 100%;	display: block;	margin: 0 0 10px;
}
.wrapper.left {	float: left; width: 48%;
}
.wrapper.right{	float: right; width: 48%;
}
.blank {	clear: both;
}
.signup {	padding: 30px 0; text-align: center;
}
.signup .button {	margin:0 auto;	display: inline-block;	width: 230px; height: 40px; line-height: 40px; background: #000; color: #fff; text-align: center; font-size: 14px; font-weight: 700;	font-family: Lora; cursor: pointer; border: none;
}
@media screen and (max-width: 768px) {	form {	width: 85%;	}	.wrapper.left {	float: none;	width: 100%;	}	.wrapper.right {	float: none;	width: 100%;	}	input, select {	float: none;	width: 100%	}
}
.follow {	display: block;	background-color: #131212;
}
.follow img {	max-width:90%;	height: auto;	padding: 50px 0px;
}
.followlinks img {	padding: 15px;
}
.followlinks img:hover {	transition: 1s;	opacity:0.7;
}
.epitaph img {	width:55px;
}
.epitaph img:hover {	opacity:0.7;
}

Arch2 - Script Codes JS Codes

$(".handle").click(function(){	$("nav ul").toggleClass("showmenu");	});
Arch2 - Script Codes
Arch2 - Script Codes
Home Page Home
Developer Dušan Jovanović
Username Antipop
Uploaded December 10, 2022
Rating 3
Size 5,335 Kb
Views 6,072
Do you need developer help for Arch2?

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!

Dušan Jovanović (Antipop) Script Codes
Name
ARCHitects
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!