Skip to content

flexbox/bem #158

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
poindextress wants to merge 4 commits into
base: master
Choose a base branch
from
Open

flexbox/bem #158

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
715d33d
adding solution just using block elements
poindextress Jan 22, 2018
6e8f7db
tweaked box model solution for practice
poindextress Jan 23, 2018
c3d96ad
initial commit
poindextress Jan 24, 2018
38bc951
bem naming
poindextress Jan 24, 2018
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
7 changes: 5 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- This is where you will begin your solution -->
<div class="all">
<div class="header"><h1>Header</h1></div>
<div class="block block--left-paragraph"><h2>Placeholder<p class="flag">New!</p></h2><p>I was able to mow down the zombies in Kingsmouth faster with the new, barely any points character than I could with my elder Paladin-deck character. This time, ArenaNet decided to finally give us a glimpse on the final two races, Sylvari and Asura. While it’s sometimes tricky to figure out how tough things are, everything here drops QL 10 gear, which is the highest QL I’m aware of. The controls do everything you would expect, even allowing you to touch the characters and enemies you want to perform an action without forcing you to utilize old school menus.</p></div><div class="middle"></div><div class="block block--right-paragraph"><h2>Placeholder</h2><p>Orcs, trolls, undead, cattle, space squid goats with gazelle legs - are you kidding me? One realm and one economy would make me curl up into the fetal position on my floor, muttering about competition for my flowers. A Hurricane battlecruiser and Buzzard are on d-scan in C2a, along with a tower, but I see no wrecks and no anomalies. I’ve thus been scouring the various GW2 fansites for the last week, trying to match up armour types, professions, and races. The hunter-type that has great knowledge of nature and wildlife around her. I hope I can fight with animals on my side.</p></div>
</div>
</body>
</html>
</html>
63 changes: 63 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
body {
background: white;
color: black;
}

h1 {
text-align: center;
font-size: 36px;
margin-top: 13px;
margin-bottom: 13px;
}

.header {
flex-basis: 100%;
order: -1;
align-items: flex-start;
border-bottom-style: solid;
border-bottom-width: 2px;
}

.flag {
background-color: grey;
font-size: 13px;
font-weight: normal;
text-align: center;
width: 34px;
height: 18px;
margin: 0px -20px 0px 0px;
padding: 8px 8px 8px 8px;
float: right;
}

.all {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
border-style: solid;
border-width: 2px;
position: absolute;
}

.block {
width: 50%;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
margin-right: -1px;
}

.block--left-paragraph {
order: 0;
margin-right: -1px;
}

.block--right-paragraph {
order: 2;
margin-left: -1px;
}

.middle {
background-color: black;
width: 2px;
}