Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https:/edu/w3css/5/w3.css"> <link rel="stylesheet" href="https:/edu/lib/w3-theme-amber.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body class="w3-content"> <div class="w3-row w3-padding w3-theme-d2 w3-xlarge"> <div class="w3-quarter"> <div class="w3-bar"> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-bars"></i></a> </div> </div> <div class="w3-half"> <input type="text" class="w3-amber w3-border-0 w3-padding" style="width:100%"> </div> <div class="w3-quarter"> <div class="w3-bar w3-xlarge"> <a href="#" class="w3-bar-item w3-button w3-left"><i class="fa fa-search"></i></a> <a href="#" class="w3-bar-item w3-button w3-right"><img class="w3-hide-small w3-circle" src="img_avtar.jpg" style="height:40px;"></a> </div> </div> </div> <div class="w3-container w3-padding-32 w3-theme-d1"> <h1>Places to Visit</h1> </div> <div class="w3-grid w3-padding-large w3-theme" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px"> <div class="w3-card-4 w3-white"> <img src="img_5terre.jpg" style="width:100%"> <div class="w3-container"> <h4>Cinque Terre</h4> <p>The Cinque Terre is five small villages on the Italian Riviera.</p> </div> </div> <div class="w3-card-4 w3-white"> <img src="img_monterosso.jpg" style="width:100%"> <div class="w3-container"> <h4>Monterosso</h4> <p>Monterosso al Mare is the northernmost of the villages.</p> </div> </div> <div class="w3-card-4 w3-white"> <img src="img_vernazza.jpg" style="width:100%"> <div class="w3-container"> <h4>Vernazza</h4> <p>Vernazza is one of the five villages of the Cinque Terre.</p> </div> </div> </div> <div class="w3-container w3-theme-d4"> <p class="w3-large">Europe Italy</p> </div> </body> </html>
