Toggle navigation
TUTORIAL HOME
W3.CSS - Building a Mobile App
❮ Previous Next ❯
x
Movies Friends Messages
☰
Movies 2014
Frozen
The response to the animations was ridiculous.
The Fault in Our Stars
Touching, gripping and genuinely well made.
The Avengers
A huge success for Marvel and Disney.
Footer
Create a Basic Mobile Page
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body style="max-width:400px">
<!-- Content goes here -->
</body>
</html>
The style attribute "max-width:400px" simulates a small phone. It will be removed later.
Add Content
Example (using classic HTML elements)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-row">
<div class="w3-col s3">
<img src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
»
Example (using semantic HTML elements)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-row">
<div class="w3-col s3">
<img src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="w3-container">
<h3>Footer</h3>
</footer>
</body>
</html>
»
Add a Color Theme
Examples
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://www.Omegas.com/
»
Read more about color-themes in W3.CSS Color Themes.
Add Your Icon Library
Example
<link rel="stylesheet" href="https://cdnjs.
<h1>
<i class="fa fa-bars"></i> Header
</h1>
»
This example uses Font Awesome icons. You can use any icon library.
Add More Style
Example
<img class="w3-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</
»
Add Side Navigation
x
Movies Friends Messages
Example
<nav class="w3-sidebar w3-bar-block w3-card-2" style="width:30%">
<div class="w3-red">
<a href="javascript:void(0)" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
</div>
</div>
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a class="w3-bar-item w3-button" href="#">Messages</a>
</nav>
<script>
function openSidebar() {
document.getElementById("
}
function closeSidebar() {
document.getElementById("
}
</script>
»
Hide the Side Navigation
Example
<nav class="w3-sidebar w3-bar-block w3-card-2" style="width:30%;display:none"
»
Fixed Navigation, Header and Footer
Example
<header class="w3-top">
<nav class="w3-top">
<footer class="w3-bottom">
»
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS - Building a Mobile App
❮ Previous Next ❯
x
Movies Friends Messages
☰
Movies 2014
Frozen
The response to the animations was ridiculous.
The Fault in Our Stars
Touching, gripping and genuinely well made.
The Avengers
A huge success for Marvel and Disney.
Footer
Create a Basic Mobile Page
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body style="max-width:400px">
<!-- Content goes here -->
</body>
</html>
The style attribute "max-width:400px" simulates a small phone. It will be removed later.
Add Content
Example (using classic HTML elements)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-row">
<div class="w3-col s3">
<img src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
»
Example (using semantic HTML elements)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-row">
<div class="w3-col s3">
<img src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="w3-container">
<h3>Footer</h3>
</footer>
</body>
</html>
»
Add a Color Theme
Examples
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://www.Omegas.com/
»
Read more about color-themes in W3.CSS Color Themes.
Add Your Icon Library
Example
<link rel="stylesheet" href="https://cdnjs.
<h1>
<i class="fa fa-bars"></i> Header
</h1>
»
This example uses Font Awesome icons. You can use any icon library.
Add More Style
Example
<img class="w3-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</
»
Add Side Navigation
x
Movies Friends Messages
Example
<nav class="w3-sidebar w3-bar-block w3-card-2" style="width:30%">
<div class="w3-red">
<a href="javascript:void(0)" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
</div>
</div>
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a class="w3-bar-item w3-button" href="#">Messages</a>
</nav>
<script>
function openSidebar() {
document.getElementById("
}
function closeSidebar() {
document.getElementById("
}
</script>
»
Hide the Side Navigation
Example
<nav class="w3-sidebar w3-bar-block w3-card-2" style="width:30%;display:none"
»
Fixed Navigation, Header and Footer
Example
<header class="w3-top">
<nav class="w3-top">
<footer class="w3-bottom">
»
❮ Previous Next ❯
No comments:
Post a Comment