Skip to content
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

Jump to bottom

#5 & #6 => master #8

Merged
merged 12 commits into from Jun 10, 2019
Merged

#5 & #6 => master #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5f32449
add book picture and css style
bhflm Jun 5, 2019
1ed6535
Merge branch 'book-detail' into book-detail-pic
bhflm Jun 5, 2019
2f23f2a
merge
bhflm Jun 7, 2019
67ff604
fix styles and sorted them alphabetically
bhflm Jun 7, 2019
5f2231a
thanks dori
bhflm Jun 7, 2019
2bf8d21
rename style
bhflm Jun 7, 2019
a5d13b4
remove default display-flex:row
bhflm Jun 10, 2019
ece53bf
fix height & width
bhflm Jun 10, 2019
8a6c120
fix req changes
bhflm Jun 10, 2019
3c6595d
fix height
bhflm Jun 10, 2019
76f25e1
typo
bhflm Jun 10, 2019
90a2cc5
Merge pull request #4 from wolox-training/book-detail-pic
Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added maquetado/assets/book-cover.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 19 additions & 16 deletions maquetado/index.html
View file
Open in desktop
Expand Up @@ -9,22 +9,25 @@
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<body>
<div class="book-container">
<div class="row">
<h1 class="book-title bold height">Título del libro</h1>
<h2 class="book-gender height">(género)</h2>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Autor del libro:</h3>
<h3 class="book-detail-value height">Nombre del autor del libro</h3>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Editorial:</h3>
<h3 class="book-detail-value height">Nombre de la editorial</h3>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Año de publicación:</h3>
<h3 class="book-detail-value height">Año de publicación</h3>
<div class="book-container row">
<img src="./assets/book-cover.png" class="book-cover"/>
<div class="column book-info-container">
<div class="row book-title-info-container">
<h1 class="book-title bold height">Título del libro</h1>
<h2 class="book-gender height">(género)</h2>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Autor del libro:</h3>
<h3 class="book-detail-value height">Nombre del autor del libro</h3>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Editorial:</h3>
<h3 class="book-detail-value height">Nombre de la editorial</h3>
</div>
<div class="row">
<h3 class="book-detail-name bold height">Año de publicación:</h3>
<h3 class="book-detail-value height">Año de publicación</h3>
</div>
</div>
</div>
</body>
Expand Down
47 changes: 35 additions & 12 deletions maquetado/scss/styles.scss
View file
Open in desktop
Expand Up @@ -3,20 +3,20 @@
}

.book-container {
display: flex;
flex-direction: column;
padding: 10px;
}

.book-title {
font-size: 32px;
margin: 20px 0 40px;
.book-cover {
height: 380px;
margin-right: 40px;
max-width: 260px;
width: 100%;
}

.book-gender {
.book-detail-value {
color: $gray;
font-size: 24px;
margin-right: 4px;
font-size: 20px;
margin-bottom: 20px;
}

.book-detail-name {
Expand All @@ -25,12 +25,35 @@
margin-right: 4px;
}

.book-gender {
color: $gray;
font-size: 24px;
margin-right: 4px;
}

.book-info-container {
flex-grow: 1;
margin-right: 100px;
}

.book-title-info-container {
align-items: baseline;
}

.book-title {
font-size: 32px;
margin: 20px 0 40px;
}

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

.height {
line-height: 24px;
}

.book-detail-value {
color: $gray;
font-size: 20px;
margin-bottom: 20px;
.row {
display: flex;
}