Illyaas

Very responsive Bootstrap website

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Bootstrap 4 Website Layout</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	<link href="style.css" rel="stylesheet">
	<link rel="stylesheet" href="https://m.w3newbie.com/you-tube.css">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-light stick-top" >
	<div class="container-fluid"> 
		<a class="navbar-brand" href="#"><img src="project_assets/logo.png"></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#slides">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#About">About</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#services">services</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#team">Team</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#connect">Connect</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<div id="slides" class="carousel slide" data-ride="carousel">
	<ul class="carousel-indicators">
		<li data-target="#slides" data-slide-to="0" class="active"></li>
		<li data-target="#slides" data-slide-to="1"></li>
		<li data-target="#slides" data-slide-to="2"></li>
	</ul>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="project_assets/background.png">
			<div class="carousel-caption">
				<h1 class="display-2">Bootstrap</h1>
				<h3>Complete Website Layout</h3>
				<button type="button" class="btn btn-outline-light btn-lg">View Demo</button>
				<button type="button" class="btn btn-primary btn-lg">Get started</button>
			</div>
		</div>
		<div class="carousel-item">
			<img src="project_assets/background2.png">
		</div>
		<div class="carousel-item">
			<img src="project_assets/background3.png">
		</div>
	</div>
</div>

<div class="container-fluid" id="About">
	<div class="row jumbotron">
		<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
			<p class="lead"> A web hosting service allows indiniduals and orgainzations to make their website accessible via the world wide web.</p>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
			<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></a>
		</div>
	</div>
</div>

<div class="container-fluid padding" id="services">
	<div class="row welcome text-center">
		<div class="col-12">
			<h1 class="display-4">Build with ease</h1>
		</div>
		<hr>
		<div class="col-12">
			<p class="lead">Welcome to me Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs.</p>
		</div>
	</div>
</div>

<div class="container-fluid padding">
	<div class="row text-center padding">
		<div class="col-xs-12 col-sm-6 col-md-4">
			<i class="fas fa-code"></i>
			<h3>HTML5</h3>
			<p>Built with the latest version of HTML, HTML5.</p>
		</div>

<div class="col-xs-12 col-sm-6 col-md-4">
			<i class="fas fa-bold"></i>
			<h3>BOOTSTRAP</h3>
			<p>Built with the latest version of Bootstrap, Bootsrate 4.</p>
		</div>

<div class="col-xs-12 col-md-4">
			<i class="fab fa-css3"></i>
			<h3>CSS3</h3>
			<p>Built with the latest version of CSS, CSS3.</p>
		</div>
	</div>
	<hr class="my-4">
</div>

<div class="container-fluid padding"> 
	<div class="row padding">
		<div class="col-md-12 col-lg-6">
			<h2>If you build it...</h2>
			<p>The colums wwill automatically stack on top of each other when the screen is less than 576px wide.</p>
			<p>Resize the browser window to see the effect. Responsive web design has become more important as the amount of mobile traffic now acconts for more than half of the total internat traffic.</p>
			<p>It can also display the web page differently depending on the screen size or viewing device.</p>
			<br>
			<a href="#" class="btn btn-primary">Learn More</a>
		</div>

<button class="fun" data-toggle="collapse" data-target="#emoji">Click for fun</button>
<div id="emoji" class="collapse">
	<div class="container-fluid padding">
		<div class="row text-center">
			<div class="col-sm-6 col-md-3">
				<img class="gif" src="img/gif/panda.gif">
			</div>

<div class="container-fluid padding">
	<div class="row padding">
		<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="project_assets/team1.png">
				<div class="card-body">
					<h4 class="card-title">John Doe</h4>
					<p class="card-text">John is an internet entrepreneur with almost 20 years of experience.</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>

<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="project_assets/team2.png">
				<div class="card-body">
					<h4 class="card-title">Mary Jo</h4>
					<p class="card-text">Mary is a designer with almost 10 years of digital design experience.</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>

<div class="col-md-4">
			<div class="card">
				<img class="card-img-top" src="project_assets/team3.png">
				<div class="card-body">
					<h4 class="card-title">Phil Ho</h4>
					<p class="card-text">Phil is a developer with over 5 years of web development experience.</p>
					<a href="#" class="btn btn-outline-secondary">See Profile</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid padding"> 
	<div class="row padding">
		<div class="col-md-12 col-lg-6">
			<h2>Our Philosophy</h2>
			<p>We know that greatness in a disruptive era requires bold ambition, curious talent and a culture that belives we're smarter together.</p>
			<p>We approuch every challenge holistically, with best-in-class expertise in data, creativity, media, technology, search, social and more. We call this Alchemy. It has the power to build our clients' brands and transform their business. And while it may seem like magic, we've got it down to a science. whoever made this up must have taken his time.</p>
			<br>
			
		</div>

<div class="container-fluid padding" id="connect">
	<div class="row text-center padding">
		<div class="col-12">
			<h2>Connect</h2>
		</div>

<footer>
	<div class="container-fluid padding">
		<div class="row text-center">
			<div class="col-md-4">
				<img src="project_assets/w3newbie.png">
				<hr class="light">
				<p>555-555-5555</p>
				<p>email@myemail.com</p>
				<p>100 Street Name</p>
				<p>City,state, 00000</p>
			</div>
			<div class="col-md-4">
				<hr class="light">
				<h5>Our hours</h5>
				<hr class="light">
				<p>Monday: 9am - 5am</p>
				<p>Saturday: 10 am - 4pm</p>
				<p>Sunday: closed</p>
				<p>this is fun haha</p>
			</div>
			<div class="col-md-4">
				<hr class="light">
				<h5>Service area</h5>
				<hr class="light">
				<p>City,state, 00000</p>
				<p>City,state, 00000</p>
				<p>City,state, 00000</p>
				<p>City,state, 00000</p>
				
			</div>

<div class="col-12">
				<hr class="light-100">
				<h5>&copy; w3newbie.com</h5>
			</div>
		</div>
	</div>
</footer>

</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html {
  scroll-behavior: smooth;
}
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;

}
.navbar {
  padding: .8rem;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  z-index: 5;

}
.navbar-nav li {
  padding-right: 20px;
}
.nav-link {
  font-size: 1.1em !important;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
}
.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel-caption h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
}
.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}
.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}
.jumbotron {
  padding: 1rem;
  border-radius: 0;
}
.padding {
  padding-bottom: 2rem;
}
.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}
.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}
.fa-code {
  color: #e54d26;
}
.fa-bold {
  color: #563d7c;
}
.fa-css3 {
  color: #2163af;
}
.fa-code, .fa-bold, .fa-css3 {
  font-size: 4em;
  margin: 1rem;
}
.fun {
  width: 100%;
  margin-bottom: 2rem;
}
.gif {
  max-width: 100%;
}
.social a {
  font-size: 4.5em;
  padding: 3rem;
}
.fa-facebook {
  color: #3b5998;
}
.fa-twitter {
  color: #00aced;
}
.fa-google-plus-g {
  color: #dd4b39;
}
.fa-instagram {
  color: #517fa4;
}
.fa-youtube {
  color: #bb0000;
}
.fa-whatsapp {
  color: #25D366;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover,
.fa-instagram:hover,
.fa-youtube:hover,
.fa-whatsapp:hover {
  color: #d5d5d5;
}
footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 2rem;
}
hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}
footer a {
  color: #d5d5d5;
}
hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

/*---Media Queries --*/
@media (max-width: 992px) {
  .social a {
    font-size: 4em;
    padding: 2rem;
  }
  }
@media (max-width: 768px) {
  .carousel-caption {
    top: 45%;
}
.carousel-caption h1 {
  font-size: 350%;
}
.carousel-caption h3 {
  font-size: 140%;
  font-weight: 400;
  padding-bottom: .2rem;
}
.carousel-caption .btn {
  font-size: 95%;
  padding: 8px 14px;
}
.diaplay-4 {
  font-size: 200%;
}
.social a {
    font-size: 2.5em;
    padding: 1.2rem;
  }
}
@media (max-width: 576px) {
  
  .carousel-caption {
    top: 40%;
}
.carousel-caption h1 {
  font-size: 250%;
}
.carousel-caption h3 {
  font-size: 110;
}
.carousel-caption .btn {
  font-size: 90%;
  padding: 4px 8px;
}
.carousel-indicators {
  display: none;
}
.diaplay-4 {
  font-size: 160%;
}
.social a {
    font-size: 2em;
    padding: .7rem;
  }
}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/