-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathno-sidebar-layout.html
207 lines (188 loc) · 11.2 KB
/
no-sidebar-layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE HTML>
<!--
Strongly Typed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Business Concept Two</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="no-sidebar is-preload">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<!-- Logo -->
<h1 id="logo">This is the no sidebar layout.</h1>
<p>A clean content forward design that eliminates noise</p>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a class="icon solid fa-home" href="index.html"><span>Home</span></a></li>
<li><a class="icon solid fa-cog" href="https://dustin-hays.netlify.app/"><span>Dustin Hays</span></a></li>
<li>
<a href="#" class="icon fa-chart-bar"><span>Dropdown</span></a>
<ul>
<li><a href="no-sidebar-layout.html">No Sidebar Layout</a></li>
<li><a href="left-sidebar-layout.html">Left Sidebar Layout</a></li>
<li><a href="right-sidebar-layout.html">Right SideBar Layout</a></li>
<li><a href="gibberish.html">Gibberish</a></li>
<li><a href="overwhelmed.html">Overwhelmed</a></li>
<li><a href="inspect-tutorial.html">Playing with Responsiveness</a></li>
<li>
<a href="pretend-employees.html">Pretend Employees</a>
<ul>
<li><a href="jane-smith.html">Jane Smith</a></li>
<li><a href="some-guy.html">Sum Guy</a></li>
<li><a href="good-boy.html">Good Boi</a></li>
</ul>
</li>
<li><a href="#email">Make Me a Website</a></li>
</ul>
</li>
<li><a class="icon solid fa-envelope" href="#email"><span>contact</span></a></li>
</ul>
</nav>
</div>
</section>
<!-- Main -->
<section id="main">
<div class="container">
<div id="content">
<!-- Post -->
<article class="box post">
<header>
<h2>Sidebar layouts only really work when accessing a website on a big screen.
</h2>
</header>
<span class="image featured"><img src="images/products.jpg" alt="grocery store" /></span>
<h3>On devices with smaller screens like mobile phones webpage content becomes stacked sending sidebar items towards the bottom of the page
</h3>
<p>So the question you need to ask yourself is, “who is viewing my site?” For example, somebody looking for a bite to eat or a taxi cab is likely to be on a mobile phone; whereas, somebody interested in hiring a contractor or is seeking employment will likely be using a laptop or desktop computer. The beauty of the no sidebar layout is that the layout of your page comes across the same no matter the size of the screen your viewer is working on. Content can be added to the top or bottom of the page as necessary forever and all layout formats can be mixed and matched as needed. No sidebar layouts tend to run a little bit cheaper as well. If you are viewing this website on a desktop or laptop computer now, I have a short tutorial on playing with the responsiveness of this site <a class="clearLink" href="inspect-tutorial.html"><strong> here</strong></a>.
</p>
<ul class="actions">
<li><a href="#email" class="button icon fa-envelope">Contact</a></li>
</ul>
</article>
<article class="box highlight">
<header>
<h3><a href="inspect-tutorial.html">Playing with responsiveness</a></h3>
</header>
<a href="inspect-tutorial.html"> <span class="image featured"><img src="images/question-mark.jpg" alt="question mark"/></span></a>
<h4>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis fuga repudiandae ut dolor itaque maiores praesentium natus error?</h4>
<p>Phasellus sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
<a href="inspect-tutorial.html" class="image left sub"><img src="images/inspect1.png" alt="screen shot" /></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque nesciunt velit ea cupiditate repellat sequi. Quos aperiam impedit et rerum reprehenderit, quia iusto, eos eum earum laborum enim atque dolorum est quo unde! Provident, possimus. Vel, esse. Soluta quos minima dignissimos, reprehenderit impedit dolores nam ab voluptatem autem repellat, sint distinctio sed ullam? Excepturi ratione, odio officia assumenda sequi libero natus consequatur eius enim sapiente nemo cupiditate nihil nisi. Tempora vero perspiciatis rerum cupiditate, cumque adipisci fugiat facere totam dolore odit consequatur dolorem hic quae molestiae reiciendis! Tempore nesciunt sunt aut commodi quos quibusdam illum ducimus expedita. Sit, id facilis?</p>
<a href="inspect-tutorial.html" class="image right sub"><img src="images/inspect3.png" alt="screen shot" /></a>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus, iste pariatur praesentium repudiandae eum corporis! Aspernatur aut, eum dolorum aperiam voluptatum at corrupti provident. Eveniet nobis voluptate, maxime unde aspernatur itaque! Quae ab, nisi, pariatur est vel reprehenderit dolorum sed, aspernatur repellendus eos dolores animi. Cumque exercitationem hic id obcaecati molestiae adipisci ducimus reprehenderit eius, veniam dolorem soluta ipsa minus voluptas nostrum quam non doloremque laudantium delectus totam. Quisquam error quidem facilis cumque consectetur nobis inventore possimus eaque voluptate cum id rerum, nesciunt eum, voluptatum quae adipisci, suscipit doloremque minus esse temporibus earum sequi consequuntur ea dicta. Consequuntur, officia minima.</p>
<ul class="actions">
<li><a href="inspect-tutorial.html" class="button icon solid fa-file">Learn More</a></li>
</ul>
</article>
<article class="box highlight clearfix">
<header>
<h3><a href="gibberish.html">WHAT IS ALL THIS GIBBERISH EVERYWHERE?</a></h3>
</header>
<a href="gibberish.html" class="image left single"><img src="images/gibberish.jpg" alt="gibberish" /></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus incidunt odit corporis saepe praesentium tempora numquam accusamus, earum laborum facere fugit aliquid vero cum nostrum nesciunt ipsum ducimus, quidem voluptates dolorum hic. Cumque dolor doloremque similique placeat fugit dolorum omnis eius. Est, debitis doloremque ut ab minima obcaecati in nobis commodi facere culpa ipsum corporis a! Voluptatibus, porro minus tempora nesciunt optio perferendis hic architecto ab inventore rem omnis et temporibus ex quas nobis quae.</p>
<ul class="actions floatRight">
<li><a href="gibberish.html" class="button icon solid fa-file">Learn More</a></li>
</ul>
</article>
<article class="box highlight">
<header>
<h3><a href="overwhelmed.html">Overwhelmed yet?</a></h3>
</header>
<a href="overwhelmed.html" class="image right single"><img src="images/overwhelmed-crop.jpg" alt="overwhelmed child" /></a>
<p>Phasellus sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias debitis veniam, assumenda modi quidem nemo ad voluptatibus ipsa, magni aut odit, voluptate earum cumque. Quasi omnis, cum, consequatur similique odit dolorum explicabo vitae velit officiis iste totam aliquam ullam quos, deleniti voluptatum minus veniam quibusdam inventore laboriosam? Odio, voluptatibus nam?S</p>
<ul class="actions">
<li><a href="overwhelmed.html" class="button icon solid fa-file">Learn More</a></li>
</ul>
</article>
</div>
</div>
</section>
<!-- Footer -->
<div class="container">
<header id="email">
<h2>Let's get in touch:</h2>
</header>
<div class="row">
<div class="col-6 col-12-medium">
<section>
<form method="post" action="https://getform.io/f/8c1eadda-cdee-44e9-a6e8-6af208416432">
<div class="row gtr-50">
<div class="col-6 col-12-small">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="col-6 col-12-small">
<input name="email" placeholder="Email" type="text" />
</div>
<div class="col-12">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="form-button-submit button icon solid fa-envelope">Send Message</button>
<button id="clear-form" type="reset" class="form-button-submit button icon solid fa-circle">Clear</button>
</div>
</div>
</form>
</section>
</div>
<div class="col-6 col-12-medium">
<section>
<p>Don't be afraid to reach out. I do not upsell or manipulate. It is my goal to be successful and by that mark, I need my clients to be happy and proud of their websites. At the end of the day, it’s you selling my services.
</p>
<div class="row">
<div class="col-6 col-12-small">
<ul class="icons">
<li class="icon solid fa-envelope">
</li>
<li class="icon brands fa-github">
<a class="clearLink" href="github.com/dustinhaysu">github.com/dustinhaysu</a>
</li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="icons">
<li class="icon brands fa-twitter">
<a class="clearLink" href="https://github.com/dustinhaysu">twitter.com/hays_dustin_u</a>
</li>
<li class="icon brands fa-linkedin">
<a class="clearLink" href="https://www.linkedin.com/in/dustin-hays-965898229/">linkedin.com/in/dustin-hays-965898229/</a>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
<div id="copyright" class="container">
<ul class="links">
<li>© Dustin Hays. All rights reserved.</li><li>Design: Business Concept Two</li><li><a class="clearLink" href="#">Back to Top</a> </li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>