Locatifs-Info

Developer
Xavier Martínez
Size
2,592 Kb
Views
26,312
  1. Locatifs-Info Previews
  2. Locatifs-Info HTML Codes
  3. Locatifs-Info CSS Codes

How do I make an locatifs-info?

What is a locatifs-info? How do you make a locatifs-info? This script and codes were developed by Xavier Martínez on 19 September 2022, Monday.

Locatifs-Info Previews
IQ Test

Locatifs-Info - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Locatifs-Info</title>	<link href="https://fonts.googleapis.com/css?family=Dosis:400,500,600,700|Shadows+Into+Light+Two|Rubik:400,500" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-1180"> <div class="locinfo-title"> <h1>Mobile Home O'hara</h1> </div> <div class="locinfo-buttons"> <h1>Mobile Home O'hara</h1> </div>
<div class="locinfo-flexcontent"> <div class="locinfo-data"> <div class="infoblocks-cont"> <div class="infoblocks-item"> <div class="infoblocks-name">SURFACE</div> <div class="infoblocks-icon">36m2</div> </div> <div class="infoblocks-item"> <div class="infoblocks-name">CAPACITÉ</div> <div class="infoblocks-icon">x4</div> </div> <div class="infoblocks-item"> <div class="infoblocks-name">CHAMBRES</div> <div class="infoblocks-icon">x2</div> </div> <div class="infoblocks-item"> <div class="infoblocks-name">TERRASSE</div> <div class="infoblocks-icon">Icono</div> </div> </div> <p>Mobil home 4 places situés sur le haut du campingavec vue sur le village de Joyeuse, emplacements calmes.</p> <ul> <li>4 Places – 20m² + 13m² de terrasse</li> <li>Chambre 1 : 1 lit : 140 x 190</li> <li>Chambre 2 : 2 lits : 80 x 190</li> <li>Cuisine équipée pour 4 personnes : frigo, réchaud gaz, vaisselle…</p> <li>Salle de bains – WC indépendant</li>	<li>Terrasse couverte, salon de jardin, parasol</li> <li>Chauffage</li> </ul>
<p>Location du dimanche au dimanche.</p> </div> <div class="locinfo-gallery"> Placeholder Gallery </div>
</div>
<div class="flex-loc-services"> <div class="locservice-item"> CUISINE ÉQUIPÉE </div> <div class="locservice-item"> 1 LIT DOUBLE </div> <div class="locservice-item"> 2 LITS JUMEAUX </div> <div class="locservice-item"> DOUCHE </div> <div class="locservice-item"> WC SÉPARÉ </div>
</div>
</div>
</body>
</html>

Locatifs-Info - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
.container-1180 { margin: 0 auto; max-width: 1180px;
}
.locinfo-flexcontent { display: flex; flex-flow: column wrap; width: 100%;
}
.locinfo-data { width: 100%;
}
.locinfo-gallery { width: 100%; float: right;
}
.infoblocks-cont { display: flex; flex-flow: wrap; justify-content: space-between;
}
.infoblocks-item { flex: 1 1; max-width: 80px; text-align: center; margin : 10px;
}
.infoblocks-name { font-family: 'Dosis', sans-serif; font-size: 12px; font-weight: 600; color: #00596c; padding: 10px 5px 5px 5px; background-color: #cee042;
}
.infoblocks-icon { font-family: 'Rubik', sans-serif; font-size: 18px; font-weight: 500; color: #00596c; background-color: #cee042; padding: 10px 5px 10px 5px;
}
h1 { font-family: 'Shadows Into Light Two', cursive; font-size: 42px; font-weight: 400; color: #00596c; margin-bottom: 5px; text-align: center;
}
.flex-loc-services { display: flex; flex-flow: row wrap; justify-content: space-between;
}
.locservice-item { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; flex: 1 1 180px; font-family: 'Dosis', 'sans-serif'; font-size: 17px; max-width: 180px; max-heigth: 105px; font-weight: bold; color: #00596c; background-color: #cee042;
}
/* Medium screens */
@media screen and (min-width: 600px) {
.locinfo-title { float: left;
}
.locinfo-buttons { float: right;
}
.locinfo-flexcontent { flex-flow: row;
}
.locinfo-data { max-width: 450px;
}
}
@media screen and (min-width: 1180px) {
.infoblocks-name { font-size: 14px;
}
.infoblocks-icon { font-size: 24px;
} }
Locatifs-Info - Script Codes
Locatifs-Info - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded September 19, 2022
Rating 3
Size 2,592 Kb
Views 26,312
Do you need developer help for Locatifs-Info?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Xavier Martínez (xmjol) Script Codes
Name
Locations-6-Block-Flex
THRWidgets
Flex Side-content-2
Flex Side-content
React UI - 01 - Voting System
Cards
THRWidgets OldLib
React UI - 05 - Draggable SVG Path Generator
Bottom Menu- Social
A beautiful day
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!