Day 4 - Product site

Developer
Christian
Size
2,883 Kb
Views
22,264
  1. Day 4 - Product site Previews
  2. Day 4 - Product site HTML Codes
  3. Day 4 - Product site CSS Codes

How do I make an day 4 - product site?

KCC even notifier is an app for reminding you the latest announcement posted by the administrators of an institution particularly KCC.. What is a day 4 - product site? How do you make a day 4 - product site? This script and codes were developed by Christian on 15 October 2022, Saturday.

Day 4 - Product site Previews
IQ Test

Day 4 - Product site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 4 - Product site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="bg-gradient text-center m-0 py-4">KCC event notifier</h1>
<main class="row"> <section class="col-md-6 d-flex justify-content-center align-items-center p-4"> <!-- ============== --> <!-- Start carousel --> <!-- ============== --> <div id="platform-indicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators pt-3"> <li data-target="#platform-indicators" data-slide-to="0" class="active"></li> <li data-target="#platform-indicators" data-slide-to="1"></li> <li data-target="#platform-indicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://s1.postimg.org/g25tm2kqn/051-poster.png" alt="Announcement"> <h2 class="d-flex align-items-center">	Post Announcements.	</h2> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://s1.postimg.org/79ouydzlr/051-smartphone.png" alt="Smartphone"> <h2 class="d-flex align-items-center text-center">	That will be received by mobile	</h2> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://s30.postimg.org/noi5zc0w1/051-graphic-design-1.png" alt="Desktop Computer"> <h2 class="d-flex align-items-center text-center pl-3">	and desktop.	</h2> </div> </div> </div> <!-- ============== --> <!-- End carousel --> <!-- ============== --> </section> <section class="col-md-6 d-flex justify-content-center align-items-center"> <img src="https://s29.postimg.org/syotra0p3/051-business-card.png" alt="" class="img-fluid card-img-top"> </section>
</main>
<footer> <div class="card card-primary"> <p class="text-white text-center pt-3"> © Copyright 2017 Christian Pecson. Credits to <a target="_blank" href="https://www.pdf-archive.com/2017/03/29/license/license.pdf">Flaticon</a>. </p> </div>
</footer> <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>

Day 4 - Product site - Script Codes CSS Codes

/* Quick resets */
html,
body,
section { height: 100%; }
body { background-color: #0275d8; }
/* Divide the section into two(2) in meduium to lerger devices. */
section:first-child {	background-color: #08f;
}
section {	background-color: #2f8;	height: 78vh;
}
/* Put a shadow in h1 */
h1 { box-shadow: inset 0 -2px 10px rgba(255,255,255,0.5); }
/* Credits to css-tricks: Stick footer * https://css-tricks.com/couple-takes-sticky-footer */
main { min-height: calc(100vh - 150px);
}
footer { height: 50px;
}
/* Set the success link in footer to green */
footer p > a { color: #0f8; }
/* Set no margin for row class */
.row { margin: 0; }
/* Adds a gradient backround to any element. */
.bg-gradient {	background: linear-gradient(45deg, #08f, #0f8);	color: #fff;
}
/* Customize the carousel indicators to match with the color scheme of the site */
.carousel-indicators > li {	background-color: rgba(0,0,0,0.5);	border-radius: 2rem;	padding: 10px;	top: 100px;
}
.carousel-indicators > .active {	background-color: #0f8;
}
.carousel-item > h2 {	color: #0f8;	text-shadow: 0 4px 8px #000;
}
/* Change the image to be smaller */
.img-fluid {	height: 250px;	max-width: 100%;
}
Day 4 - Product site - Script Codes
Day 4 - Product site - Script Codes
Home Page Home
Developer Christian
Username chpecson
Uploaded October 15, 2022
Rating 3
Size 2,883 Kb
Views 22,264
Do you need developer help for Day 4 - Product site?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian (chpecson) Script Codes
Name
Day 3 - Tourist Spot
Day 5 - Restaurant menu
Day 1 - Portfolio
Day 14 - Printing Company
Layout and transition experiment
Photo Gallery
Tribute Page V2
Portfolio
Day 18 - Cruise ship
Wikipedia viewer
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!