diff --git a/css/style.css b/css/style.css index e69de29..ef122af 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,154 @@ +* { + box-sizing: border-box; + } + + +body { + font-family: Arial; + background: #f1f1f1; + padding:10px + } + +.topnav { + background-color: rgb(165, 164, 164); + overflow: hidden; + } + + + .topnav a { + float: left; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + + .topnav a:hover { + background-color: #ddd; + color: black; + } + + .topnav a.active { + background-color: #04AA6D; + color: white; + } + + .header { + padding: 10px; + font-size: 20px; + text-align: center; + background: white; + } + + .blogimg{ + width:100%; + height: 50px; + } +.article{ + margin-top: 250px; + padding: 20px; +} +.article img{ + float: left; +} +.courses{ + margin-top: 4%; +} +.column { + float: left; + width: 25%; + padding: 0 10px; + } + + + .row {margin: 0 -5px;} + + + .row:after { + content: ""; + display: table; + clear: both; + } + + + .card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + padding: 16px; + text-align: center; + background-color: #f1f1f1; + } + + + @media screen and (max-width: 600px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; + } + } + + .card-imgs{ + width: 50px; + + } + + + + /* buttons */ +.success { + border-color: #04AA6D; + color: green; + border-radius: 10%; + width:100px; + height: 30px; + } + + .success:hover { + background-color: #04AA6D; + color: white; + } + /* Footer */ + .footer { + padding: 20px; + text-align: center; + background: #ddd; + + font-weight: lighter; + + } + + .fa { + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; + } + + fa:hover { + opacity: 0.7; + } + + .fa-facebook { + background: #3B5998; + color: white; + } + + .fa-twitter { + background: #55ACEE; + color: white; + } + .fa-youtube { + background: #bb0000; + color: white; + } + + .fa-instagram { + background: #125688; + color: white; + } + \ No newline at end of file diff --git a/images/blogimage.webp b/images/blogimage.webp new file mode 100644 index 0000000..36fbd20 Binary files /dev/null and b/images/blogimage.webp differ diff --git a/images/blogimg.jpeg b/images/blogimg.jpeg new file mode 100644 index 0000000..ed460aa Binary files /dev/null and b/images/blogimg.jpeg differ diff --git a/images/css.jpg b/images/css.jpg new file mode 100644 index 0000000..313e129 Binary files /dev/null and b/images/css.jpg differ diff --git a/images/html.png b/images/html.png new file mode 100644 index 0000000..45311a3 Binary files /dev/null and b/images/html.png differ diff --git a/images/html1.png b/images/html1.png new file mode 100644 index 0000000..723710b Binary files /dev/null and b/images/html1.png differ diff --git a/images/javas.png b/images/javas.png new file mode 100644 index 0000000..d0c1b95 Binary files /dev/null and b/images/javas.png differ diff --git a/images/nn.jpg b/images/nn.jpg new file mode 100644 index 0000000..8cf0e0b Binary files /dev/null and b/images/nn.jpg differ diff --git a/images/react.jpg b/images/react.jpg new file mode 100644 index 0000000..f45351e Binary files /dev/null and b/images/react.jpg differ diff --git a/images/students.jpg b/images/students.jpg new file mode 100644 index 0000000..723abfe Binary files /dev/null and b/images/students.jpg differ diff --git a/index.html b/index.html index 3db679e..d4f4c36 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,96 @@ type="text/css" /> - + +
+ Home + Courses + Contact + About +
+
+
+

fikircamp Bootcamp

+
+
+ +

+
+
+

Batch 104

+

students + Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Totam eius perferendis odit molestias nostrum atque dolores. + Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil! + Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Totam eius perferendis odit molestias nostrum atque dolores. + Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil!

+

orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. + Totam eius perferendis odit molestias nostrum atque dolores. + Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil! + Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Totam eius perferendis odit molestias nostrum atque dolores. + Laborum sint, eos atque cum dolorem aperiam. Totam eius perferendis odit molestias nostrum atque dolores. + Laborum sint, eos atque cum dolorem aperiam. +

+
+
+ +
+

list of all the courses

+
+
+
+
+ +

HTML

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+ + +
+
+
+
+ +

CSS

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+ + +
+
+
+
+ +

Java Script

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+ + +
+
+
+
+ +

React

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+ + +
+
+


+
+ +
+
+
@Copyright 2022
+ + + + + +
+