Home / user-44310

Ceci Benitez's questions

Martin Hope
Ceci Benitez
Asked: 2020-07-16 06:34:15 +0800 CST
  • 1

const Footer = () => {
    return ( 
       <footer>
            <p>
                &copy; 2019, made by <i className="fa fa-heart"></i> Cecilia Benítez Casaccia, for a better web.
            </p>
       </footer>
     );
}

render() {     
        return ( 
            <div className = "bg-image">
                <img src = "https://github.com/Ceci007/images/blob/master/img-vidly/avengers.jpg?raw=true"
                 alt = "background"
               />
                <div className = "container bg-overlap">
                    <div className = "row">
                        <div className = "col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">
                        <form onSubmit = {this.handleSubmit} >
                          <div className = "card card-login card-hidden">
                            <div className = "card-header card-header-primary text-center">
                                <h4>Register</h4>
                            </div>
                            <div className = "card-body text-center p-4">
                            {this.renderInput("username", "Username")}
                            {this.renderInput("password", "Password", "password")}
                            {this.renderInput("name", "Name")}
                            {this.renderButton("Register")}
                            </div>
                          </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
         );
    }

I have an image that I want to be above the footer in the login and register pages, that is, in these I want the footer to disappear, so I put a z-index to a ptag.

.bg-image {
 position: absolute;
 margin-top: 65px;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: 2;
}

.bg-overlap {
  position: absolute;
  width: 90%;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 3;
}

footer {
  width: 100%;
  display: block !important;
  margin: 0 auto !important;
  position: relative;
  z-index: -1 !important;
}

footer p {
  text-align: center !important;
  display: block;
  position: relative;
  z-index: -1;
  overflow: hidden;
}

footer p:before {
  width: 100%;
  height: 1px;
  background-color: rgba(0,0,0,0.2);
  display: block;
  content: " ";
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 30px;
}

enter image description here

css
Martin Hope
Ceci Benitez
Asked: 2020-07-11 09:04:05 +0800 CST
  • 1

I am making the front of an application in React and when adding images the save button MOvieFormstopped working even though I made the image field optional. I also have an array of images where the method saveMovie(movie)to save the movies is and I use it but it is not working for me I realize why when I press the save button the page should redirect me to /movies and save the new movie but it is not doing so .

import React from "react";
import Joi from "joi-browser";
import Form from "./common/form";
import { getMovie, saveMovie } from "../services/fakeMovieService";
import { getGenres } from "../services/fakeGenreService";

class MovieForm extends Form {
    state = {  
        data: {
            title: "",
            genreId: "",
            numberInStock: "",
            dailyRentalRate: "",
            img: ""
          },
          genres: [],
          errors: {}
    }

    schema = {
        _id: Joi.string(),
        title: Joi.string()
          .required()
          .label("Title"),
        genreId: Joi.string()
          .required()
          .label("Genre"),
        numberInStock: Joi.number()
          .required()
          .min(0)
          .max(100)
          .label("Number in Stock"),
        dailyRentalRate: Joi.number()
          .required()
          .min(0)
          .max(10)
          .label("Daily Rental Rate"),
        img: Joi.string().allow('').optional()
    }

    componentDidMount() {
        const genres = getGenres();
        this.setState({ genres });
    
        const movieId = this.props.match.params.id;
        if (movieId === "new") return;
    
        const movie = getMovie(movieId);
        if (!movie) return this.props.history.replace("/not-found");
    
        this.setState({ data: this.mapToViewModel(movie) });
    }
    
      mapToViewModel(movie) {
        return {
          _id: movie._id,
          title: movie.title,
          genreId: movie.genre._id,
          numberInStock: movie.numberInStock,
          dailyRentalRate: movie.dailyRentalRate,
          img: movie.img
        };
    }
    
      doSubmit = () => {
        saveMovie(this.state.data);
        this.props.history.push("/movies");
    }

    render() { 
        return ( 
            <div className = "container">
              <div className = "height"></div>
              <div className = "card card-login card-hidden">
              <div className = "card-header card-header-primary text-center">
                <h4>Movie Form</h4>
              </div>
        <form onSubmit={this.handleSubmit}>
          <div className = "card-body text-center p-4">
          {this.renderInput("title", "Title")}
          {this.renderSelect("genreId", "Genre", this.state.genres)}
          {this.renderInput("numberInStock", "Number in Stock", "number")}
          {this.renderInput("dailyRentalRate", "Rate")}
          {this.renderButton("Save")}
          </div>
        </form>
      </div>
            </div>
         );
    }
}
 
export default MovieForm;

This is my arrangement of movies, here you can take a look at the method saveMovie(movie)because surely something is missing there, the arrangement is very long, better I show you only the save method.

export function saveMovie(movie) {
  let movieInDb = movies.find(m => m._id === movie._id) || {};
  movieInDb.title = movie.title;
  movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
  movieInDb.numberInStock = movie.numberInStock;
  movieInDb.dailyRentalRate = movie.dailyRentalRate;
  movieInDb.img = movie.img;

  if (!movieInDb._id) {
    movieInDb._id = Date.now().toString();
    movies.push(movieInDb);
  }

  return movieInDb;
}

javascript
Martin Hope
Ceci Benitez
Asked: 2020-07-09 13:01:07 +0800 CST
  • 1

I have the same project and if I run npm start everything is fine and the background is white as it should be but when I run npm run deploy to upload it to gh-pages the background of the page turns grey, I didn't change anything in the styles and it is the same project here I leave the photos to compare one is white background and the other gray.

enter image description here

enter image description here

What do you recommend that I do? What better way to try uploading it to netlify?

reactjs
Martin Hope
Ceci Benitez
Asked: 2020-07-08 14:23:14 +0800 CST
  • 1

I am trying to use an image as the background of my div but I want a width of 100% and in my styles it says background-size: coverbut it still doesn't work.

render() { 
        
        return ( 
            <div className = "page-header header-filter bg-image">
                <h2>Register</h2>
                <form onSubmit = {this.handleSubmit} >
                    {this.renderInput("username", "Username")}
                    {this.renderInput("password", "Password", "password")}
                    {this.renderInput("name", "Name")}
                    {this.renderButton("Register")}
                </form>
            </div>
         );
    }
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.bg-image {
  background-image: url('https://github.com/Ceci007/images/blob/master/img-vidly/avengers.jpg?raw=true'); 
  background-size: cover; 
  background-position: center;
}

enter image description here

css
Martin Hope
Ceci Benitez
Asked: 2020-07-06 06:10:40 +0800 CST
  • 3

I am working with an array of phrases and in the class AppI have in componentDidMountit setStateand all that but my function selectQuoteIndexreturns undefined. In quotesData.js I have an array of objects with two properties, one is quote and the other is author, then in that same file I have a method getQuotesthat returns the array of quotes.

import React, { Component } from 'react';
import { random } from 'lodash';
import { getQuotes } from './services/quotesData';
import Button from './components/button';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      quotes: [],
      selectedQuoteIndex: null
    }

    this.selectQuoteIndex = this.selectQuoteIndex.bind(this);
  }

  componentDidMount() {
    this.setState({ quotes: getQuotes(), selectedQuoteIndex: this.selectQuoteIndex() })
  }

  selectQuoteIndex() {
    if(!this.state.quotes.length) {
      return;
    }
    return random(0, this.state.quotes.length - 1);
  }

  render() { 
    console.log(this.state.selecetedQuoteIndex);

    return (  
    <div className="App" id = "quote-box">
      <Button buttonDisplayName = "Next Quote" clickHandler = {this.selectQuoteIndex} />
    </div>
    );
  }
}
 
export default App;

javascript
Martin Hope
Ceci Benitez
Asked: 2020-06-23 13:24:41 +0800 CST
  • 0

What I want to achieve is a less harsh effect when the text is displayed, add a class with some transition or animation so that the text appears little by little and doesn't look so harsh.

I am using React and I want to create this class for the component Tour, the info is in the p. I don't know if I should add the class to the paragraph or the button that is in the span, or what transition would be appropriate.

How to add a class that makes a smooth transition when clicking on a button that shows more text?

This is the code:

class Tour extends React.Component {
  state = {
    showInfo: false
  }

  handleInfo = () => {
    this.setState({
      showInfo: !this.state.showInfo
    });
  }

  render() {
    const { city, img, name, info } = this.props.tour;

    return ( 
      <article className = "tour">
        <div className ="card">
          <img src = {img} className = "img-fluid card-img-top" />
          <span className = "close-btn">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </span>
          <div className="card-body">
            <h3>{city}</h3>
            <h4>{name}</h4>
            <h5>info{" "}
              <span onClick={this.handleInfo}>
                <i className="fa fa-arrow-down" ariaHidden="true"></i>
              </span>
            </h5>
            {this.state.showInfo && <p>{info}</p>}
          </div>
        </div>
      </article>
    );
  }
}
// CC BY 2.0 Wikipedia
ReactDOM.render(
  <Tour tour={{ city: "Jaén", img: "https://upload.wikimedia.org/wikipedia/commons/b/b2/Ja%C3%A9n-loc.svg", name: "Capital del Santo Reino", info: "Jaén es una ciudad y municipio español de la comunidad autónoma de Andalucía, capital de la provincia homónima. Ostenta el título de «Muy Noble y Muy Leal Ciudad de Jaén, Guarda y Defendimiento de los Reinos de Castilla»" }} />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

css
Martin Hope
Ceci Benitez
Asked: 2020-06-22 10:59:35 +0800 CST
  • 0

I have my component defined in moviesTable.jsx <TableBody data = {this.props.movies} />and in tableBody.jsx I use the map function nesting it, that is, I use map twice but I don't know why it says undefined, I don't see that my code is wrong, I already looked in other forums and they said I should define it with this.props, but I do have it defined, I don't think it's because I use it twice since I have a table so I don't know what is really wrong, the error marks line 21 where the first map begins .

import React, { Component } from 'react';
import _ from 'lodash';

class TableBody extends Component {
   renderCell = (item, column) => {
       if(column.content) return column.content(item);

       return _.get(item, column.path);
   }

   createKey = (item, column) => {
       return item._id + (column.path || column.key);
   }
   
    render() { 
        const { data, columns } = this.props;

        return ( 
            <tbody>
               {data.map(item => (
                <tr key = {item._id}>
                    {columns.map(column => <td key = {this.createKey(item, column)}>{this.renderCell(item, column)}</td>)}
                </tr>))}
            </tbody>
         );
    }
}
 
export default TableBody;

javascript
Martin Hope
Ceci Benitez
Asked: 2020-02-08 08:45:26 +0800 CST
  • -1

enter image description herethis is the image controller ImageController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;
use App\ProductImage;

class ImageController extends Controller
{
    public function index($id)
    {
      $product = Product::find($id);
      $images = $product->images;
      return view('admin.products.images.index')->with(compact('product', 'images'));
    }

    public function store(Request $request, $id)
    {
      //guardar la imagen en nuestro proyecto
      $file = $request->file('photo');
      $path = public_path() . '/images/products';
      $fileName = uniqid() . $file->getClientOriginalName();
      $file->move($path, $fileName);

      //crear 1 registro en la tabla product_images
      $productImage = new ProductImage();
      $productImage->image = $fileName;
      //$productImage->featured = false;
      $productImage->product_id = $id;
      $productImage->save(); //INSERT

      return back();
    }

    public function destroy()
    {

    }
}

This is the view of the images

@extends('layouts.app')

@section('title', 'Imágenes de producto')

@section('body-class', 'landing-page sidebar-collapse')

@section('content')
<div class="header header-filter" style="background-image: url('{{ asset('img/profile_city.jpg') }}'); height: 300px;">
</div>
<div class="main main-raised">
    <div class="container">
        <div class="section text-center">
            <h2 class="title">Imágenes del producto "{{ $product->name }}"</h2>
            <div style="display: block; margin: 30px auto;">
              <form action="" method="post" enctype="multipart/form-data">
                {{ csrf_field() }}
                <label class="btn btn-primary btn-round" for="photo">Elige una imagen</label>
                <input class="file" type="file" id="photo" name="photo" required>
                <button type="submit" class="btn btn-primary btn-round">Subir nueva imagen</button>
                <a href="{{ url('/admin/products') }}" class="btn btn-default btn-round">Cancelar</a>
              </form>
            </div>
            <div class="row">
            @foreach($images as $image)
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-body" style="margin-bottom: 30px;">
                  <img src="{{ $image->url }}" class="rounded mx-auto d-block">
                  <button type="submit" class="btn btn-danger btn-round">Eliminar</button>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
    </div>
</div>
@include('includes.footer')
@endsection

enter image description here

php
Martin Hope
Ceci Benitez
Asked: 2020-07-14 08:46:02 +0800 CST
  • 0

I'm trying to make a slider dynamic if I load it statically everything works fine but when I use razor it doesn't load the images, but it does load the letters and the slider in general but it can't be seen because the images don't appear, I suspect which is because to load the images I use css.

this is javascript 

jQuery(document).ready(function () {

    "use strict";

    $('.slider-carousel').caroufredsel({
        responsive: true,
        width: '100%',
        circular: true,

        scroll:
            {
                items: 1,
                duration: 1500,
                pauseOnHover: true
            },

        auto: true,

        items:
            {
                visible:
                    {
                        min: 1,
                        max: 1
                    },

                height: "variable"
            }
    });
});
Este es CSS

.img1 {
    background: url('../img/slider/1.png');
    background-size: 100% 100%;
}

.img2 {
    background: url('../img/slider/2.png');
    background-size: 100% 100%;
}

.img3 {
    background: url('../img/slider/3.png');
    background-size: 100% 100%;
}
Este es razor


@if(Model.VMRepositorioSlides != null)
{
    <div class="slider">
        @foreach(Slide slide in Model.VMRepositorioSlides.GetSlides())
        {
        <ul class="slider-carousel">
            <li class="@Model.VMSlide.claseSlide">
               <div class="col-md-4">
                   <h3>@Model.VMSlide.TituloSlide</h3>
                   <p class="texto-slider">@Model.VMSlide.DescripcionSlide</p>
                   <p class="rosa-bold">@Model.VMSlide.SpanSlide</p>
               </div>
            </li>
        </ul>
        }
    </div>
}

My class

public class Slide 
{ 
   public int IdSlide { get; set; } 
   public string TituloSlide { get; set; } 
   public string DescripcionSlide { get; set; } 
   public string SpanSlide { get; set; } 
   public string MostrarTextoSlide { get { return TituloSlide; } } 
   public string CoverSlide { get { return TituloSlide.Replace(" ", "-").ToLower() + ".png"; } } 
}

excuse me if what I ask is very obvious, I'm just starting

javascript
Martin Hope
Ceci Benitez
Asked: 2020-07-13 09:49:23 +0800 CST
  • 3

I try to get this to work but it doesn't show me any error or exception currently it just doesn't show up in the view...

@if (Model.Recetas != null)
{
    <div class="row">
        @foreach (Receta receta in Model.Recetas)
        {
            <div class="col-md-4">
                <div class="well">
                    <h4>@Html.ActionLink(receta.Titulo, "Receta", new { id = receta.Id, @class = "Recetas" })</h4>
                    <a href="@Url.Action("Receta", new { id = receta.Id })">
                        <img src="~/img/fotos/@receta.CoverImageFileName" alt="@receta.MostrarTexto" class="img-responsive" />
                    </a>
                </div>
            </div>
        }
    </div>
}
c#
Martin Hope
Ceci Benitez
Asked: 2020-07-12 09:10:44 +0800 CST
  • 0

For example:

public class A {
    //propiedades y metodos
} 
public class B {
    //propiedades y metodos
} 
// y luego: 
public class classContainer { 
    public A class1 {get; set;} 
    public B class2 {get; set;}
}

How would I access the properties of my classes A and B from the Container class?

c#
Martin Hope
Ceci Benitez
Asked: 2020-07-11 06:50:23 +0800 CST
  • 0

https://github.com/PequeCeci/Guava.git first here I leave the project uploaded to github... second here the code

    // this is the model that contains both models
    namespace MyFirstWebsite.Models
    {
        public class Model
        {
            public List RecipeModel { get; set; }
            public Slide modelSlide { get; set; }



        public Modelo(List<Receta> modelo1, Slide modelo2)
        {
            modeloReceta = modelo1;
            modeloSlide = modelo2;
        }
       }
}





//luego este es mi controller 

    namespace MyFirstWebsite.Controllers
    {
        public class HomeController : Controller
        {
            private RepositorioRecetas _reposRecetas = null;
            private Modelo _modelos = null;
            public List modeloReceta = null;
            public Slide modeloSlide = null;


        public HomeController()
        {

        }

        [HttpPost]
        public ActionResult Index()
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Index");
            }
            return View(_modelos);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult Recetas(int? id)
        {
            if (id == null)
            {
                return HttpNotFound();
            }

            var receta = _reposRecetas.GetReceta((int)id);

            return View(receta);
        }
    }
}

one of the models has a recipe repository in data, the other model is to make a slider dynamic...

c#
Martin Hope
Ceci Benitez
Asked: 2020-07-10 06:00:37 +0800 CST
  • 1

I am using this Caroufredsel plugin but it leaves me a blank space on the right every time it does a slide, and I would like one image to go right after the other.

This is my html, css and js code:

jQuery(document).ready(function() {
  "use strict"

  $('#slider-carousel').caroufredsel({
    responsive: true,
    width: '100%',
    circular: true,
    align: 'center',

    scroll: {
      items: 1,
      pauseOnHover: true,
      duration: 1000,
      pauseOnHover: true,
      timeoutDuration: 3000,
      onBefore: function() {
        $('ul#slider-carousel li')
          .animate({
            opacity: 0.5
          }, 250);
      },
      onAfter: function() {
        $('ul#slider-carousel li')
          .filter(':eq(1)')
          .animate({
            opacity: 1
          }, 250);
      }
    },

    auto: true,

    items: {
      visible: {
        min: 1,
        max: 1,

      },
      start: -1,

      height: "variable"
    },
    pagination: {
      container: ".sliderpager",
      anchorBuilder: false
    }
  });
});
/*slider*/

.container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider {
  margin-top: 55px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.container .body-content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider ul.slider-carousel {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.caroufredsel_wraper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider,
.slider ul.slider-carousel,
.slider ul.slider-carousel li {
  height: 100%;
  width: 100%;
  text-align: center;
  color: #FFF;
}

.slider ul.slider-carousel li h3 {
  margin-top: 150px;
  margin-bottom: 30px;
  color: #FFF;
}

.slider ul.slider-carousel li p {
  margin-bottom: 20px;
}

.img1 {
  background: url('https://placehold.it/500x300/ff0000');
  background-size: 100% 100%;
}

.img2 {
  background: url('https://placehold.it/500x300/00ff00');
  background-size: 100% 100%;
}

.img3 {
  background: url('https://placehold.it/500x300/0000ff');
  background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
  color: #E74C3C;
}

.slider ul.sliderpager li a {
  color: #34495E;
}

.slider ul.sliderpager li {
  padding: 0 3px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>

<!-- slider -->
<div class="slider" id="slider">
  <ul class="slider-carousel" id="slider-carousel">
    <li class="img1">
      <h3></h3>
      <p></p>
    </li>
    <li class="img2">
      <h3></h3>
      <p></p>
    </li>
    <li class="img3">
      <h3></h3>
      <p></p>
    </li>
  </ul>
  <ul class="sliderpager">
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
  </ul>
</div>

javascript
Martin Hope
Ceci Benitez
Asked: 2020-07-09 15:58:05 +0800 CST
  • 1

@font-face {
    font-family: "champagne&limousines";
    src: url('../fonts/Guava/Champagne & Limousines.ttf') format('truetype'); 

    font-family: "champagne&limousines-bold";
    src: url('../fonts/Guava/Champagne & Limousines Bold.ttf') format('truetype');
} 

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font: 14px "champagne&limousines", sans-serif;
    text-align: justify;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
/*revisar logo*/
a.navbar-brand {
    background-color: rgba(255, 255, 255, 0.7);
    background: url(../img/logo/logotrans.png) no-repeat top left;
    display: block;
    width: 114px;
    height: 64px;
    margin: 20px 20px;
    margin-right: 40px;
    text-indent: -9999px; /* hides the link text */
}

.navbar-inverse .navbar-nav > li > a 
{
    color: rgba(255, 255, 255, 0.7);
}

a.menu-lindo {
    font: 26px "champagne&limousines-bold", sans-serif;
    margin-top: 25px;
    margin-right: 10px;
    line-height: 25px;
}

a.menu-lindo:hover, a.menu-lindo:focus {
    font: 26px "champagne&limousines-bold", sans-serif;
    padding: 10px 15px;
}

.navbar {
    background-color: rgba(211,47,47, 0.9);
    border-color: rgba(211,47,47, 0.9);
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: #b71c1c;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: #D32F2F;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(211,47,47, 0.9);
}

.jumbotron {
    padding: 15px 30px !important;
}

.well {
    margin-top: 80px;
}

a {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    font-size: 18px;
}

a:hover {
    color: #b71c1c;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

a:focus {
    color: #D32F2F;
    font: 18px "champagne&limousines-bold", sans-serif;
    text-decoration: none;
}

h2 .titulo-receta {
    margin-top: 170px;
}

.miimagen{
    margin-top: 80px;
}

a.btn {
    color: #fff;
    font: 18px "champagne&limousines-bold", sans-serif;
}

a.btn:hover, a.btn:focus, a.btn:active, a.btn:visited {
    color: #fff !important;
    font: 18px "champagne&limousines-bold", sans-serif;
}

.backbar {
    margin-top: 55px;
    background: rgba(118,129,159, 0.7);
}

.backbar .btn {
    background: rgba(118,129,159, 0.7);
    margin: 10px 10px;
    border-color: #fff;
}

.backbar .btn:hover, .backbar .btn:focus {
    background: rgba(118,129,159, 1);
}

/*slider*/
.slider  {
    margin-top: 55px
}

.container .body-content {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.slider .slider-carousel {
    margin-left: 0;
    margin-right: 0;
    box-sizing: content-box;
}

.caroufredsel_wraper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
    height: 100%;
    width: 100%;
    text-align: center;
    color: #FFF;
}

.slider ul.slider-carousel li h3 {
    margin-top: 150px;
    margin-bottom: 30px;
    color: #FFF;
}

.slider ul.slider-carousel li p {
    margin-bottom: 20px;
}

.img1 {
    background: url('../img/slider/1.png');
    background-size: 100% 100%;
}

.img2 {
    background: url('../img/slider/2.png');
    background-size: 100% 100%;
}

.img3 {
    background: url('../img/slider/3.png');
    background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
    color: #E74C3C;
}

.slider ul.sliderpager li a {
    color: #34495E;
}

.slider ul.sliderpager li {
    padding: 0 3px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
}


/*footer */
footer .copyright {
    text-align: center;
    margin-top: 80px;
}
<div class="slider" id="slider">
    <ul class="slider-carousel" id="slider-carousel">
        <li class="img1">
            <h3></h3>
            <p></p>
        </li>
        <li class="img2">
            <h3></h3>
            <p></p>
        </li>
        <li class="img3">
            <h3></h3>
            <p></p>
        </li>
    </ul>
    <ul class="sliderpager">
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
        <li><a href="#"><i class="fa fa-circle"></i></a></li>
    </ul>
</div>

I want to eliminate the margins so that the slider images cover the entire width of the page, but only the slider part, the rest is perfect...

html
Martin Hope
Ceci Benitez
Asked: 2020-07-04 07:38:42 +0800 CST
  • 0
<div class="row">
@foreach(var comicBook in Model)
{
    <div class="col-md-3">
        <h4>@Html.ActionLink(comicBook.DisplayText, "Detail", new { id = comicBook.Id })</h4>
        <a href="@Url.Action("Detail", new { id = comicBook.Id})">
            <img src="/Images/@comicBook.CoverImageFileName"
                 alt="@comicBook.DisplayText"
                 class="img-responsive" />
        </a>
    </div>
}

c#
Martin Hope
Ceci Benitez
Asked: 2020-05-19 11:35:45 +0800 CST
  • 0

I'm installing SQL Server 2017, but when it gets to the Ready to Install step , I get the following issue :

Error: The required MSI package 'C:\Developer\Dev\2058_ESM_LP\x64\setup\SqlSupport.msi' doesn't exist.

I don't know how to fix this error, I don't know what an MSI is and what I should do. How can I fix this issue and install SQL Server 2017?

sql-server