First Website html/css Try - How to Check how looks html/css Code?


#1

Hi, i am trying some code based on html and css to do a website.

How/where can i see how it looks like? i tried CSSdesk, but i am not sure it shows everything.

Thank you for your help.

**Here is  the HTML**

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>

<!-- start header parallax -->
  <section class="parallax-1">
    <div class="parallax-1-inner">
        <h2>pipilu</h2> 
        <a class="btn" href="#">button</a>     	   	
    </div>  	
  </section>

<!-- End header parallax -->


<!-- banner 1 -->
  <section class="banner-1">
    <div class="banner-1-inner"> 
      <p>QUOTE</p>	
    </div>  	
  </section>
<!-- End banner 1 -->


<!-- start parallax -->
<!-- parallax 1 -->
  <section class="parallax-2">
    <div class="parallax-2-inner"> 
    <h1>ABC</h1>
      <section class="a">
        <h3>a</h3>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>      	
      </section> 	
    </div>  	
  </section>

  <section class="b">
        <h3>b</h3>
        <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>      	
      </section> 	
    </div>  	
  </section>

  <section class="c">
        <h3>c</h3>
        <p>cccccccccccccccccccccccccccccccccccccccccc</p>      	
      </section> 	
    </div>  	
  </section>
<!-- End parallax 1 -->

<!-- banner 2 -->
  <section class="banner-2">
    <div class="banner-2-inner">
      <h1>about</h1> 
      <p>aboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutaboutabout</p>	
    </div>  	
  </section>
  <section class="lastpost-banner-2">
  	<img src="#">>
  </section>
<!-- End banner 2 -->

<!-- start contact form -->
<section> 
  <div class="contact">
    <div class="container">
      <h2>contact</h2>
      <form method="post" action="#">

      <label><span>your name</span>
      <input type="text" name="name"></label>

      <label><span>your email</span>
      <input type="email" name="_replyto"></label>

      <label><span>objet</span>
      <textarea name="message"></textarea></label>

      <input type="submit" value="send">
    </form>
    </div>
  </div>	
</section>
<!-- End contact form -->
	
</body>
</html>. 

**Here is the css**

@import url(https://fonts.google.com/specimen/Antic?selection.family=Antic);

html, body {
  margin:  0;
  padding: 0;
  height: 100%;
  width: 100%;  
}

.parallax-1 {
	height: 100%;
	width: 100%;
	margin: auto;
	background: url(https://photos.google.com/album/AF1QipNtzY_JxYbjmFIb6l1qWou7jWnwK80XeJV88oLh/photo/AF1QipPj9MM8BBoFxgv6kGxxvBmL6VfmBPvPNgOqoC5f?key=CMSA6rvY2_KaZw);
    display: table;
    top: 0;
    background-size: cover;
}

.parallax-1-inner h2 {
    font-family: 'Antic', sans-serif;
    color: #F9F3F4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

.btn {
	border-radius: 9px;
	font-family: 'Antic', sans-serif;
	color: #036A81;
	font-size: 135%;
	padding: 10px 20px;
	border: solid #036A81 3px;
	text-transform: uppercase;
	text-decoration: none;
}

.btn:hover {
	color: #fff;
	border: solid #fff 3px;
}

.banner-1 {
	height: 40%;
	width: 100%;
	color: #F0F0F0;
}

.banner-1-inner p {
	height: 100%;
	width: 100%;
	margin: auto;
    text-align: center center;
    font-family: 'Antic', sans-serif;
    color: #B5B5B5;
    text-shadow: 0px 0px 50px #000;
}

.parallax-2 {
	height: 100%;
	width: 100%;
	margin: auto;
	background: url(https://photos.google.com/album/AF1QipNtzY_JxYbjmFIb6l1qWou7jWnwK80XeJV88oLh/photo/AF1QipMXMVbCZnK4BZpKnv6rudf4KVWpZDEpnAT3soqJ?key=CMSA6rvY2_KaZw);
    display: table;
    background-size: cover;
}

.parallax-2-inner h1 {
	text-align: center top;
    font-family: 'Antic', sans-serif;
    color: #B5B5B5;
    text-shadow: 0px 0px 50px #000;
}

.a .b .c {
	width: 28%;
	float: left;
	margin: 2% 0 3% 4%;
	text-align: center;
	font-family: 'Antic', sans-serif;
    color: #B5B5B5;
    text-shadow: 0px 0px 50px #000;
}

.banner-2-inner {
	width: 60%;
	float: right;
	margin: 4% 0 4% 4%;
	text-align: center;
}

.lastpost-banner-2 {
	width: 26%;
	float: left;
	margin: 4% 4%;
}

.lastpost-banner-2 img {
	opacity: 0.8;
}


.contact input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;  
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
    resize: vertical 
}

 .contact input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

#2

If you are just wanting to see a live result of your code try .

Or you can download a text editor like brackets.


#3

Hi, that was a quick answer. Thks! i will try.

I was told that creating .htm file and open it would be good too.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.