Full Site Redesign

Developer
Charlie Volpe
Size
4,238 Kb
Views
10,120
  1. Full Site Redesign Previews
  2. Full Site Redesign HTML Codes
  3. Full Site Redesign CSS Codes
  4. Full Site Redesign JS Codes

How do I make an full site redesign?

Redesign of my website. Tested here on CodePen first. Sleeker than current design.. What is a full site redesign? How do you make a full site redesign? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Full Site Redesign Previews
IQ Test

Full Site Redesign - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Site Redesign</title> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu hide"> <div class="header"> <a><span id="site-title">Site Title</span></a> <span id="menu-icon"><img src="https://goo.gl/3hQUbp"/></span> </div> <div class="items clearfix"> <a><div class="menu-item selected">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> <a><div class="menu-item">Hipster Ipsum</div></a> </div> <div class="footer"> <a><h3 class="footer-item">Email</h3></a> <a><h3 class="footer-item">Twitter</h3></a> <a><h3 class="footer-item">CodePen</h3></a> </div>
</div>
<div class="content"> <div class="content-wrapper"> <h1>Title of Article</h1> <h3>Subtitle of Article</h3> <p style="margin-top: 1em;"> Keffiyeh bitters craft beer, semiotics single-origin coffee vegan fashion axe DIY cliche XOXO. Hashtag drinking vinegar quinoa messenger bag sartorial Odd Future banjo, tote bag polaroid plaid food truck Pinterest Neutra chia cray. Fap swag XOXO irony, pork belly typewriter Wes Anderson Austin keytar locavore sustainable yr bicycle rights. Plaid PBR fanny pack, Cosby sweater locavore hoodie salvia polaroid butcher cred next level YOLO kogi readymade. Street art Etsy bitters before they sold out trust fund selfies, Pitchfork Vice ugh Pinterest single-origin coffee salvia asymmetrical Carles hella. Fap single-origin coffee freegan, narwhal Helvetica you probably haven't heard of them lomo Banksy small batch drinking vinegar Shoreditch Brooklyn Blue Bottle. Letterpress iPhone keytar, 90's ennui Portland organic street art salvia selfies stumptown 8-bit.<br><br> Seitan roof party readymade, Intelligentsia chambray Wes Anderson authentic umami. Polaroid Shoreditch organic, wolf sustainable squid Brooklyn quinoa yr slow-carb Godard you probably haven't heard of them meh American Apparel. Church-key readymade Brooklyn Pinterest, Tonx art party brunch cray pour-over authentic. Meh seitan craft beer squid. Skateboard Odd Future paleo twee Tonx, retro pop-up typewriter seitan church-key swag locavore flannel. Distillery put a bird on it Tonx, Bushwick pickled Helvetica selvage brunch fap messenger bag sustainable pork belly. Banh mi ethnic craft beer Thundercats, small batch VHS 3 wolf moon tote bag polaroid Vice bicycle rights whatever Odd Future.<br><br> Pug readymade meggings pour-over yr, 8-bit blog distillery iPhone flannel. Mlkshk narwhal lo-fi craft beer paleo cliche. American Apparel retro normcore +1 chia small batch. Cosby sweater lomo mlkshk Blue Bottle bespoke locavore. Flexitarian hoodie tofu, Godard Etsy pug YOLO direct trade keffiyeh cred flannel mumblecore. Cornhole semiotics Portland Intelligentsia Odd Future 90's twee. Odd Future Godard Portland, sriracha mlkshk next level bespoke narwhal small batch disrupt fanny pack ethnic slow-carb retro.<br><br> Seitan roof party readymade, Intelligentsia chambray Wes Anderson authentic umami. Polaroid Shoreditch organic, wolf sustainable squid Brooklyn quinoa yr slow-carb Godard you probably haven't heard of them meh American Apparel. Church-key readymade Brooklyn Pinterest, Tonx art party brunch cray pour-over authentic. Meh seitan craft beer squid. Skateboard Odd Future paleo twee Tonx, retro pop-up typewriter seitan church-key swag locavore flannel. Distillery put a bird on it Tonx, Bushwick pickled Helvetica selvage brunch fap messenger bag sustainable pork belly. Banh mi ethnic craft beer Thundercats, small batch VHS 3 wolf moon tote bag polaroid Vice bicycle rights whatever Odd Future.<br><br> Pug readymade meggings pour-over yr, 8-bit blog distillery iPhone flannel. Mlkshk narwhal lo-fi craft beer paleo cliche. American Apparel retro normcore +1 chia small batch. Cosby sweater lomo mlkshk Blue Bottle bespoke locavore. Flexitarian hoodie tofu, Godard Etsy pug YOLO direct trade keffiyeh cred flannel mumblecore. Cornhole semiotics Portland Intelligentsia Odd Future 90's twee. Odd Future Godard Portland, sriracha mlkshk next level bespoke narwhal small batch disrupt fanny pack ethnic slow-carb retro.<br><br> Master cleanse PBR&B pork belly, Brooklyn sriracha narwhal asymmetrical Intelligentsia fingerstache flexitarian leggings cardigan ennui. Bespoke gastropub mustache XOXO Truffaut street art. Fingerstache tofu Truffaut vinyl gluten-free, Helvetica salvia. Chia swag High Life mixtape. Pork belly occupy cardigan, readymade selvage gluten-free Godard asymmetrical. Roof party artisan single-origin coffee, next level Bushwick wolf swag narwhal pork belly sriracha post-ironic. PBR mustache readymade skateboard paleo cray Thundercats, normcore you probably haven't heard of them messenger bag four loko narwhal photo booth DIY seitan. </p> </div>
<div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full Site Redesign - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800);
::-webkit-scrollbar { -webkit-appearance: none; width: 7px;
}
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
* { margin: 0; padding: 0; box-sizing: border-box;
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
body { font-family: 'Open Sans', sans-serif; overflow-x: hidden;
}
.header,
.footer { background: #222; color: #a7a7a7; width: 100%; height: 4em; line-height: 4em; padding: 0 .5em;
}
.footer { text-align: center;
}
.footer-item { display: inline-block; padding-right: .5em;
}
#site-title:hover,
a .footer-item:hover { color: #33a1de; cursor: pointer;
}
#site-title { font-size: 1.75em; font-weight: bold; cursor: default;
}
.menu { position: relative; background: #333; color: #f7f7f7; float: left; width: 100%;
}
.menu-item { float: left; width: 50%; height: 3em; line-height: 3em; text-align: center;
}
a .menu-item:hover{ background: #444; cursor: pointer;
}
#menu-icon { width: 2.5em; line-height: 2.5em; float: right; cursor: pointer;
}
#menu-icon img { width: 100%; margin-top: .6em;
}
.content { position: relative; float: left; width: 100%; padding: 1em;
}
.selected { border-top: 4px solid #33a1de; border-left: none; background: #444;
}
.items{ width: 100%;
}
.show .items,
.show .footer{ display: inline-block;
}
.hide .items,
.hide .footer { display: none;
}
.content-wrapper { margin: 0 auto; width: 100%; max-width: 62em;
}
@media only screen and (min-width: 48em) { .menu { position: fixed; top: 0; bottom: 0; width: 30%; } .menu-item { width: 100%; } .footer { position: absolute; bottom: 0; } .items { position: absolute; top: 4em; bottom: 4em; overflow-y: scroll; overflow-x: hidden; } .selected { border-top: none; border-left: 7px solid #33a1de; border-right: 7px solid #444; } .menu.hide{ width: 3.5em; } .menu.hide #site-title{ display: none; } .menu.hide #menu-icon{ visibility: visible; float: left; } .content { margin-left: 30%; width: 70%; } .menu.hide ~ .content { margin-left: 7%; width: 93%; }
}
@media only screen and (min-width: 78em) { .menu { position: fixed; width: 20%; } .menu-item { width: 100%; } .content { margin-left: 20%; width: 80%; } .menu.hide ~ .content { margin-left: 4%; width: 96%; }
}

Full Site Redesign - Script Codes JS Codes

$('.menu-item').click( function() { $('.menu-item').removeClass('selected'); $(this).addClass('selected');
});
$('#menu-icon img').hover( function() { $('#menu-icon img').attr( "src", "https://goo.gl/9Xife2" ); },function() { $('#menu-icon img').attr( "src", "https://goo.gl/3hQUbp" ); }
);
$('#menu-icon img').click( function(){ if( $('.menu').hasClass('hide') ) { $('.menu').removeClass('hide'); $('.menu').addClass('show'); } else{ $('.menu').addClass('hide'); $('.menu').removeClass('show'); }
});
Full Site Redesign - Script Codes
Full Site Redesign - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 4,238 Kb
Views 10,120
Do you need developer help for Full Site Redesign?

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!

Charlie Volpe (charlie-volpe) Script Codes
Name
RGBA Long Form to Decimal Converter
Simple Battle Game
Responsive Flat Sublime Text Visualization
List Maker
Draggable Finder Window Visualization
IPad CSS Template
Bouncing Ball
Podshare
Simple Blackjack Game
Animated Menu Circles
Create amazing blog posts 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!