Possible new layout for portfolio

Developer
Orrin Ward
Size
6,038 Kb
Views
4,048
  1. Possible new layout for portfolio Previews
  2. Possible new layout for portfolio HTML Codes
  3. Possible new layout for portfolio CSS Codes
  4. Possible new layout for portfolio JS Codes

How do I make an possible new layout for portfolio?

What is a possible new layout for portfolio? How do you make a possible new layout for portfolio? This script and codes were developed by Orrin Ward on 01 February 2023, Wednesday.

Possible new layout for portfolio Previews
IQ Test

Possible new layout for portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Possible new layout for portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> %header #branding-container %img#header-logo(src="https://orrinward.co.uk/img/header72high.png") %nav %ul.primary-menu %li %span.section-title Work %ul.secondary-menu %li %a Virtual Freshers %a leemail Zapp %a leemail.me %ul.primary-menu %li %a Find Me %ul.primary-menu %li %a CV %span .pdf %ul.primary-menu %li %span.item [email protected] %br/ 07875 417098
#projects-container %article.project %section.information %h1.title Virtual Freshers Fairs %ul.tags %li.webdesign Web Design %li.branding Branding %li.concept Concept %li.frontend Front-end dev %p.description Tonx cred bespoke, drinking vinegar pickled pour-over you probably haven't heard of them. DIY Intelligentsia Truffaut, ugh bespoke chia disrupt. Twee fanny pack McSweeney's, fashion axe polaroid tote bag gentrify blog. Beard pop-up post-ironic salvia XOXO. %section.visual %article.project %section.information %h1.title leemail Zapp %ul.tags %li.webdesign Web Design %li.branding Branding %li.concept Concept %li.frontend Front-end dev %p.description McSweeney's umami cliche, PBR kale chips squid mlkshk tofu Vice PBR&B. Vinyl 3 wolf moon wayfarers, squid readymade beard ugh aesthetic scenester whatever 8-bit. Terry Richardson try-hard hella Wes Anderson. Semiotics raw denim jean shorts gastropub messenger bag VHS lomo. %section.visual %article.project %section.information %h1.title leemail.me %ul.tags %li.webdesign Web Design %li.branding Branding %li.concept Concept %li.frontend Front-end dev %p.description Wolf gluten-free flexitarian, gentrify banjo roof party tote bag pour-over post-ironic synth. Pitchfork hoodie sriracha, Helvetica Shoreditch ugh freegan 90's PBR&B paleo Intelligentsia fashion axe. Mixtape ethical fanny pack you probably haven't heard of them viral. %section.visual %article.project %section.information %h1.title Octavia & Brown %ul.tags %li.webdesign Web Dev %li.wordpress Wordpress %li.frontend Front-end dev %p.description Pinterest XOXO PBR&B readymade, organic occupy chia ugh kogi banjo. Vegan paleo brunch blog direct trade Pitchfork, narwhal Portland forage Terry Richardson ethnic viral. Art party ethnic Tonx, skateboard Odd Future occupy keytar paleo single-origin coffee Shoreditch you probably haven't heard of them locavore. %section.visual %article.project %section.information %h1.title Sound / Social %ul.tags %li.webdesign Web Design %li.branding Branding %li.concept Concept %li.frontend Front-end dev %p.description Salvia art party ethnic chia, craft beer McSweeney's vegan. Cliche food truck try-hard, Schlitz +1 vegan gastropub vinyl scenester distillery organic beard paleo hoodie. You probably haven't heard of them Echo Park skateboard, church-key bitters YOLO Etsy. %section.visual %img(src="https://www.orrinward.co.uk/img/large/orrin.jpg")/ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Possible new layout for portfolio - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600);
html { height: 100%;
}
body { font-family: 'Open Sans', sans-serif; background-color: #F9F9F9; color: #333; font-size: 13px; height: 100%; line-height: 1.8em;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; margin-bottom: 0.5em;
}
h1 { font-size: 36px;
}
h2 { font-size: 28px;
}
h3 { font-size: 16px;
}
header { width: 190px; height: 100%; background-color: #333; color: #F9F9F9; position: fixed; top: 0; left: 0;
}
header #branding-container { text-align: center; line-height: 0;
}
header #branding-container img { display: inline-block;
}
header ul.primary-menu { border-bottom: 1px dotted rgba(240, 240, 240, 0.3);
}
header ul.secondary-menu { display: none;
}
header ul.secondary-menu li { text-indent: 12px;
}
header ul.expanded-menu .section-title::before { content: "— ";
}
header ul.expanded-menu .secondary-menu { display: block;
}
header ul li a, header ul li span.section-title { -webkit-transition: all 0.3s linear; padding: 12px 24px; display: block; font-weight: 600;
}
header ul li a:hover, header ul li span.section-title:hover { color: #FF6666; cursor: pointer; cursor: hand; border-right: 12px solid #F9F9F9;
}
header ul li a, header ul li span.section-title, header ul li span.item { -webkit-transition: all 0.3s linear; padding: 12px 24px; display: block; font-weight: 600;
}
#projects-container { width: 100%; height: 100%; padding-left: 190px;
}
#projects-container article.project { padding: 24px; background: #ffb3b3;
}
#projects-container article.project:nth-child(even) { background: #ffe6e6;
}
#projects-container article.project section.information h1.title { width: 570px; float: left;
}
#projects-container article.project section.information p.description { clear: both; width: 760px;
}
#projects-container article.project section.information ul.tags { width: 380px; display: block; float: left; text-align: right;
}
#projects-container article.project section.information ul.tags li { padding-bottom: 10px; display: inline-block; padding: 2px 3px; background: yellow; border-radius: 2px; color: white;
}
#projects-container article.project section.information ul.tags li.wordpress { background-color: #bf4040;
}
#projects-container article.project section.information ul.tags li.frontend { background-color: #206020;
}
#projects-container article.project section.information ul.tags li.concept { background-color: #4040bf;
}
#projects-container article.project section.information ul.tags li.webdesign { background-color: #602060;
}
#projects-container article.project section.information ul.tags li.branding { background-color: #206060;
}
#projects-container article.project section.visual { margin-top: 20px; width: 950px; background: white;
}
#projects-container article.project section.visual img { width: 100%;
}

Possible new layout for portfolio - Script Codes JS Codes

$('.section-title').click(function(){ $(this).closest('.primary-menu').toggleClass('expanded-menu');
});
Possible new layout for portfolio - Script Codes
Possible new layout for portfolio - Script Codes
Home Page Home
Developer Orrin Ward
Username orrinward
Uploaded February 01, 2023
Rating 3
Size 6,038 Kb
Views 4,048
Do you need developer help for Possible new layout for portfolio?

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!

Orrin Ward (orrinward) Script Codes
Name
Expandable block items.
Elephants Full screen site
AfG App launcher slug SCSS
Lnd-health-check
Markerly Demo
Clunky visual filtering based on classes
Super Discount
A Pen by Orrin Ward
Bootstrap form HAML
MCB Blog Style
Create amazing love letters 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!