Wireframe Concept

Developer
Rachel McGrane
Size
3,771 Kb
Views
32,384
  1. Wireframe Concept Previews
  2. Wireframe Concept HTML Codes
  3. Wireframe Concept CSS Codes

How do I make an wireframe concept?

What is a wireframe concept? How do you make a wireframe concept? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Wireframe Concept Previews
IQ Test

Wireframe Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wireframe Concept</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="main-head">
</header>
<div class="subhead">	<div class="subhead-container cf">	<div class="account">	<i class="fa fa-navicon other-blogs"></i>	<span class="icon"></span>	<span class="url">effyeahpapertowns</span>	</div>	<div class="stats">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	<div class="stat">	<span class="stat-number">2915</span>	<span class="stat-name">Posts</span>	</div>	</div>	</div>
</div>	<div class="content cf">	<nav class="main-nav">	<ul>	<li><a class="active" href="#"><i class="fa fa-pie-chart"></i>Link</a></li>	<li><a href="#"><i class="fa fa-pie-chart"></i>Link</a></li>	<li><a href="#"><i class="fa fa-pie-chart"></i>Link</a></li>	</ul>	</nav>	<section class="block">	<h2 class="title">Title</h2>	<div class="block-content graph">	</div>	</section>	<section class="other-block cf">	<div class="block-content">	<div class="widget">	<span class="pie"></span>	</div>	<div class="widget">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	</div>	<div class="widget">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	</div>	</div>	</section>	</div>
<section class="block full cf">	<div class="content">	<h2 class="title">Title</h2>	<div class="widgets">	<div class="widget">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	</div>	<div class="widget">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	</div>	<div class="widget">	<div class="stat">	<span class="stat-number">4077</span>	<span class="stat-name">Followers</span>	</div>	</div>	</div>	</div>
</section>
<div class="content">	<section class="block">	<h2 class="title">Title</h2>	<div class="block-content graph">	</div>	</section>
</div>
<footer class="main-footer">
</footer>
</body>
</html>

Wireframe Concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
* { box-sizing: border-box;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
body { font-family: 'Proxima Nova', sans-serif; background: #f5f5f5;
}
.main-head { height: 55px; background: #aaa;
}
.subhead { overflow: hidden;
}
.subhead-container { max-width: 60%; margin: 0 auto; padding-bottom: 1rem; border-bottom: 1px solid #dedede; position: relative;
}
.account { float: left;
}
.icon { width: 65px; height: 65px; background: #dedede; display: inline-block; border-radius: 50%; margin-top: 3rem; position: relative; z-index: 200; border: 3px solid #fff;
}
.other-blogs { font-size: 1.5rem; color: #aaa; position: absolute; top: 50%; margin-top: -10px; left: -10px; z-index: 100;
}
.url { font-size: 1.875rem; font-weight: 300; display: inline-block; position: relative; top: -23px; padding-left: 16px; color: #555;
}
.stats { float: right;
}
.stat { text-align: center; display: inline-block; padding: 4rem 1.5rem 0;
}
.stat-number { font-size: 1.5rem;
}
.stat-name { display: block; font-weight: 700; text-transform: uppercase; color: #aaa; margin-bottom: 2rem;
}
.content { width: 60%; margin: 0 auto; padding-bottom: 3rem;
}
.main-nav { clear: both; padding-top: 2rem;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; text-align: center;
}
.main-nav li { display: inline-block; padding: 0 1rem; position: relative; top: 2px;
}
.main-nav a { display: inline-block; color: #777; text-decoration: none; font-size: 1.35rem; font-weight: 300; padding: .5rem 1rem .875rem;
}
.main-nav .fa { display: inline-block; font-size: 1rem; padding: 0 .5rem 0 0; position: relative; top: -2px;
}
.main-nav .active { border-bottom: 3px solid #aaa;
}
.content { clear: both;
}
.block { background: #fff; padding: 0 1.5rem 1.5rem; margin-top: 3rem;
}
.block .title { margin: 0 0 1.5rem; background: #aaa; margin-top: 0; padding: .5rem 1rem; display: inline-block; font-weight: 700; text-transform: uppercase; font-size: 1rem; color: #fff; letter-spacing: 1.5px;
}
.block .graph { width: 100%; height: 200px; background: #efefef;
}
.widget { float: left; width: 33.33%; display: block;
}
.pie { background: #aaa; width: 150px; height: 150px; border-radius: 50%; display: block;
}
.other-block { overflow: hidden; padding-top: 3rem; margin-bottom: -1rem;
}
.other-block .widget { margin-bottom: 0; padding-bottom: 0;
}
.block.full { margin-bottom: 4rem;
}
.block.full .stat { padding-top: 1.5rem; padding-bottom: 0;
}
.main-footer { background: #222; height: 200px;
}
Wireframe Concept - Script Codes
Wireframe Concept - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 3,771 Kb
Views 32,384
Do you need developer help for Wireframe Concept?

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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Kerbal Space Program Buy Button
Pride Flags
Ship Name Lookup
Site Header
Data Input Form
A Pen by Rachel McGrane
Bumble Coming Soon Page
Rainbow Preloader with Offset-Path
SVG Audio Wave Loader
Audio Player WIP
Create amazing marketing copy 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!