Skip to content

Feature/css grid exercise raul valencia #7

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

Feature/css grid exercise raul valencia #7

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
b9e188f
New exercise box model by raul valencia
DkSanjed May 18, 2020
4b97d47
New exercise css grid by raul valencia
DkSanjed May 18, 2020
bcddb39
My grid.html before isn´t last html save, this it's correct
DkSanjed May 19, 2020
3e387eb
New changes
DkSanjed May 20, 2020
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
34 changes: 34 additions & 0 deletions 3-box-model/box-model.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
Copy link

@pushdev-code pushdev-code May 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't include this file. Always create your new branches by being on master.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<header>
<p>This is my first layout</p>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia odio ut, reprehenderit magnam placeat laborum incidunt alias quidem suscipit expedita ea. Quam porro soluta explicabo quibusdam earum illum pariatur distinctio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates saepe asperiores, sit rem alias placeat hic, omnis sequi cum illum doloribus ab dolor ex velit adipisci harum, inventore enim! Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, ipsam? Necessitatibus quisquam nulla ipsa magnam praesentium natus itaque sequi tempora doloribus. Amet, hic! Officiis laborum reiciendis illo ipsam eum. Perspiciatis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam doloremque tenetur nam mollitia, quos nisi libero, quas, distinctio debitis vitae ipsam expedita tempore. Rem fugit dolorem minus explicabo facilis facere?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus itaque, obcaecati voluptas ea cupiditate quaerat nulla dolore recusandae quasi voluptatibus ipsa. A necessitatibus ipsam omnis cumque maiores ullam totam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit reiciendis, voluptas eligendi similique ipsa id iste eaque asperiores! Id illo pariatur delectus ab saepe nostrum accusantium ullam nisi, quisquam vitae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, dolore laboriosam quia eaque alias labore tenetur vitae ex deserunt eos minus suscipit ab, nostrum recusandae, corporis esse nulla rerum quas? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero laudantium reprehenderit aut perferendis error unde illo ad nam odit quod tempora repellat ipsum quo distinctio pariatur, nesciunt ullam quidem tempore.</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis cumque earum qui ipsam consequuntur atque, quidem soluta vel ab suscipit dignissimos rem nihil perspiciatis voluptas reiciendis tempora hic commodi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium harum id natus consectetur ipsam minus sapiente quibusdam excepturi veniam saepe debitis mollitia voluptatibus eum repudiandae quod nobis provident, dolorem modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia neque accusamus ad sapiente explicabo consequuntur ullam culpa amet? Doloremque eligendi quibusdam distinctio debitis. Quibusdam facere maiores consectetur mollitia libero placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quisquam quos corrupti id minus harum odio soluta, tempora fugiat non consectetur dignissimos! Fuga, dolorem. Consequuntur omnis modi quibusdam natus quae.</p>
</section>
<footer>
<p>About my company</p>
</footer>
</body>
</html>
29 changes: 29 additions & 0 deletions 4-css-grid/grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Grid</title>
</head>
<body>
<main>
<section class="blockA">
<h1>A</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?</p>
</section>
<section class="blockB">
<h1>B</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?</p>
</section>
<section>
<h1>C</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?</p>
</section>
<section>
<h1>D</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?</p>
</section>
</main>
</body>
</html>
22 changes: 22 additions & 0 deletions 4-css-grid/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
body {
font-family: 'Times New Roman', Times, serif;
font-size: medium;
}
main {
display: grid;
grid-template: 50% 50% / 1fr 1fr 1fr;
}
section {
background-color: rgb(66, 66, 66);
border-radius: 15px;
color: whitesmoke;
margin: 5px;
padding: 20px;
}
.blockA {
grid-column: 1/3;
}
.blockB {
grid-column-start: 3;
grid-row: 1/3;
}