Skip to content

Web dev project added #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Web dev project added #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7935392
Created index.html
Nikita0509 Oct 21, 2022
41386cd
Created styles.css file
Nikita0509 Oct 21, 2022
acab781
Added files via upload
Nikita0509 Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added TinDog web-Project/TechCrunch.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TinDog web-Project/bizinsider.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TinDog web-Project/dog-img.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
225 changes: 225 additions & 0 deletions TinDog web-Project/index.HTML
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- google fonts -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;900&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">

<!-- css stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- font awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

</head>

<body>

<section id="title">
<div class="container-fluid">

<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Download</a>
</li>
</ul>
</div>
</nav>

<!-- Title -->
<div class = "row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-lg btn-dark download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-outline-light download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>


<!-- Features -->

<section id="features">

<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check check-circle fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>


<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye bulleye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>

<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>


<!-- Testimonials -->

<section id="testimonials">

<div id="carouselExampleControls" class="carousel slide" data-ride="flase">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image"src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>

<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>

</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>





</section>


<!-- Press -->

<section id="press">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">

</section>


<!-- Pricing -->

<section id="pricing">


<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>

<div class="row">

<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class = "card-header">
<h3>Chihuahua</h3>
</div>

<div class = "card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-block btn-outline-dark btn-lg">Sign Up</button>
</div>
</div>
</div>

<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class = "card-header">
<h3>Labrador</h3>
</div>

<div class = "card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-block btn-dark btn-lg">Sign Up</button>
</div>
</div>
</div>

<div class="pricing-column col-lg-4">
<div class="card">
<div class = "card-header">
<h3>Mastiff</h3>
</div>

<div class = "card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-block btn-dark btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>

</section>


<!-- Call to Action -->

<section id="cta">

<h3 class="cta-heading">Find the True Love of Your Dog's Life Today.</h3>
<button type="button" class=" download-button btn btn-dark btn-lg"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="download-button btn btn-light btn-lg"><i class="fa-brands fa-google-play"></i> Download</button>

</section>


<!-- Footer -->

<footer id="footer">
<i class="footer-logo fa-brands fa-twitter"></i>
<i class="footer-logo fa-brands fa-facebook"></i>
<i class="footer-logo fa-brands fa-instagram"></i>
<i class="footer-logo fa-solid fa-envelope"></i>
<p>© Copyright 2022 TinDog</p>

</footer>


</body>

</html>
Binary file added TinDog web-Project/iphone6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TinDog web-Project/lady-img.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TinDog web-Project/mashable.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 153 additions & 0 deletions TinDog web-Project/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
#title{
background-color: #ff4c68;
color: white;
padding-top: 20px;
}
body{
font-family: "Montserrat";
}
.container-fluid{
padding: 3% 15% 7%;
}
.title-img{
/* padding-top: 100px; */
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
h1{
font-size: 3.5rem;
line-height: 1.5;
font-weight: bold;
}
.navbar{
padding: 0 0 4.5rem;
}
.nav-item{
padding: 0 18px;
}
.navbar-brand{
font-size: 2.5rem;
font-weight: bold;
font-family: 'Ubuntu';
}
.nav-link{
font-size: 1.2rem ;
/* font-family: "Montserrat-light"; */
}
.download-button{
margin: 5% 3% 5% 0;
}

/* features section */
#features{
padding: 7% 15%;
background-color: white;
position: relative;
}

.feature-box{
text-align: center;
padding: 2.5%;
}

h3{
font-weight: bold;
}

p{
color: #8f8f8f;
}

.icon{
color:#ef8172;
margin-bottom: 1rem;
}
.icon:hover{
color: #ff4c68;
}

/* testimonial section */

#testimonials{
text-align: center;
background-color: #ef8172;
}

.carousel-item{
padding: 7% 15%;
}

h2{
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
color: white;
}

.testimonial-image{
width: 10%;
border-radius: 100%;
margin: 20px;
}

#press{
background-color: #ef8172;
text-align: center;
}

.press-logo{
margin:20px 20px 50px;
width: 15%;
}

/* Pricing section */

#pricing{
padding: 100px;
text-align: center;
}
.pricing-column{
padding: 3% 2%;
}

#pricing h2{
color: black;
}

/* footer section */

#cta{
background-color: #ff4c68;
text-align: center;
padding:7% 15%;
}
.cta-heading{
font-size: 3.5rem;
line-height: 1.5;
font-weight: bold;
color: #fff;
}
#footer{
background-color: #fff;
padding: 7% 15%;
text-align: center;
}
.footer-logo{
margin: 20px 10px;
}
#footer p{
size:5px
}
@media (max-width:1000px) {
#title{
text-align: center;
}
.title-img{
position: static;
transform: rotate(0);
}
}


Binary file added TinDog web-Project/tnw.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.