media queries with bootstrap

cyr15103 · Oct 24, 2017 · 0be4f75 · 0be4f75
1 parent e9ec7d3
commit 0be4f75
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 1 deletion.
diff --git a/bootstrap-practice/bootstrap-practice.css b/bootstrap-practice/bootstrap-practice.css
@@ -0,0 +1,90 @@
+body{
+	border:20px solid #3A4245;
+	margin:0 auto;
+}
+
+header {
+	background-image:url("images/laptop-and-person.jpg");
+	background-size:cover;
+}
+
+nav img {
+	width:10%;
+}
+nav li {
+	background-color:#8C92A1;
+	display:inline-block;
+}
+
+nav li:hover {
+	background-color:#ED98B1;
+
+}
+
+nav a:hover {
+	color:white;
+	text-decoration: none;
+}
+
+nav a {
+	color:white;
+	text-decoration: none;
+}
+
+#gray-box {
+	background-color:#545D70;
+}
+
+#pink-box {
+	background-color:#B56B81;
+}
+
+#aqua-box {
+	background-color:#5FC9AA;
+}
+
+#des-box {
+	background-color:#545D70;
+}
+footer {
+	background-color:#545D70;
+}
+
+p {
+	color:white;
+	font-size:16px;
+}
+
+.big-2-p {
+	font-size:24px;
+	color:black;
+}
+
+.big-p {
+	font-size:18px;
+}
+
+#header-info {
+	width:50%;
+	background-color:hsla(42, 98%, 80%, 0.56);
+}
+
+#logo-bar {
+	background-color:white;
+}
+
+#header-info h1, #gray-box h1, #pink-box h1, #aqua-box h1, #white-box h1 {
+	font-size:44px;
+}
+
+#header-info h1 {
+	color:#B56B81;
+}
+
+#white-box h1, #gray-box h1 {
+	color:#5FC9AA;
+}
+
+#pink-box h1, #aqua-box h1 {
+	color:white;
+}
diff --git a/bootstrap-practice/images/art-pic-1.jpg b/bootstrap-practice/images/art-pic-1.jpg
diff --git a/bootstrap-practice/images/art-pic-2.jpg b/bootstrap-practice/images/art-pic-2.jpg
diff --git a/bootstrap-practice/images/art-pic-3.jpg b/bootstrap-practice/images/art-pic-3.jpg
diff --git a/bootstrap-practice/images/art-pic-4.jpg b/bootstrap-practice/images/art-pic-4.jpg
diff --git a/bootstrap-practice/images/laptop-and-person.jpg b/bootstrap-practice/images/laptop-and-person.jpg
diff --git a/bootstrap-practice/images/owl.png b/bootstrap-practice/images/owl.png
diff --git a/bootstrap-practice/images/responsive-design.jpg b/bootstrap-practice/images/responsive-design.jpg
diff --git a/bootstrap-practice/index.html b/bootstrap-practice/index.html
@@ -4,10 +4,145 @@
 	<meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"><title>Owltastic</title>
+	<link rel="stylesheet" type="text/css" href="bootstrap-practice.css">
 	<link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-
+
+	<nav>
+		<div class="owl-box"><img src="images/owl.png"></div>
+		<div id="des-box"><p class="big-p">Hello! I’m Meagan Fisher. I design and build digital experiences. I also speak and write about my work and life.</p></div>
+		<ul>
+			<li><a href="#"><h4>WRITING</h4></a></li>
+			<li><a href="#"><h4>SPEAKING</h4></a></li>
+			<li><a href="#"><h4>WORK</h4></a></li>
+			<li><a href="#"><h4>NOTES</h4></a></li>
+			<li><a href="#"><h4>ABOUT</h4></a></li>
+			<li><a href="#"><h4>CONTACT</h4></a></li>
+		</ul>
+	</nav>
+
+	<header>
+		<div id="header-info">
+			<h4>LATEST NEWS</h4>
+			<h1>Design & Vulnerability</h1>
+			<p class="big-2-p">An article about the painful, humbling nature of creating designs, and what it feels like to me to do work I care deeply about. Read on <span>Medium</span> or this <span>site</span>.</p>
+		</div>
+		<h4>THIS IS ME WITH MY CAT</h4>
+		<div id="logo-bar">
+			<h4>FOLLOW</h4>
+			<img src="png">
+			<img src="png">
+			<img src="png">
+			<img src="png">
+			<img src="png">
+			<img src="png">
+			<img src="png">
+		</div>
+	</header>
+	<article>
+	<section id="gray-box">
+		<h1>Worth Noting</h1>
+		<p class="big-p">A curated collection of inspiring work and articles. <span>See all.</span></p>
+			<div id="box-1">
+				<img src="images/art-pic-1.jpg" alt="font face">
+				<h4><a href="#">LOGO-A-GO-GO: 100 YEARS OF FORBES TYPOGRAPHY</a></h4>
+				<p>“In 1948, the logo said 'Calm down.' The war is over.” Love this roundup of 100 years of Forbes logos. They went so far and wide with them! Also didn't realize Forbes had been around for so... <a href="#">KEEP READING</a></p>
+			</div>
+			<div id="box-2">
+				<img src="images/art-pic-2.jpg" alt="colorful art">
+				<h4><a href="#">ARTWORK BY JULIETTE OBERNDORFER</a></h4>
+				<p>Juliette Oberndorfer's work is simply stunning; it reminds me of a favorite children's book or old Disney animations, bit with NEON. Do yourself a favor and follow her on Instagram....<a href="#">KEEP READING</a></p>
+			</div>
+			<div id="box-3">
+				<img src="images/art-pic-3.jpg" alt="gallery">
+				<h4><a href="#">WEWORK LA FAYETTE CO-WORKING SPACE – DESIGN MILK</a></h4>
+				<p>Never thought I'd want to visit Paris again just to work there, but this gorgeous WeWork space would be worth the trip. Source: WeWork La Fayette Co-Working Space Gives Nod to the 1920s - Design... <a href="#">KEEP READING</a></p>
+			</div>
+			<div id="box-4">
+				<img src="images/art-pic-4.jpg" alt="sunset">
+				<h4><a href="#">UPPERQUAD</a></h4>
+				<p>I'm blown away by the color and animation for UPPERQUAD's site; they've attended to every detail so...<a href="#">KEEP READING</a></p>
+			</div>
+	</section>
+
+	<section id="pink-box">
+		<h1>Recent Work</h1>
+		<p class="big-p">I design and build responsive marketing sites and digital products. Here's a few of them. <span><a href="#">See more</a></span></p>
+		<img src="images/responsive-design.jpg" alt="responsive design example">
+		<img src="images/responsive-design.jpg" alt="responsive design example">
+		<img src="images/responsive-design.jpg" alt="responsive design example">
+	</section>
+
+	<section id="aqua-box">
+		<h1>Recent Events</h1>
+		<p class="big-p">I love speaking. <span><a href="#">See a complete history of events here.</a></span></p>
+			<a href="#"><div id="row-1">
+				<img src="png">
+				<h4>MAY 19TH, 2016</h4>
+				<img src="png">
+				<h4>PORTLAND, OR</h4>
+				<img src="png">
+				<h4>WEBVISIONS PORTLAND 2016</h4></a>
+				<div class="button"><h4>SEE RESOURCES</h4></div>
+			</div>
+			<hr>
+			<a href="#"><div id="row-2">
+				<img src="png">
+				<h4>APRIL 7TH, 2016</h4>
+				<img src="png">
+				<h4>NEW YORK, NY</h4>
+				<img src="png">
+				<h4>WEBVISIONS NYC 2015</h4></a>
+				<div class="button"><h4>SEE RESOURCES</h4></div>
+			</div>
+			<hr>
+			<a href="#"><div id="row-3">
+				<img src="png">
+				<h4>SEPTEMBER 23RD, 2015</h4>
+				<img src="png">
+				<h4>CHICAGO, IL</h4>
+				<img src="png">
+				<h4>WEBVISIONS CHICAGO 2015</h4></a>
+				<div class="button"><h4>SEE RESOURCES</h4></div>
+			</div>
+			<hr>
+			<a href="#"><div id="row-4">
+				<img src="png">
+				<h4>MARCH 17TH, 2015</h4>
+				<img src="png">
+				<h4>OXFORD, UK</h4>
+				<img src="png">
+				<h4>SMASHING OXFORD 2015</h4></div></a>
+				<div class="button"><h4>SEE RESOURCES</h4></div>
+			</div>
+	</section>
+
+	<section id="white-box">
+		<h1>Elsewhere & Contact</h1>
+		<p class="big-2-p">Follow me on Twitter and Facebook to see my latest work and inspiration. I am an enthusiastic Dribbbler. I post case studies on Behance too. My writing lives on Medium, and you can connect with me on LinkedIn. To reach out directly, please email me at contact@owltastic.com.</p>
+	</section>
+</article>
+	<footer>
+		<ul>
+			<li>HOME</li>
+			<li>TALKS</li>
+			<img src="png">
+			<li>TWITTER</li>
+			<li>WRITING</li>
+			<li>CONTACT</li>
+			<img src="png">
+			<li>FACEBOOK</li>
+			<li>NOTES</li>
+			<li>ABOUT</li>
+			<img src="png">
+			<li>DRIBBLE</li>
+		</ul>
+		<p>&copy; 2017 Meagan Fisher. Thanks for stopping by! If you want, you can email me at contact@owltastic.com.
+	</footer>
+
+
+
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </body>
 </html>