Day 4 - Product site
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 - 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](http://shots.codepen.io/chpecson/pen/QpJLLy-512.jpg)
Developer | Christian |
Username | chpecson |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 2,883 Kb |
Views | 22,264 |
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!
Name | Size |
Day 13 - Beverage | 3,587 Kb |
Journal | 2,059 Kb |
Day 4 - Product site | 2,883 Kb |
Day 2 - Invitation | 1,898 Kb |
Photo Gallery | 2,434 Kb |
Day 9 - Toy website | 3,653 Kb |
Day 8 - Fan Page | 5,652 Kb |
Tribute Page v1 | 5,740 Kb |
Day 5 - Restaurant menu | 2,619 Kb |
Day 7 -Movie Trailer | 3,155 Kb |
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!
Name | Username | Size |
Yuliya v krylova | Rafszul | 37,351 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Fading gradient button | Insprd | 1,713 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!