-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Stephane Honore
committed
Jul 12, 2021
1 parent
333a755
commit df0a8c9
Showing
6 changed files
with
225 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="#one">Containers</a></li> | ||
| <li><a href="#two">Galleries</a></li> | ||
| <li><a href="#three">Images</a></li> | ||
| <li><a href="#four">Modules</a></li> | ||
| <li><a href="#five">Full width</a></li> | ||
| </ul> | ||
| </nav> | ||
| <header> | ||
| <h1><span>Guideline</span><br>Responsive design</h1> | ||
| </header> | ||
| <section id="one"> | ||
| <div class="wrap"> | ||
| <div class="img"><img src="img/poster.jpg"></div> | ||
| <div class="text"> | ||
| <h2>Container, column flex example.</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo. Nullam in lacinia lectus. Vivamus scelerisque accumsan felis vel sodales. Curabitur semper tincidunt molestie. Ut pharetra ligula vel nunc imperdiet consectetur. Vestibulum quis lobortis dolor, malesuada accumsan dolor. Fusce lobortis fringilla risus quis mattis.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="two"> | ||
| <h2>Image Gallery - Background Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| <section id="three"> | ||
| <h2>Image Gallery - Scale Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| <section id="four"> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 1</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 2</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="five"> | ||
| <div class="full-img" style="background-image:url('img/g3.jpg')"><h2>Full width image</h2></div> | ||
| </section> | ||
| </body> | ||
|
|
||
| <script type="text/javascript" src="js/vendor/jquery_v3.6.0.js"></script> | ||
| <script type="text/javascript" src="js/main.js"></script> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,22 @@ | ||
| <section id="five"> | ||
| <div class="full-img" style="background-image:url('img/g3.jpg')"><h2>Full width image</h2></div> | ||
| </section> | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section id="five"> | ||
| <div class="full-img" style="background-image:url('img/g3.jpg')"><h2>Full width image</h2></div> | ||
| </section> | ||
| </body> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,34 @@ | ||
| <section id="four"> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 1</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 2</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section id="four"> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 1</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| <div class="module"> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="text"> | ||
| <h2>Module 2</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </html> | ||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,27 @@ | ||
| <section id="one"> | ||
| <div class="wrap"> | ||
| <div class="img"><img src="img/poster.jpg"></div> | ||
| <div class="text"> | ||
| <h2>Container, column flex example.</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo. Nullam in lacinia lectus. Vivamus scelerisque accumsan felis vel sodales. Curabitur semper tincidunt molestie. Ut pharetra ligula vel nunc imperdiet consectetur. Vestibulum quis lobortis dolor, malesuada accumsan dolor. Fusce lobortis fringilla risus quis mattis.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section id="one"> | ||
| <div class="wrap"> | ||
| <div class="img"><img src="img/poster.jpg"></div> | ||
| <div class="text"> | ||
| <h2>Container, column flex example.</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius eleifend arcu eu blandit. Suspendisse sed lorem interdum, laoreet enim vel, posuere neque. Morbi tincidunt nulla odio, vitae ultrices dui lobortis eget. Nulla sem est, gravida eget pellentesque at, lobortis ac nibh. In dignissim efficitur venenatis. Quisque sed turpis sed enim ornare mattis et vitae sem. Sed laoreet ante non enim dictum, vitae faucibus neque commodo. Nullam in lacinia lectus. Vivamus scelerisque accumsan felis vel sodales. Curabitur semper tincidunt molestie. Ut pharetra ligula vel nunc imperdiet consectetur. Vestibulum quis lobortis dolor, malesuada accumsan dolor. Fusce lobortis fringilla risus quis mattis.</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,29 @@ | ||
| <section id="three"> | ||
| <h2>Image Gallery - Scale Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section id="three"> | ||
| <h2>Image Gallery - Scale Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,29 @@ | ||
| <section id="two"> | ||
| <h2>Image Gallery - Background Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| <!DOCTYPE html> | ||
| <html lang="es" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Responsive Examples</title> | ||
|
|
||
| <link rel="stylesheet" href="css/vendor/reset.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
|
|
||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300;1,400;1,600&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section id="two"> | ||
| <h2>Image Gallery - Background Image</h2> | ||
| <div class="wrap"> | ||
| <div class="image" style="background-image:url('img/g1.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g2.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g3.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g4.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g5.jpg')"></div> | ||
| <div class="image" style="background-image:url('img/g6.jpg')"></div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |