Upload files to ''
parent
b7cc37eb3c
commit
af458cda96
@ -0,0 +1,101 @@
|
|||||||
|
* {
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background-color: skyblue;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* it is scrolling down not jumping it immidiately more presentable*/
|
||||||
|
html{
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
div{
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
section {
|
||||||
|
/*view height it will adjust the height of a brwser 100% height*/
|
||||||
|
height: 100vh;
|
||||||
|
/*all the text has been align in the center all the section in html*/
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* this is the example of adjacent sibling selector, selecting
|
||||||
|
multiple type selectors,id, classes etc.. slectors must be right beside each other. */
|
||||||
|
|
||||||
|
h3 + img {
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol{
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zuitt-motto {
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offering-item {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the white space between the class is called descendant selector,
|
||||||
|
the .bootcamp-offering-list is the parent and the li is the child. */
|
||||||
|
|
||||||
|
.bootcamp-offering-list li{
|
||||||
|
color: #075966;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*general sibling selector is being used. the other achor tag was not included in the
|
||||||
|
style because they have different parent and h2 and a has the same parent */
|
||||||
|
h2 ~ a, a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modules {
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<title>S14 - Activity</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="bg-dark text-white justify-content-center d-flex">
|
||||||
|
<div class="me-auto p-3">My Website</div>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="me-3 p-3">About</div>
|
||||||
|
<div class="me-3 p-3">Services</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Banner Section -->
|
||||||
|
<section>
|
||||||
|
<div class="bg-danger text-white p-5">
|
||||||
|
<h1>Welcome to My Website</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="container">
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="p-4">
|
||||||
|
<h2>About Us</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mt-3 mb-3">
|
||||||
|
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="container">
|
||||||
|
<div class="row mt-5 text-center">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Web Development</h3>
|
||||||
|
<p>We provide professional web development services.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Graphic Design</h3>
|
||||||
|
<p>Our talented designers create stunning graphics for your brand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-4 col-md-12">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Digital Marketing</h3>
|
||||||
|
<p>We help businesses grow their online presence.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-dark text-white d-flex justify-content-center d-grid gap-4 m-3 py-3">
|
||||||
|
<div>© 2023 My Website.</div>
|
||||||
|
<div>|</div>
|
||||||
|
<div>All rights reserved.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<title>Forms</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="container bg-dark min-vh-100">
|
||||||
|
|
||||||
|
<h1 class="text-center text-light">Contact Me</h1>
|
||||||
|
<div class="row d-flex justify-content-center">
|
||||||
|
|
||||||
|
<form class="text-center bg-primary">
|
||||||
|
<div class="col-sm-12 col-md-8 col-xl-4">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail1">Name</label>
|
||||||
|
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Name" aria-describedby="emailHelp">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail1">Email address</label>
|
||||||
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com" aria-describedby="emailHelp">
|
||||||
|
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail1">Contact Number </label>
|
||||||
|
<input type="number" class="form-control" id="exampleInputEmail1" placeholder=+69000000000 aria-describedby="emailHelp">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="concern">Concern</label>
|
||||||
|
<select id="concern" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||||
|
<option value="gender">gender</option>
|
||||||
|
<option value="row">row</option>
|
||||||
|
<option value="react">react</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputPassword1">Message</label>
|
||||||
|
<textarea class="message" name="message" row="4" class="form-control" id="exampleInputPassword1" placeholder="Text">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary">Send Email</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<title>S14 - Activity</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="bg-dark text-white justify-content-center d-flex">
|
||||||
|
<div class="me-auto p-3">My Website</div>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="me-3 p-3">About</div>
|
||||||
|
<div class="me-3 p-3">Services</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Banner Section -->
|
||||||
|
<section>
|
||||||
|
<div class="bg-danger text-white p-5">
|
||||||
|
<h1>Welcome to My Website</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section class="container">
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="p-4">
|
||||||
|
<h2>About Us</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 mt-3 mb-3">
|
||||||
|
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section class="container">
|
||||||
|
<div class="row mt-5 text-center">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Web Development</h3>
|
||||||
|
<p>We provide professional web development services.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Graphic Design</h3>
|
||||||
|
<p>Our talented designers create stunning graphics for your brand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-4 col-md-12">
|
||||||
|
<div class="p-5 border">
|
||||||
|
<h3>Digital Marketing</h3>
|
||||||
|
<p>We help businesses grow their online presence.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-dark text-white d-flex justify-content-center d-grid gap-4 m-3 py-3">
|
||||||
|
<div>© 2023 My Website.</div>
|
||||||
|
<div>|</div>
|
||||||
|
<div>All rights reserved.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue