scrimba
Preview
Landing Page Module Project
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Landing Page Module Project
AboutCommentsNotes
Landing Page Module Project
Expand for more info
index.html
run
preview
console
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>

<body>
<div id="app">

<nav class="nav-wrapper">

<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
<div class="ml-2">WebDevs</div>
</div>
<div class="flex">
<div v-for="item in nav">
<a :href="item.link"
class="link-item"
:class="[ (item.subLinkModal) ? 'link-active' : '' ]"
@click="toggleSubModal(item)">
{{ item.title }}
</a>

<template v-if="item.subLinks && item.subLinkModal">
<div class="sublinks">
<a v-for="subLink in item.subLinks" :href="subLink.link" class="link-item">{{ subLink.title }}</a>
</div>
</template>
</div>
</div>

</nav>

<div class="hero-box">
<div class="hero-box-left">
<p class="large-text">Your trusted web developers, just a click away.</p>
<p class="medium-text">Meet our team of web dev experts ready to take on your biggest challenges and turn them into opportunities to outshine your competition. Connect with us today to get started.</p>
</div>
<div class="hero-box-right">
<form method="post" action="#">
<div class="input-wrapper">
<label for="first_name">First Name</label>
<input type="text" id="first_name" />
</div>
<div class="input-wrapper">
<label for="last_name">Last Name</label>
<input type="text" id="last_name" />
</div>
<div class="input-wrapper">
<label for="email">Email</label>
<input type="text" id="email" />
</div>
<div class="input-wrapper">
<button>Contact Us</button>
</div>
</form>
</div>
</div>

</div>

<script src="index.pack.js"></script>
</body>
</html>
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html#services
-7:56