Ajout d'image de background flou, favicon

GrossesMitaines/GrossesMitaines/GrossesMitaines.csproj

@@ -22,7 +22,6 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="wwwroot\img\" />
     <Folder Include="wwwroot\audio\" />
   </ItemGroup>
 

GrossesMitaines/GrossesMitaines/Views/Home/Index.cshtml

@@ -11,7 +11,7 @@
 
 <br>
 <br>
-<div class="container col-10 offset-1 text-primary text-right text-sm-right" style="font-family:Comic Sans MS;">
+<div class="row col-12 text-primary text-right text-sm-right bg-light" style="font-family:Comic Sans MS;">
     <h1>Des produits bien commodes faits par des aînées d'expérience.</h1>
 </div>
 <br>

GrossesMitaines/GrossesMitaines/Views/Shared/Components/EnVedette/Default.cshtml

@@ -1,47 +1,49 @@
 <div style="height:280px;">
     <div class="row">
-        <div class="col-md-7 col-sm-12 offset-md-1 offset-sm-0 text-primary" style="font-family:Comic Sans MS;">
+        <div class="col-md-7 col-sm-12 offset-md-1 offset-sm-0 text-primary vedette-title" style="font-family:Comic Sans MS;">
             <h1>Nos produits vedettes:</h1>
         </div>
     </div>
-    <div class="carousel slide" data-ride="carousel">
+    <div class="row">
-        <div class="carousel-inner">
+        <div class="carousel slide col-12" data-ride="carousel">
-            <div class="carousel-item bg-secondary rounded active">
+            <div class="carousel-inner">
-                <div class="row text-primary" style="font-family:Arial;">
+                <div class="carousel-item bg-secondary rounded active">
-                    <div class="col-6 my-auto">
+                    <div class="row text-primary" style="font-family:Arial;">
-                        <img class="d-block w-100" src="img/ceintureflechee.jpg" style="width:auto;max-height:200px;">
+                        <div class="col-6 my-auto">
-                    </div>
+                            <img class="d-block w-100" src="img/ceintureflechee.jpg" style="width:auto;max-height:200px;">
-                    <div class="col-6 text-white">
+                        </div>
-                        <h3>Ceinture flèchée</h3>
+                        <div class="col-6 text-white">
-                        <p>Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.</p>
+                            <h3>Ceinture flèchée</h3>
-                        <h5>Seulement</h5>
+                            <p>Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.</p>
-                        <h4 class="offset-1 bg-white text-success">85,86$+tx</h4>
+                            <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success">85,86$+tx</h4>
+                        </div>
                     </div>
                 </div>
-            </div>
+                <div class="carousel-item bg-secondary rounded">
-            <div class="carousel-item bg-secondary rounded">
+                    <div class="row text-primary" style="font-family:Arial;">
-                <div class="row text-primary" style="font-family:Arial;">
+                        <div class="col-6 my-auto">
-                    <div class="col-6 my-auto">
+                            <img class="d-block w-100" src="img/pantouflesCH.jpg" style="width:auto;max-height:200px;">
-                        <img class="d-block w-100" src="img/pantouflesCH.jpg" style="width:auto;max-height:200px;">
+                        </div>
-                    </div>
+                        <div class="col-6 text-white">
-                    <div class="col-6 text-white">
+                            <h3>Pantoufles du Canadien en Phentex</h3>
-                        <h3>Pantoufles du Canadien en Phentex</h3>
+                            <p>Parce que ça sent la coupe!</p>
-                        <p>Parce que ça sent la coupe!</p>
+                            <h5>Seulement</h5>
-                        <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success">15,64$+tx</h4>
-                        <h4 class="offset-1 bg-white text-success">15,64$+tx</h4>
+                        </div>
                     </div>
                 </div>
-            </div>
+                <div class="carousel-item bg-secondary rounded">
-            <div class="carousel-item bg-secondary rounded">
+                    <div class="row text-primary" style="font-family:Arial;">
-                <div class="row text-primary" style="font-family:Arial;">
+                        <div class="col-6 my-auto">
-                    <div class="col-6 my-auto">
+                            <img class="d-block w-100" src="img/jeanlucmongrain.jpg" style="width:auto;max-height:200px;">
-                        <img class="d-block w-100" src="img/jeanlucmongrain.jpg" style="width:auto;max-height:200px;">
+                        </div>
-                    </div>
+                        <div class="col-6 text-white">
-                    <div class="col-6 text-white">
+                            <h3>Jean-Luc Mongrain</h3>
-                        <h3>Jean-Luc Mongrain</h3>
+                            <p>On ne lui ferait pas mal, en tout cas!!</p>
-                        <p>On ne lui ferait pas mal, en tout cas!!</p>
+                            <h5>Seulement</h5>
-                        <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success">1453,12$+tx</h4>
-                        <h4 class="offset-1 bg-white text-success">1453,12$+tx</h4>
+                        </div>
                     </div>
                 </div>
             </div>

GrossesMitaines/GrossesMitaines/Views/Shared/_Layout.cshtml

@@ -4,11 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - GrossesMitaines</title>
+    <link rel="icon" type="image/x-icon" href="~/img/favicon.ico"/>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link rel="stylesheet" href="~/font-awesome/css/all.min.css" />
 </head>
-<body class="bg-dark">
+<body class="bg-image">
     <audio autoplay muted>
         <Source src="~/audio/poupee.mp3" type="audio/mpeg" />
     </audio>
@@ -35,10 +36,8 @@
         </nav>
     </header>
 
-
     <div class="container">
-
+        <main role="main">
-        <main role="main" class="pb-3">
             @RenderBody()
         </main>
     </div>

GrossesMitaines/GrossesMitaines/wwwroot/css/site.css

@@ -66,6 +66,15 @@ body {
     margin-bottom: 60px;
 }
 
+.bg-image {
+    background-image: url(../img/blured_wool_carpet.png);
+
+    background-attachment:fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
 #btn-search{
     margin-left:10px;
 }
@@ -80,4 +89,8 @@ body {
     width: 100%;
     white-space: nowrap;
     line-height: 60px; /* Vertically center the text there */
+}
+
+.vedette-title{
+    background-color:rgba(0, 0, 0,.75);
 }