Explorer
project
components
index.html
index.js
styles.css
Dependencies
vue@2.4.4
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
<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>