Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaiorosa1
kaiorosa1 authored Feb 18, 2019
0 parents commit ac24807
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 0 deletions.
3 changes: 3 additions & 0 deletions README.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
A Pen created at CodePen.io. You can find this one at https://codepen.io/kaiorosa1/pen/GzYXdX.


27 changes: 27 additions & 0 deletions babel/index.babel
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.
25 changes: 25 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
#main{
background-color: #6d0202;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.container{
text-align: center;
background-color: #fffff5;
}

.flex-container {
display: flex;
justify-content: center;
}

#form {
width: 50%;
}

.justify-paragraph{
text-align: justify;
}

.fas{
color: #6d0202;
}
116 changes: 116 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Product Landing Page (FCC) </title>



<link rel="stylesheet" href="css/style.css">


</head>

<body>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- add bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- add font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<header id="header">

<!-- navbar -->
<nav id="nav-bar" class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img id="header-img" src="https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_M_red-256.png" width="30" height="30" alt="">Mucity
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link-1">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link-2">Why Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link-3">Prices</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div class="container p-5">
<h1 class="pt-3"> STREAM WITH MUCITY</h1>
<!-- User Story #6: I can watch an embedded product video with id="video". -->
<div class="flex-container">
<iframe id="video" width="727" height="409" src="https://www.youtube.com/embed/Qgy6LaO3SB0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- My landing page has a form element with a corresponding id="form". -->
<div class="p-2 ">
<h3>Wanna know more about this ?</h3>
<p>Subscribe to our newsletter!!</p>
<div class="flex-container">
<form id="form" class="input-group" action="https://www.freecodecamp.com/email-submit" name="form">
<label class="input-group-text">Email:</label>
<input class="form-control" id="email" name="email" type="email" placeholder="email@somewhere.com">
<input class="btn btn-danger input-group-append" id="submit" name="submit" type="submit">
</form>
</div>
</div>
<hr>
<h2 id="link-1"><i class="fas fa-music"></i> About <i class="fas fa-music"></i></h2>
<div class="justify-paragraph">
<p >MUCITY is a growing stream platform where you can find the lastest music and also get the best recommendation. We created this platform because we know how hard is to find good music after a while. So we created and perfected a brand new platform.</p>
</div>
<h2 id="link-2"><i class="fas fa-headphones"></i> Why us? <i class="fas fa-headphones"></i></h2>
<div class="justify-paragraph">
<p>We have the BEST music recommendation, our team has been working on this technology for a long time to provide you with the best!! </p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam perspiciatis iusto inventore delectus? Error, facilis nostrum modi numquam fugit soluta non, quibusdam similique itaque, ex harum sapiente suscipit consequuntur amet!</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam perspiciatis iusto inventore delectus? Error, facilis nostrum modi numquam fugit soluta non, quibusdam similique itaque, ex harum sapiente suscipit consequuntur amet!</p>
</div>
<h2 id="link-3"><i class="fas fa-dollar-sign"></i> Prices <i class="fas fa-dollar-sign"></i></h2>
<div>
<p>We have a lot of plans that can fit your needs!</p>
<div>
<p>Check Out Our Monthly Plans Below:</p>
<div>
<a class="btn btn-primary btn-block" role="button" href="#">Basic</a>
</div>
<div>
<a class="btn btn-secondary btn-block" href="#">Premium</a>
</div>
<div>
<a class="btn btn-success btn-block" href="#">Ultra</a>
</div>

</div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</div>



<script src="js/index.js"></script>




</body>

</html>
28 changes: 28 additions & 0 deletions js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.
"use strict";
13 changes: 13 additions & 0 deletions license.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@


<!--
Copyright (c) 2019 by Kaio Rosa (https://codepen.io/kaiorosa1/pen/GzYXdX)


Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

0 comments on commit ac24807

Please sign in to comment.