The problem is when i run application and go to localhost:8080 i dont see the header which i made in but when application is not running and i want to see how the web is lookign i see it so the problem might be in link for my main.css.
this is for newest bootstrap 4.3.1 java 12 spring boot 2.1.5
home.html
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="../static/css/main.css" th:href="#{/css/main.css}" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron home-jumbo">
<div class="container text-center text-white jumbo-container">
<h1 class="display-3">Foodie</h1>
<p>Welcome in our restaurant. You can order what You want and how much You want and we will do it for
You.</p>
</div>
</div>
<div th:remove="all-but-first">
<div class="media col-6 offset-3" th:each="item: ${items}">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5 th:text="|${item.name}(${item.price}zł)|">Pizza Margherita (25zł)</h5>
<p th:text="${item.shortDescription}">Short description pizza margherita, delicious classic on thin
crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Capriciosa (26zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Mafioso (27zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
.home-jumbo {
background: url("../img/fork.png") center;
}
.media-body {
margin-left: 10px;
}
HomeCotroller
package pl.karol.foodieapp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import pl.karol.foodieapp.item.Item;
import pl.karol.foodieapp.item.ItemRepository;
import java.util.List;
#Controller
public class HomeController {
private ItemRepository itemRepository;
#Autowired
public HomeController(ItemRepository itemRepository) {
this.itemRepository = itemRepository;
}
#GetMapping("/")
public String home(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "home";
}
}
I expect the same website but including the header i put in jumbotron.
Solved. In main.css instead of typing image url address in "address" use 'address'
.home-jumbo {
background: url('../img/fork.png') center;
}
.media-body {
margin-left: 10px;
}
Related
I would like to use razor template I use vs19 on windows
no option for creating a new
RazorTemplatePreprocessor
so, in the shared project I created an empty text file and change extension to .cshtml and change file custom tool from property to
RazorTemplatePreprocessor
which generated the corresponding cs file
in cshtml file
#using DataBase.Models;
#model List<Brand>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="columns">
#foreach (var m in Model)
{
<div class="one-fifth column">
<span class="d-inline-block p-3 bg-red text-white">
#m.ModelName
</span>
</div>
<div class="four-fifths column">
<span class="d-inline-block p-3 bg-green">
#m.ModelDescription
</span>
</div>
}
</div>
</div>
</body>
</html>
but in loop there are an error for Model (var m in Model)
The name 'Model' does not exist in the current context
Try to change (It's better to pass your Model class)
#foreach (var m in Model)
to
#foreach (var m in #Model)
The #model directive should be followed by a Type,this could be any custom class.
When #Model is referenced throughout the template, it provides a reference to the object passed to the template when it is generated.
Update:
for example,your model class like:
public class YourModel{
...
public List<Brand> Brands{ get; set; }
public class Brand{
public strin ModelName{ get; set; }
public strin ModelDescription{ get; set; }
}
}
then
#using DataBase.Models;
#model YourModel
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="columns">
#foreach (var m in #Model.Brands)
{
<div class="one-fifth column">
<span class="d-inline-block p-3 bg-red text-white">
#m.ModelName
</span>
</div>
<div class="four-fifths column">
<span class="d-inline-block p-3 bg-green">
#m.ModelDescription
</span>
</div>
}
</div>
</div>
</body>
</html>
I am developing a spring boot web application. In the view for products list, when I want to delete one of the rows after clicking on "Yes" when the pop up appears, the row delete is always the first in the table, not the chosen row. I think I have an issue with my loop. I am using Bootstrap with thymeleaf
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymleaf/layout">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Product Management</title>
</head>
<body>
<header>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a th:href="#{/}">Products list</a></li>
<li><a th:href="#{/new}">Add a product</a></li>
</ul>
</div>
</div>
</header>
<div align="center">
<br /> <br />
<h2>
<b><p class="bg-danger">PRODUCTS LIST</p></b>
</h2>
<br /> <br />
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Manufacturer</th>
<th>Country</th>
<th>Price</th>
<th>Designation</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${listProducts}">
<td th:text="${product.id}">Product ID</td>
<td th:text="${product.name}">Model name</td>
<td th:text="${product.brand}">Manufacturer</td>
<td th:text="${product.madein}">Country</td>
<td th:text="${product.price}">Price</td>
<td th:text="${product.price}">Designation</td>
<td><a class="btn btn-primary" role="button"
th:href="#{'/edit/' + ${product.id}}">Edit</a>
<a class="btn btn-danger" role="button"
data-toggle="modal" data-target="#myModal">Delete</a> <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>Are you sure to delete this products ?</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" role="button"
th:href="#{'/delete/' + ${product.id}}">Yes</a>
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div></td>
</tr>
</tbody>
</table>
</div>
<br /> <br /> <a class="btn btn-success" href="new" role="button">Create
a new product</a> <br /> <br /> <br /> <br />
<!-- Footer -->
<footer class="page-footer font-small blue fixed-bottom">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">
© 2020 Copyright: www.sample.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
ProductController :
package com.gestion.products.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.gestion.products.entity.Product;
import com.gestion.products.service.ProductService;
#Controller
#RequestMapping(name = "/all")
public class ProductController {
#Autowired
private ProductService service;
#RequestMapping("/")
public String viewHomePage(Model model) {
List<Product> listProducts = service.listAll();
model.addAttribute("listProducts", listProducts);
return "index";
}
#RequestMapping("/new")
public String showNewProductForm(Model model) {
Product product = new Product();
model.addAttribute("product",product);
return "new_product";
}
#RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveProduct(#ModelAttribute("product") Product product) {
service.save(product);
return "redirect:/";
}
#RequestMapping("/edit/{id}")
public ModelAndView showEditProductForm(#PathVariable(name = "id") Long id) {
ModelAndView mav = new ModelAndView("edit_product");
Product product = service.get(id);
mav.addObject("product", product);
return mav;
}
#RequestMapping("/delete/{id}")
public String deleteProduct(#PathVariable(name = "id") Long id) {
service.delete(id);
return "redirect:/";
}
}
I faced the same issue yesterday and I found another way to solve it.
So I was using modal too and the problem comes from it.
I recommend you to use bootstrap confirmation plugin instead of modal then it will be easier for the controller to get the id of the chosen row.
Using a modal makes the controller choose a random id instead of the chosen one.
I'm currently injecting a html string from mysql via http and then displaying it in a component. It's kind of strange but my styling does not get applied to my dynamically injected html. However a few classes do from my other css library. But my bulma.css library styling does not seem to be applied.
I'm currently using, dangerouslySetInnerHTML={this.createMarkup()}
The html is being rendered in the browser successfully.
Here are my relevant files
My React Component file
import React from 'react';
import {connect} from 'react-redux';
import { fetchPost } from '../actions/index';
class Article extends React.Component {
componentWillMount(){
this.props.fetchPost();
}
createMarkup() {
return {__html: this.props.post};
}
renderPosts(){
if(!this.props.post){
return(
<img src="/app/img/loading.svg" alt=""/>
)
}
if(this.props.post){
return(
<div dangerouslySetInnerHTML={this.createMarkup()} />
)
}
}
render(){
return(
<div >{this.renderPosts()}</div>
)
}
}
function mapStateToProps(state){
return {
post: state.posts.post
}
}
export default connect(mapStateToProps, { fetchPost })(Article);
My Index HTML file (blade file using laravel )
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/app/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/app/css/bulma-0.4.1/css/bulma.css">
<link rel="stylesheet" href="/app/css/prism.css">
<link rel="stylesheet" href="/app/css/app-style.css?{{str_random(40)}}">
<title>Development Gems!</title>
</head>
<body>
<div id="root">
</div>
<script src="/app/js/plugins/prism.js"></script>
<script src="/app/js/app.bundle.js?{{str_random(40)}}"></script>
</body>
</html>
My html string
$data = '<div className="container padded-top-di-20">
<div className="columns">
<div className="column">
<p className="title is-1 has-text-centered">How to install Laravel 5 with Xampp (Windows)</p>
</div>
</div>
<p className="title is-3">
Requirements
</p>
<div className="content">
<ul>
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
<li>Integer in volutpat libero.</li>
<li>Donec a diam tellus.</li>
<li>Aenean nec tortor orci.</li>
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
</ul>
</div>
<p className="title is-3">
Install Xampp
</p>
<p>
First of all, we need Xampp, so we can download it from the official page:
</p>
Download Xampp
<p className="title is-3">
Composer
</p>
<p>
After you\'ve downloaded and installed Xampp, we need to install Composer.
</p>
<p>
Composer is a PHP package manager that is integrated with Laravel Framework. In Windows we can install it easy going to the official page and download the installer.
</p>
<div className="columns">
<div className="column">
<pre className="command-line language-bash" data-user="Thatguyjono94" data-host="localhost"><code className="language-bash">{`cd \/usr\/local\/etc`}</code></pre>
</div>
</div>
<div className="columns">
<div className="column">
<pre className="command-line language-bash" data-user="Thatguyjono94" data-host="localhost"><code className="language-bash">{`cd \/usr\/local\/etc`}</code></pre>
</div>
</div>
<div className="columns">
<div className="column is-half is-offset-one-quarter">
<figure className="image is-128x128 margin-auto-di">
<img src="/app/img/profiles/avatar_icon-1.png" />
</figure>
<p className="title is-2 is-spaced has-text-centered">#Thatguyjono94</p>
<p className="subtitle is-4 has-text-centered">I\'m a DOPE AF web developer that focuses on building disruptive, fast moving and kick ass web applications.</p>
<div className="has-text-centered">
<span className="icon is-medium">
<i className="fa fa-github" aria-hidden="true"></i>
</span>
<span className="icon is-medium">
<i className="fa fa-facebook-official" aria-hidden="true"></i>
</span>
<span className="icon is-medium">
<i className="fa fa-twitter-square" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>';
dangerouslySetInnerHTML expects an HTML string. The string you are providing is formatted as a JSX string because it contains className instead of class. To fix it, convert each instance of className to class.
I am trying to align three images (in a bootstrap row) to be vertically central (currently the images are at the top, but I want the choice to either centre them vertically or pull it to the bottom
Here is the image
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vintarn Burmese</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
<style>
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
}
.navbar-default ul {
margin-top: 5px;
font-family: sans-serif;
font-size: 1.1em;
}
.navbar-default li {
font-family: sans-serif;
background-color: rgba(255,253, 208, 0.7);
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.navbar-brand {
font-family: 'Marck Script', cursive;
font-size: 2.5em;
}
.testDiv {
height: 100%;
width: 100%;
background-color: rgba(255,192,203,0.8);
}
p {
line-height: 170%;
font-family: sans-serif;
}
.lead {
font-family: sans-serif;
font-size: 1.8em;
}
.marginTop {
margin-top: 20px;
}
.frontImage {
width: 90%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 30px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand">Vintarn Burmese</a>
</div>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li data-toggle="modal" data-target="#aboutModal">Kittens</li>
<li data-toggle="modal" data-target="#contactModal">My Cats</li>
<li>History</li>
<li data-toggle="modal" data-target="#aboutModal">About Millie</li>
<li data-toggle="modal" data-target="#contactModal">Links</li>
<li data-toggle="modal" data-target="#contactModal">Gallery</li>
<li data-toggle="modal" data-target="#contactModal">Contact Us</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="testDiv">
<div class="container contentContainer" id="">
<div class="row-fluid">
<div class="col-md-4 col-sm-4">
<img src="images/landing/bvna-member-signature.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/Vania-8-mths-2.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/gccflog.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 marginTop" id="">
<h1 class="lead">Welcome to the story of the Vintarn Burmese...</h1>
<p>My name is Christine Stalker and the first Burmese to come into my life was a brown girl called 'Floo'. She belonged to a vet I worked for in London in 1972 whilst training to be a veterinary nurse and she was simply the naughtiest cat I'd ever met - but she was utterly adorable! I promised myself that one day, I would have a Burmese of my own... Three years later, in 1975, whilst working in Bedford as a newly qualified veterinary nurse, I bought my own very first Burmese (a brown tortie) called Tantabin Amazing Grace - better known as "Eccles" from a local breeder, Mrs Bettina Stapleton. Bettina mentored me into showing and breeding and thus began what has become, over the past 40 years, an enduring "love affair" with Burmese cats! I am a qualified Registered Veterinary Nurse (RVN) and I worked full time in Veterinary Practice for 30 years, until 2002. This was followed by four years in publishing at OUR CATS in Manchester. From 2006 - 2011 I owned & published a trade magazine. I now work part-time for a local charity - this means I get to spend lots of time at home with my cats. I share my home in Cheshire with three adorable Burmese cats. Two are now retired from breeding and have been neutered, they are: 'Whisper' (Imperial Grand Champion & Imperial Grand Premier Vintarn Whisper a Wish) and 'Bo' (Champion Vintarn Rosies Rainbow) - who is Whisper's daughter. Last but not least, is my latest addition, a lilac girl called 'Lyra' (Vintarn Lilac Lyra) I am hoping that Lyra will have her first litter in 2015. My prefix, Vintarn, was registered with the G.C.C.F. in 1977. I enjoy showing my beautiful cats at Championship Shows in the UK, and was delighted when my lilac tortie, Vania, became my first Grand Champion on 8th March 2008! Vania is now retired and lives a life of luxury in Southport! Whisper, Vania's daughter made me very proud in November 2009, by becoming Best of Variety Burmese at the Cheshire Area Cat Show. She was then became a Grand Champion on 6th February 2010, at the Shropshire Cat Show, following in her mother's footsteps! She has subsequently gone on to gain the dual title of Imperial Grand Champion & Imperial Grand Premier. Whilst I enjoy showing, my cats are, first and foremost, my beloved pets.
</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Marck+Script::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How can I set div with background-image and with 60% to be responsive?
I have navbar (div) in top of site, with margin-left and margin-right 20%, responsive works here.
Under this, is another div, too with margin-left and margin-right 20%, with background-image and here responsive doesn't works.
Second question: if i have 3 divs same line with images (1 img in 1 div), if they cant be located in 1 line because resolution of user, how to "explode" them to 2 or 3 lines?
if needed, demo: http://tlumacz-litewskiego.eu/
It seems like you are just learning so I thought I would take a minute and give a little guidance. First, you should understand that Bootstrap is a framework that allows you to achieve much of what you are trying to do. As you can see, the elements are now lined up and justified yet I used Bootstrap to achieve this, not additional css. Furthermore, as the screen collapses down to mobile, you can control when things stack as you were mentioning you wanted to do. Also, you will see that by using Bootstrap, a lot less styles are needed to achieve the desired result.
Example: http://jsbin.com/beruqorinu/edit?output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div id="header" class="col-sm-12">
<h1>Tłumacz-litewskiego</h1>
</div>
</div>
<div id="menu_container" class="row">
<div class="col-sm-12">
<nav>
<i class="fa fa-home"></i> Strona główna
</nav>
</div>
</div>
<div id="main_image" class="row">
<div class="col-sm-8 bookbox">
<h2>Tłumacz języka litewskiego</h2>
<h4>mgr Živilė Wygońska</h4>
<img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
</div>
<div class="col-sm-4 contact">
<i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
<i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
<i class="fa fa-envelope-o"></i> <b>Email:</b> zivile.wygonska#gmail.com
</div>
</div>
</div>
</header>
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3><i class="fa fa-book"></i> O mnie</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
<p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
<div class="collapse" id="cl1">
<p>Po przeprowadzce do Polski na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
<p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
<p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
<div class="collapse" id="cl2">
<p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
<p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
<p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
<p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
<p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
<p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-users"></i> Klienci</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
<p>Urząd Miasta Suwałki<br />
Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
Suwalski Ośrodek Kultury...</p>
<div class="collapse" id="cl3">
<p>Wigierski Park Narodowy<br />
Muzeum Wigier (Stary Folwark)<br />
Starostwo Powiatowe w Suwałkach<br />
Urząd Miasta w Giżycku<br />
Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
Podlaska Regionalna Organizacja Turystyczna<br />
oraz inni.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div id="copyright" class="row">
<div class="col-sm-12">
© 2015 tlumacz-litewskiego.eu
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65084817-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2 || idElement === 3) {
if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
else {
element.innerHTML = 'Więcej...';
}
}
}
</script>
</body>
</html>
CSS:
header h1 {
margin-bottom: 20px;
font-size: 40px;
}
nav {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 20px;
font-size: 24px;
border-top: 2px solid #C7C7C7;
border-bottom: 2px solid #C7C7C7;
}
#main_image {
background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
background-size: cover;
}
.bookbox,
.contact {
padding: 20px;
}
.bookbox img {
max-width: 128px;
}
.contact {
font-size: 16px;
color: white;
}
.contact i {
margin-right: 2px;
}
#info {
text-align: center;
}
#copyright {
margin-top: 20px;
text-align: right;
}
I have done this for you in the hopes that it will serve as an example so can learn how to properly lay things out. Several recommendations:
Try to avoid using inline css (directly in your html)
Avoid using percentages if possible. Bootstrap is a fixed pixel framework.
Visit http://getbootstrap.com and go through the docs, most importantly the Getting Started page (and see the examples).
Hope this helps!