Skip to content

Karolis solution to the assignment_markup_warmup #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kstulgys wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Karolis solution to the assignment_markup_warmup #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9de20c9
updated readme with my name
kstulgys Nov 30, 2017
6114b9f
added basic layout
kstulgys Nov 30, 2017
7f2f068
improved layourt
Dec 1, 2017
f3beec5
final commit
Dec 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
assignment_markup_warmup_sprint
===============================

# Created by Karolis

And 1 and 2! And 1, and 2...!
[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)
81 changes: 81 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" src="/">
<title>Document</title>
</head>
<body>

<div class="wrapper">
<div class="nav-parent">
<div class="nav-container">
<section class="nav">
<ul class="nav-items">
<li class="nav-item">Item 1</li>
<li class="nav-item">Item 2</li>
<li class="nav-item">Item 2</li>
</ul>
</section>
</div>
</div>



<div class="main-container">
<section class="side-area">
<legend>
Side Add
</legend>
<p>
Narrow Version

Set up media queries so the page operates like the one in the second mockup.
Play with it to make sure the element layouts behave as expected when you cross the breakpoint.
Commit to Github.
Finally, refactor and clean up redundancies in your styles or markup. Try to conform to the best practices we covered earlier. Now is when you aim for good-looking code.
</p>
</section>
<div class="container">

<section>
<h1>Micro Blog</h1>
</section>
<div class="posts-container">
<div class="post-item">
<h2>Some header 1</h2>
<h3>Title 1</h3>
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
<h3>Title 1.1</h3>
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
<div class="post-item">
<h2>Some header 2</h2>
<h3>Title 2</h3>
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
<div class="post-item">
<h2>Some header 3</h2>
<h3>Title 3</h3>
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with </p>
</div>
</div>



<section>
Footer
</section>
</div>


</div>
</div>




</body>
</html>
127 changes: 127 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} */

body {
margin: 0;
padding: 0;
border: 0;
}

section {
border: 1px solid;
border-radius: 5px;
padding: 10px;
}

.wrapper {
display: flex;
flex-direction: column;

}

h1 {
text-align: center;
}

.nav-parent {
position: relative;
}

.nav-container {
position: fixed;
width: 100%;

}

.nav-items {
display: flex;
justify-content: flex-start;
list-style: none;
}

.nav-item {
margin-right: 15px;
}

.main-container {
width: 990px;
display: flex;
flex-direction: row;
padding-top: 85px;
justify-content: space-between;
margin: 0 auto;
}

.side-area {
flex: 1;
height: 40vh;
align-self: center;
margin-right: 20px;
}

.container {
flex-direction: column;
flex: 3;
}

.post-item {
border: 1px dashed;
border-radius: 5px;
width: 29%;
margin: 15px 0 15px 0px;
padding: 10px;
}

.post-item h2, h3 {
text-align: center;

}

.posts-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}


@media all and (max-width:990px) {
.side-area {
display: none;
}
.posts-container {
justify-content: space-around;
}
.post-item {
width: 45%;
}

.posts-container :last-child {
flex: .97;
margin-top: 0;
}

.main-container {
padding-top: 70px;
width: 100vw;
}

}