Copy link to clipboard
Copied
Bonjour,
j'essai de me créer un site perso, mais je n'arrive pas à le faire un responsive,
En utilisant dreamweaver, j'utilise la grille fluide mais comment puis-je insérer un design particulier que j'ai créé dans photoshop?
J'espere que vous m'avez comprise...
Comment intégrer ce design
dans une grille de dreamweaver comme celle-ci?
Merci de votre aide
Here's a working template for you, copy and paste into DW, save and view in browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Modani</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.show-mobile-nav').css('cursor','pointer').click(function() {
$('.main-nav').toggle();
});
});
</script>
<style>
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
margin: 30px;
font-family: helvetica, san
...Copy link to clipboard
Copied
Here's a working template for you, copy and paste into DW, save and view in browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Modani</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.show-mobile-nav').css('cursor','pointer').click(function() {
$('.main-nav').toggle();
});
});
</script>
<style>
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
margin: 30px;
font-family: helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
}
.page-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.header-text {
width: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.header-text h1 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
font-size: 90px;
font-weight: 400;
}
@media screen and (max-width: 768px) {
.header-text h1 {
font-size: 70px;
padding: 60px 0 40px 0;
}
}
.header-logo {
width: 250px;
text-align: center;
border-radius: 10px 10px 0 0;
background-color: #000;
}
@media screen and (max-width: 768px) {
.header-logo {
width: 100%;
background-color: #fff;
}
}
.header-logo h4{
width: 160px;
height: 160px;
margin: 25px auto 0 auto;
background-color: #fff;
}
@media screen and (max-width: 768px) {
.header-logo h4{
background-color: #000;
}
}
.main-content-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 50px 150px 0 150px;
}
@media screen and (max-width: 1000px) {
.main-content {
padding: 25px 50px 0 25px;
}
}
@media screen and (max-width: 768px) {
.main-content {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.main-content-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
.main-content-footer {
text-align: center;
}
.navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 250px;
background-color: #000;
border-radius: 0 0 10px 10px;
text-align: center;
}
@media screen and (max-width: 768px) {
.navigation {
width: 100%;
}
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li {
margin: 0;
padding: 0;
}
.navigation a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 20px 0;
}
.main-nav {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 70px 0 0 0;
}
@media screen and (max-width: 768px) {
.main-nav {
display: none;
padding: 0 0 0 0;
}
}
.social-icons-desktop {
border-radius: 0 0 10px 10px;
color: #fff;
width: 70%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.social-icons-desktop {
display: none;
}
}
.social-icons-mobile {
display: none;
text-align: center;
width: 50%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.social-icons-mobile {
display: block;
}
}
.show-mobile-nav {
display: none;
border: none;
background-color: #000;
color: #fff;
padding: 15px;
font-size: 20px;
}
@media screen and (max-width: 768px) {
.show-mobile-nav {
display: block;
}
}
</style>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header-text">
<h1>Modani</h1>
</div>
<!-- end header-text -->
<div class="header-logo">
<h4>Logo Goes Here</h4>
</div>
<!-- end logo -->
</header>
<!-- end header -->
<div class="main-content-wrapper">
<main class="main-content">
<section class="main-content-info">
<h2>Description de la marque</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet delectus ducimus ea esse eveniet ex nostrum quasi sapiente temporibus! Cumque dignissimos laborum laudantium magni nam possimus quisquam similique vero!</p>
</section>
<!-- end main-content-info -->
<div class="social-icons-mobile">
<h3><img src="https://img.clipartfest.com/807fc52eb458bd35ea830e75defb6c8c_-evolution-of-social-media-social-media..."></h3>
</div>
<!-- end social-icons-mobile -->
<footer class="main-content-footer">
<p>©Tous droits reserves 2016 Mondani</p>
</footer>
<!-- end main-content-footer -->
</main>
<!-- end main-content -->
<aside class="navigation">
<button class="show-mobile-nav">MENU</button>
<div class="main-nav">
<ul>
<li><a href="#">Acceuil</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Description</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end main-nav -->
<div class="social-icons-desktop">
<h3><img src="https://img.clipartfest.com/807fc52eb458bd35ea830e75defb6c8c_-evolution-of-social-media-social-media..."></h3>
</div>
<!-- end social-icons-desktop -->
</aside>
<!-- end navigation -->
</div>
<!-- end main-content-wrapper -->
</div>
<!-- end page-wrapper -->
</body>
</html>
Copy link to clipboard
Copied
Great, thank's for your help