Think outside the div

Developer
Mandy Michael
Size
3,910 Kb
Views
6,072
  1. Think outside the div Previews
  2. Think outside the div HTML Codes
  3. Think outside the div CSS Codes

How do I make an think outside the div?

Just my thoughts about creativity and the web..you know when you're thinking and you can't sleep until it's all out. Well this is what I was thinking about. Enjoy!. What is a think outside the div? How do you make a think outside the div? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Think outside the div Previews
IQ Test

Think outside the div - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Think outside the div</title> <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> <div class="section">	<h1>Thinking outside the div</h1>
</div>
<div class="section">	<div class="section__content">	<h2>I love the web.</h2>	<p>It connects us with people and information. It breaks down borders and there is so much we can do with it.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>I have a passion...</h2>	<p>for css and front end web development.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>It's exciting</h2>	<p>I can take what is an empty box and with one selector make it into something new and beautiful.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>To me, this is art, this is creativity. </h2>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>I’m saddened</h2>	<p>That so many people view code as some kind of logical, dry thing that is just for <em>‘nerds’</em>.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>Being a nerd is wonderful</h2>	<p>A nerd is someone who is passionate, they pour their heart and soul into learning, creating and thinking!</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>Being a nerd does not make you a robot, it’s actually the opposite.	</h2>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>Code has logic, but you
still have to think creatively	</h2>	<p>You make something with numbers, letters and symbols and decide how it will come together to create something new!</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>There is a misconception	</h2>	<p>People think that code is restrictive. That it prevents and limits creativity.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>This is completely wrong.</h2>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>Our limits are the same	</h2>	<p>Basically time and money and with enough time and money we can figure out a way to do whatever we want.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>But we limit ourselves.	</h2>	<p>Sameness isn’t because of the nature of the web, it’s just the nature of people.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>We replicate, copy & re-use	</h2>	<p>We stick with what is familiar because it’s safe.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>We stick with common patterns and ideas</h2>	<p>because they have been proven successful!</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>But then we are just memorising and following the ideas of others.
</h2>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>When you improvise you have heightened brain activity</h2>	<p>So if you are memorising what already exists are you restricting yourself creatively from the get go?</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>Don’t think of the web as a collection of rectangles.</h2>	<p>Think outside the div, the square rectangular block.</p>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>We are only constrained by the box we
put ourselves in.</h2>	</div>
</div>
<div class="section">	<div class="section__content">	<h2>♥ from mandy</h2>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Think outside the div - Script Codes CSS Codes

body { color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-image: -webkit-linear-gradient(top, #073763, #0b5394, #3d85c6, #6fa8dc, #9fc5e8, #c8bede, #b3a6d5, #8675b8, #674ea7, #351c75, #741b47, #a64d79, #c27ba0, #d5a6bd, #d8aca4, #dd7e6b, #cc4125, #a61c00, #85200c, #571407); background-image: linear-gradient(180deg, #073763, #0b5394, #3d85c6, #6fa8dc, #9fc5e8, #c8bede, #b3a6d5, #8675b8, #674ea7, #351c75, #741b47, #a64d79, #c27ba0, #d5a6bd, #d8aca4, #dd7e6b, #cc4125, #a61c00, #85200c, #571407);
}
.section { min-height: 500px; margin: 0; padding: 0 1.5em; box-sizing: border-box; overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
@media screen and (min-width: 600px) { .section { padding: 3em; height: 100vh; }
}
.section__content { max-width: 700px;
}
h1, h2 { font-size: 3em; margin: 0; letter-spacing: -0.03em; line-height: 1.1em;
}
h1 + p, h2 + p { margin-top: 0.7em;
}
@media screen and (min-width: 500px) { h1, h2 { font-size: 4em; }
}
p { font-size: 1.25em; margin: 0; letter-spacing: -0.02em; line-height: 1.23em; opacity: 0.8;
}
@media screen and (min-width: 500px) { p { font-size: 1.7em; }
}
Think outside the div - Script Codes
Think outside the div - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4.5
Size 3,910 Kb
Views 6,072
Do you need developer help for Think outside the div?

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!

Mandy Michael (mandymichael) Script Codes
Name
Layered fonts in css
Page layout text effects with clip-path
Spotty layered CSS text effects
Split fractured text
Lines and layered css text effects
Flickering Light Text Effect
CSS Batman Mask
Single element, multi coloured 3d text effect
Stripy Rainbow Text Effect
Three way split with clip-path
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!