-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ayshe-ceyhun-class-4-js-basics (#32)
* cleated my first file * build-this-website assignment to class 1 2 3 4 * The files name is edited * deleted file
- Loading branch information
1 parent
4b24953
commit 9d710a4
Showing
23 changed files
with
1,362 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Hi I'm {Insert your name here}, welcome to my page!</title> | ||
|
|
||
| <Link href="./style.css" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <!-- While working on this, do remember to use the proper semantics 👍--> | ||
| <body> | ||
|
|
||
| <div> | ||
| <!-- Create a big text that contains Your name --> | ||
| <h1>Ayshe Saflo</h1> | ||
| <!-- Create list 📃 that will be used for navigations that contains the following: | ||
| Home, About, FAQ, Login | ||
| --> | ||
| <ul> | ||
| <li><a href="#"> Home</a></li> | ||
| <li><a href="#">About</a></li> | ||
| <li><a href="#">FAQ</a></li> | ||
| <li><a href="#">Login</a></li> | ||
| </ul> | ||
| </div> | ||
| <!-- Add a picture here of something you like and add description to it --> | ||
| <img class="flower" src="https://www.proplants.com/blog/wp-content/uploads/2016/01/350thumb-flower-colors-white.jpg" alt="national"> | ||
| <!-- Talk a little bit about yourself here, talk about | ||
| where you're from, date of birth (needs to be search engine friendly) , where you studied before, | ||
| use bold when you mention things you like ♥ and italic when mentioning something you dislike 💔 --> | ||
|
|
||
| <p>I'm Ayshe from Syria, I'm 23 years old. Now I'm living with my family in Gaziantep-Turkey, I studied <b>Optics and Acoustics Engineering</b> in Gaziantep University and I graduated in 2020 from the university. Now I am learng Web development in Re:Coded Bootcamp.</p> | ||
|
|
||
| <!-- Create a table here that contains the following data about your friends : | ||
| Columns: Name, address, school, phone number, date of birth | ||
| Add data that corresponds to the columns mentioned above, Doesn't have to be true 😁 | ||
| --> | ||
| <h3> My Friend :) </h3> | ||
| <table> | ||
| <tr> | ||
| <th> Name </th> | ||
| <th> address </th> | ||
| <th> school </th> | ||
| <th> phone number </th> | ||
| <th> date of birth </th> | ||
| </tr> | ||
|
|
||
| <tr> | ||
| <td> Sara </td> | ||
| <td> Syria - Aleppo </td> | ||
| <td> Allepo University </td> | ||
| <td> 00000000 </td> | ||
| <td> 01-01-1996 </td> | ||
| </tr> | ||
|
|
||
| <tr> | ||
| <td> Tasnim </td> | ||
| <td> Turkey -Istanbul </td> | ||
| <td> Gaziantep University </td> | ||
| <td> 0000000 </td> | ||
| <td> 01-01-1996 </td> | ||
| </tr> | ||
|
|
||
| <tr> | ||
| <td> Sevda </td> | ||
| <td> Turkey Gaziantep </td> | ||
| <td> Gaziantep University </td> | ||
| <td> 000000 </td> | ||
| <td> 01-01-1995 </td> | ||
| </tr> | ||
|
|
||
| </table> | ||
|
|
||
| <!-- Take your favorite video from youtube and make it playable from this page --> | ||
|
|
||
| <h3>Here my favorite song from youtube</h3> | ||
|
|
||
|
|
||
| <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/2vEEa1IKV1M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
|
|
||
| <!-- Add a form to contact you that has Name, Email, and Message --> | ||
|
|
||
| <h3>contact</h3> | ||
| <div class="name"> | ||
| <label for="name">Enter your name:</label> | ||
| <input type="text" name="owner-name" placeholder="Full Name"> | ||
| </div> | ||
| <div> | ||
| <label for="email">Enter your email:</label> | ||
| <input type="email" id="email" name="email" placeholder="e-mail"> | ||
| </div> | ||
| <div> | ||
| <p>Please write the topic you want to discuss with us</p> | ||
| <textarea name="message"></textarea> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <!-- Add a footer with links to social media, links don't have to go anywhere --> | ||
| <footer> | ||
| <br> | ||
| <a href="https://www.linkedin.com/in/ayşe-saflo-523aa9162"> LinkedIn</a> | ||
| </footer> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <title>repl.it</title> | ||
| <link href="style.css" rel="stylesheet" type="text/css"/> | ||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
|
|
||
|
|
||
|
|
||
| <div class="row" id="top-of-header"> | ||
|
|
||
|
|
||
| <a href="#" class="col-4 col-m-4">Start Bootstrap</a> | ||
|
|
||
|
|
||
| <nav class="col-4 col-m-4" > | ||
| <ul > | ||
| <li><a href="#">About</a></li> | ||
| <li><a href="#">Services</a></li> | ||
| <li><a href="#">Portfolio</a></li> | ||
| <li><a href="#">Contact</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
| <h1> | ||
| YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES | ||
| </h1> | ||
| <hr> | ||
| <p style="margin-bottom: 2%;"> | ||
| Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached! | ||
| </p> | ||
| <a href="#" id="findoutMore">FIND OUT MORE</a> | ||
| </header> | ||
| <!-- ------Header------ --> | ||
| <!-- ------First Section------ --> | ||
|
|
||
|
|
||
|
|
||
| <!-- ------Second Section------ --> | ||
| <div class="row" id="secondSection"> | ||
| <div class="col-2 col-m-1"></div> | ||
| <div class="col-8 col-m-10 insideSecondSection"> | ||
| <h1 class>We've got what you need!</h1> | ||
| <hr> | ||
| <p>Start Bootstrap has everything you need to get your new website up and running in no time! | ||
| Choose one of our open source, free to download, and easy to use themes! No strings attached! | ||
| </p> | ||
| <br> | ||
| <a href="#" class="start-button">GET STARTED!</a> | ||
| </div> | ||
| <div class="col-2 col-m-1"></div> | ||
| </div> | ||
| <!-- ------Second Section------ --> | ||
|
|
||
|
|
||
|
|
||
| <!-- ------Third Section------ --> | ||
| <div class="row" id="thirdSection"> | ||
| <div class="row"> | ||
| <div class="col-12 col-m-12"> | ||
| <h1>At Your Service</h1> | ||
| <hr> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-12 col-m-12"> | ||
| <div id="icons"> | ||
| <div class="col-3 col-m-3 insideIcons"> | ||
| <img src="./img/dia.png" alt="Diamond"> | ||
| <br> | ||
| <h2> | ||
| Sturdy Themes | ||
| </h2> | ||
| <p> | ||
| Our themes are updated regularly to keep them bug free! | ||
| </p> | ||
| </div> | ||
| <div class="col-3 col-m-3 insideIcons"> | ||
| <img src="./img/code.png" alt="Computer"> | ||
| <br> | ||
| <h2> | ||
| Up to Date | ||
| </h2> | ||
| <p> | ||
| All dependencies are kept current to keep things fresh. | ||
| </p> | ||
| </div> | ||
| <div class="col-3 col-m-3 insideIcons"> | ||
| <img src="./img/earth.png" alt="Earth"> | ||
| <br> | ||
| <h2> | ||
| Ready to Publish | ||
| </h2> | ||
| <p> | ||
| You can use this design as is, or you can make changes! | ||
| </p> | ||
| </div> | ||
| <div class="col-3 col-m-3 insideIcons" id="heart"> | ||
| <img src="./img/heartv2.svg" alt="Heart" style="width: 45px;"> | ||
| <br> | ||
| <h2> | ||
| Made with Love | ||
| </h2> | ||
| <p> | ||
| Is it really open source if it's not made with love? | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- ------Third Section------ --> | ||
|
|
||
|
|
||
| <!-- ------Forth Section------ --> | ||
| <div class="row" id="forthSection"> | ||
|
|
||
| <div class="row imgRow "> | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office1.png" alt="office1"> | ||
| </div> | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office2.png" alt="office2"> | ||
| </div> | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office3.png" alt="office3"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row imgRow" > | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office4.png" alt="office4"> | ||
| </div> | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office5.png" alt="office5"> | ||
| </div> | ||
| <div class="col-4" "col-m-4"> | ||
| <img src="./img/office6.png" alt="office6"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- ------Forth Section------ --> | ||
|
|
||
|
|
||
|
|
||
| <!-- ------Fifth Section------ --> | ||
| <section id="fifthSection"> | ||
|
|
||
| <h2>Free Download at Start Bootstrap!</h2> | ||
| <a href="#" class="down-button">DOWNLOAD NOW!</a> | ||
|
|
||
| </section> | ||
| <!-- ------Fifth Section------ --> | ||
|
|
||
|
|
||
| <!-- ------Sixth Section------ --> | ||
| <section id="sixthSection"> | ||
| <h2> Let's Get In Touch! </h2> <hr> | ||
| <p> | ||
| Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible! | ||
| </p> | ||
|
|
||
| <div id="contact-info"> | ||
|
|
||
| <div class= "col-2 col-m-2"> | ||
| <img src="./img/phone.svg" alt="Phone Icon"> | ||
| <span class="phone">+1(202)555-0149</span> | ||
| </div> | ||
|
|
||
| <div class= "col-2 col-m-2"> | ||
| <img src="./img/mail.svg" alt="Mail Icon"> | ||
| <span class="mail"> [email protected]</span> | ||
| </div> | ||
|
|
||
| </div> | ||
| </section> | ||
| <!-- ------Sixth Section------ --> | ||
|
|
||
|
|
||
|
|
||
| <!-- ------Footer------ --> | ||
| <footer> | ||
| <p> | ||
| Copyright © 2019 - Start Bootstrap | ||
| </p> | ||
| </footer> | ||
| <!-- ------Footer------ --> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Empty file.
Oops, something went wrong.