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

Book detail: title and shadow #5

Merged
merged 10 commits into from Jun 10, 2019
Merged

Book detail: title and shadow #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
53e31d8
added bottom border to title
bhflm Jun 7, 2019
a87c232
add title border and box shadow
bhflm Jun 7, 2019
d521cd0
merge
bhflm Jun 7, 2019
73ba6e4
merge
bhflm Jun 7, 2019
ef8223f
fix merge
bhflm Jun 7, 2019
1402d31
Merge branch 'book-detail-pic' into book-detail-structure
bhflm Jun 10, 2019
6281749
added requested changes
bhflm Jun 10, 2019
9050193
fix height & width
bhflm Jun 10, 2019
2750565
merge
bhflm Jun 10, 2019
33f19f7
Merge branch 'book-detail-pic' into book-detail-structure
bhflm 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
36 changes: 18 additions & 18 deletions maquetado/index.html
View file
Open in desktop
Expand Up @@ -10,24 +10,24 @@
</head>
<body>
<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>
<img src="./assets/book-cover.png" class="book-cover">
<div class="column book-info-container">
<div class="row book-title-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
3 changes: 3 additions & 0 deletions maquetado/scss/colors.scss
View file
Open in desktop
@@ -1 +1,4 @@
$gray: #828282;
$earls-green: #BED23C;
$black-05: rgba(0,0,0,0.5);
$white : #FFF;
18 changes: 16 additions & 2 deletions maquetado/scss/styles.scss
View file
Open in desktop
Expand Up @@ -3,7 +3,11 @@
}

.book-container {
padding: 10px;
background-color: $white;
box-shadow: 4px 4px 10px 0 $black-05;
max-width: 1000px;
padding: 20px;
width: 100%;
}

.book-cover {
Expand Down Expand Up @@ -36,8 +40,18 @@
margin-right: 100px;
}

.book-title-info-container {
.book-title-container {
align-items: baseline;
margin-bottom: 40px;
Dorian30 marked this conversation as resolved.
Show resolved Hide resolved
position: relative;
&::after {
content:'';
border-bottom: 4px solid $earls-green;
bottom: 20px;
Dorian30 marked this conversation as resolved.
Show resolved Hide resolved
height: 4px;
position: absolute;
width: 100%;
}
}

.book-title {
Expand Down