Upload files and go live
Upload files and go live
In this session, we will try to upload the html files and will go live!!!
Create files
Create three files
- index.html
- style.css
- error.html
Contents of index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>Datavedam Demo Session | Biman Mandal</title>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
9 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10 <link rel="stylesheet" href="style.css">
11</head>
12<body>
13
14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
15 <section class="section gray-bg" id="resume">
16 <div class="container">
17 <div class="row">
18 <div class="col-lg-6">
19 <div class="section-title">
20
21 <h2>Biman Mandal</h2>
22 <p>I design and develop services for customers of all sizes, specializing in creating Data Engineering pipelines</p>
23 </div>
24 </div>
25 </div>
26 <div class="row">
27 <div class="col-lg-6 m-15px-tb">
28 <div class="resume-box">
29 <ul>
30 <li>
31 <div class="icon">
32 <i class="fas fa-user-graduate"></i>
33 </div>
34 <span class="time">2019 - Present</span>
35 <h5>Art Director - Facebook Inc</h5>
36 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
37 </li>
38 <li>
39 <div class="icon">
40 <i class="fas fa-user-graduate"></i>
41 </div>
42 <span class="time">2019 - Present</span>
43 <h5>Art Director - Facebook Inc</h5>
44 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
45 </li>
46 <li>
47 <div class="icon">
48 <i class="fas fa-user-graduate"></i>
49 </div>
50 <span class="time">2019 - Present</span>
51 <h5>Art Director - Facebook Inc</h5>
52 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
53 </li>
54 </ul>
55 </div>
56 </div>
57 <div class="col-lg-6 m-15px-tb">
58 <div class="resume-box">
59 <ul>
60 <li>
61 <div class="icon">
62 <i class="fas fa-briefcase"></i>
63 </div>
64 <span class="time">2019 - Present</span>
65 <h5>Art Director - Facebook Inc</h5>
66 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
67 </li>
68 <li>
69 <div class="icon">
70 <i class="fas fa-briefcase"></i>
71 </div>
72 <span class="time">2019 - Present</span>
73 <h5>Art Director - Facebook Inc</h5>
74 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
75 </li>
76 <li>
77 <div class="icon">
78 <i class="fas fa-briefcase"></i>
79 </div>
80 <span class="time">2019 - Present</span>
81 <h5>Art Director - Facebook Inc</h5>
82 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
83 </li>
84 </ul>
85 </div>
86 </div>
87 </div>
88 </div>
89 </section>
90
91</body>
92</html>
Create Style.css
1body{margin-top:20px;}
2.section {
3 padding: 100px 0;
4 position: relative;
5}
6.gray-bg {
7 background-color: #f5f5f5;
8}
9.section-title h2 {
10 font-weight: 700;
11 color: #20247b;
12 font-size: 45px;
13 margin: 0 0 15px;
14 border-left: 5px solid #fc5356;
15 padding-left: 15px;
16}
17.section-title {
18 padding-bottom: 45px;
19}
20.section-title p {
21 margin: 0;
22 font-size: 18px;
23}
24
25.resume-box {
26 background: #ffffff;
27 box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.08);
28 border-radius: 10px;
29}
30.resume-box ul {
31 margin: 0;
32 padding: 30px 20px;
33 list-style: none;
34}
35.resume-box li {
36 position: relative;
37 padding: 0 20px 0 60px;
38 margin: 0 0 30px;
39}
40.resume-box li:last-child {
41 margin-bottom: 0;
42}
43.resume-box li:after {
44 content: "";
45 position: absolute;
46 top: 0px;
47 left: 20px;
48 border-left: 1px dashed #fc5356;
49 bottom: 0;
50}
51.resume-box .icon {
52 width: 40px;
53 height: 40px;
54 position: absolute;
55 left: 0;
56 right: 0;
57 color: #fc5356;
58 line-height: 40px;
59 background: #ffffff;
60 text-align: center;
61 z-index: 1;
62 border: 1px dashed;
63 border-radius: 50%;
64}
65.resume-box .time {
66 background: #fc5356;
67 color: #ffffff;
68 font-size: 10px;
69 padding: 2px 10px;
70 display: inline-block;
71 margin-bottom: 12px;
72 border-radius: 20px;
73 font-weight: 600;
74}
75.resume-box h5 {
76 font-weight: 700;
77 color: #20247b;
78 font-size: 16px;
79 margin-bottom: 10px;
80}
81.resume-box p {
82 margin: 0;
83}
84
85.resume-box li:after {
86 content: "";
87 position: absolute;
88 top: 0px;
89 left: 20px;
90 border-left: 1px dashed #fc5356;
91 bottom: 0;
92}
Create error.html
1<h1>404 ERROR</h1>
Upload your data in aws s3
- Go to your bucket folder
- Click on upload
- Click on add files
- And then click on upload
Go Live
Now visit the below link
http://<your_bucket_name>.s3-website-us-east-1.amazonaws.com/