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%;
}
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 9 - Toy website | 3,653 Kb |
Day 2 - Invitation | 1,898 Kb |
Day 6 - Author | 2,696 Kb |
Portfolio | 5,958 Kb |
Wikipedia viewer | 2,865 Kb |
Journal | 2,059 Kb |
Tribute Page v1 | 5,740 Kb |
Layout and transition experiment | 2,201 Kb |
Day 13 - Beverage | 3,587 Kb |
Day 17 - Fashion website | 2,912 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 |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Cool audio | Bigliam | 1,868 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!